html学习2-小练习1之坦克大战练习

练习实现效果：敌人tank不动，自己tank上下左右移动并且连续发射子弹

实现工具：html5画布及js；运行环境：ie，在chrome下不行，暂未找到原因

效果截图：

核心思想：

1.创建画布，坦克对象Tank，敌人坦克(Enemys)和自己的坦克(Hero)均继承坦克对象。

创建自己的子弹对象(Bullet，包含自身相关信息以及向前运动的函数run())，创建子弹数组(heroBullets)。

2.给body的onkeydown绑定事件（获取每次键盘输入，上右下左分别为wdxa，子弹发射为j）

3.每次按键上右下左，调用坦克(Hero)自身moveUp/moveRight/moveDown/moveLeft函数，改变坐标，然后定期刷新（使用window.setInterval()函数）

每次按键发射子弹，调用对象（Hero）的shotBullet()函数,shotBullet中根据不同方向实例化子弹(bullet)，把子弹通过heroBullets.push(bullet)进入子弹数组，

定期刷新（window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);），实现子弹的不断往前运动。

4.刷新方法简介：第一步清屏，然后画出敌人坦克和自己坦克，如果子弹对象此时不是null，代表已经创建了子弹，画出子弹，反之则不画。

让子弹飞的过程：按下j后子弹的run函数循环被调用，50ms为周期。页面刷新则以100ms为周期，此时每50ms改变子弹的坐标，再50ms后刷新页面，显示子弹，再50ms后改变子弹

坐标，如此循环往复，则看到子弹飞起来了。

