Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
63 lines (51 sloc) 1.32 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas class="myCanvas">
<p>Add suitable fallback here.</p>
</canvas>
<script>
var canvas = document.querySelector('.myCanvas');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);
ctx.translate(width/2,height/2);
var image = new Image();
image.src = 'walk-right.png';
image.onload = draw;
var sprite = 0;
var posX = 0;
function draw() {
ctx.fillRect(-(width/2),-(height/2),width,height);
ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);
if(posX % 13 === 0) {
if(sprite === 5) {
sprite = 0;
} else {
sprite++;
}
}
if(posX > width/2) {
newStartPos = -((width/2) + 102);
posX = Math.ceil(newStartPos / 13) * 13;
console.log(posX);
} else {
posX += 2;
}
window.requestAnimationFrame(draw);
};
</script>
</body>
</html>
You can’t perform that action at this time.