<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Walk</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
background-color:royalblue;
overflow:hidden;
}
#div1{
position:absolute;
top:0;
right:0;
}
</style>
</head>
<body>
<canvas id="can1"></canvas>
<div id="div1"></div>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var div1=document.getElementById("div1");
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var img=new Image();
var x1=0;
var x2=0;
var y1=0;
var y2=Math.round(wh/2)-70;
var step=10;
can1.setAttribute("width",ww);
can1.setAttribute("height",wh);
img.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPtF102cho3tEC4eoPtdA0Cj7AfssN6TWJAMMX77uAZG_FPv9Hi7HwDKHQQ0R3mTpKH5eoRUKnLFXu3fumfr27RtWIIkqapCbaHEpue7RMsbPB4OReNU8ZhslBGAnxvkF-Yz9Iq4q-A/s1600/sprite.png";
img.addEventListener("load",function(){
ctx.drawImage(img,0,0,90,140,x2,y2,90,140);
document.addEventListener('keydown', function(event){
if(event.keyCode==39){
y1=0;
if(x1>630){x1=0};
if(x2>ww+90){x2=-90};
ctx.clearRect(0,0,ww,wh);
ctx.drawImage(img,x1,y1,90,140,x2,y2,90,140);
x1=x1+90;
x2=x2+step;
};
if(event.keyCode==37){
y1=140;
if(x1<0){x1=630};
if(x2<-90){x2=ww+90};
ctx.clearRect(0,0,ww,wh);
ctx.drawImage(img,x1,y1,90,140,x2,y2,90,140);
x1=x1-90;
x2=x2-step;
};
});
},false);
function display(){
div1.innerHTML=x1+" "+y1+" "+x2+" "+y2+" "+step;
}
setInterval(display,100)
</script>
</body>
</html>
