soccer.js - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
soccer.js (1340B)
---
1 (function() {
2 var fps = 120;
3 var now;
4 var then = performance.now();
5 var interval = 1000 / fps;
6 var delta;
7
8 var canvas = document.getElementById("canvas");
9 if (!canvas)
10 return;
11 var ctx = canvas.getContext("2d");
12 if (!ctx)
13 return;
14
15 var x = 0;
16 var y = 0;
17 var stepx = 3; // speed
18 var stepy = 3; // speed
19 var canvasw = canvas.width;
20 var canvash = canvas.height;
21 var w = 32, h = 32;
22
23 var anim_img = new Image(w, h);
24 anim_img.src = "fun/soccer/ball.svg";
25 anim_img.width = w;
26 anim_img.height = h;
27
28 var degrees = 0.0; // current ball rotation / spin.
29
30 function update() {
31 if (x < 0 || x > canvasw - w)
32 stepx = -stepx; // change direction
33 if (y < 0 || y > canvash - h)
34 stepy = -stepy; // change direction
35
36 x += stepx;
37 y += stepy;
38
39 degrees += 3; // spin speed
40 if (degrees > 360.0)
41 degrees = 0.0;
42 }
43
44 function dodraw() {
45 ctx.clearRect(0, 0, canvasw, canvash);
46
47 ctx.save();
48
49 // rotate / spin ball.
50 ctx.translate(x + w / 2, y + h / 2);
51 ctx.rotate(degrees * Math.PI / 180.0);
52 ctx.translate(-x - w / 2, -y - h / 2);
53 ctx.drawImage(anim_img, x, y, w, h);
54
55 ctx.restore();
56 }
57
58 function draw() {
59 requestAnimationFrame(draw);
60
61 now = performance.now();
62 delta = now - then;
63
64 if (delta > interval) {
65 update();
66 dodraw();
67 then = now - (delta % interval);
68 }
69 }
70
71 draw();
72 })();