我的代码：

  1 <!DOCTYPE html>
  2 <html>
  3   <header>网页的头部</header>
  4   <head><script type="text/javascript" src="js/tank.js"></script></head>
  5   <body onkeydown="getCommand()">
  6   <h1>经典的坦克大战</h1>
  7    <canvas id="tankMap" width="400px" height="300px" style="background-color:black">
  8    </canvas>
  9   <script type="text/javascript">
 10   var canvas=document.getElementById("tankMap");
 11   var cxt=canvas.getContext("2d");
 12   var heroColor=new Array("#fa3e54","#FF6F00","yellow");
 13   var enemyColor=new Array("#00AE68","#057D9F","#62E200");
 14   //定义一个子弹
 15   var bullet=null;
 16   //定义一个子弹数组
 17   var heroBullets=new Array();
 18   //创建自己的tank
 19   var hero1=new Hero(60,50,2,1);
 20   var enemys=new Array();
 21   //创建敌人的tank
 22   for (var i=0;i<3;i++)
 23   {
 24      enemys[i]=new Enemy(50+i*50,0,2,1);
 25   }
 26   flashTankMap();
 27   window.setInterval("flashTankMap()",100);
 28   //***********画tank**********
 29   function Tank(x,y,direction,speed,color)
 30   {
 31       this.x=x;
 32       this.y=y;
 33       this.speed=speed;
 34       this.color=color;
 35       //0代表上，1代表右，2代表下，3代表左;分别用wdxa代表上右下左，其ascii码分别为87,68,88,65
 36       this.direction=direction;
 37       this.moveUp=function()
 38       {
 39          this.direction=0;
 40          this.y-=this.speed;
 41       };
 42       this.moveDown=function()
 43       {
 44           this.direction=2;
 45          this.y+=this.speed;
 46       };
 47       this.moveLeft=function(){
 48           this.direction=3;
 49          this.x-=this.speed;
 50       };
 51       this.moveRight=function(){
 52           this.direction=1;
 53          this.x+=this.speed;
 54       };
 55   }
 56   function drawBullet()
 57   {
 58
 59       //画一个子弹
 60
 61       if(bullet!=null&&bullet.isLive)
 62           {
 63                 cxt.fillStyle=="yellow";
 64               cxt.lineWidth=3;
 65               cxt.beginPath();
 66                cxt.fillRect(bullet.x-2,bullet.y-2,3,3);
 67                cxt.closePath();
 68           }
 69       document.getElementById("bb").innerText="drawBullet 中x="+bullet.x+"y="+bullet.y;
 70   }
 71
 72   function drawBullets()
 73   {
 74          //原来画一个子弹，现在画出所有子弹
 75          for (var i=0;i<heroBullets.length;i++)
 76          {
 77               var heroBullet=heroBullets[i];
 78               if(heroBullet!=null&&heroBullet.isLive)
 79                 {
 80                      cxt.fillStyle=="yellow";
 81                    cxt.lineWidth=3;
 82                    cxt.beginPath();
 83                     cxt.fillRect(heroBullet.x-2,heroBullet.y-2,3,3);
 84                     cxt.closePath();
 85                 }
 86               document.getElementById("bb").innerText="drawBullet 中x="+bullet.x+"y="+bullet.y;
 87        }
 88   }
 89
 90   function Bullet(x,y,direction,speed)
 91   {
 92       this.x=x;
 93       this.y=y;
 94       this.direction=direction;
 95       this.speed=speed;
 96       var d=this.direction;
 97       this.timer=null;
 98       this.isLive=true;
 99       this.run=function run()
100       {
101           //在改变这个子弹的坐标时，先判断子弹是否已经到边界了
102           if(this.x<=0||this.x>=400||this.y<=0||this.y>=300)
103         {
104               //子弹要停止
105               window.clearInterval(this.timer);
106               this.isLive=false;
107         }else
108           {
109               if(d==0)//上
110                 {
111                     this.y-=this.speed;
112                 }
113                 else if(d==1)//右
114                 {
115                     this.x+=this.speed;
116                 }
117                 else if(d==2)//下
118                 {
119                      this.y+=this.speed;
120                 }
121                 else if(d==3)//左
122                 {
123                     this.x-=this.speed;
124                 }
125                 document.getElementById("aa").innerText="子弹x="+bullet.x+"子弹y="+bullet.y;
126            }
127       };
128
129   }
130
131   function Hero(x,y,direction,speed)
132   {
133     //继承Tank的内容
134       this.hero=Tank;
135       this.hero(x,y,direction,speed,this.color);
136       this.color=heroColor;
137       //shot
138       this.shotBullet=function()
139       {
140           //创建一个子弹
141         if(this.direction==0)//上
142         {
143              bullet=new Bullet(this.x+8+30/2,this.y-10,this.direction,this.speed);
144         }
145         else if(this.direction==1)//右
146         {
147              bullet=new Bullet(this.x+40/2+25,this.y+8+20/2,this.direction,this.speed);
148         }
149         else if(this.direction==2)//下
150         {
151              bullet=new Bullet(this.x+15+8,this.y+15+25,this.direction,this.speed);
152         }
153         else if(this.direction==3)//左
154         {
155              bullet=new Bullet(this.x+40/2-25,this.y+8+20/2,this.direction,this.speed);
156         }
157
158           /*单个子弹的时候的timer计时器*/
159         //var timer=window.setInterval("bullet.run()",50);
160         //把该子弹装入到子弹数组中
161           heroBullets.push(bullet);
162
163           /*多子弹的时候的timer计时器；
164                 此处是点了几下j,就有几个timer,每个子弹定时器是独立的。
165           如果按照上面的 方法，则所有子弹共享一个定时器，故速度会越来越快
166           */
167           var timer=window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);
168           //把timer赋值给子弹(js对象是引用传递)
169           heroBullets[heroBullets.length-1].timer=timer;
170       };
171   }
172   function Enemy(x,y,direction,speed)
173   {
174       this.enemy=Tank;
175       this.color=enemyColor;
176       this.enemy(x,y,direction,speed,this.color);
177   }
178
179   //***********获取按键上右下左方向，并且清屏，常见坦克
180   function flashTankMap()
181   {
182
183        cxt.clearRect(0, 0, 400, 300);
184        //画自己的tank
185      drawTank(hero1);
186        //画敌人的坦克
187      for(var i=0;i<3;i++)
188      {
189          drawTank(enemys[i]);
190      }
191        //如果子弹不是空的，画出子弹
192      if(bullet!=null)
193      {
194           drawBullets();
195      }     ;
196   }
197   function getCommand(){
198
199       if(event.keyCode==87)//上
200       {
201          hero1.moveUp();
202       }
203       else if(event.keyCode==65)//左
204       {
205          hero1.moveLeft();
206       }
207       else if(event.keyCode==68)//右
208       {
209        hero1.moveRight();
210       }
211       else if(event.keyCode==88)//下
212       {
213          hero1.moveDown();
214       }
215       else if(event.keyCode==74)//发射子弹
216       {
217           hero1.shotBullet();
218       }
219       flashTankMap();
220   } ;
221
222   </script>
223   <input type="text" id="aa"></input>
224   <input type="text" id="bb"></input>
225   </body>
226   <footer>网页的尾部</footer>
227 </html>

