html5坦克大战中坦克移动代码。

最新推荐文章于 2022-07-10 11:37:37 发布

little_newBee

最新推荐文章于 2022-07-10 11:37:37 发布

阅读量2.5k

点赞数

分类专栏：扯淡系列文章标签： html5

本文链接：https://blog.csdn.net/little_newBee/article/details/50575475

版权

扯淡系列专栏收录该内容

11 篇文章 0 订阅

订阅专栏

看了韩顺平老师的html5公开课，照着写的，先写了坦克4个方向移动的代码。代码是自己写的，没有抄袭

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body οnkeydοwn="move(event)">
<canvas id="tankMap" width="400px" height="300px" style="background-color:black">
</canvas>
<script type="text/javascript">
function hero(x,y,direct)
{
this.x=x;
this.y=y;
this.speed=2;
this.direct=direct;
this.moveUp=function()
{
this.y-=this.speed;
}
this.moveDown=function()
{
this.y+=this.speed;
}
this.moveRight=function()
{
this.x+=this.speed;
}
this.moveLeft=function()
{
this.x-=this.speed;
}
}
var canvas = document.getElementById("tankMap");
var cxt = canvas.getContext("2d");
//规定：0代表上，1代表右，2代表下，3代表左。
var hero1 = new hero(40,40,0);
//绘制坦克封装成函数。
//我的坦克hero
//var heroX = 30;
//var heroY = 30;
//参数里面传入的是tank对象
function drawTank(tank)
{
//设置颜色

switch(tank.direct)
{
case 0:
case 2:
cxt.fillStyle="#DED284";
//位置先定死，然后以后再改进
//左边矩形
cxt.fillRect(tank.x,tank.y,5,30);
//右边矩形
cxt.fillRect(tank.x+5+10,tank.y,5,30);
//中间矩形
cxt.fillRect(tank.x+6,tank.y+5,8,20);
//盖子
cxt.fillStyle="#FFD972";
cxt.arc(tank.x+10,tank.y+15,4,0,Math.PI*2,true);
cxt.fill();
//炮筒
cxt.strokeStyle="#FFD972"
cxt.lineWidth=2.0;
cxt.beginPath();
cxt.moveTo(tank.x+10,tank.y+15);
if(tank.direct==0)
{
cxt.lineTo(tank.x+10,tank.y);
}
else if(tank.direct==2)
{
cxt.lineTo(tank.x+10,tank.y+30);
}
cxt.closePath();
cxt.stroke();
break;
case 1:
case 3:
cxt.fillStyle="#DED284";
//上面矩形
cxt.fillRect(tank.x,tank.y,30,5);
//下面矩形
cxt.fillRect(tank.x,tank.y+5+10,30,5);
//中间矩形
cxt.fillRect(tank.x+5,tank.y+6,20,8);
//盖子
cxt.fillStyle="#FFD972";
cxt.arc(tank.x+15,tank.y+10,4,0,Math.PI*2,true);
cxt.fill();
//炮筒
cxt.strokeStyle="#FFD972"
cxt.lineWidth=2.0;
cxt.beginPath();
cxt.moveTo(tank.x+15,tank.y+10);
if(tank.direct==1)
{
cxt.lineTo(tank.x+30,tank.y+10);
}
else if(tank.direct==3)
{
cxt.lineTo(tank.x,tank.y+10);
}
cxt.closePath();
cxt.stroke();
break;
}
}
drawTank(hero1);
function move(event)
{
cxt.clearRect(0,0,400,300);
switch(event.keyCode)
{
case 87:hero1.moveUp();hero1.direct=0; break;
case 65:hero1.moveLeft();hero1.direct=3; break;
case 83:hero1.moveDown();hero1.direct=2; break;
case 68:hero1.moveRight();hero1.direct=1; break;
}
drawTank(hero1);
}
</script>

</body>
</html>

little_newBee

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5坦克大战中坦克移动代码。

看了韩顺平老师的html5公开课，照着写的，先写了坦克4个方向移动的代码。代码是自己写的，没有抄袭Insert title herefunction hero(x,y,direct){this.x=x;this.y=y;this.speed=2;this.direct=direct;this.moveUp=function
复制链接

扫一扫

专栏目录