仇人坦克的成立以及子弹命中敌人坦克时的碰撞检查和测试作用永利娱乐网址,你精晓是何许来头造成的吧

提问

不亮堂大家发现并未,运营时候浏览器依旧电脑会变得很卡哦。依照咱们事先的读书,你知道是何等来头导致的吧?

若果各位有趣味,请您回答卡的原由,并建议优化方案。 

用javascript 面向对象制作坦克大战(四)

 大家以往还差一个要害的职能,没错,仇敌坦克的制造以及子弹击中仇敌坦克时的碰撞检查和测试效率。

 

 

  1.  成立敌人坦克实现炮弹碰撞检查和测试

 

 

 

5.1   创造仇敌坦克对象

 

 

  仇敌坦克和玩家坦克一样,同样三番五次自大家的坦克对象。所以我们在Tank.js中写入以下代码:

 

 

 

 

复制代码

 1 // 敌人坦克对象

 2 EnimyTank = function () {

 3     this.Direction = EnumDirection.Down;

 4     this.BombNum = 1;

 5     this.UI = UtilityClass.CreateE(“div”, “”, “etank”,
document.getElementById(“divMap”));

 6     this.UI.style.backgroundPosition = “0 -” + this.Direction * 40 +
“px”;

 7 

 8 }

 9 

10 EnimyTank.prototype = new Tank;

复制代码

 

 

  然后在大家的嬉戏装载对象开始化游戏时创立仇人坦克。

 

 

 

 

1   var enimyT1 = new EnimyTank();

2         enimyT1.XPosition = 0;

3         enimyT1.YPosition = 0;

4         enimyT1.UpdateUI(this._battleField);

5         this._enimyTanks.push(enimyT1);

 

 

5.2   敌人坦克移动和发射炮弹

 

  坦克创设好了,我们怎么让她动起来吧?
非常粗大略,只须求在我们的嬉戏装载对象中添加贰个敌人坦克移动并发出的措施,并且在Run主循环中开始展览调用就能够了。

 

代码:

 

 

 

 

复制代码

1     for (var i = 0; i < this._enimyTanks.length; i++) {

3             if (this._enimyTanks[i] instanceof Mover) {

4                  this._enimyTanks[i].Move(this._battleField);

5                  if (Math.random() * 100 < 5) {
this._永利娱乐网址,enimyTanks[i].Shot(this._battleField) };/* 5%的概率发射炮弹
*/

6             }

7         }

复制代码

 

 

  ok,今后我们的坦克能够正常的位移和发射炮弹了。不过大家发现坦克移动的方向不会时有发生变动,所以还亟需八个微细处理,在我们的Mover对象的Move方法中添加以下代码,仇敌坦克就能随便变换方向了。

 

 

 

1     // 仇人坦克有百分之三十概率变换方向

2     if ((this instanceof EnimyTank) && Math.random() * 100 > 30) {

3         this.Direction = parseInt(Math.random() * 4);

4     }

 

 

5.3   炮弹碰撞检查和测试

 

  此前大家炮弹的碰撞检查和测试只写了打到障碍物的检查和测试,所以大家还要求丰盛炮弹碰撞到坦克的事态。
达成思路一点也不细略,当我们的子弹穿过空地或草地(坦克能停留的三种地形)时,大家检查和测试地图的占用对象是否坦克就能够了。上代码:

 

 

 

Bomb.js:

 

 

 

 

复制代码

 1             //  要是下叁个是草也许空地

 2         else if (nextObj.obj instanceof EmptyB || nextObj.obj
instanceof TodB) {

 3             // 玩家炮弹击中仇敌坦克

 4             if (nextObj.occupier instanceof EnimyTank && this.Owner
instanceof SelfTank) {

 5                 UtilityClass.RemoveE(nextObj.occupier.UI,
document.getElementById(“divMap”));

 6                 nextObj.occupier.UI = null;

 7                 GameLoader.prototype._enimyTanks.pop();

 8                 nextObj.occupier = null;

 9             }   // 仇人炮弹打中玩家坦克

10             else if (nextObj.occupier instanceof SelfTank &&
this.Owner instanceof EnimyTank) {

11                 //UtilityClass.RemoveE(nextObj.occupier.UI,
document.getElementById(“divMap”));

12                 //nextObj.occupier = null;

13             }

14         }

复制代码

 

 

  此时,大家会意识当玩家的炮弹击中敌人后,敌人坦克会随机的占用他的6个趋势中的一个单元格。那是何许原因促成的呢?
 
我们得以考虑,当我们的炮弹击中仇人的时候,他有大概正在活动。这时候大家把他移除了,不过她的Move的步进方法还会继续执行,别忘了,大家是用的setInterval,所以他就鬼使神差步进到下多少个单元格。
那时候坦克对象移除了,可是占用还在,就会出问题了。

 

  化解的方案相当粗略,大家在移除坦克时将坦克的UI
已经安装为null了,所以在步进前大家看清他UI的值为null时,大家就停下步进就ok了。代码很粗大略:

 

 

 

复制代码

1   if (This instanceof EnimyTank) {

2             // 就算敌人坦克被灭绝,则停止步进

3             if (This.UI == null) {

4                 clearInterval(subMove);

5             }

6         }

复制代码

 

 

