小人html代码,动的小人.html

动的小人

body {background:black; text-align: center;}

#c1 {background:white;}

window.οnlοad=function(){

let oC=document.getElementById('c1');

let gd=oC.getContext('2d');

let oImg=new Image();

oImg.src='sprit1.jpg';

oImg.οnlοad=function(){

let frame=0;

let dir='d';

let x=100,y=100;

const speed=15;

document.οnkeydοwn=function(ev){

let keys={37:'l',38:'u',39:'r',40:'d'};

dir=keys[ev.keyCode]||dir;

};

setInterval(function(){

gd.clearRect(0,0,oC.width,oC.height);

let rows={'d':0,'l':1,'r':2,'u':3};

gd.drawImage(

oImg,

84+27*frame,28*rows[dir],25,28,

x,y,25,28

);

switch(dir){

case 'l':

x-=speed;

break;

case 'r':

x+=speed;

break;

case 'u':

y-=speed;

break;

case 'd':

y+=speed;

break;

}

frame++;

if(frame==3){

frame=0;

}

},100);

}

}

您的浏览器并不支持canvas，请下载最新版浏览器

一键复制

编辑

Web IDE

原始数据

按行查看

历史