键盘方向键控制人物上下左右行走
演示地址
MYCode
<html>
<head>
<meta charset=utf-8>
<title>html5人物行走</title>
<script>
var canvas;
var ctx;
//role
var role_x=50;
var role_y=50;
var role_width=32;
var role_height=48;
//每个方向有4个状态
role_direction=0;//value[0,3];
role_status=0;//value[0,3];
//box
var box_x=0;
var box_y=0;
var box_width=400;
var box_height=400;
//
var bound_left=0;
var bound_right=box_x+box_width-role_width;
var bound_top=0;
var bound_bottom=box_y+box_height-role_height;
var unit=10;
function draw_role()
{
ctx.clearRect(box_x,box_y,box_width,box_height);
ctx.lineWidth="5";
ctx.strokeStyle="rgb(0,0,0)";
ctx.beginPath();
ctx.strokeRect(box_x,box_y,box_width,box_height);
/*var img=new Image();
img.src="role.png";
ctx.drawImage(img,role_direction*role_height,role_status*role_width,role_width,role_height);*/
var img=new Image();
img.src="role.png";
img.onload=function()
{
//ctx.drawImage(img,0,0,role_width,role_height);
//alert(role_x+","+role_y);
ctx.drawImage(img,role_status*role_width,role_direction*role_height,role_width,role_height,role_x,role_y,role_width,role_height);
};
}
function move_role(event)
{
//鼠标点击移动
/*var mx;
var my;
if(ev.layerX||ev.layerX==0)
{
mx=ev.layerX;
my=ev.layerY;
}
else if(ev.offsetX||ev.offsetX==0)
{
mx=ev.offsetX;
my=ev.offsetY;
}*/
var keyCode;
if(event==null)
{
keyCode=window.event.keyCode;
window.event.preventDefault();
}
else
{
keyCode=event.keyCode;
event.preventDefault();
}
var cur_direction;
switch(keyCode)
{
case 37://left
cur_direction=1;
role_x=role_x-unit;
if(role_x<bound_left)
role_x=bound_left;
break;
case 38://up
cur_direction=3;
role_y=role_y-unit;
if(role_y<bound_top)
role_y=bound_top;
break;
case 39://right
cur_direction=2;
role_x=role_x+unit;
if(role_x>bound_right)
role_x=bound_right;
break;
case 40://down
cur_direction=0;
role_y=role_y+unit;
if(role_y>bound_bottom)
role_y=bound_bottom;
break;
default:
break;
}
if(role_direction==cur_direction)
{
role_status=(role_status+1)%4;
}
else
{
role_direction=cur_direction;
role_status=0;
}
draw_role();
}
/*function animate(now)
{
draw_role();
requestAnimationFrame(animate);
}*/
function init()
{
canvas=document.getElementById("canvas");
ctx=canvas.getContext('2d');
window.addEventListener('keydown',move_role,false);
ctx.clearRect(box_x,box_y,box_width,box_height);
ctx.save();
ctx.lineWidth="5";
ctx.strokeStyle="rgb(0,0,0)";
ctx.beginPath();
ctx.strokeRect(box_x,box_y,box_width,box_height);
draw_role();
ctx.restore();
//setInterval(draw_role,1000);
//setInterval(function (e){animate();},1000/60);
//requestAnimationFrame(animate);
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="500" height="500"/>
</body>
</html>
人物行走图片
不足之处
如果连续按住方向键，人物行走的动画将会出现闪烁。这个问题没有解决。