5.4   七个敌人坦克的解决方案

 

  那时候大家还发现3个严重的标题:
我们的大敌坦克是保留在玩耍装载对象里的3个数组,当大家消灭仇敌坦克时,大家不明了到底该从中移除哪个坦克。

 

  其实那个题材的消除思路非凡简单:在初始化敌人坦克时给他叁天性能保存他在数组中的索引,当需求破除坦克对象时,大家平昔依据目录移除就可以了。

 

壹 、早先化存储索引

 

  

 

 enimyT1.index = this._enimyTanks.length;

 

 

二 、给Array增加原型方法,移除内定地点的数组。

 

  

 

复制代码

 1 Array.prototype.removeAt = function (index) {

 2     var arr = [], j = 0;

 3     // 遍历数组,过滤钦点地点的成分

 4     for (var i = 0; i < this.length; i++) {

 5         if (i != index) {

 6             arr[j++] = this[i];

 7         }

 8     }

 9     return arr;

10 }

复制代码

 

 

③ 、修改炮弹击中仇敌的代码。

 

 

 

复制代码

 1  // 玩家炮弹击中敌人坦克

 2             if (nextObj.occupier instanceof EnimyTank && this.Owner
instanceof SelfTank) {

 3                 UtilityClass.RemoveE(nextObj.occupier.UI,
document.getElementById(“divMap”));

 4                 nextObj.occupier.UI = null;

 5                 var arr =
GameLoader.prototype._enimyTanks.removeAt(nextObj.occupier.index);

 6                 // 重置坦克索引

 7                 for (var i = 0; i < arr.length; i++) {

 8                     arr[i].index = i;

 9                 }

10                 GameLoader.prototype._enimyTanks = arr;

11                 nextObj.occupier = null;

12             } 

复制代码

 

 

  这里有一个重置索引的代码,大家也许不明白怎么如此做。
当大家移除掉贰个坦克后,数组的因素个数变了,所以本来的数组索引有恐怕失效。所以大家假设重置一下,就ok了。

http://www.bkjia.com/Javascript/919388.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/919388.htmlTechArticle用javascript 面向对象制作坦克大战(四)
大家明天还差叁个重庆大学的机能,没错,仇敌坦克的创导以及子弹命中敌人坦克时的碰撞检查和测试作用。…

前言

PS 各位要看功能照旧使用ff或许google吧,ie7以下好像分外。

近日我们都在坦克大战,作者豁然想了下本人是还是不是也应有坦克大战一番吧?于是,大家就有了前些天的东西。

事实上做坦克大战并不是为了坦克大战,而是为了javascript面向对象!所以自己那边并不会完成这一个游乐,做到哪步是哪步吧。

怎么说吧?javascript面向对象大家都听得过多了,但能真正精晓的人并不多,小编其实也是水的,知道一点浮泛是没用的,所以想以此进步面向对象的沉思。

PS:近来实际上事情挺多的,HTML5+CSS③ 、CSS、javascript、bootstrap、响应式布局……作者未来是想到哪打哪呀!

算了,扯远了,大家开始今日的就学呢。

PS:运维的时候请使用高版本浏览器,那里暂前卫未做浏览器包容

工欲善其事必先利其器

刚初步干自身就在想,作者是或不是该写个类库神马的,于是在此间磨磨蹭蹭的搞了1个多钟头,硬是挤出了以下代码:

 1 function getById(id) {
 2     return !id ? null : document.getElementById(id);
 3 }
 4 
 5 function getAttr(el, k) {
 6     if (el) {
 7         var v = el.getAttribute[k] ? el.getAttribute[k] : null;
 8         return v;
 9     }
10 }
11 
12 function setAttr(el, k, v) {
13     if (el) {
14        el.setAttribute(k, v);
15     }
16 }
17 
18 function getCss(el, k) {
19     if (el) {
20        
21         if (el.style[k]) {
22             return el.style[k];
23         }  
24         return null;
25     }
26 }
27 
28 function setCss(el, k, v) {
29     if (el) {
30         if (!el.style || el.style.length == 0) {
31             el.style = {};
32         }
33         el.style[k] = v;
34     }
35 }

不用看,也毫无说,光是想求得元素的样式那块小编就知道有失水准,可是大家无法剖腹藏珠,那里权且不管她(因为自个儿搞了个把时辰了),大家依旧按着逻辑往下走吧。

资料准备

小编们那里须求一丝丝坦克的图纸,于是打开我们的PS,PS之:

以此坦克的能源,笔者不知底原来从哪儿来的,那里先私下用了,原来的著小编假若觉得有标题请留言。

PS:大家那边先不考虑小图标的题材,一丢丢来吗

第三是大家的枪弹爆炸要用到的图纸:

永利娱乐网址 1

看样子这些图片各位就相应要想开炮弹爆炸式怎么落实的了啊!

下一场我们的顶梁柱,坦克的图样:

永利娱乐网址 2

下边是我们的子弹:

永利娱乐网址 3

于是大家多少个坦克也有了,子弹也有了,好了大家先不爱戴其余,看看我们能还是不能够把坦克给搞出来(话说本身PS不是太好,这几个也必须纳入必学范围)。

移动的坦克

