Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- window.onload = function () {
- var stopped = false;
- var rotDeg = 0;
- var rot = 0;
- var dir = 1;
- var imgW = 32;
- var imgH = 32;
- var frame = 0;
- var maxFrame = 3;
- var frameDir = 1;
- var fps = 5;
- //Game Canvas. 512x512
- var gc = document.getElementById("gameCanvas");
- var gctx = gc.getContext("2d");
- //This is the key ingredient for hard-pixel scaling without any interpolation
- gctx.imageSmoothingEnabled = false;
- gctx.webkitImageSmoothingEnabled = false;
- gctx.mozImageSmoothingEnabled = false;
- //The non-scaled 32x32 canvas
- var c = document.getElementById("smallCanvas");
- var ctx = c.getContext("2d");
- //Load a spritesheet
- var imageObj = new Image();
- imageObj.onload = function() {
- gameIntervalID = setInterval (gameLoop, 1000/ fps);
- };
- imageObj.src = 'LowRezDerpSheet.png';
- function gameLoop () {
- updateImage ();
- if (stopped) {
- clearInterval (gameIntervalID);
- }
- }
- function updateImage () {
- //Clear the canvases.
- c.width = c.width;
- gctx.clearRect (0, 0, 512, 512);
- //center the drawing on 1/2 sprite width
- ctx.translate (16, 16);
- //Draw a frame of the animation
- ctx.drawImage(imageObj,frame*imgW, 0, 32, 32,-16, -16, 32, 32);
- gctx.drawImage (c, 0, 0, 512, 512);
- //Tick through frames, then go in reverse.
- frame += frameDir;
- if (frame >= maxFrame || frame <= 0) {
- frameDir*= -1;
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement