View difference between Paste ID: qqzPD3ku and hiRxLyr1
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
}