小编们搞活动的坦克以前,在页面上先弄一张地图,作为坦克使用:

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <style type="text/css">
 5         .map { background: gray; border: 1px solid black; position: relative; margin: 50px auto; width: 416px; height: 416px; }
 6     </style>
 7 </head>
 8 <body>
 9     <div class="map" id="map">
10         <div id="me" class="tank">
11         </div>
12     </div>
13 </body>
14 </html>

永利娱乐网址 4

好了,让我们主演坦克登场吧,注意当中的me:

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <style type="text/css">
 5         .map { background: gray; border: 1px solid black; position: relative; margin: 50px auto; width: 416px; height: 416px; }
 6          .tank { background-image: url("images/tank.gif"); overflow: hidden; position: absolute; width: 32px; height: 32px; z-index: 3; }
 7          
 8     </style>
 9 </head>
10 <body>
11     <div class="map" id="map">
12         <div id="me" class="tank">
13         </div>
14     </div>
15 </body>
16 </html>

永利娱乐网址 5

作者们可爱的坦克,依旧2二级的坦克出现啊,现在大家为她丰盛移动作效果果,那里就要起来写代码啦,首先大家定义1个坦克类:

 1 var Tank = function (id, dir, x, y) {
 2     this.el = getById(id);
 3     this.direction = dir ? dir : 'up';
 4     this.tid = null;
 5     this.speed = 10;
 6     //坦克活动状态 0 未活动 1 正在活动
 7     this.activeState = 0;
 8     this.x = x ? x : 100;
 9     this.y = y ? y : 200;
10     this.dirState = {
11         up: 1,
12         right: 1,
13         down: 1,
14         left: 1
15     };
16 }

自甲子来能想到坦克具有的质量正是:

1 坦克对应的html标签

2 坦克的伊始化方向

3 坦克的开首化地方

在改动一丢丢,大家就能控制坦克转向了:

永利娱乐网址 6永利娱乐网址 7

  1 <html xmlns="http://www.w3.org/1999/xhtml">
  2 <head>
  3     <title></title>
  4     <style type="text/css">
  5         .map { background: gray; border: 1px solid black; position: relative; margin: 50px auto; width: 416px; height: 416px; }
  6          .tank { background-image: url("images/tank.gif"); background-repeat: no-repeat; overflow: hidden; position: absolute; width: 32px; height: 32px; z-index: 3; }
  7     </style>
  8 </head>
  9 <body>
 10     <div class="map" id="map">
 11         <div id="me" class="tank">
 12         </div>
 13     </div>
 14 
 15     <script src="../06tank/js/core.js" type="text/javascript"></script>
 16     <script type="text/javascript">
 17         var Tank = function (id, dir, x, y) {
 18             this.el = getById(id);
 19             this.direction = dir ? dir : 'up';
 20             this.tid = null;
 21             this.speed = 10;
 22             //坦克活动状态 0 未活动 1 正在活动
 23             this.activeState = 0;
 24             this.x = x ? x : 100;
 25             this.y = y ? y : 200;
 26             this.dirState = {
 27                 up: 1,
 28                 right: 1,
 29                 down: 1,
 30                 left: 1
 31             };
 32         };
 33         Tank.prototype.init = function () {
 34             var dir = this.direction;
 35             var tank = this.el;
 36             setCss(tank, 'left', this.x + 'px');
 37             setCss(tank, 'top', this.y + 'px');
 38             this.setDirection(dir);
 39         };
 40         Tank.prototype.setDirection = function (dir) {
 41             var tank = this.el;
 42             if (dir == 'up') {
 43                 setCss(tank, 'backgroundPosition', '0 0');
 44             }
 45             if (dir == 'right') {
 46                 setCss(tank, 'backgroundPosition', '-5px -36px');
 47             }
 48             if (dir == 'down') {
 49                 setCss(tank, 'backgroundPosition', '0 -73px');
 50             }
 51             if (dir == 'left') {
 52                 setCss(tank, 'backgroundPosition', '0 -105px');
 53             }
 54             this.dirState[dir] = 1;
 55         };
 56 
 57         var tank = new Tank('me', 'right', 100, 100);
 58         tank.init();
 59 
 60         function getDir(code) {
 61             if (code == '87' || code == '119') {
 62                 return 'up';
 63             }
 64             if (code == '100' || code == '68') {
 65                 return 'right';
 66             }
 67             if (code == '115' || code == '83') {
 68                 return 'down';
 69             }
 70             if (code == '97' || code == '65') {
 71                 return 'left';
 72             }
 73             return null;
 74         }
 75 
 76         document.onkeydown = function (evt) {
 77             evt = (evt) ? evt : window.event;
 78             var keyCode = evt.keyCode;
 79             var charCode = evt.charCode;
 80             var dir = getDir();
 81             if (keyCode) {
 82                 dir = getDir(keyCode.toString());
 83             }
 84             if (charCode) {
 85                 dir = getDir(charCode.toString());
 86             }
 87             tank.setDirection(dir);
 88 
 89             evt.preventDefault();
 90             return false;
 91         };
 92         document.onkeyup = function (evt) {
 93         };
 94         document.onkeypress = function (evt) {
 95             evt = (evt) ? evt : window.event;
 96             var keyCode = evt.keyCode;
 97             var charCode = evt.charCode;
 98             var dir = getDir();
 99             if (keyCode) {
100                 dir = getDir(keyCode.toString());
101             }
102             if (charCode) {
103                 dir = getDir(charCode.toString());
104             }
105             evt.preventDefault();
106             return false;
107         };
108     </script>
109 </body>
110 </html>

