重写经典游戏之【坦克1998】

2024-04-27 14:03:13

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 果果无敌坦克团 - 主坦克用方向键移动，空格发射。右坦克用IJKL键移动，F键发射。每辆坦克一次可发射2颗炮弹</title>
<base href="http://imgqun.QQ.com/cgi-bin/">
<style>
html,body{background:#16242C url(img?uuid=20b6767c202cdabf6049e98539e8df0de6);cursor:default;height:100%;overflow:hidden;margin:0;color:#eee;text-align:center;}
#popTxt{padding:10px;font-size:100px;font-family:Arial;position:relative; top:36%; color:#eee;}
#popTxt span{position:absolute;top:10px;left:-1px;color:#990000;}
#iMap{position:absolute;left:0;top:0;z-index:999}
#iMap span{width:20px;height:20px;overflow:hidden;font-size:10px;display:block; float:left;}
#iMap span.steel{background:url(img?uuid=209cd82abf19beb3cea0813ee2f8b22fe2) no-repeat;}
#iMap span.tod{background:url(img?uuid=20690e6da6086cd9e48454280ddf23e752) no-repeat;}
#iMap span.wall{background:url(img?uuid=2045d8a2da5eb90d617dea8e9d63868fad) no-repeat;}
#iMap span.sea{background:url(img?uuid=203bdf0471d7a28b695f72b36e96142360) no-repeat;}
#iMap span.podium1{background:url(img?uuid=20a39e96fc031bbbbb4c321d5eafcd1302) no-repeat;}
#iMap span.podium2{background:url(img?uuid=20a39e96fc031bbbbb4c321d5eafcd1302) no-repeat -20px 0;}
#iMap span.podium3{background:url(img?uuid=20a39e96fc031bbbbb4c321d5eafcd1302) no-repeat 0 -20px;}
#iMap span.podium4{background:url(img?uuid=20a39e96fc031bbbbb4c321d5eafcd1302) no-repeat -20px -20px;}
#gameMap{
position:absolute;background:#000;
border:10px outset #C65D05;
width:520px;height:520px;
top:50%;margin-top:-270px;
left:50%;margin-left:-270px;
}
#gameInfo{
position:absolute;background:#993300;
border:2px outset #000;
top:50%;margin-top:-270px;
left:50%;margin-left:280px;
}
.shell{
margin:10px;
width:200px; height:516px;
background:#996600;
border:1px inset #6C120D;
text-align:left;
color:#333; font-family:Arial;
}
.shell div{margin:10px; }
h3{
color:#FFCC00;
text-align:center;
margin:3px;
background:#990000; padding:5px;
border:1px outset #900;font-family:Arial;
font-size:16px;
}
#tanks{
margin:3px;
}
.etank,.tank{
width:40px;height:40px;background:url(img?uuid=20e929fda8eea50b0f6b2d692c55714f69) no-repeat;
position:absolute;top:480px;left:180px;z-index:99;
}
.etank{
background:url(img?uuid=20aff2b05432b6b9b82aa4ddb12bb21323) no-repeat;
}
.ball{
width:40px;height:40px;overflow:hidden;font-size:4px;background:url(img?uuid=20512d767f66e46b03e4f2b4cdefb77c4e) no-repeat;
position:absolute;z-index:1000;
}
#win{z-index:0}
#goal1{color:#eee;}
#goal2{color:#006600}
#tanks{overflow:hidden; }
#tanks span{
width:40px;height:40px;background:url(img?uuid=20e929fda8eea50b0f6b2d692c55714f69) no-repeat; display:block; float:left; margin:3px;
}
#myTanks{
position:absolute; bottom:0;left:20px;color:#000;font-weight:bold;
}
#myCount1,#myCount2{
height:40px;line-height:40px; background:url(img?uuid=20e929fda8eea50b0f6b2d692c55714f69) no-repeat; text-indent:50px;
font-size:18px;font-weight:bold;color:#003333;
}
#stageIndex{font-size:20px;color:#FFFF00;padding:10px; }
</style>
</head>

</body>

