canvas animate

another experiment (with old concept) old learning: https://11d70a70270ac21ab816ad71b1678bfa5a2792b6.googledrive.com/host/0B5QQvAjRq64hci00TU81VzQ3NXM/index.html

by Anov Siradj

HTML

<br/><div><br/></div>

<canvas id="cnvs" width="500" height="300"></canvas>
<img src="//11d70a70270ac21ab816ad71b1678bfa5a2792b6.googledrive.com/host/0B5QQvAjRq64hci00TU81VzQ3NXM/lol.png" id="charsprite" />

CSS

#cnvs {
  border: 1px solid #222;
} #charsprite {
  display:none;
}

JavaScript

'use strict';
function l(m) { console.log(m); }
var cnvs = document.getElementById('cnvs'),
	ctx = cnvs.getContext('2d'),
	charsprite = document.getElementById('charsprite');

var FPS = 1000/4;
var frame_index = 0;
var downx = [0,39,75,116];
var downy = [0,-2,0,2];

function walkdown() {
  ctx.clearRect(0,0,78,124);
  if(frame_index > 3) {
    frame_index = 0;
  }
  // console.log(walkdown_index);
	ctx.drawImage(charsprite,
              downx[frame_index],
              downy[frame_index],
              39,62,
              0,0,
              78,124);
  frame_index++;
}

document.onkeydown = function(e) {
  var k = e.keyCode;
  if(k === 40) {
    window.requestAnimationFrame(function() {
      walkdown();
    });
  }
}
/*
window.onload = function() {
  walkdown();
}
*/
/*
y: 156/4=39 | 39*2=78
x: 248/4=62 | 62*2=124
*/