View Code

运行效果(此处可运维):

下一场大家来丰盛移动的卡通片,各位注意啊,大家那里要接纳js实现动画啦!大家来看望那段代码:

永利娱乐网址 8永利娱乐网址 9

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <style type="text/css">
  6         .map { background: gray; border: 1px solid black; position: relative; margin: 50px auto; width: 416px; height: 416px; }
  7         .tank { background-image: url("https://images0.cnblogs.com/blog/294743/201306/12123133-eaa9ada8690e4216a2bee3e56442e032.gif"); background-repeat: no-repeat; overflow: hidden; position: absolute; width: 32px; height: 32px; z-index: 3; }
  8     </style>
  9 </head>
 10 <body>
 11     <div class="map" id="map">
 12         <div id="me" class="tank">
 13         </div>
 14     </div>
 15     <script type="text/javascript">
 16         function getById(id) {
 17             return !id ? null : document.getElementById(id);
 18         }
 19 
 20         function getAttr(el, k) {
 21             if (el) {
 22                 var v = el.getAttribute[k] ? el.getAttribute[k] : null;
 23                 return v;
 24             }
 25         }
 26 
 27         function setAttr(el, k, v) {
 28             if (el) {
 29                 el.setAttribute(k, v);
 30             }
 31         }
 32 
 33         function getCss(el, k) {
 34             if (el) {
 35 
 36                 if (el.style[k]) {
 37                     return el.style[k];
 38                 }
 39                 return null;
 40             }
 41         }
 42 
 43         function setCss(el, k, v) {
 44             if (el) {
 45                 if (!el.style || el.style.length == 0) {
 46                     el.style = {};
 47                 }
 48                 el.style[k] = v;
 49             }
 50         }
 51 
 52         var MyGlobal = {
 53             mapWidth: 416,
 54             mapHeight: 416,
 55             width: 448,
 56             height: 512
 57         };
 58 
 59         var Tank = function (id, dir, x, y) {
 60             this.el = getById(id);
 61             this.direction = dir ? dir : 'up';
 62             this.tid = null;
 63             this.speed = 10;
 64             //坦克活动状态 0 未活动 1 正在活动
 65             this.activeState = 0;
 66             this.x = x ? x : 100;
 67             this.y = y ? y : 200;
 68             this.dirState = {
 69                 up: 1,
 70                 right: 1,
 71                 down: 1,
 72                 left: 1
 73             };
 74         };
 75         Tank.prototype.init = function () {
 76             var dir = this.direction;
 77             var tank = this.el;
 78             setCss(tank, 'left', this.x + 'px');
 79             setCss(tank, 'top', this.y + 'px');
 80             this.setDirection(dir);
 81         };
 82         Tank.prototype.setDirection = function (dir) {
 83             var tank = this.el;
 84             if (dir == 'up') {
 85                 setCss(tank, 'backgroundPosition', '0 0');
 86             }
 87             if (dir == 'right') {
 88                 setCss(tank, 'backgroundPosition', '-5px -36px');
 89             }
 90             if (dir == 'down') {
 91                 setCss(tank, 'backgroundPosition', '0 -73px');
 92             }
 93             if (dir == 'left') {
 94                 setCss(tank, 'backgroundPosition', '0 -105px');
 95             }
 96             this.dirState[dir] = 1;
 97         };
 98 
 99         Tank.prototype.move = function (dir) {
100             if (this.activeState != 0) return false; //正在运动我们便不管他
101             this.activeState = 1; //将当前状态设置为正在运动
102             if (this.direction != dir) {
103                 this.direction = dir;
104                 this.setDirection(dir);
105             }
106             //处理运动中的定时器
107             if (this.tid) {
108                 clearTimeout(this.tid);
109                 this.tid = null;
110             }
111             var state = this.dirState[dir];
112             var tank = this.el;
113             if (state == 1 || state == -1) {
114                 var strPos = getCss(tank, 'backgroundPosition');
115                 var arrPos = strPos.split(' ');
116                 var l = arrPos ? arrPos[0] : 0;
117                 var t = arrPos ? arrPos[1] : 0;
118                 var curPos = parseInt(l);
119                 var top = parseInt(t);
120                 var po = curPos - (43) * (state);
121                 var curPos = po + 'px ' + t + 'px';
122                 setCss(tank, 'backgroundPosition', curPos);
123             }
124             var xpos = getCss(tank, 'left') ? getCss(tank, 'left') : 0;
125             var ypos = getCss(tank, 'top') ? getCss(tank, 'top') : 0;
126             xpos = parseInt(xpos);
127             ypos = parseInt(ypos);
128             var mx = MyGlobal.mapWidth - 32;
129             var my = MyGlobal.mapHeight - 32;
130             switch (dir) {
131                 case 'up': ypos <= 0 ? 0 : ypos--; break;
132                 case 'right': xpos >= mx ? mx : xpos++; break;
133                 case 'down': ypos >= my ? my : ypos++; break;
134                 case 'left': xpos <= 0 ? 0 : xpos--; break;
135             }
136             setCss(tank, 'left', xpos + 'px');
137             setCss(tank, 'top', ypos + 'px');
138             var scope = this;
139             var speed = this.speed;
140             var repeat = function () {
141                 scope.move(dir);
142             };
143             if (!this.tid) {
144                 this.tid = setTimeout(repeat, speed);
145             }
146             //移动结束
147             this.activeState = 0;
148         }
149         Tank.prototype.stop = function () {
150             clearTimeout(this.tid);
151             this.tid = null;
152         };
153 
154         var tank = new Tank('me', 'up', 100, 100);
155         tank.init();
156 
157         function getDir(code) {
158             if (code == '87' || code == '119') {
159                 return 'up';
160             }
161             if (code == '100' || code == '68') {
162                 return 'right';
163             }
164             if (code == '115' || code == '83') {
165                 return 'down';
166             }
167             if (code == '97' || code == '65') {
168                 return 'left';
169             }
170             return null;
171         }
172 
173         document.onkeydown = function (evt) {
174             evt = (evt) ? evt : window.event;
175             var keyCode = evt.keyCode;
176             var charCode = evt.charCode;
177             var dir = getDir();
178             if (keyCode) {
179                 dir = getDir(keyCode.toString());
180             }
181             if (charCode) {
182                 dir = getDir(charCode.toString());
183             }
184             tank.move(dir);
185 
186             evt.preventDefault();
187             return false;
188         };
189         document.onkeyup = function (evt) {
190             tank.stop();
191         };
192         document.onkeypress = function (evt) {
193             evt = (evt) ? evt : window.event;
194             var keyCode = evt.keyCode;
195             var charCode = evt.charCode;
196             var dir = getDir();
197             if (keyCode) {
198                 dir = getDir(keyCode.toString());
199             }
200             if (charCode) {
201                 dir = getDir(charCode.toString());
202             }
203             tank.move(dir);
204 
205             evt.preventDefault();
206             return false;
207         };
208     </script>
209 </body>
210 </html>

