HTML5实现一个能够移动的小坦克示例代码
程序员文章站
2023-12-09 15:21:15
HTML5一词想必大家早已如雷贯耳，其功能很强大，本文为大家介绍下通过其实现一个能够移动的小坦克，具体如下，喜欢HTML的朋友可以参考下... 13-09-02...
复制代码
代码如下:<!doctype html>
<html>
<head>
</head>
<body onkeydown="changedirect()">
<canvas id="tankmap" width="500px" height="300px" style="border:1px solid #d3d3d3;">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var canvas1=document.getelementbyid('tankmap');
var ctx=canvas1.getcontext('2d');
var myx=30;
var myy=30;
function drawball(){
ctx.shadowblur=30,ctx.shadowcolor="#008c46";
ctx.fillstyle='#008c46';
ctx.fillrect(myx,myy,5,30);
ctx.fillrect(myx+17,myy,5,30);
ctx.fillrect(myx+6,myy+5,10,20);
ctx.beginpath();
ctx.fillstyle='#004020';
ctx.arc(myx+11,myy+15,5,0,math.pi*1.5);
ctx.closepath();
ctx.fill();
ctx.strokstyle="#008c46";
ctx.moveto(myx+11,myy+15);
ctx.lineto(myx+11,myy-5);
ctx.stroke();
}
drawball();
function changedirect(){
var code=event.keycode;
switch(code){
case 87:
myy--;
break;
case 68:
myx++;
break;
case 83:
myy++;
break;
case 65:
myx--;
break;
}
ctx.clearrect(0,0,500,300);
//重新绘制
drawball();
}
</script>
</body>
</html>