HTML5坦克大战

时间:2022-12-29 23:52:23

在JavaScript中,不要在变量为定义之前去使用,这样很难察觉并且无法运行。

颜色不对。

当我的坦克移动时,敌人坦克消失。

tankGame3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body onkeydown="getCommand()">
<h6>HTML5坦克大战</h6>
<!--这是坦克大战的战场 -->
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>
<script type="text/javascript" src="tankGame3.js"></script>
<script type="text/javascript">

//定义一个Hero类

//把绘制坦克封装成一个函数,将来可以作为成员函数

//x表示坦克的横坐标,y表示纵坐标,direct方法

//

//得到画布
var canvas1=document.getElementById("tankMap");
//得到绘图上下文(你可以理解是画笔)
var cxt=canvas1.getContext("2d");

var hero=new Hero(140,140,0,heroColor);
//定义敌人的坦克(敌人的坦克有多少?单个定义还是放在数组中。
var enemyTanks=new Array();
//先死后活,定3个,后面我们把敌人坦克的数量做成变量
for(var i=0;i<6;i++){
//创建一个坦克
var enemyTank=new EnemyTank((i+1)*50,0,2,enemyColor);
//把这个坦克放入数组
enemyTanks[i]=enemyTank;
//画出这个坦克
//drawTank(enemyTank);
}

flashTankMap();
//专门写一个函数,用于定时刷新我们的作战区,把要在作战区出现的元素
//(自己坦克,敌人坦克,子弹,草坪,障碍物)

function flashTankMap(){
cxt.clearRect(0,0,400,300);
//我的坦克
drawTank(hero);
//敌人的坦克
for(var i=0;i<3;i++){
drawTank(enemyTanks[i]);
}
}

//这是一个接收用户按键函数
function getCommand(){
var code=event.keyCode;
switch(code){
case 87:
hero.moveUp();

break;
case 68:
hero.moveRight();
break;
case 83:
hero.moveDown();
break;
case 65:
hero.moveLeft();
break;
}

//drawTank(hero);
//要触发这个函数flashTankMap
flashTankMap();

//重新绘制所有的敌人坦克,你可以在这里写代码(思想:每隔一段时间来刷新画布。。
//用一个函数,专门用于定时刷新屏幕。

}

</script>

tankGame.js

//为了编程方便,我们定义两个颜色数组
var heroColor=new Array("#BA9658","#FEF26E");
var enemyColor=new Array("#00A2B5","#00FEFE");
//这是一个坦克类
function Tank(x, y, direct,color){
this.x=x;
this.y=y;
this.speed=1;
this.direct=direct;
this.color=color;
//上移
this.moveUp=function(){
this.y-=this.speed;
this.direct=0;
}
//右移
this.moveRight=function(){
this.x+=this.speed;
this.direct=1;
}
//下移
this.moveDown=function(){
this.y+=this.speed;
this.direct=2;
}
//左移
this.moveLeft=function(){
this.x-=this.speed;
this.direct=3;
}
}

function Hero(x,y,direct,color){
//下面两句话的作用是通过对象冒充,达到继承的效果
this.tank=Tank;
this.tank(x,y,direct,color);
}

//定义一个EnemyTank类
function EnemyTank(x, y, direct,color){
//也通过对象冒充,来继承Tank
this.tank=Tank;
this.tank(x,y,direct,color);
}
//将来这个函数可以画坦克
//绘制坦克
function drawTank(tank){
//考虑方向
switch(tank.direct){
case 0:
case 2:
cxt.fillStyle=tank.color[0];
//韩老师使用先死-->后活
cxt.fillRect(tank.x, tank.y, 5, 30);
//画出右边的矩形
cxt.fillRect(tank.x+15, tank.y,5,30);
cxt.fillRect(tank.x+6, tank.y+5,8,20);
//画出圆形坦克
cxt.fillStyle=tank.color[1];
cxt.arc(tank.x+10, tank.y+15,4,0,Math.PI*2,true);
cxt.fill();
//画出炮筒
cxt.strokeStyle=tank.color[1];
cxt.lineWidth=2;
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=tank.color[0];
//韩老师使用先死-->后活
cxt.fillRect(tank.x, tank.y, 30, 5);

//画出右边的矩形
cxt.fillRect(tank.x, tank.y+15,30,5);
//画出中间矩形
cxt.fillRect(tank.x+5, tank.y+6,20,8);
//画出圆形坦克
cxt.fillStyle=tank.color[1];
cxt.arc(tank.x+15, tank.y+10,4,0,Math.PI*2,true);
cxt.fill();
//画出炮筒
cxt.strokeStyle=tank.color[1];
cxt.lineWidth=2;
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;
}

}

(3)自己的坦克可以发送子弹,只能发送一颗。

1.子弹,不管是敌人的还是我的,都是作战区的一个元素。因此我们可以定义为全局变量。

OOP,所以子弹也是一个对象。

2 去处理用户按下j键时的反应

3.画出自己的子弹->写了一个函数(思想)[自己回去把坦克大战写个n遍]。

4.在哪里调用。刷新作战区的函数调用。

5.考虑子弹位置的编写。

6.子弹是不动的,《让子弹飞一会儿》。

7.子弹坐标怎样自动地变换,思想是我们可以定时去修改子弹的目标。

8.在什么地方去调用这个bullet。