Game.begin=function($){/* --------------------- Tank1998 Begin-------------------------------------------------------- */

/*
map Data
*/
tankMap=[
/*NO.1*/'0,0,001100110011001100110011,001100110011001100110011,001100110011001100110011,001100110011001100110011,001100110011221100110011,001100110011221100110011,001100110011001100110011,001100110011001100110011,001100110000000000110011,0000000000110011,0000000000110011,11001111000000000011110011,22001111000000000011110022,0000000000110011,0000000000111111,001100110011111100110011,001100110011001100110011,001100110011001100110011,001100110011001100110011,001100110000000000110011,001100110000000000110011,001100110001111000110011,000000000001561,000000000001781'
/*NO.2*/,'0000002200000022,0000002200000022,001100220000001100110011,001100220000001100110011,001100000000111100112211,001100000000111100112211,00000011000000000022,00000011000000000022,33000011000022000011331122,33000011000022000011331122,3333000000110000220033,3333000000110000220033,001111113333332200003311,001111113333332200003311,000000223311001100110011,000000223311001100110011,221100220011001100000011,221100220011001100000011,001100110011111100112211,001100110011111100112211,0011001100111111,0011001100111111,001100000000000000110011,001100000001111000110011,001100110001561000111111,001100110001781000111111'
/*NO.3*/,'000000001100000011,000000001100000011,0033333311,00333333110000000000222222,00333333,11333333,00333333000000110011111110,00333333000000110011111110,333333331111111100110001,333333331111110000110001,333333330000110000000001,333333330000110000000001,003300000000222222000033,003300000000222222000033,00000000000000000033333333,00110011000000000033333333,11100111100111111133333333,11100111100100000033333333,00000000001100000033333333,00000000001100111133333333,110000200000001111333333,110000200000000000333333,111100200000000000333333,111100200001111000333333,22111100000156100011,22111100000178100011'
/*NO.4*/,'003333000000000000000033,003333000000000000000033,33330000001100000000000033,33330000111111111100000033,33000001111111111111000022,3300000111111111111111,22000011111111111111111,00000011111111111111111,00000111000000111111001,00000100000000001111001,0000010020002000111,0000010020002000111,44001100000000001110004444,44001100111100001110004444,00001111111111111111,00001111111111111111,000111111111111111111,001111111111111111111,001111111111111111111,00000001111111111,00111100111111110011110033,00111111001111001111110033,33000000000000001111003333,33000000000111100000003333,22330000000156100000333322,22330000000178100000333322'
/*NO.5*/,'000000001111,000000001111,0000000011000000222222,2200110011000000000022,22001100000011,22001100000011,11001111110011110044440044,11001111110011110044440044,11000000110000000044,00000000000000000044,00000000444400444444,00001100444400444444,11110000441100111000001111,11110000441100111000001111,0000000044000000000022,0000000044000000000022,444444004400220011002,444444004400220011002,00000000000000000000201111,00000011110000000000201111,000000001111111111,00000000110000001111,1111110000000000001111,1111000000011110000011,110000000001561,000000000001781'
];

var battleField=[];/* 战场网格 */
var mainKey=false;/* 独占的主键 */
var subKey=false;/* 独占的子键 */
var autoMove=function(){};
/*
crate gameMap
*/
var reload=function(w,h,shell){
var stage=Math.max(1,this.stage)||1;
if(stage>tankMap.length)stage=1;/* 关卡设置与检测 */
$.getElementById("stageIndex").innerHTML=Game.stage;
var map=tankMap[stage-1].split(',');
shell.innerHTML='';
var View=Jc('DIV','iMap',false,shell);
for (var i=0, html=[];i<h;i++ ){/* 游戏场景视图生成 */
  var line=Jc('DIV',0,0,View);
  battleField[i]=[];/* save cells info */
  for (var j=0,tmp=[];j<w;j++ ){
   var v=map[i]&&map[i].charAt(j)||0;/* 逐字符读取贴图数据 */
   var CSS=['empty','wall','steel','tod','sea','podium1','podium2','podium3','podium4'][v];
   var cell=Jc('SPAN',0,css,line);
   battleField[i][j]={'cell':cell,type:v,tank:false,ball:false};/* 使用type记录撞击特性,tank记录是否有停放坦克 */
  }
};
var tanksHTML=[];
for (var i=0;i<Game.enemy;i++ ) {
  tanksHTML.push('<span></span>');
};
$.getElementById("tanks").innerHTML=tanksHTML.join('');
function Jc(type,id,className,parentNode){/* 生成UI的快捷函数 */
  var J=document.createElement(type);
  if(id)J.id=id;
  if(className)J.className=className;
  return parentNode.appendChild(J);
};
if(window.ActiveXObject)/* IE6 下禁止重载背景 */
  $.execCommand("BackgroundImageCache", false, true);
};
reload.call(this,26,26,$.getElementById('win'));

/*
Mover Class
*/
Mover=function(){}
Mover.PRototype={
move:function(dir){
  if(this.lock||!this.use){return;};/* 停用或者尚在步进中,操作无效 */
  if(this.army=='enemy'&&Math.random()*100>96)/* 敌机有4%的机率会中途变换方向 */
   return this.dir=Math.max(0,Math.min(3,parseInt(Math.random()*5)-1));
  if(isNaN(dir))dir=this.dir;
  var J=/[02]/.test(dir)?'top':'left',view=this.UI.style,This=this,i=0,INI=this.type=='ball'?[5,2]:[4,3];/* speed ini */
  view.backgroundPosition='0 -'+dir*40+'px';/* change direction 移动对象转向 */
  this.dir=dir;

if(this.hit())return this.onhit();/* hit test----------------- */
/* ----------------*/

  this.lock=true;/* 加锁 */
  var subMove=setInterval(function (){/* 阶段移动 20px */
   view[J]=parseInt(view[J])+INI[0]*(/[21]/.test(dir)?1:-1)+'px';/* 移动 */
   if(i++>INI[1]){
    clearInterval(subMove);
    This.lock=false;/* 解锁,允许再次步进 */
    This.freeGrid();/* 放弃原先占位 */
    This.x=Math.round(This.UI.offsetLeft/20);/* 保存网格坐标 */
    This.y=Math.round(This.UI.offsetTop/20);
    This.useGrid();/* 登记当前占位 */
    if(This.type=='ball'&&This.use)This.move(dir);/* 使用中的炮弹自动连续步进 */
   }
  },This.speed);
}

,hit:function(){
  if(this.dir==0&&this.y==0||
   this.dir==1&&this.x==24||
   this.dir==2&&this.y==24||
   this.dir==3&&this.x==0
  )return true;/* 场景越界 */

  var x=this.x,y=this.y,a,b;
  switch(this.dir){/* test cells */
   case 0:/* up 探测 */
    a=battleField[y-1][x];
    b=battleField[y-1][x+1];
    break;
   case 1:/* right 探测 */
    a=battleField[y][x+2];
    b=battleField[y+1][x+2];
    break;
   case 2:/* down 探测 */
    a=battleField[y+2][x];
    b=battleField[y+2][x+1];
    break;
   case 3:/* left 探测 */
    a=battleField[y][x-1];
    b=battleField[y+1][x-1];
    break;
  };

  if(a.tank||b.tank){/* 先测试是否停有其它坦克 */
   if(this.type=='ball'){/* 击中坦克 */
    if((a.tank&&a.tank.army!=this.owner.army)){ this.update(a);return true};/* 子弹受阻即爆 */
    if((b.tank&&b.tank.army!=this.owner.army)){this.update(b);;return true};/* 子弹受阻即爆 */
   }else{
    return true;/* 坦克相撞 */
   }
  };

  if(a.ball&&b.ball){/* 先测试是否掠过其它炮弹(用&&表示全对齐,不包含部分交叉) */
   if(this.type=='ball'){/* 炮弹对撞 */
    if(a.ball.owner.army!=this.owner.army){a.ball.onhit();return true};/* 两颗子弹同时爆炸 */
    if(b.ball.owner.army!=this.owner.army){b.ball.onhit();return true};/* 两颗子弹同时爆炸 */
   }
  };

if(a.type==0&&b.type==0)return;/* 空地不撞击 */

  if(/[1245678]/.test(a.type)||/[1245678]/.test(b.type)){/* 前方非空非迷彩 */
   if(this.type=='ball'){/* 撞击者为子弹, 砖块标记为空 */
    this.free(a);
    this.free(b);
   };
   if(this.type=='ball'&&(a.type==4||b.type==4))return false;/* 击中大海无效 */
   return true;/* 确定有阻挡 */
  };

}
,onhit:function(){}

,free:function(net){/* 使用偏移方式来防止渲染效率恶化 */
  if(/[5678]/.test(net.type))Game.end=true;/* 击中指挥部结束 */
  if(net.type!=1)return;/* 不是砖块不变化 */
  net.cell.style.backgroundPosition='-10000px 0';
  net.type=0;
}

,useGrid:function(isUse){/* 占据网格 */
  var X=this.type;/* 坦克与炮弹即时停放记录 */
  if(!this.use)return;
  if(isUse===undefined)isUse=this;/* 无参数时记录自已 */
  var x=this.x,y=this.y;
  battleField[y][x][X]=isUse;
  battleField[y+1][x+1][X]=isUse;
  battleField[y][x+1][X]=isUse;
  battleField[y+1][x][X]=isUse;
}
,freeGrid:function (){/* 释放网格 */
  this.useGrid(false);
}
,update:function (a){
  if(this.owner.name=='mainTank'){
   var J=$.getElementById("goal1");
   Game.val1+=200;
   J.innerHTML=Game.val1;
  };
  if(this.owner.name=='subTank'){
   var J=$.getElementById("goal2");
   Game.val2+=200;
   J.innerHTML=Game.val2;
  };
  if(a.tank.name=='mainTank'){
   var J=$.getElementById("myCount1");
   Game.play1-=1;
   J.innerHTML=Game.play1;
  };
  if(a.tank.name=='subTank'){
   var J=$.getElementById("myCount2");
   Game.play2-=1;
   J.innerHTML=Game.play2;
  };
  if(Game.play1==0&&Game.play2==0)Game.end=true;
  a.tank.reLoad();
}
}
/*
Tank Class
*/
var Tank=function (x,y,speed,ballSpeed,dir,army){
var UI=document.createElement('DIV');
UI.className="tank";
this.type='tank';
this.firstPos={'x':x,'y':y,'dir':dir||0};/* 坦克出口位置, 击中后重载坦克用 */
this.x=x;
this.y=y;
this.army=army||'our';

if(army=='enemy'){
  UI.className="etank";
  this.onhit=function (){/* 敌机受阻后暂停0.5秒随机转向 */
   var This=this;
   setTimeout(function (){
    This.dir=Math.max(0,Math.min(3,parseInt(Math.random()*5)-1));
   },500);
  };
  Tank.autoClip.push(this);/* 加入群机驱动 */
};

};
Tank.prototype.relive=function (){
  this.x=this.firstPos.x;/* 复位网格坐标 */
  this.y=this.firstPos.y;
  this.dir=this.firstPos.dir;
  this.useGrid();/* 网格占用声明 */
  this.UI.style.left=this.firstPos.x*20+'px';/* 复位物理坐标 */
  this.UI.style.top=this.firstPos.y*20+'px';
  this.UI.style.backgroundPosition='0 -'+this.dir*40+'px';/* 对象初始朝向 */
  this.use=true;/* 标记为可用 */
}
/*
爆炸特效类
*/
Fx=function(file,step){
var UI=document.createElement('DIV');
UI.style.cssText='position:absolute;width:60px;height:60px;overflow:hidden;background:url('+file+') no-repeat 0 0;z-index:1009;';
this.UI=UI;
this.speed=50;
this.step=step||1;
this.moveTo=function(x,y){
  this.UI.style.top=y+'px';
  this.UI.style.left=x+'px';
  return this;
}
var This=this;
this.play=function (){
  var i=0;
  var FxTimer=setInterval(function (){
   This.UI.style.backgroundPosition='0 -'+i++*60+'px';
   if(i==This.step){
    clearInterval(FxTimer);
    This.moveTo(-1000,0);
   }
  },This.speed)
}
this.moveTo(-1000,0);
$.getElementById('gameMap').appendChild(UI);
};

var iFx=new Fx('img?uuid=2032108e2fd3fe19fe2d9e62dbfac93e67',8);

/*
Ball Class 炮弹类
*/
var Ball=function(owner/* Tank class */){
var UI=document.createElement('DIV');
UI.className="ball";
UI.style.top='0';
UI.style.left='-1000px';/* hidden to srceen left */
this.UI=$.getElementById('gameMap').appendChild(UI);
this.type='ball';
this.use=false;/* 是否使用中, 不在弹夹内 */
this.lock=false;
}
Ball.prototype=new Mover;/* 继承自Mover类, 以拥有移动与撞击自检功能 */
/*
Magazine clip 弹夹类
*/
MagazineClip=function(count){
this.clip=[];
var This=this;
for (var i=0;i<count;i++ ) {/* 生成count个炮弹 */
  var ball=new Ball;
  ball.onhit=function (){/* 实现撞击事件接口 */
   var x=y=0;
   switch (this.dir){/* 效果位置调整 */
    case 0:x=-.5;y=-2;break;
    case 1:x=1;y=-0.5;break;
    case 2:x=-.5;y=1;break;
    case 3:x=-2;y=-.5;
   }
   iFx.moveTo((this.x+x)*20,(this.y+y)*20).play();/* 爆炸效果回放 */
   this.freeGrid();
   this.UI.style.left='-1000px';/* 炮弹回收, 存放到屏幕外 */
   this.use=false;/* 状态切换到非使用中 */
   this.owner.sendCount--;/* 刷新已发射量 */
   This.clip.push(this);/* 再次装入夹中循环利用 */
  }
  this.clip.push(ball);
}
this.shot=function(owner){/* 将炮弹装入坦克 */
  if(!owner.use)return;
  if(owner.sendCount==owner.max)return;/* 如果发射量满,放弃操作 */
  var ball=this.clip.pop();/* 从弹夹中弹出一个炮弹 */
  if(ball==undefined)return;/* 用光了则填弹失败 */
  owner.sendCount++;/* 计数 */
  ball.owner=owner;
  ball.x=owner.x;/* 虚拟网格位置 */
  ball.y=owner.y;
  ball.dir=owner.dir;
  ball.UI.style.backgroundPosition='0 -'+ball.dir*40+'px';/* 炮弹方向视图 */
  var J=battleField[ball.y][ball.x].cell,Jx=ball.UI.style;
  Jx.top=J.offsetTop+'px';/* 物理位置 */
  Jx.left=J.offsetLeft+'px';
  ball.speed=owner.ballSpeed||2;/* 炮弹定速 */
  ball.use=true;
  ball.move(owner.dir);/* 炮弹开始发射 */
}
}
/*
创建角色 Tank(x,y,坦克速率,子弹速度(默认2),初始朝向(0-3),敌友识别番号(默认our))
*/
var ballClip=new MagazineClip(20);/* 弹夹(所有坦克共用) */
var mainTank=new Tank(9,24,30);/* 主坦克 */
mainTank.name='mainTank';
var subTank=new Tank(15,24,30);/* 子坦克 */
subTank.name='subTank';
/* 敌方坦克 */
var enemy1=new Tank(0,0,30,10,2,'enemy');
var enemy2=new Tank(12,0,30,10,2,'enemy');
var enemy3=new Tank(24,0,30,10,2,'enemy');

/*
按键按下
*/
window.onkeydown=
$.body.onkeydown=function (e){
var J=(window.event||e).keyCode;
if(/^(37|38|39|40)$/.test(J))mainKey=J;/* 记录主坦克移动键 */
if(/^(73|74|75|76)$/.test(J))subKey=J;/* 记录子坦克移动键 AWDS*/
if(J==32)ballClip.shot(mainTank);/* 主坦克发射空格*/
if(J==70)ballClip.shot(subTank);/* 主坦克发射 1键*/
};
/*
按键弹起
*/
window.onkeyup=
$.body.onkeyup=function (e){
var J=(window.event||e).keyCode;
if(J==mainKey)mainKey=false;/* 主坦克当前移动键终止 */
if(J==subKey)subKey=false;/* 子坦克当前移动键终止 */
};

/*
长定时器监听控制键
*/
var keyLister=setInterval(function(){
if(Game.end){
  clearInterval(keyLister);/* 游戏结束 */
  document.body.innerHTML='<strong id="popTxt">GAME OVER</strong>';
};
if(Game.win){
  Game.stage++;/* 下一关 */
  Game.end=false;
  Game.win=false;
  Game.enemy=Game.full;
  Game.kill=0;

  reload.call(Game,26,26,$.getElementById('win'));
  for (var i=0;i<Tank.autoClip.length;i++ ) {
   Tank.autoClip[i].relive();
  };
  if(Game.play1>0){
   $.getElementById("myCount1").innerHTML=++Game.play1;
   mainTank.relive();
  }
  if(Game.play2>0){
   $.getElementById("myCount2").innerHTML=++Game.play2;
   subTank.relive();
  };
};
if(/^(37|38|39|40)$/.test(mainKey))mainTank.move([3,0,1,2][mainKey-37]);/* 所有主移动键 */
if(/^(73|74|75|76)$/.test(subKey)){/* 所有子移动键 */
  subTank&&subTank.move({'73':0,'76':1,'75':2,'74':3}[subKey]);
}
Tank.auto();
},19);