您的位置：首页 > Web前端 > HTML5

HTML5 经典小游戏之坦克

2013-09-03 12:28 423 查看

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

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

明天会更新并且完善

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

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

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

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

废话不多说上源码

tankGame2.html

<!DOCTYPE html>

< html>

< head>

< meta charset='utf-8'/>

< script src='tankGame2.js'></script>

< /head>

< body onkeydown="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();

       }

   }

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航