HTML5经典小游戏之坦克

最新推荐文章于 2023-10-09 18:32:48 发布

郭晓湉

最新推荐文章于 2023-10-09 18:32:48 发布

阅读量2.7k

点赞数 4

分类专栏： HTML5

本文链接：https://blog.csdn.net/xtqueen/article/details/9114881

版权

HTML5 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

粉色坦克为敌人的坦克，橘色坦克为我方坦克

画布上的点点是子弹，目前还没有实现发子弹消灭敌方坦克并消失

明天会更新并且完善

坦克的组成是由三个矩形中间矩形上面是一个圆形，圆形上是一个直线

根据不同的方向生成不同的子弹：

（1）根据方向----生成不同的子弹对象

（2）再根据子弹坦克炮筒方向，画出子弹

废话不多说上源码

tankGame2.html

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<script src='tankGame2.js'></script>
</head>
<body οnkeydοwn="changeDirect()">
<canvas id='tankMap' width='500px' height='300px' style='border:1px solid #cccfff'>
你的浏览器不支持canvas标签</canvas>
</body>
<script>
   //开始画出我们的tanke
   var canvas = document.getElementById('tankMap');
   //相当于获得画笔
   var ctx = canvas.getContext('2d');
   //自定义的标准：
   // 0-->向上 1-->向右 2-->向下 3--> 向左
   var hero = new Hero(40,40,3,0,heroColor);
   drawTank(hero);
   //定义一个数组,画出敌人的坦克,画一个向数组添加一个
   var enemyTanks = new Array();
   //定义一个子弹的数组
   var heroBullets = new Array();
   //根据方向生成的具体的某个子弹对象
   var heroBullet = null;

   for(var i=0;i<3;i++){
       var enemyTank = new EnemyTank((i+1)*50,0,3,2,enemyColor);
       enemyTanks[i] = enemyTank;
       drawTank(enemyTanks[i]);
   }
   //刷新作战区,显示战场上最新的元素()
   function flashMap(){
       ctx.clearRect(0,0,500,300);
       drawTank(hero);
       //画出英雄坦克的子弹
       drawHeroBullet();
       for(var i=0;i<3;i++){
           drawTank(enemyTanks[i]);
       }
   }

   function changeDirect(){
       //触发事件后,传递参数 event
       var keycode = event.keyCode;
       switch(keycode){
           case 38:
           hero.moveUp();
           break;
           case 39:
           hero.moveRight();
           break;
           case 40:
           hero.moveBottom();
           break;
           case 37:
           hero.moveLeft();
           break;
           case 32:
           hero.shotEnemy();
           break;

       }
       flashMap();
   }
</script>
</html>

tankGame.js

    //先给坦克定义颜色
   var enemyColor = new Array('gray','pink');
   var heroColor = new Array('blue','orange');


   function Tank(x,y,speed,direct,color){
       this.x = x;
       this.y = y;
       this.speed = speed;
       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,speed,direct,color){
       this.hero = Tank;
       this.color = color;
       this.hero(x,y,speed,direct);
       this.shotEnemy = function(){
           //drawHeroBullet(hero);
           //heroBullet = new HeroBullet();
           switch(this.direct){
               case 0:
               //实例化一个子弹对象
               heroBullet = new HeroBullet(this.x+10,this.y,this.speed);
               break;
               case 1:
               heroBullet = new HeroBullet(this.x+30,this.y+9,this.speed);
               break;
               case 2:
               heroBullet = new HeroBullet(this.x+9,this.y+30,this.speed);
               break;
               case 3:
               heroBullet = new HeroBullet(this.x,this.y+9,this.speed);
               break;
           }
           heroBullets.push(heroBullet);
       }
   }

   //定义敌人的坦克
   function EnemyTank(x,y,speed,direct,color){
       this.enemyTank = Tank;
       this.color = color;
       this.enemyTank(x,y,speed,direct);
   }

   function HeroBullet(x,y,speed,direct){
       this.x = x;
       this.y = y;
       this.speed = speed;
       this.direct = direct;

   }

   function drawHeroBullet(){
       for(var j=0;j<heroBullets.length;j++){
           ctx.fillStyle = 'blue';
           var heroBullet = heroBullets[j];
           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();
       }
   }

郭晓湉

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
HTML5经典小游戏之坦克

粉色坦克为敌人的坦克，橘色坦克为我方坦克画布上的点点是子弹，目前还没有实现发子弹消灭敌方坦克并消失明天会更新并且完善坦克的组成是由三个矩形中间矩形上面是一个圆形，圆形上是一个直线根据不同的方向生成不同的子弹：（1）根据方向----生成不同的子弹对象（2）再根据子弹坦克炮筒方向，画出子弹废话不多说上源码tankGame2.html
复制链接

扫一扫