html5---坦克击中敌人坦克炸弹爆炸

最新推荐文章于 2023-05-11 13:28:45 发布

置顶 mz_shenbian

最新推荐文章于 2023-05-11 13:28:45 发布

阅读量945

点赞数

本文链接：https://blog.csdn.net/mz_shenbian/article/details/9123263

版权

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<script src="tankGame.js"></script>
</head>
<body οnkeydοwn="changeDirect()">
<canvas id='tankMap' width='500px' height='300px' style='background-color:black '>
你的浏览器不支持canvas标签</canvas>
</body>
<script>
//开始画出我们的tanke
var canvas = document.getElementById('tankMap');
//相当于获得画笔
var ctx = canvas.getContext('2d');
//自定义的标准：
// 0-->向上 1-->向右 2-->向下 3--> 向左
var hero = new Hero(40,90,0,heroColor);
drawTank(hero);
//定义一个数组,画出敌人的坦克,画一个向数组添加一个
var enemyTanks = new Array();
for(var i=0;i<3;i++){
var enemyTank = new EnemyTank((i+1)*50,0,2,enemyColor);
enemyTanks[i] = enemyTank;
drawTank(enemyTanks[i]);
}
//定义炸弹的空数组
var bombs=new Array();

//定义一个子弹的数组
var heroBullets = new Array();
//根据方向生成的具体的某个子弹对象
var heroBullet = null;
//刷新作战区,显示战场上最新的元素()
function flashMap(){
ctx.clearRect(0,0,500,300);
drawTank(hero);
isHitEnemyTank(heroBullets,enemyTanks);
//画出英雄坦克的子弹
drawHeroBullet();
for(var i=0;i<3;i++){
if(enemyTanks[i].isLive==true){
drawTank(enemyTanks[i]);
}
//画出炸弹
for(var k=0;k<bombs.length;k++){
//如何画一张图片
var img = new Image();
img.src='bomb_1.gif';
var x= bombs[k].x;
var y= bombs[k].y;
ctx.drawImage(img,x,y,30,30);
//删除炸弹用splice
bombs.splice(k,1);
}
}
}
function changeDirect(){
//触发事件后,传递参数 event
var keycode = event.keyCode;
// alert(keycode);
switch(keycode){
case 38://上
hero.moveUp();
break;
case 39://右
hero.moveRight();
break;
case 40://下
hero.moveBottom()
break;
case 37://左
hero.moveLeft();
break;
case 66://B
hero.shotEnemy();
break;

}
flashMap()
}

window.setInterval("flashMap()",100);
</script>

</html>

--------------------------------------------------------------

//先给坦克定义颜色
var enemyColor=new Array("#CF3","#C9C");
var heroColor=new Array('#C9F','#CF3');
function Tank(x,y,direct){
this.x = x;
this.y = y;
this.speed = 3;
this.direct = direct;
this.moveUp = function(){
hero.y -= hero.speed;
hero.direct = 0;
}
this.moveRight = function(){
hero.x += hero.speed;
hero.direct = 1;
}
this.moveBottom = function(){
hero.y += hero.speed;
hero.direct = 2;
}
this.moveLeft = function(){
hero.x -= hero.speed;
hero.direct = 3;
}
}

//先定义一个坦克类,包括坦克的坐标,方向,坦克的速度
function Hero(x,y,direct,color){
this.hero = Tank;
this.color = color;
this.direct= direct;
this.hero(x,y,direct);
this.shotEnemy = function(){
//drawHeroBullet(hero);
//heroBullet = new HeroBullet();
switch(this.direct){

case 0:
//实例化一个子弹对象
heroBullet = new HeroBullet(this.x+10,this.y,this.direct);
break;
case 1:
heroBullet = new HeroBullet(this.x+30,this.y+9,this.direct);
break;
case 2:
heroBullet = new HeroBullet(this.x+9,this.y+30,this.direct);
break;
case 3:
heroBullet = new HeroBullet(this.x,this.y+9,this.direct);
break;
}
heroBullets.push(heroBullet);
//子弹的速度
var timer = window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);
heroBullets[(heroBullets.length-1)].timer=timer;
// window.setInterval("heroBullet.run()",50);
}
}