全部代码

 1 Tank.prototype.move = function (dir) {
 2     if (this.activeState != 0) return false; //正在运动我们便不管他
 3     this.activeState = 1; //将当前状态设置为正在运动
 4     if (this.direction != dir) {
 5         this.direction = dir;
 6         this.setDirection(dir);
 7     }
 8     //处理运动中的定时器
 9     if (this.tid) {
10         clearTimeout(this.tid);
11         this.tid = null;
12     }
13     var state = this.dirState[dir];
14     var tank = this.el;
15     if (state == 1 || state == -1) {
16         var strPos = getCss(tank, 'backgroundPosition');
17         var arrPos = strPos.split(' ');
18         var l = arrPos ? arrPos[0] : 0;
19         var t = arrPos ? arrPos[1] : 0;
20         var curPos = parseInt(l);
21         var top = parseInt(t);
22         var po = curPos - (43) * (state);
23         var curPos = po + 'px ' + t + 'px';
24         setCss(tank, 'backgroundPosition', curPos);
25     }
26     var xpos = getCss(tank, 'left') ? getCss(tank, 'left') : 0;
27     var ypos = getCss(tank, 'top') ? getCss(tank, 'top') : 0;
28     xpos = parseInt(xpos);
29     ypos = parseInt(ypos);
30     var mx = MyGlobal.mapWidth - 32;
31     var my = MyGlobal.mapHeight - 32;
32     switch (dir) {
33         case 'up': ypos <= 0 ? 0 : ypos--; break;
34         case 'right': xpos >= mx ? mx : xpos++; break;
35         case 'down': ypos >= my ? my : ypos++; break;
36         case 'left': xpos <= 0 ? 0 : xpos--; break;
37     }
38     setCss(tank, 'left', xpos + 'px');
39     setCss(tank, 'top', ypos + 'px');
40     var scope = this;
41     var speed = this.speed;
42     var repeat = function () {
43         scope.move(dir);
44     };
45     if (!this.tid) {
46         this.tid = setTimeout(repeat, speed);
47     }
48     //移动结束
49     this.activeState = 0;
50 };

以此代码其实没什么好说的,只可是大家每趟活动后会改变其动向的情状值,为的便是不停的改变背景,以高达坦克前进的作用。

运转效果(此处可运行):

于是大家大致的姣好了坦克移动的功力了,以往我们来设想炮弹的题材了。

炮弹对象

