坦克大战一完成坦克上下左右移动的功能
DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
head>
<body onkeydown="getCommand()">
<h1>html5-经典的坦克大战h1>
<canvas id="tankeMap" width="500px" height="500px" style="background-color:black">
canvas>
<script type="text/javascript">
//定义一个hero类
//x、y表示初始坐标，direct表示方向
function Hero(x,y,direct){
this.x=x;
this.y=y;
this.direct=direct;
this.speed=5;
this.moveUp=function(){
this.y-=this.speed;
this.direct=0;
}
this.moveDown=function(){
this.y+=this.speed;
this.direct=2;
}
this.moveRight=function(){
this.x+=this.speed;
this.direct=1;
}
this.moveLeft=function(){
this.x-=this.speed;
this.direct=3;
}
}
//准备工作
//得到画布
var canvas1=document.getElementById("tankeMap");
//得到上下文引用对象，你可以理解成画笔
var cxt=canvas1.getContext("2d");
//定义一个坦克
//数字0表示向上 数字1表示右 数字2表示下 数字3表示左
var hero=new Hero(130,30,0);
//把创建坦克的方法封装为一个对象
//该函数可以画自己的坦克，也可以画敌人的坦克
//tanke就是一个对象
function drawTanke(tanke){
//坦克的方向
switch(tanke.direct){
case 0:
case 2:
{//上
//画出自己的坦克设置颜色
cxt.fillStyle="#00A6BD";
cxt.fillRect(tanke.x,tanke.y,5,30);//左齿轮
cxt.fillRect(tanke.x+15,tanke.y,5,30);//右齿轮
cxt.fillRect(tanke.x+6,tanke.y+5,8,20);//中间的坦克体
//画中间的圆形的炮筒体
cxt.fillStyle="#00A6BD";
cxt.beginPath();
cxt.arc(tanke.x+10,tanke.y+15,4.5,0,360,false);
cxt.closePath();
cxt.fill();
//画出炮筒
cxt.strokeStyle="#00A6BD";
//cxt.fillStyle="#FFD972";
cxt.lineWidth=1.9;
cxt.beginPath();
cxt.moveTo(tanke.x+10,tanke.y+15);//设置点的位置
if(tanke.direct==0){
cxt.lineTo(tanke.x+10,tanke.y-6);//设置第二个点的位置
}else if(tanke.direct==2){
cxt.lineTo(tanke.x+10,tanke.y+36);//设置第二个点的位置
}
cxt.closePath();
cxt.stroke();
}
break;
case 1:
case 3:
{//右
//画出自己的坦克设置颜色
cxt.fillStyle="#00A6BD";
cxt.fillRect(tanke.x,tanke.y,30,5);//左齿轮
cxt.fillRect(tanke.x,tanke.y+15,30,5);//右齿轮
cxt.fillRect(tanke.x+5,tanke.y+6,20,8);//中间的坦克体
//画中间的圆形的炮筒体
cxt.fillStyle="#00A6BD";
cxt.beginPath();
cxt.arc(tanke.x+15,tanke.y+10,4.5,0,360,false);
cxt.closePath();
cxt.fill();
//画出炮筒
cxt.strokeStyle="#00A6BD";
//cxt.fillStyle="#FFD972";
cxt.lineWidth=1.9;
cxt.beginPath();
cxt.moveTo(tanke.x+15,tanke.y+10);//设置点的位置
if(tanke.direct==1){//右
cxt.lineTo(tanke.x+36,tanke.y+10);//设置第二个点的位置
}else if(tanke.direct==3){//左
cxt.lineTo(tanke.x-6,tanke.y+10);//设置第二个点的位置
}
cxt.closePath();
cxt.stroke();
}
break;
}
}
drawTanke(hero);
function getCommand(){
var code=event.keyCode;
cxt.clearRect(0,0,500,500);
switch(code){
case 87:
hero.moveUp();
break;
case 68:
hero.moveRight();
break;
case 83:
hero.moveDown();
break;
case 65:
hero.moveLeft();
break;
}
cxt.clearRect(0,0,500,500);
drawTanke(hero);
}
script>
body>
html>
也可以将hero的定义，和画坦克的函数抽取出来放到一个文件里面让HTML界面的逻辑更加清晰，如下
DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
head>
<body onkeydown="getCommand()">
<h1>html5-经典的坦克大战h1>
<canvas id="tankeMap" width="500px" height="500px" style="background-color:black">
canvas>
<script type="text/javascript" src="tankeGame.js">script>
<script type="text/javascript">
//准备工作
//得到画布
var canvas1=document.getElementById("tankeMap");
//得到上下文引用对象，你可以理解成画笔
var cxt=canvas1.getContext("2d");
//定义一个坦克
//数字0表示向上 数字1表示右 数字2表示下 数字3表示左
var hero=new Hero(130,30,0);
drawTanke(hero);
function getCommand(){
var code=event.keyCode;
cxt.clearRect(0,0,500,500);
switch(code){
case 87:
hero.moveUp();
break;
case 68:
hero.moveRight();
break;
case 83:
hero.moveDown();
break;
case 65:
hero.moveLeft();
break;
}
cxt.clearRect(0,0,500,500);
drawTanke(hero);
}
script>
body>
html>