my code

转载于:https://www.cnblogs.com/luckyflower/p/3672803.html

html学习2-小练习1之坦克大战练习相关推荐

java 90坦克大战_java小项目之：坦克大战，90后的集体回忆杀！
坦克大战小项目! 在小学初中的时候,我相信我们都曾经沉迷于一种玩具"红白机",这应该是80后90后的童年回忆.用绝对好好学习的誓言,求着父母买一台.自己学会插在电视机上,再和小伙伴 ...
CocosCreator项目学习系列lt;三gt;BattleCity_90tank坦克大战项目的学习
CocosCreator项目学习系列<三>坦克大战项目的学习<25/12/2017> 知识点总结: 1.TileMap的使用精髓; 2.Joystick虚拟摇杆的整合单脚本; ...
python小游戏——怀念经典坦克大战代码
♥️作者:小刘在这里 ♥️每天分享云计算网络运维课堂笔记,努力不一定有回报,但一定会有收获加油!一起努力,共赴美好人生! ♥️夕阳下,是最美的,绽放,愿所有的美好,再疫情结束后如约而至. 目录一.效 ...
微信小游戏开发之坦克大战（比羊了个羊还好玩系列）
现在很多公司开始使用游戏化的方式去做产品,让产品呈现给用户时更好玩,以达到增加用户粘性,提升DAU的效果. 同时随着硬件与底层系统的发展,用户的终端对动画的表现能力也越来越强,很多APP以引导用户互动 ...
3d学习笔记（九）——AI坦克大战
AI坦克大战实验内容坦克对战游戏 AI 设计从商店下载游戏:"Kawaii" Tank 或其他坦克模型,构建 AI 对战坦克.具体要求使用"感知-思考-行为&q ...
小白学习Unity 3D做经典游戏坦克大战日常
老师 | Trigger 学习者 |小白出品 | Siki 学院 Hello,小伙伴们.接下来小白跟Trigger老师做一款2D游戏坦克大战.从素材.代码到场景和UI的游戏开发.小白把日常遇到的问题 ...
【Pygame小游戏】《坦克大战》，那些童年的游戏你还记得几个呢？
前言
Unity学习第一周-物理引擎-项目——坦克大战单机版
项目需求及策划
JAVA实现坦克大战（JAVA小游戏）
前言课设毕设源码收集已上传到github,包括:C,C#,C++,JAVA,PHP 等源码,更多源码在整理中.地址:https://github.com/52JDK/Source-Collectio ...
java画好看坦克_坦克大战第一节——画出自己的坦克（新手篇）
刚刚开始学习java,对java不是很熟悉,但是自己的兴趣挺喜欢java.现在自己在自学java做一个小游戏,坦克大战. 自己现在完成了画出自己的坦克和坦克的移动方向.希望各位大神指导一下我这个刚刚学 ...

html学习2-小练习1之坦克大战练习

html学习2-小练习1之坦克大战练习相关推荐

最新文章

热门文章