//定义敌人的坦克
function EnemyTank(x,y,direct,color){
this.enemyTank = Tank;
this.color = color;
this.enemyTank(x,y,direct);
this.isLive=true;
}
//子弹发射的方向/速度
function HeroBullet(x,y,direct){
this.x = x;
this.y = y;
this.speed = 3;
this.timer = null;
this.isLive=true;
this.direct = direct;
this.run=function(){
//alert("ok");
switch(this.direct){

case 0:
this.y -=this.speed;
break;
case 1:
this.x +=this.speed;
break;
case 2:
this.y +=this.speed;
break;
case 3:
this.x -=this.speed;
break;
}
//在这里判断子弹是否出界
if(this.x <0 || this.x>=500 || this.y<0 || this.y>=300){
window.clearInterval(this.timer);
}
}
}
//画子弹
function drawHeroBullet(){
for(var j=0;j<heroBullets.length;j++){
var heroBullet = heroBullets[j];
if(heroBullet.isLive){
ctx.fillStyle = '#FEF26E';
ctx.fillRect(heroBullet.x,heroBullet.y,2,2);
}

}
}

//把生成坦克的代码封装到一个函数中
function drawTank(hero){
switch(hero.direct){
case 0:
case 2:
ctx.fillStyle = hero.color[1];
ctx.fillRect(hero.x,hero.y,5,30);
ctx.fillRect(hero.x+15,hero.y,5,30);
ctx.fillRect(hero.x+6,hero.y+5,8,20);
//需要注意,画圆的时候需要重新开启路径
ctx.fillStyle = hero.color[0];
ctx.beginPath();
ctx.arc(hero.x+10,hero.y+15,3,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
//画出炮筒(直线)
ctx.strokeStyle = hero.color[0];
ctx.lineWidth = 2;
ctx.moveTo(hero.x+10,hero.y+15);
if(hero.direct ==0){
ctx.lineTo(hero.x+10,hero.y);
}else if(hero.direct ==2){
ctx.lineTo(hero.x+10,hero.y+30);
}
ctx.stroke();
break;
case 1:
case 3:
ctx.fillStyle = hero.color[1];
ctx.fillRect(hero.x,hero.y,30,5);
ctx.fillRect(hero.x,hero.y+15,30,5);
ctx.fillRect(hero.x+5,hero.y+6,20,8);
//需要注意,画圆的时候需要重新开启路径
ctx.fillStyle = hero.color[0];
ctx.beginPath();
ctx.arc(hero.x+15,hero.y+10,3,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
//画出炮筒(直线)
ctx.strokeStyle = hero.color[0];
ctx.lineWidth = 2;
ctx.moveTo(hero.x+15,hero.y+10);
if(hero.direct ==1){
ctx.lineTo(hero.x+30,hero.y+10);
}else if(hero.direct ==3){
ctx.lineTo(hero.x,hero.y+10);
}
ctx.stroke();
}
}

//判断子弹是否打中敌人的坦克
function isHitEnemyTank(heroBullets,enemyTanks){
//循环出我们所有的子弹
for(var i=0;i<heroBullets.length;i++){
//再循环出敌人所有的坦克
for(var j=0;j<enemyTanks.length;j++){
switch(enemyTanks[j].direct){
case 0:
case 2:
if(heroBullets[i].x>=enemyTanks[j].x && heroBullets[i].x<=enemyTanks[j].x+20 && heroBullets[i].y>=enemyTanks[j].y && heroBullets[i].y<=enemyTanks[j].y+30){
//标记一下敌人的坦克牺牲了
enemyTanks[j].isLive = false;
heroBullets[i].isLive = false;
//实例化炸弹
var bomb=new Bomb(enemyTanks[j].x,enemyTanks[j].y);
bombs.push(bomb);
}

break;

case 1:
case 3:
if(heroBullets[i].x>=enemyTanks[j].x && heroBullets[i].x<=enemyTanks[j].x+30 && heroBullets[i].y>=enemyTanks[j].y && heroBullets[i].y<=enemyTanks[j].y+20){
//标记一下敌人的坦克牺牲了
enemyTanks[j].isLive = false;
heroBullets[i].isLive = false;
//实例化炸弹
var bomb=new Bomb(enemyTanks[j].x,enemyTanks[j].y);
bombs.push(bomb);
}

break;
}
}
}

}

//定义炸弹类
function Bomb(x,y,direct){
this.x=x;
this.y=y;
this.direct=direct;
}

mz_shenbian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5---坦克击中敌人坦克炸弹爆炸

你的浏览器不支持canvas标签//开始画出我们的tankevar canvas = document.getElementById('tankMap');//相当于获得画笔var ctx = canvas.getContext('2d');//自定义的标准：// 0-->向上 1-->向右 2-->向下 3--> 向左var hero = new Her
复制链接

扫一扫