SHARE
TWEET

Untitled

a guest May 8th, 2014 290 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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.         var gctx = gc.getContext("2d");
  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.        
  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.                 if (stopped) {
  44.                         clearInterval (gameIntervalID);
  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. }
RAW Paste Data
Top