SHOW:
|
|
- or go back to the newest paste.
1 | window.onload = function () { | |
2 | ||
3 | var stopped = false; | |
4 | var rotDeg = 0; | |
5 | var rot = 0; | |
6 | var dir = 1; | |
7 | ||
8 | var imgW = 32; | |
9 | var imgH = 32; | |
10 | ||
11 | var frame = 0; | |
12 | var maxFrame = 3; | |
13 | var frameDir = 1; | |
14 | ||
15 | var fps = 5; | |
16 | ||
17 | //Game Canvas. 512x512 | |
18 | var gc = document.getElementById("gameCanvas"); | |
19 | - | console.log (gc); |
19 | + | |
20 | ||
21 | //This is the key ingredient for hard-pixel scaling without any interpolation | |
22 | gctx.imageSmoothingEnabled = false; | |
23 | gctx.webkitImageSmoothingEnabled = false; | |
24 | gctx.mozImageSmoothingEnabled = false; | |
25 | ||
26 | //The non-scaled 32x32 canvas | |
27 | var c = document.getElementById("smallCanvas"); | |
28 | var ctx = c.getContext("2d"); | |
29 | - | console.log (c); |
29 | + | |
30 | ||
31 | //Load a spritesheet | |
32 | var imageObj = new Image(); | |
33 | ||
34 | imageObj.onload = function() { | |
35 | gameIntervalID = setInterval (gameLoop, 1000/ fps); | |
36 | }; | |
37 | imageObj.src = 'LowRezDerpSheet.png'; | |
38 | ||
39 | ||
40 | function gameLoop () { | |
41 | updateImage (); | |
42 | ||
43 | - | console.log ("gameloop"); |
43 | + | |
44 | - | |
44 | + | |
45 | } | |
46 | } | |
47 | ||
48 | function updateImage () { | |
49 | ||
50 | //Clear the canvases. | |
51 | c.width = c.width; | |
52 | gctx.clearRect (0, 0, 512, 512); | |
53 | ||
54 | //center the drawing on 1/2 sprite width | |
55 | ctx.translate (16, 16); | |
56 | ||
57 | //Draw a frame of the animation | |
58 | ctx.drawImage(imageObj,frame*imgW, 0, 32, 32,-16, -16, 32, 32); | |
59 | gctx.drawImage (c, 0, 0, 512, 512); | |
60 | ||
61 | //Tick through frames, then go in reverse. | |
62 | frame += frameDir; | |
63 | if (frame >= maxFrame || frame <= 0) { | |
64 | frameDir*= -1; | |
65 | } | |
66 | } | |
67 | } |