下边包车型地铁是坦克对象,我们明天来看望炮弹对象,大家将坦克,炮弹,砖块各自看做多少个指标,那样不通晓面向对象没。。。

  1 //子弹对象
  2 var Bullet = function (dir) {
  3     this.direction = dir ? dir : 'up';
  4     this.speed = 5;
  5     var factor = 0;
  6     this.tid = null;
  7     this.activeState = 0;
  8     this.blastState = 0; //爆炸状态 0-4
  9     this.blastReason = 0; //爆炸原因 0一般爆炸,4 集中坦克 3......
 10     this.x = 0;
 11     this.y = 0;
 12     if (dir) {
 13         switch (dir) {
 14             case 'up': factor = 0; break;
 15             case 'right': factor = 1; break;
 16             case 'down': factor = 2; break;
 17             case 'left': factor = 3; break;
 18         }
 19     }
 20     var el = document.createElement('div');
 21     var bp = 'background-position :' + (0 - 8 * factor) + 'px  0 ;';
 22     el.setAttribute('style', bp);
 23     el.setAttribute('class', 'bullet');
 24     this.el = el;
 25 };
 26 
 27 Bullet.prototype.move = function () {
 28 
 29     var bullet = this.el;
 30     var dir = this.direction;
 31     var xpos = getCss(bullet, 'left') ? getCss(bullet, 'left') : 0;
 32     var ypos = getCss(bullet, 'top') ? getCss(bullet, 'top') : 0;
 33     xpos = parseInt(xpos);
 34     ypos = parseInt(ypos);
 35     var mx = MyGlobal.mapWidth - 8;
 36     var my = MyGlobal.mapHeight - 8;
 37     var stop = false;
 38     switch (dir) {
 39         case 'up':
 40             if (ypos <= 0) {
 41                 stop = true;
 42             } else {
 43                 ypos--;
 44             }
 45             break;
 46         case 'right':
 47             if (xpos >= mx) {
 48                 stop = true;
 49             } else {
 50                 xpos++;
 51             }
 52             break;
 53         case 'down':
 54             if (ypos >= my) {
 55                 stop = true;
 56             } else {
 57                 ypos++;
 58             }
 59             break;
 60         case 'left':
 61             if (xpos <= 0) {
 62                 stop = true;
 63             } else {
 64                 xpos--;
 65             }
 66             break;
 67     }
 68 
 69     setCss(bullet, 'left', xpos + 'px');
 70     setCss(bullet, 'top', ypos + 'px');
 71     this.x = xpos;
 72     this.y = ypos;
 73 
 74     var scope = this;
 75     var speed = this.speed;
 76     var repeat = function () {
 77         scope.move();
 78     };
 79     if (this.tid) {
 80         clearTimeout(this.tid);
 81         this.tid = null;
 82     }
 83     if (!this.tid) {
 84         this.tid = setTimeout(repeat, speed);
 85     }
 86     if (stop) {
 87         this.blast();
 88     }
 89 };
 90 
 91 Bullet.prototype.blast = function (reason) {
 92     var el = this.el;
 93     var x = this.x - 28;
 94     var y = this.y - 28;
 95     setCss(el, 'left', x + 'px');
 96     setCss(el, 'top', y + 'px');
 97     this.x = x;
 98     this.y = y;
 99     var scope = this;
100     setAttr(el, 'class', 'Boom');
101     setCss(scope.el, 'backgroundPosition', '0 0');
102     var action = function () {
103         if (scope.blastState < (scope.blastReason + 1)) {
104             var b = scope.blastState * 64 * (-1);
105             b = b + 'px 0';
106             setCss(scope.el, 'backgroundPosition', b);
107             scope.blastState++;
108             setTimeout(action, 20);
109         } else {
110             getById('map').removeChild(scope.el);
111             delete scope;
112         }
113     };
114     if (reason) {
115         this.blastReason = reason;
116     }
117     setTimeout(action, 20);
118 
119     clearTimeout(this.tid);
120     this.tid = null;
121 
122     //    this.blastState
123 
124 };

一体化代码:

永利娱乐网址 10永利娱乐网址 11

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <style type="text/css">
  6         .map { background: gray; border: 1px solid black; position: relative; margin: 50px auto; width: 416px; height: 416px; }
  7         .tank { background-image: url("https://images0.cnblogs.com/blog/294743/201306/12123133-eaa9ada8690e4216a2bee3e56442e032.gif"); background-repeat: no-repeat; overflow: hidden; position: absolute; width: 32px; height: 32px; z-index: 3; }
  8         .bullet { background-image: url('https://images0.cnblogs.com/blog/294743/201306/12123510-662de29d9e0c447389b42fcb47bff652.gif'); width: 8px; height: 8px; position: absolute; z-index: 4; background-repeat: no-repeat; }
  9         .Boom { background-image: url('https://images0.cnblogs.com/blog/294743/201306/12121341-0e6fba003915418a909cde86d0b8aac6.png'); width: 64px; height: 64px; position: absolute; z-index: 4; }
 10     </style>
 11 </head>
 12 <body>
 13     <div class="map" id="map">
 14         <div id="me" class="tank">
 15         </div>
 16     </div>
 17     <script type="text/javascript">
 18         function getById(id) {
 19             return !id ? null : document.getElementById(id);
 20         }
 21 
 22         function getAttr(el, k) {
 23             if (el) {
 24                 var v = el.getAttribute[k] ? el.getAttribute[k] : null;
 25                 return v;
 26             }
 27         }
 28 
 29         function setAttr(el, k, v) {
 30             if (el) {
 31                 el.setAttribute(k, v);
 32             }
 33         }
 34 
 35         function getCss(el, k) {
 36             if (el) {
 37 
 38                 if (el.style[k]) {
 39                     return el.style[k];
 40                 }
 41                 return null;
 42             }
 43         }
 44 
 45         function setCss(el, k, v) {
 46             if (el) {
 47                 if (!el.style || el.style.length == 0) {
 48                     el.style = {};
 49                 }
 50                 el.style[k] = v;
 51             }
 52         }
 53 
 54         var MyGlobal = {
 55             mapWidth: 416,
 56             mapHeight: 416,
 57             width: 448,
 58             height: 512
 59         };
 60 
 61         //子弹对象
 62         var Bullet = function (dir) {
 63             this.direction = dir ? dir : 'up';
 64             this.speed = 5;
 65             var factor = 0;
 66             this.tid = null;
 67             this.activeState = 0;
 68             this.blastState = 0; //爆炸状态 0-4
 69             this.blastReason = 0; //爆炸原因 0一般爆炸,4 集中坦克 3......
 70             this.x = 0;
 71             this.y = 0;
 72             if (dir) {
 73                 switch (dir) {
 74                     case 'up': factor = 0; break;
 75                     case 'right': factor = 1; break;
 76                     case 'down': factor = 2; break;
 77                     case 'left': factor = 3; break;
 78                 }
 79             }
 80             var el = document.createElement('div');
 81             var bp = 'background-position :' + (0 - 8 * factor) + 'px  0 ;';
 82             el.setAttribute('style', bp);
 83             el.setAttribute('class', 'bullet');
 84             this.el = el;
 85         };
 86 
 87         Bullet.prototype.move = function () {
 88 
 89             var bullet = this.el;
 90             var dir = this.direction;
 91             var xpos = getCss(bullet, 'left') ? getCss(bullet, 'left') : 0;
 92             var ypos = getCss(bullet, 'top') ? getCss(bullet, 'top') : 0;
 93             xpos = parseInt(xpos);
 94             ypos = parseInt(ypos);
 95             var mx = MyGlobal.mapWidth - 8;
 96             var my = MyGlobal.mapHeight - 8;
 97             var stop = false;
 98             switch (dir) {
 99                 case 'up':
100                     if (ypos <= 0) {
101                         stop = true;
102                     } else {
103                         ypos--;
104                     }
105                     break;
106                 case 'right':
107                     if (xpos >= mx) {
108                         stop = true;
109                     } else {
110                         xpos++;
111                     }
112                     break;
113                 case 'down':
114                     if (ypos >= my) {
115                         stop = true;
116                     } else {
117                         ypos++;
118                     }
119                     break;
120                 case 'left':
121                     if (xpos <= 0) {
122                         stop = true;
123                     } else {
124                         xpos--;
125                     }
126                     break;
127             }
128 
129             setCss(bullet, 'left', xpos + 'px');
130             setCss(bullet, 'top', ypos + 'px');
131             this.x = xpos;
132             this.y = ypos;
133 
134             var scope = this;
135             var speed = this.speed;
136             var repeat = function () {
137                 scope.move();
138             };
139             if (this.tid) {
140                 clearTimeout(this.tid);
141                 this.tid = null;
142             }
143             if (!this.tid) {
144                 this.tid = setTimeout(repeat, speed);
145             }
146             if (stop) {
147                 this.blast();
148             }
149         };
150 
151         Bullet.prototype.blast = function (reason) {
152             var el = this.el;
153             var x = this.x - 28;
154             var y = this.y - 28;
155             setCss(el, 'left', x + 'px');
156             setCss(el, 'top', y + 'px');
157             this.x = x;
158             this.y = y;
159             var scope = this;
160             setAttr(el, 'class', 'Boom');
161             setCss(scope.el, 'backgroundPosition', '0 0');
162             var action = function () {
163                 if (scope.blastState < (scope.blastReason + 1)) {
164                     var b = scope.blastState * 64 * (-1);
165                     b = b + 'px 0';
166                     setCss(scope.el, 'backgroundPosition', b);
167                     scope.blastState++;
168                     setTimeout(action, 20);
169                 } else {
170                     getById('map').removeChild(scope.el);
171                     delete scope;
172                 }
173             };
174             if (reason) {
175                 this.blastReason = reason;
176             }
177             setTimeout(action, 20);
178 
179             clearTimeout(this.tid);
180             this.tid = null;
181 
182             //    this.blastState
183 
184         };
185 
186         //坦克对象
187         var Tank = function (id, dir, x, y) {
188             this.el = getById(id);
189             this.direction = dir ? dir : 'up';
190             this.tid = null;
191             this.speed = 10;
192             //坦克活动状态 0 未活动 1 正在活动
193             this.activeState = 0;
194             this.x = x ? x : 100;
195             this.y = y ? y : 200;
196             this.dirState = {
197                 up: 1,
198                 right: 1,
199                 down: 1,
200                 left: 1
201             };
202         };
203         Tank.prototype.init = function () {
204             var dir = this.direction;
205             var tank = this.el;
206             setCss(tank, 'left', this.x + 'px');
207             setCss(tank, 'top', this.y + 'px');
208             this.setDirection(dir);
209         };
210         Tank.prototype.setDirection = function (dir) {
211             var tank = this.el;
212             if (dir == 'up') {
213                 setCss(tank, 'backgroundPosition', '0 0');
214             }
215             if (dir == 'right') {
216                 setCss(tank, 'backgroundPosition', '-5px -36px');
217             }
218             if (dir == 'down') {
219                 setCss(tank, 'backgroundPosition', '0 -73px');
220             }
221             if (dir == 'left') {
222                 setCss(tank, 'backgroundPosition', '0 -105px');
223             }
224             this.dirState[dir] = 1;
225         };
226 
227         Tank.prototype.move = function (dir) {
228             if (this.activeState != 0) return false; //正在运动我们便不管他
229             this.activeState = 1; //将当前状态设置为正在运动
230             if (this.direction != dir) {
231                 this.direction = dir;
232                 this.setDirection(dir);
233             }
234             //处理运动中的定时器
235             if (this.tid) {
236                 clearTimeout(this.tid);
237                 this.tid = null;
238             }
239             var state = this.dirState[dir];
240             var tank = this.el;
241             if (state == 1 || state == -1) {
242                 var strPos = getCss(tank, 'backgroundPosition');
243                 var arrPos = strPos.split(' ');
244                 var l = arrPos ? arrPos[0] : 0;
245                 var t = arrPos ? arrPos[1] : 0;
246                 var curPos = parseInt(l);
247                 var top = parseInt(t);
248                 var po = curPos - (40) * (state);
249                 var curPos = po + 'px ' + top + 'px';
250                 setCss(tank, 'backgroundPosition', curPos);
251                 this.dirState[dir] = state == 1 ? -1 : 1;
252 
253             }
254             var xpos = getCss(tank, 'left') ? getCss(tank, 'left') : 0;
255             var ypos = getCss(tank, 'top') ? getCss(tank, 'top') : 0;
256             xpos = parseInt(xpos);
257             ypos = parseInt(ypos);
258             var mx = MyGlobal.mapWidth - 32;
259             var my = MyGlobal.mapHeight - 32;
260             switch (dir) {
261                 case 'up': ypos <= 0 ? 0 : ypos--; break;
262                 case 'right': xpos >= mx ? mx : xpos++; break;
263                 case 'down': ypos >= my ? my : ypos++; break;
264                 case 'left': xpos <= 0 ? 0 : xpos--; break;
265             }
266             setCss(tank, 'left', xpos + 'px');
267             setCss(tank, 'top', ypos + 'px');
268             this.x = xpos;
269             this.y = ypos;
270             var scope = this;
271             var speed = this.speed;
272             var repeat = function () {
273                 scope.move(dir);
274             };
275             if (!this.tid) {
276                 this.tid = setTimeout(repeat, speed);
277             }
278             //移动结束
279             this.activeState = 0;
280         };
281 
282         Tank.prototype.stop = function () {
283             clearTimeout(this.tid);
284             this.tid = null;
285         };
286 
287         Tank.prototype.fire = function () {
288             var bullet = new Bullet(this.direction);
289             var l = (this.x + 12) + 'px';
290             var t = (this.y + 12) + 'px'
291             //    top:12px;left:12px;
292             var el = bullet.el;
293             setCss(el, 'top', t);
294             setCss(el, 'left', l);
295             bullet.y = this.y + 12;
296             bullet.x = this.x + 12;
297             getById('map').appendChild(el);
298             //    bullet.el = this.el.getElementsByTagName('div')[0];
299             bullet.move();
300         };
301 
302 
303         //实际应用
304         var tank = new Tank('me', 'right', 100, 100);
305         tank.init();
306 
307         function getDir(code) {
308             if (code == '87' || code == '119') {
309                 return 'up';
310             }
311             if (code == '100' || code == '68') {
312                 return 'right';
313             }
314             if (code == '115' || code == '83') {
315                 return 'down';
316             }
317             if (code == '97' || code == '65') {
318                 return 'left';
319             }
320             return null;
321         }
322 
323         document.onkeydown = function (evt) {
324             evt = (evt) ? evt : window.event;
325             var keyCode = evt.keyCode;
326             var charCode = evt.charCode;
327             var dir = getDir();
328             if (keyCode) {
329                 dir = getDir(keyCode.toString());
330             }
331             if (charCode) {
332                 dir = getDir(charCode.toString());
333             }
334             if (dir)
335                 tank.move(dir);
336             if (charCode == '106' || keyCode == '74') {
337                 tank.fire();
338             }
339             evt.preventDefault();
340             return false;
341         };
342         document.onkeyup = function (evt) {
343             tank.stop();
344         };
345         document.onkeypress = function (evt) {
346             evt = (evt) ? evt : window.event;
347             var keyCode = evt.keyCode;
348             var charCode = evt.charCode;
349             var dir = getDir();
350             if (keyCode) {
351                 dir = getDir(keyCode.toString());
352             }
353             if (charCode) {
354                 dir = getDir(charCode.toString());
355             }
356             if (dir)
357                 tank.move(dir);
358             if (charCode == '106' || keyCode == '74') {
359                 tank.fire();
360             }
361             evt.preventDefault();
362             return false;
363         };
364     </script>
365 </body>
366 </html>

完整代码

职能演示(可运转)J能够发子弹,没有子弹就到高版本浏览器去试试

http://sandbox.runjs.cn/show/evpyzcku

结语

好了,前天到此停止,前边点大家来一步步修改代码,让代码变得“面向对象”,有空子便加上砖块和别的东东。

后天的代码不用说,千疮百孔,无论是品质方面,或许代码优雅度,照旧神马都一团不佳,然则透过多少个时辰的奋战,小编今日头脑已经倒霉使了,只可以权且停一下。

作者们前面点优化吧。