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 | } |