不知道大家发现没有，运行时候浏览器或者电脑会变得很卡哦。根据我们之前的学习，你知道是什么原因导致的吗？
若是各位有兴趣，请你回答卡的原因，并提出优化方案。
前言
PS 各位要看效果还是使用ff或者google吧，ie7以下好像有问题。
最近大家都在坦克大战，我突然想了下我是不是也应该坦克大战一番呢？于是，我们就有了今天的东西。
其实做坦克大战并不是为了坦克大战，而是为了javascript面向对象！所以我这里并不会完成这个游戏，做到哪步是哪步吧。
怎么说呢？javascript面向对象大家都听得很多了，但能真正理解的人并不多，我事实上也是水的，知道一点皮毛是没用的，所以想以此提升面向对象的思想。
PS：最近其实事情挺多的，HTML5+CSS3、CSS、javascript、bootstrap、响应式布局......我现在是想到哪打哪啊！
算了，扯远了，我们开始今天的学习吧。
PS：运行的时候请使用高版本浏览器，这里暂时没有做浏览器兼容
工欲善其事必先利其器
刚开始干我就在想，我是不是该写个类库神马的，于是在这里磨磨蹭蹭的搞了一个多小时，硬是挤出了以下代码：
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：我们这里先不考虑小图标的问题,一点点来吧
首先是我们的子弹爆炸要用到的图片：
看到这个图片各位就应该要想到炮弹爆炸式怎么实现的了哦！
然后我们的主角，坦克的图片：
下面是我们的子弹：
于是我们几个坦克也有了，子弹也有了，好了我们先不关注其它，看看我们能不能把坦克给搞出来（话说我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>
好了，让我们主角坦克登场吧，注意其中的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>
我们可爱的坦克，还是2二级的坦克出现啦，现在我们为他加上移动效果，这里就要开始写代码啦，首先我们定义一个坦克类：
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 坦克的初始化位置
在修改一点点，我们就能控制坦克转向了：
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" > 11 <div > 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>