《闪电突袭》：被低估的精品军武坦克大战
《闪电突袭》是由冰穹互娱发行的一款二战军武题材手游，以二次世界大战为背景蓝本，设定了海量的事实军事将领与来自苏、德、美多阵营的坦克装甲，试图为玩家还原一种指挥钢铁洪流鏖战沙场的感觉。
6月底游戏初次进入我们的视线之际小笨曾为《闪电突袭》撰写过评测，半年过去，这款作品受到的关注程度似乎并未与之品质呈现出正比，因此在《闪电突袭》12月6日开启新一轮双平台测试之前，我们觉得有必要再对这款军武细分领域的精品之作再进行一次推荐。
固然，《闪电突袭》以卡牌的形式表现军武与战将，在同题材的游戏作品中并非是一个新鲜的玩法，譬如时下流行的军武泛二次元题材产品《少女前线》与《那年那兔》等等，而《闪电突袭》相对这些这些同样打着“策略卡牌”招牌的竞品而言，对真实战场的细节（建筑、街道、烟雾）还原更为考究，绝不“闹着玩”，并且更有出众的手动操控策略性。
当前国产手游的主流“策略卡牌”玩法，依旧延续了《刀塔传奇》的模式，以点击触发的形式释放卡牌的技能，而《闪电突袭》则是非常不同。
丰富的坦克与将领形成多样化的战术组合
首先是《闪电突袭》的坦克布阵，并非如一般策略卡牌那样，前排、中坚、后卫，以两三排的形式摆个矩形阵列，而是以多样化的排位填空呈现。战阵中的坦克在关卡推进的过程中可能面临来自多方位的挑战，也许你觉得把肉盾坦克摆在最前排就能顶住火力，可是在某些关卡面对BOSS战时，会有地方的小型装甲从侧后翼出现围攻你的输出点，此时你不仅必须手动集火这些骚扰者，也要释放技能减少己方薄弱环节被打爆的情况，例如烟雾或装甲类技能，都是很好的选择。
游戏对“腹背受敌”这个概念作出了真实还原
《闪电突袭》中的技能大都不是全屏或是集体的，而有着一个手动选择的限定范围，因此有时当你面临两面受敌的情况，就必须权衡战场的哪一端更需要技能的掩护，策略深度当然要高出同类竞品一截。
《闪电突袭》的另一核心亮点，在于对二战陆军名将的完整收录，无论从“情报局”的收集招募方式，到近期新增的“理论实验室”、“荣誉殿堂”等培养玩法，相对主流卡牌手游都有着差异化体验。而游戏的军团、竞技等系统，使得军迷玩家可以在对抗中更为直观的互相检视彼此收藏的装甲与战将，这是现实中的一些TCG军事游戏难以满足的需求，也是社交手游的核心优势。
游戏特色在于强烈的手操策略感与硬派的风格
作为一款更贴合现实史料设定的军武手游，《闪电突袭》在今天更喜欢玩出萌化、逗逼的手游市场上是一种更为硬派写实的选择，更贴合那些年龄稍大，更硬核向的军事爱好者的游戏需求，假如你热爱坦克重炮的钢铁美学，希望在这个冬天，你不会再错过它。
您还可以通过【长按下方二维码-识别图片】关注我们
责任编辑：
声明：本文由入驻搜狐号的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
今日搜狐热点大小: 24.4MB
版本: 17.5.14
下载次数: 93万
打开二维码扫描软件，将手机摄像头对准网页上的二维码扫描即可。
坦克突袭，坦克大战，为你的坦克装上射线枪、离子榴弹炮、声波加农炮以及更多。使用全新的客户东环境来富有策略的攻击你的敌人。增加死亡竞赛模式挑战你的好友！包含全新的3D图像引擎以及真实的光照和特殊效果互动环境，包含力场、爆炸桶以及更多道具场景使用能力加强来超级蓄能你的坦克，并获得能力场和加速等道具传奇Boss战可以将你的技巧发挥到极致分屏死亡竞赛...评论-4138&
不知道大家发现没有，运行时候浏览器或者电脑会变得很卡哦。根据我们之前的学习，你知道是什么原因导致的吗？
若是各位有兴趣，请你回答卡的原因，并提出优化方案。&
PS 各位要看效果还是使用ff或者google吧，ie7以下好像有问题。
最近大家都在坦克大战，我突然想了下我是不是也应该坦克大战一番呢？于是，我们就有了今天的东西。
其实做坦克大战并不是为了坦克大战，而是为了javascript面向对象！所以我这里并不会完成这个游戏，做到哪步是哪步吧。
怎么说呢？javascript面向对象大家都听得很多了，但能真正理解的人并不多，我事实上也是水的，知道一点皮毛是没用的，所以想以此提升面向对象的思想。
PS：最近其实事情挺多的，HTML5+CSS3、CSS、javascript、bootstrap、响应式布局......我现在是想到哪打哪啊！
算了，扯远了，我们开始今天的学习吧。
PS：运行的时候请使用高版本浏览器，这里暂时没有做浏览器兼容
工欲善其事必先利其器
刚开始干我就在想，我是不是该写个类库神马的，于是在这里磨磨蹭蹭的搞了一个多小时，硬是挤出了以下代码：
1 function getById(id) {
return !id ? null : document.getElementById(id);
5 function getAttr(el, k) {
var v = el.getAttribute[k] ? el.getAttribute[k] : null;
12 function setAttr(el, k, v) {
el.setAttribute(k, v);
18 function getCss(el, k) {
if (el.style[k]) {
return el.style[k];
return null;
28 function setCss(el, k, v) {
if (!el.style || el.style.length == 0) {
el.style = {};
el.style[k] =
不用看，也不用说，光是想求得元素的样式这块我就知道有问题，但是我们不能舍本逐末，这里暂时不管他（因为我搞了个把小时了），我们还是按着逻辑往下走吧。
我们这里需要一点点坦克的图片，于是打开我们的PS，PS之：
这个坦克的资源，我不知道原来从哪里来的，这里先私自用了，原作者若是觉得有问题请留言。
PS：我们这里先不考虑小图标的问题,一点点来吧
首先是我们的子弹爆炸要用到的图片：
看到这个图片各位就应该要想到炮弹爆炸式怎么实现的了哦！
然后我们的主角，坦克的图片：
下面是我们的子弹：
于是我们几个坦克也有了，子弹也有了，好了我们先不关注其它，看看我们能不能把坦克给搞出来（话说我PS不是太好，这个也必须纳入必学范围）。
移动的坦克
我们搞移动的坦克之前，在页面上先弄一张地图，作为坦克使用：
1 &html xmlns="http://www.w3.org/1999/xhtml"&
&title&&/title&
&style type="text/css"&
.map { background: gray; border: 1px solid black; position: relative; margin: 50px auto; width: 416px; height: 416px; }
&div class="map" id="map"&
&div id="me" class="tank"&
13 &/body&
14 &/html&
好了，让我们主角坦克登场吧，注意其中的me：
1 &html xmlns="http://www.w3.org/1999/xhtml"&
&title&&/title&
&style type="text/css"&
.map { background: gray; border: 1px solid black; position: relative; margin: 50px auto; width: 416px; height: 416px; }
.tank { background-image: url("images/tank.gif"); overflow: hidden; position: absolute; width: 32px; height: 32px; z-index: 3; }
&div class="map" id="map"&
&div id="me" class="tank"&
15 &/body&
16 &/html&
我们可爱的坦克，还是2二级的坦克出现啦，现在我们为他加上移动效果，这里就要开始写代码啦，首先我们定义一个坦克类：
1 var Tank = function (id, dir, x, y) {
this.el = getById(id);
this.direction = dir ? dir : 'up';
this.tid = null;
this.speed = 10;
//坦克活动状态 0 未活动 1 正在活动
this.activeState = 0;
this.x = x ? x : 100;
this.y = y ? y : 200;
this.dirState = {
我现在能想到坦克具有的属性便是：
1 坦克对应的html标签
2 坦克的初始化方向
3 坦克的初始化位置
在修改一点点，我们就能控制坦克转向了：
1 &html xmlns="http://www.w3.org/1999/xhtml"&
&title&&/title&
&style type="text/css"&
.map { background: border: 1 position: margin: 50 width: 416 height: 416 }
.tank { background-image: url("images/tank.gif"); background-repeat: no- overflow: position: width: 32 height: 32 z-index: 3; }
&div class="map" id="map"&
&div id="me" class="tank"&
&script src="../06tank/js/core.js" type="text/javascript"&&/script&
&script type="text/javascript"&
var Tank = function (id, dir, x, y) {
this.el = getById(id);
this.direction = dir ? dir : 'up';
this.tid = null;
this.speed = 10;
//坦克活动状态 0 未活动 1 正在活动
this.activeState = 0;
this.x = x ? x : 100;
this.y = y ? y : 200;
this.dirState = {
Tank.prototype.init = function () {
var dir = this.
var tank = this.
setCss(tank, 'left', this.x + 'px');
setCss(tank, 'top', this.y + 'px');
this.setDirection(dir);
Tank.prototype.setDirection = function (dir) {
var tank = this.
if (dir == 'up') {
setCss(tank, 'backgroundPosition', '0 0');
if (dir == 'right') {
setCss(tank, 'backgroundPosition', '-5px -36px');
if (dir == 'down') {
setCss(tank, 'backgroundPosition', '0 -73px');
if (dir == 'left') {
setCss(tank, 'backgroundPosition', '0 -105px');
this.dirState[dir] = 1;
var tank = new Tank('me', 'right', 100, 100);
tank.init();
function getDir(code) {
if (code == '87' || code == '119') {
return 'up';
if (code == '100' || code == '68') {
return 'right';
if (code == '115' || code == '83') {
return 'down';
if (code == '97' || code == '65') {
return 'left';
return null;
document.onkeydown = function (evt) {
evt = (evt) ? evt : window.
var keyCode = evt.keyC
var charCode = evt.charC
var dir = getDir();
if (keyCode) {
dir = getDir(keyCode.toString());
if (charCode) {
dir = getDir(charCode.toString());
tank.setDirection(dir);
evt.preventDefault();
return false;
document.onkeyup = function (evt) {
document.onkeypress = function (evt) {
evt = (evt) ? evt : window.
var keyCode = evt.keyC
var charCode = evt.charC
var dir = getDir();
if (keyCode) {
dir = getDir(keyCode.toString());
if (charCode) {
dir = getDir(charCode.toString());
evt.preventDefault();
return false;
109 &/body&
110 &/html&
运行效果（此处可运行）：
然后我们来加上移动的动画，各位注意啦，我们这里要使用js实现动画啦！我们来看看这段代码：
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"&
&title&&/title&
&style type="text/css"&
.map { background: gray; border: 1px solid black; position: relative; margin: 50px auto; width: 416px; height: 416px; }
.tank { background-image: url("/blog/306/-eaa9adabee3e.gif"); background-repeat: no-repeat; overflow: hidden; position: absolute; width: 32px; height: 32px; z-index: 3; }
&div class="map" id="map"&
&div id="me" class="tank"&
&script type="text/javascript"&
function getById(id) {
return !id ? null : document.getElementById(id);
function getAttr(el, k) {
var v = el.getAttribute[k] ? el.getAttribute[k] : null;
function setAttr(el, k, v) {
el.setAttribute(k, v);
function getCss(el, k) {
if (el.style[k]) {
return el.style[k];
return null;
function setCss(el, k, v) {
if (!el.style || el.style.length == 0) {
el.style = {};
el.style[k] =
var MyGlobal = {
mapWidth: 416,
mapHeight: 416,
width: 448,
height: 512
var Tank = function (id, dir, x, y) {
this.el = getById(id);
this.direction = dir ? dir : 'up';
this.tid = null;
this.speed = 10;
//坦克活动状态 0 未活动 1 正在活动
this.activeState = 0;
this.x = x ? x : 100;
this.y = y ? y : 200;
this.dirState = {
Tank.prototype.init = function () {
var dir = this.
var tank = this.
setCss(tank, 'left', this.x + 'px');
setCss(tank, 'top', this.y + 'px');
this.setDirection(dir);
Tank.prototype.setDirection = function (dir) {
var tank = this.
if (dir == 'up') {
setCss(tank, 'backgroundPosition', '0 0');
if (dir == 'right') {
setCss(tank, 'backgroundPosition', '-5px -36px');
if (dir == 'down') {
setCss(tank, 'backgroundPosition', '0 -73px');
if (dir == 'left') {
setCss(tank, 'backgroundPosition', '0 -105px');
this.dirState[dir] = 1;
Tank.prototype.move = function (dir) {
if (this.activeState != 0) return false; //正在运动我们便不管他
this.activeState = 1; //将当前状态设置为正在运动
if (this.direction != dir) {
this.direction =
this.setDirection(dir);
//处理运动中的定时器
if (this.tid) {
clearTimeout(this.tid);
this.tid = null;
var state = this.dirState[dir];
var tank = this.
if (state == 1 || state == -1) {
var strPos = getCss(tank, 'backgroundPosition');
var arrPos = strPos.split(' ');
var l = arrPos ? arrPos[0] : 0;
var t = arrPos ? arrPos[1] : 0;
var curPos = parseInt(l);
var top = parseInt(t);
var po = curPos - (43) * (state);
var curPos = po + 'px ' + t + 'px';
setCss(tank, 'backgroundPosition', curPos);
var xpos = getCss(tank, 'left') ? getCss(tank, 'left') : 0;
var ypos = getCss(tank, 'top') ? getCss(tank, 'top') : 0;
xpos = parseInt(xpos);
ypos = parseInt(ypos);
var mx = MyGlobal.mapWidth - 32;
var my = MyGlobal.mapHeight - 32;
switch (dir) {
case 'up': ypos &= 0 ? 0 : ypos--; break;
case 'right': xpos &= mx ? mx : xpos++; break;
case 'down': ypos &= my ? my : ypos++; break;
case 'left': xpos &= 0 ? 0 : xpos--; break;
setCss(tank, 'left', xpos + 'px');
setCss(tank, 'top', ypos + 'px');
var scope = this;
var speed = this.
var repeat = function () {
scope.move(dir);
if (!this.tid) {
this.tid = setTimeout(repeat, speed);
//移动结束
this.activeState = 0;
Tank.prototype.stop = function () {
clearTimeout(this.tid);
this.tid = null;
var tank = new Tank('me', 'up', 100, 100);
tank.init();
function getDir(code) {
if (code == '87' || code == '119') {
return 'up';
if (code == '100' || code == '68') {
return 'right';
if (code == '115' || code == '83') {
return 'down';
if (code == '97' || code == '65') {
return 'left';
return null;
document.onkeydown = function (evt) {
evt = (evt) ? evt : window.
var keyCode = evt.keyC
var charCode = evt.charC
var dir = getDir();
if (keyCode) {
dir = getDir(keyCode.toString());
if (charCode) {
dir = getDir(charCode.toString());
tank.move(dir);
evt.preventDefault();
return false;
document.onkeyup = function (evt) {
tank.stop();
document.onkeypress = function (evt) {
evt = (evt) ? evt : window.
var keyCode = evt.keyC
var charCode = evt.charC
var dir = getDir();
if (keyCode) {
dir = getDir(keyCode.toString());
if (charCode) {
dir = getDir(charCode.toString());
tank.move(dir);
evt.preventDefault();
return false;
209 &/body&
210 &/html&
1 Tank.prototype.move = function (dir) {
if (this.activeState != 0) return false; //正在运动我们便不管他
this.activeState = 1; //将当前状态设置为正在运动
if (this.direction != dir) {
this.direction =
this.setDirection(dir);
//处理运动中的定时器
if (this.tid) {
clearTimeout(this.tid);
this.tid = null;
var state = this.dirState[dir];
var tank = this.
if (state == 1 || state == -1) {
var strPos = getCss(tank, 'backgroundPosition');
var arrPos = strPos.split(' ');
var l = arrPos ? arrPos[0] : 0;
var t = arrPos ? arrPos[1] : 0;
var curPos = parseInt(l);
var top = parseInt(t);
var po = curPos - (43) * (state);
var curPos = po + 'px ' + t + 'px';
setCss(tank, 'backgroundPosition', curPos);
var xpos = getCss(tank, 'left') ? getCss(tank, 'left') : 0;
var ypos = getCss(tank, 'top') ? getCss(tank, 'top') : 0;
xpos = parseInt(xpos);
ypos = parseInt(ypos);
var mx = MyGlobal.mapWidth - 32;
var my = MyGlobal.mapHeight - 32;
switch (dir) {
case 'up': ypos &= 0 ? 0 : ypos--; break;
case 'right': xpos &= mx ? mx : xpos++; break;
case 'down': ypos &= my ? my : ypos++; break;
case 'left': xpos &= 0 ? 0 : xpos--; break;
setCss(tank, 'left', xpos + 'px');
setCss(tank, 'top', ypos + 'px');
var scope = this;
var speed = this.
var repeat = function () {
scope.move(dir);
if (!this.tid) {
this.tid = setTimeout(repeat, speed);
//移动结束
this.activeState = 0;
这个代码其实没什么好说的，只不过我们每次运动后会改变其方向的状态值，为的就是不停的改变背景，以达到坦克前进的效果。
运行效果（此处可运行）：
于是我们简单的完成了坦克移动的功能了，现在我们来考虑炮弹的问题了。
上面的是坦克对象，我们现在来看看炮弹对象，我们将坦克，炮弹，砖块各自看做一个对象，这样不知道面向对象没。。。
1 //子弹对象
2 var Bullet = function (dir) {
this.direction = dir ? dir : 'up';
this.speed = 5;
var factor = 0;
this.tid = null;
this.activeState = 0;
this.blastState = 0; //爆炸状态 0-4
this.blastReason = 0; //爆炸原因 0一般爆炸，4 集中坦克 3......
this.x = 0;
this.y = 0;
if (dir) {
switch (dir) {
case 'up': factor = 0; break;
case 'right': factor = 1; break;
case 'down': factor = 2; break;
case 'left': factor = 3; break;
var el = document.createElement('div');
var bp = 'background-position :' + (0 - 8 * factor) + 'px
el.setAttribute('style', bp);
el.setAttribute('class', 'bullet');
27 Bullet.prototype.move = function () {
var bullet = this.
var dir = this.
var xpos = getCss(bullet, 'left') ? getCss(bullet, 'left') : 0;
var ypos = getCss(bullet, 'top') ? getCss(bullet, 'top') : 0;
xpos = parseInt(xpos);
ypos = parseInt(ypos);
var mx = MyGlobal.mapWidth - 8;
var my = MyGlobal.mapHeight - 8;
var stop = false;
switch (dir) {
case 'up':
if (ypos &= 0) {
stop = true;
case 'right':
if (xpos &= mx) {
stop = true;
case 'down':
if (ypos &= my) {
stop = true;
case 'left':
if (xpos &= 0) {
stop = true;
setCss(bullet, 'left', xpos + 'px');
setCss(bullet, 'top', ypos + 'px');
var scope = this;
var speed = this.
var repeat = function () {
scope.move();
if (this.tid) {
clearTimeout(this.tid);
this.tid = null;
if (!this.tid) {
this.tid = setTimeout(repeat, speed);
if (stop) {
this.blast();
91 Bullet.prototype.blast = function (reason) {
var el = this.
var x = this.x - 28;
var y = this.y - 28;
setCss(el, 'left', x + 'px');
setCss(el, 'top', y + 'px');
var scope = this;
setAttr(el, 'class', 'Boom');
setCss(scope.el, 'backgroundPosition', '0 0');
var action = function () {
if (scope.blastState & (scope.blastReason + 1)) {
var b = scope.blastState * 64 * (-1);
b = b + 'px 0';
setCss(scope.el, 'backgroundPosition', b);
scope.blastState++;
setTimeout(action, 20);
getById('map').removeChild(scope.el);
if (reason) {
this.blastReason =
setTimeout(action, 20);
clearTimeout(this.tid);
this.tid = null;
this.blastState
完整代码：
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"&
&title&&/title&
&style type="text/css"&
.map { background: gray; border: 1px solid black; position: relative; margin: 50px auto; width: 416px; height: 416px; }
.tank { background-image: url("/blog/306/-eaa9adabee3e.gif"); background-repeat: no-repeat; overflow: hidden; position: absolute; width: 32px; height: 32px; z-index: 3; }
.bullet { background-image: url('/blog/306/de29d9e0cfcb47bff652.gif'); width: 8px; height: 8px; position: absolute; z-index: 4; background-repeat: no-repeat; }
.Boom { background-image: url('/blog/306/e6fba9cde86d0b8aac6.png'); width: 64px; height: 64px; position: absolute; z-index: 4; }
11 &/head&
&div class="map" id="map"&
&div id="me" class="tank"&
&script type="text/javascript"&
function getById(id) {
return !id ? null : document.getElementById(id);
function getAttr(el, k) {
var v = el.getAttribute[k] ? el.getAttribute[k] : null;
function setAttr(el, k, v) {
el.setAttribute(k, v);
function getCss(el, k) {
if (el.style[k]) {
return el.style[k];
return null;
function setCss(el, k, v) {
if (!el.style || el.style.length == 0) {
el.style = {};
el.style[k] =
var MyGlobal = {
mapWidth: 416,
mapHeight: 416,
width: 448,
height: 512
//子弹对象
var Bullet = function (dir) {
this.direction = dir ? dir : 'up';
this.speed = 5;
var factor = 0;
this.tid = null;
this.activeState = 0;
this.blastState = 0; //爆炸状态 0-4
this.blastReason = 0; //爆炸原因 0一般爆炸，4 集中坦克 3......
this.x = 0;
this.y = 0;
if (dir) {
switch (dir) {
case 'up': factor = 0; break;
case 'right': factor = 1; break;
case 'down': factor = 2; break;
case 'left': factor = 3; break;
var el = document.createElement('div');
var bp = 'background-position :' + (0 - 8 * factor) + 'px
el.setAttribute('style', bp);
el.setAttribute('class', 'bullet');
Bullet.prototype.move = function () {
var bullet = this.
var dir = this.
var xpos = getCss(bullet, 'left') ? getCss(bullet, 'left') : 0;
var ypos = getCss(bullet, 'top') ? getCss(bullet, 'top') : 0;
xpos = parseInt(xpos);
ypos = parseInt(ypos);
var mx = MyGlobal.mapWidth - 8;
var my = MyGlobal.mapHeight - 8;
var stop = false;
switch (dir) {
case 'up':
if (ypos &= 0) {
stop = true;
case 'right':
if (xpos &= mx) {
stop = true;
case 'down':
if (ypos &= my) {
stop = true;
case 'left':
if (xpos &= 0) {
stop = true;
setCss(bullet, 'left', xpos + 'px');
setCss(bullet, 'top', ypos + 'px');
var scope = this;
var speed = this.
var repeat = function () {
scope.move();
if (this.tid) {
clearTimeout(this.tid);
this.tid = null;
if (!this.tid) {
this.tid = setTimeout(repeat, speed);
if (stop) {
this.blast();
Bullet.prototype.blast = function (reason) {
var el = this.
var x = this.x - 28;
var y = this.y - 28;
setCss(el, 'left', x + 'px');
setCss(el, 'top', y + 'px');
var scope = this;
setAttr(el, 'class', 'Boom');
setCss(scope.el, 'backgroundPosition', '0 0');
var action = function () {
if (scope.blastState & (scope.blastReason + 1)) {
var b = scope.blastState * 64 * (-1);
b = b + 'px 0';
setCss(scope.el, 'backgroundPosition', b);
scope.blastState++;
setTimeout(action, 20);
getById('map').removeChild(scope.el);
if (reason) {
this.blastReason =
setTimeout(action, 20);
clearTimeout(this.tid);
this.tid = null;
this.blastState
//坦克对象
var Tank = function (id, dir, x, y) {
this.el = getById(id);
this.direction = dir ? dir : 'up';
this.tid = null;
this.speed = 10;
//坦克活动状态 0 未活动 1 正在活动
this.activeState = 0;
this.x = x ? x : 100;
this.y = y ? y : 200;
this.dirState = {
Tank.prototype.init = function () {
var dir = this.
var tank = this.
setCss(tank, 'left', this.x + 'px');
setCss(tank, 'top', this.y + 'px');
this.setDirection(dir);
Tank.prototype.setDirection = function (dir) {
var tank = this.
if (dir == 'up') {
setCss(tank, 'backgroundPosition', '0 0');
if (dir == 'right') {
setCss(tank, 'backgroundPosition', '-5px -36px');
if (dir == 'down') {
setCss(tank, 'backgroundPosition', '0 -73px');
if (dir == 'left') {
setCss(tank, 'backgroundPosition', '0 -105px');
this.dirState[dir] = 1;
Tank.prototype.move = function (dir) {
if (this.activeState != 0) return false; //正在运动我们便不管他
this.activeState = 1; //将当前状态设置为正在运动
if (this.direction != dir) {
this.direction =
this.setDirection(dir);
//处理运动中的定时器
if (this.tid) {
clearTimeout(this.tid);
this.tid = null;
var state = this.dirState[dir];
var tank = this.
if (state == 1 || state == -1) {
var strPos = getCss(tank, 'backgroundPosition');
var arrPos = strPos.split(' ');
var l = arrPos ? arrPos[0] : 0;
var t = arrPos ? arrPos[1] : 0;
var curPos = parseInt(l);
var top = parseInt(t);
var po = curPos - (40) * (state);
var curPos = po + 'px ' + top + 'px';
setCss(tank, 'backgroundPosition', curPos);
this.dirState[dir] = state == 1 ? -1 : 1;
var xpos = getCss(tank, 'left') ? getCss(tank, 'left') : 0;
var ypos = getCss(tank, 'top') ? getCss(tank, 'top') : 0;
xpos = parseInt(xpos);
ypos = parseInt(ypos);
var mx = MyGlobal.mapWidth - 32;
var my = MyGlobal.mapHeight - 32;
switch (dir) {
case 'up': ypos &= 0 ? 0 : ypos--; break;
case 'right': xpos &= mx ? mx : xpos++; break;
case 'down': ypos &= my ? my : ypos++; break;
case 'left': xpos &= 0 ? 0 : xpos--; break;
setCss(tank, 'left', xpos + 'px');
setCss(tank, 'top', ypos + 'px');
var scope = this;
var speed = this.
var repeat = function () {
scope.move(dir);
if (!this.tid) {
this.tid = setTimeout(repeat, speed);
//移动结束
this.activeState = 0;
Tank.prototype.stop = function () {
clearTimeout(this.tid);
this.tid = null;
Tank.prototype.fire = function () {
var bullet = new Bullet(this.direction);
var l = (this.x + 12) + 'px';
var t = (this.y + 12) + 'px'
top:12left:12
var el = bullet.
setCss(el, 'top', t);
setCss(el, 'left', l);
bullet.y = this.y + 12;
bullet.x = this.x + 12;
getById('map').appendChild(el);
bullet.el = this.el.getElementsByTagName('div')[0];
bullet.move();
//实际应用
var tank = new Tank('me', 'right', 100, 100);
tank.init();
function getDir(code) {
if (code == '87' || code == '119') {
return 'up';
if (code == '100' || code == '68') {
return 'right';
if (code == '115' || code == '83') {
return 'down';
if (code == '97' || code == '65') {
return 'left';
return null;
document.onkeydown = function (evt) {
evt = (evt) ? evt : window.
var keyCode = evt.keyC
var charCode = evt.charC
var dir = getDir();
if (keyCode) {
dir = getDir(keyCode.toString());
if (charCode) {
dir = getDir(charCode.toString());
tank.move(dir);
if (charCode == '106' || keyCode == '74') {
tank.fire();
evt.preventDefault();
return false;
document.onkeyup = function (evt) {
tank.stop();
document.onkeypress = function (evt) {
evt = (evt) ? evt : window.
var keyCode = evt.keyC
var charCode = evt.charC
var dir = getDir();
if (keyCode) {
dir = getDir(keyCode.toString());
if (charCode) {
dir = getDir(charCode.toString());
tank.move(dir);
if (charCode == '106' || keyCode == '74') {
tank.fire();
evt.preventDefault();
return false;
365 &/body&
366 &/html&
效果演示（可运行）J可以发子弹，没有子弹就到高版本浏览器去试试
好了，今天到此为止，后面点我们来一步步修改代码，让代码变得&面向对象&，有机会便加上砖块和其它东东。
今天的代码不用说，千疮百孔，无论是性能方面，或者代码优雅度，还是神马都一团糟糕，但是经过几个小时的奋战，我现在脑子已经不好使了，只好暂时停一下。
我们后面点优化吧。
阅读(...) 评论()