<!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">
<title>山寨坦克大战... 主坦克方向:WASD,空格发射. 副坦克方向:上下左右.L发射.</title>
<script src="jquery-1.3.2.min.js"></script>
<script src="map.js"></script>
<script>
~function(){
var mainTank; //主坦克
var subTank; //副坦克
var eTanks = []; //敌坦克
var plays; //单人或者双人模式
var eTankLife = 20; //敌坦克总数量
var level = 1; //当前关数
var eTanksLength = 3; //每次显示的敌坦克数量
var maps = [map1, map2, map3]; //地图
var map; //当前地图
var u; //长定时器
var xs = [[0,12,22], [0, 8, 16, 22], [0, 6, 12, 18, 22] ];
var Gb = {
attr : function(){
if (arguments.length == 1){
return Gb[arguments[0]];
}else if (arguments.length == 2){
Gb[arguments[1]] = arguments[0]
return Gb;
}
}
}
//--------------------------------------Mover类---------------------------------------------
function Mover(){};
Mover.prototype = {
locked : false //是否允许移动
,stepLocked : false //移动间隔锁
,der : false //移动方向
,obj : null //占位,子类对应的dom
,speed : 20 //移动速度
,moveRepeat : false //是否重复移动,默认否
,setXy : function(y, x){this.obj.css({top:y, left:x}); return this;}
,useGird : function(){ //占据网格
var x = this.x, y = this.y;
map[y][x].type = map[y][x+1].type = map[y+1][x].type = map[y+1][x+1].type = this.type;
map[y][x].span = map[y][x+1].span = map[y+1][x].span = map[y+1][x+1].span = this;
}
,freeGird : function(){ //释放网格
var x = this.x, y = this.y;
map[y][x].type = map[y][x+1].type = map[y+1][x].type = map[y+1][x+1].type = 0;
return this;
}
,move : function(fn){ //移动, fn: 撞击之后触发函数
if (this.stepLocked || this.locked || this.reliveLocked) return; //如果被锁定
if (this.toBorder(this.der, fn)) { //如果撞到边界
return;
}
this.freeGird();
if (this.hit(fn) == 1) return; //如果遇到障碍
this.stepLocked = true; //加锁
var der = this.der, w, d;
switch(der){ //计算下个网格的x,y
case 0: this.x -= 1; w = 'left'; d = -2; break;
case 2: this.x += 1; w = 'left'; d = 2; break;
case 1: this.y -= 1; w = 'top'; d = -2; break;
case 3: this.y += 1; w = 'top'; d = 2; break;
}
this.useGird(); //占据网格
var obj = this.obj.get(0);
for (var i = 0; i < 10; i++){ //移动
var closure = ~function(i, t){
var s = setTimeout(function(){
obj.style[w] = parseInt(obj.style[w]) + d + 'px';
clearTimeout(s);
if (i == 9){
closure = null;
t.stepLocked = false; //移动完成的时候释放移动锁
t.moveRepeat && t.move(fn); //是否重复移动
}
}, i*t.speed)
}(i, this);
}
}
,toBorder : function(der, fn){ //撞到边界
if (der == 1 && this.y == 0 || der == 3 && this.y == 22 || der == 0 && this.x == 0 || der == 2 && this.x == 22) {
if (jQuery.isFunction(fn)) fn();
return true;
}
}
,probe : function(){ //探测
var x = this.x, y = this.y;
var baffles = []; //前方障碍
switch(this.der){
case 0 : baffles[0] = [y, x-1]; baffles[1] = [y+1, x-1]; break; //左
case 2 : baffles[0] = [y, x+2]; baffles[1] = [y+1, x+2]; break; //右
case 1 : baffles[0] = [y-1, x]; baffles[1] = [y-1, x+1]; break; //上
case 3 : baffles[0] = [y+2, x]; baffles[1] = [y+2, x+1]; break; //下
}
return baffles;
}
}
//--------------------------------------------------------坦克--------------------------------------
function Tank(obj, speed, x, y, der){
this.obj = obj; //span
this.type = 5;
this.speed = speed;
this.x = x;
this.y = y;
this.der = der; //移动方向
this.fx = x; //初始x,坦克复活的时候使用
this.fy = y; //初始y
this.fder = der; //初始移动方向
this.clipLength = 3; //弹夹大小,最多存放3个子弹
this.clip = []; //弹夹
this.clipLocked = false; //弹夹锁
this.fireLocked = true;
this.life = 3;
this.exp = []; //爆炸效果
this.invTime = 2000; //无敌时间
this.reliveLocked = false; //复活锁,复活期间不能移动
}
Tank.prototype = new Mover; //继承Mover
Tank.prototype.init = function(){
this.setPos(this.der); //设置坦克方向
this.setXy(this.y*20, this.x*20); //设置位置
this.useGird(this); //占据网格
this.initClip(); //初始化弹夹
if (this.invTime) this.invincible(this.invTime); //无敌
return this;
}
Tank.prototype.initClip = function(){ //初始化弹夹
for (var i = 0;i < this.clipLength; i++) {
this.exp.push($('.explode').eq(0).clone().appendTo(Gb.attr('gameMap'))); //爆炸效果
this.clip.push(new Ball(this, 7));
}
}
Tank.prototype.setPos = function(der){ //设置移动方向
if (der == 0) this.der = 0;
else this.der = der || this.fder;
this.obj.css('background-position', '0px -'+ [3, 0, 1, 2][this.der]*40 +'px');
this.bobDer = der; //记录子弹方向
return this;
}
Tank.prototype.hit = function(){ //碰撞
var baffles = this.probe(); //前方物体
for (var i = 0; i < baffles.length; i++){
var type = map[baffles[i][0]][baffles[i][1]].type;
if ( (/^2|3|4|5|6|7$/).test(type)) return 1; //遇到障碍
if (type == 'speed' || type == 'hide' || type == 'life' || type == 'power' || type == 'defense') {
if (this == mainTank || this == subTank){
Gb.attr('.prop').hide();
Props[type](this); //吃道具
}
}
}
return 0;
}
Tank.prototype.fire = function(){ //开火
if (this.reliveLocked || this.clipLocked == true || this.clip.length <= 0) {
return;
}
this.clipLocked = true; //发射后锁定弹夹
this.clip.pop().init(); //取出一个子弹并发射
var self = this;
setTimeout(function(){ //子弹间隔时间
self.clipLocked = false;
}, 600)
return this;
}
Tank.prototype.relive = function(){ //复活
this.life ? this.life-- : eTankLife--;
if (this.showInfo() == 1){
this.freeGird();
if (this == mainTank){
mainTank = false;
}else if (this == subTank){
subTank = false;
}
return;
};
this.locked = true;
this.der = this.fder;
var me = this;
setTimeout(function(){
me.freeGird();
me.x = me.fx;
me.y = me.fy;
if( me != mainTank && me != subTank ) me.locked = false;
me.reliveLocked = false;
me.clipLocked = false;
me.setXy(me.y*20, me.x*20);
me.setPos(me.fder);
me.useGird();
me.invincible(me == mainTank ? 3000 : 1500);
}, 500);
return this;
}
Tank.prototype.showInfo = function(){
if ((plays == 1 && !mainTank.life) || (plays == 2 && !mainTank.life && !subTank.life)){
setTimeout(function(){ $('#gameOver').show(); return}, 1000);
}
var ary = this == mainTank ? [Gb.attr('P1'), '1P'] : [Gb.attr('P2'), '2P'];
ary[0].html(ary[1]+' * ' +this.life);
if (this.life <= 0) return 1;
}
Tank.prototype.invincible = function(time){ //坦克无敌
this.invTime = time;
var i = 0, me = this;
var u = setInterval(function(){
me.obj[i++ % 2 == 0 ? 'show' : 'hide']();
if (i >= time/150){
me.obj.show();
me.invTime = 0;
clearTimeout(u);
}
}, 150);
}
//---------------------------------------------敌方坦克-----------------------------------------------
var ETank = function(obj, speed, x, y, der){
this.obj = obj; //span
this.speed = speed;
this.x = x;
this.y = y;
this.type = 6;
this.der = der;
this.fx = x;
this.fy = y;
this.fder = der;
this.life = false;
this.clip = []; //弹夹
this.exp = []; //爆炸效果
this.invTime = 0; //无敌状态
}
ETank.prototype = new Tank;
ETank.prototype.showInfo = function(){
$('.etankSam').eq(0).remove();
if (eTankLife <= 0){
if (level == 3){
alert ('没有地图了,算你过关 - -!');
window.location.reload();
return;
}
level++;
setTimeout(function(){mapReload()}, 100);
return 1;
}
if (eTankLife <= eTanksLength-1){
this.freeGird();
return 1;
}
}
ETank.prototype.Ai = function(){
this.move();
var self = this;
var m = Math.round(Math.random()*100);
var ary = $.grep([0,1,2,3,3,2,3,1], function(n, i){
return n != self.der;
});
var len = ary.length;
for (var i = 0 ; i < len ; i++){ //洗牌,下一次的方向
var num = parseInt(Math.random()*len);
var tmp = ary[num];
ary[num] = ary[i];
ary[i] = tmp;
}
var nextDer = ary[0];
if (this.toBorder(this.der) || this.hit() == 1){
var s1 = setTimeout(function(){
self.setPos(nextDer).fire();
self.move();
var s2 = setTimeout(function(){
self.Ai();
clearTimeout(s2);
}, 400)
clearTimeout(s1);
}, 400);
return;
}
if (m < 20){
this.setPos(nextDer).fire();
}
else if (m < 60) this.fire();
var s3 = setTimeout(function(){
self.Ai();
clearTimeout(s3);
}, 200)
}
//----------------------------------------------------------------------------------------------------
//---------------------------------------------------------炮弹---------------------------------------
function Ball(pTank, speed){
this.obj = $('.ball').eq(0).clone().appendTo(Gb.attr('gameMap'));
this.speed = speed;
this.pTank = pTank;
this.type = 10;
this.moveRepeat = true;
}
Ball.prototype = new Mover;
Ball.prototype.init = function(){
this.reviseXy(); var self = this;
this.move(function(){
self.freeGird();
self.explode();
self.recover(); //爆炸并回收子弹
});
self.pTank.useGird(); //还原坦克所占网格
}
Ball.prototype.reviseXy = function(){ //调整子弹位置
var x = this.x = this.pTank.x, y = this.y = this.pTank.y;
this.der = this.pTank.bobDer || 0; //确认子弹发射方向
switch(this.der){
case 0: x -= 1; break; //左
case 1: y -= 1; break; //上
case 2: x += 1; break; //右
case 3: y += 1; break; //下
}
this.setXy(y*20, x*20);
}
Ball.prototype.hit = function(fn){
var ret = 0;
var baffles = this.probe(); //前方物体
for (var i = 0; i < baffles.length; i++){
var y = baffles[i][0], x = baffles[i][1], baffle = map[y][x], type = baffle.type, span = baffle.span;
if (type == 'speed' || type == 'hide' || type == 'life' || type == 'power' || type == 'defense'){ //击中道具
if ($.isFunction(fn)) { fn()}; //爆炸
this.clearUi(y, x, span);
Gb.attr('.prop').hide(); //隐藏物品
return 1;
}
if ((/^2|3|4|5|6|7$/).test(type)) { //爆炸
if (type == 4) {
this.freeGird().recover(); //击中海洋,回收子弹但不爆炸.
return 1;
}
if (type == 6 && this.pTank.type == 6) { //敌方坦克互相击中无效
this.freeGird().recover();
return 1;
}
if (type == 5 || type == 6) {
if (span.invTime) { //如果处在无敌状态
this.freeGird().recover(); //回收子弹但不爆炸.
return 1;
}
if ($.isFunction(fn)) { fn()};
span.obj.hide();
span.reliveLocked = true;
span.invTime = 1; //无敌
span.relive(); //坦克复活
return 1;
}
if ($.isFunction(fn)) { fn()};
if (type == 7) { $('#gameOver').show(); return};
if (type == 2 || (this.type == 11 && type == 3)) {
this.clearUi(y, x, span); //清除砖块
ret = 1;
}
else if (type == 3){
return 1;
}
}
}
return ret;
}
Ball.prototype.explode = function(){ //子弹爆炸
var explode = this.pTank.exp.pop();
if (!explode) return;
var x = this.x, y = this.y, der = this.der;
der == 0 ? x -= 1 : (der == 1 ? y -= 1 : ''); //调整爆炸位置
explode.show().css( {top: y*20, left: x*20} );
var m = Math.random()>.2;
for (var i = 0; i < 8; i++){
var closure = ~function(i, t){
var s = setTimeout(function(){
explode.css('background-position', '0px -'+i*60+'px');
if (i == 7) {
explode.hide();
t.pTank.exp.push(explode);
}
clearTimeout(s);
closure = null;
}, (m ? Math.sqrt(i): i*1.2)*100)
}(i, this);
}
return this;
};
Ball.prototype.clearUi = function(y, x, span){
map[y][x].type = 0;
if (span.length) span.attr('className', 'aa');
}
Ball.prototype.recover = function(){ //回收子弹
this.obj.css('left', '-1000px'); //扔到屏幕外
var clip = this.pTank.clip;
if(clip.length < 3) clip.push(this); //回收子弹,重新装入弹夹
}
//------------------------------------------道具-----------------------------------------------
$(document).ready(function(){
Gb.attr($('#gameMap'), 'gameMap');
$('#bottomBg img').each(function(i){
$(this).click(function(){
plays = i == 0 ? 1 : 2;
$('#gameBg').remove();
createMap();
});
$(this).hover(function(){
$(this).attr('src', i == 0 ? 'img/play12.jpg' : 'img/play22.jpg');
},function(){
$(this).attr('src', i == 0 ? 'img/play11.jpg' : 'img/play21.jpg');
})
});
$(document).keydown(function(event){
var k = event.keyCode;
if ( (/^65|87|68|83$/).test(k) ) {
mainTank.der = {'65':0,'87':1,'68':2,'83':3}[k];
mainTank.locked = false;
}
if (k == 32) mainTank.fireLocked = false;
if (plays == 1) return;
if ( (/^37|38|39|40$/).test(k) ) {
subTank.der = k - 37;
subTank.locked = false;
}
if (k == 76) subTank.fireLocked = false;
})
$(document).keyup(function(event){
var k = event.keyCode;
if ( (/^65|87|68|83$/).test(k) ) mainTank.locked = true;
if (k == 32) mainTank.fireLocked = true;
if (plays == 1) return;
if ((/^37|38|39|40$/).test(k) ) subTank.locked = true;
if (k == 76) subTank.fireLocked = true;
})
})
function createMap(){
var _class = ['aa', 'wall', 'ston', 'steel', 'sea'];
map = maps[level-1];
$(map).each(function(i, n){
$(n).each(function(j, n){
map[i][j] = { type : n, span : $('<span class='+_class[n]+'></span>').appendTo(Gb.attr('gameMap'))};
})
})
$('<span class=AC></span>').appendTo(Gb.attr('gameMap'));
$('<span class=tank></span>').appendTo(Gb.attr('gameMap'));
$('<span class=etank></span>').appendTo(Gb.attr('gameMap'));
$('<span class=ball></span>').appendTo(Gb.attr('gameMap'));
$('<span class=explode></span>').appendTo(Gb.attr('gameMap'));
$('<span class=props></span>').appendTo(Gb.attr('gameMap'));
Gb.attr($('#infoBottom'), '#infoBottom').attr($('.props'), '.prop').attr($('#gameInfo'), 'gameInfo').attr($('.tank'), '.tank').attr($('.etank'), '.etank').attr('$(.ball)', '.ball');
$('.AC').css({top : '440px',left : '240px'});
mainTank = new Tank(Gb.attr('.tank'), 15, 8, 22, 1).init();
mainTank.locked = true;
if (plays == 2){
subTank = new Tank(Gb.attr('.tank').clone().appendTo(Gb.attr('gameMap')), 15, 16, 22, 1).init();
subTank.locked = true;
}
for (var i = 0; i < eTanksLength; i++){
var x = xs[level -1];
eTanks[i] = new ETank(Gb.attr('.etank').eq(0).clone().appendTo(Gb.attr('gameMap')), 20, x[i], 0, 3).init().Ai();
}
for (var i = 0; i < eTankLife; i++){
$('<span class=etankSam></span>').appendTo(Gb.attr('gameInfo'));
}
$('<span class=play1>1P * ' +mainTank.life+ '</span>').appendTo(Gb.attr('#infoBottom'));
if (plays == 2) $('<span class=play2>2P * ' +subTank.life+ '</span>').appendTo(Gb.attr('#infoBottom'));
$('<span class=level>第 ' +level+ ' 关</span>').appendTo(Gb.attr('#infoBottom'));
Gb.attr($('.play1'), 'P1').attr($('.play2'), 'P2');
Props.init(); //道具初始化
u = setInterval(function(){
if (mainTank) mainTank.setPos(mainTank.der).move();
if (mainTank && !mainTank.fireLocked) mainTank.fire();
if (plays == 1) return;
if (subTank) subTank.setPos(subTank.der).move();
if (subTank && !subTank.fireLocked) subTank.fire();
}, 19);
}
var Props = { //道具类
Ui : [0, 0]
,init : function(){
setInterval(function(){
if (Props.use) {
Gb.attr('.prop').hide();
Props.use = false;
return;
}
var fn = ['speed', 'hide', 'life', 'power', 'defense'][Math.round(Math.random()*4)];
var Ui = Props.getUi();
Props.Ui = Ui;
map[Ui[0]][Ui[1]].type = fn;
Props.use = true;
Gb.attr('.prop').css({'background' : 'url(img/'+ fn +'.jpg)', top : Ui[0]*20, left : Ui[1]*20} ).show();
}, Math.max(10000, Math.round(Math.random()*20000)));
}
,use : false
,speed : function(obj){
obj.speed = obj.speed / 2;
setTimeout(function(){
obj.speed = obj.speed * 2;
Props.use = false;
map[Props.Ui[0]][Props.Ui[1]].type = 0;
}, 15000);
}
,hide : function(obj){
obj.invincible(5000);
setTimeout(function(){
Props.use = false;
map[Props.Ui[0]][Props.Ui[1]].type = 0;
}, 10000);
}
,life : function(obj){
obj.life++;
obj.showInfo();
Props.use = false;
map[Props.Ui[0]][Props.Ui[1]].type = 0;
}
,power : function(obj){
for (var i = 0; i < obj.clip.length; i++){
obj.clip[i].type = 11;
}
setTimeout(function(){
for (var i = 0; i < obj.clip.length; i++){
obj.clip[i].type = 10;
}
}, 10000)
}
,defense : function(obj){
var ary = [[21, 11], [21, 12], [21, 13], [21, 14], [22, 11], [22, 14], [23, 11], [23, 14]];
for (var i = 0; i < ary.length; i++){
var y = ary[i][0], x = ary[i][1];
map[y][x].type = 3;
map[y][x].span.attr('className', 'steel');
}
setTimeout(function(){
for (var i = 0; i < ary.length; i++){
var y = ary[i][0], x = ary[i][1];
map[y][x].type = 2;
map[y][x].span.attr('className', 'ston');
}
}, 15000)
}
,fn : false
,getUi : function(){
var i = Math.round(Math.random()*23);
var j = Math.round(Math.random()*23);
if (map[j][i].type == 0) {
return [j, i];
}
else {
return this.getUi();
}
}
}
function mapReload(){
Gb.attr('gameMap').empty();
Gb.attr('#infoBottom').empty();
$(document).keydown(function(event){
return false;
});
$(document).keyup(function(event){
return false;
});
clearInterval(u);
mainTank = null;
subTank = null;
eTanks = [];
eTankLife = 20;
map = maps[level-1];
eTanksLength++;
if (level == 3) {
eTanksLength = 12;
xs[2] = [0,2,4,6,8,10,12,14,16,18,20,22];
}
createMap();
}
}();
</script>
<style>
html, body{overflow:hidden}
#gameBg{height:480px;width:650px;margin:3px auto;border:10px ridge #eee;background:#000;overflow:hidden;position:absolute;left:300px;top:8%;z-index:1000}
#gameBg div {width:100%;height:50%}
#gameBg #topBg img {margin:30px auto;display:block}
#gameBg #bottomBg img {margin:20px auto;display:block;cursor:pointer;height:40px;width:150px}
#gameMap{height:480px;width:480px;margin:3px auto;border:10px ridge #eee;background:#000;overflow:hidden;position:absolute;left:300px;top:8%;float:left}
#gameInfo{height:480px;width:150px;margin:3px auto;border:10px ridge #eee;background:#000;overflow:hidden;position:absolute;left:790px;top:8%}
#gameMap span{width:20px;height:20px;float:left}
#gameMap span.steel{background:url(img/steel.gif) no-repeat}
#gameMap span.sea{background:url(img/sea.gif) no-repeat}
#gameMap span.wall{background:url(img/wall.gif) no-repeat;position:relative;z-index:104}
#gameMap span.ston{background:url(img/ston.gif) no-repeat}
#gameMap span.tank{position:absolute;background:url(img/tank.gif) no-repeat; width:40px; height:40px;z-index:101}
#gameMap span.etank{background:url(img/etank.gif) no-repeat; position:absolute; width:40px; height:40px;z-index:101}
#gameMap span.ball{background:url(img/ball.gif) no-repeat; position:absolute; width:40px; height:40px;z-index:103}
#gameMap span.aa{background:url(); width:20px; height:20px}
#gameMap span.explode{background:url(img/explode.gif) no-repeat; position:absolute; width:60px; height:60px;z-index:103}
#gameMap span.props{background:url(); width:20px; height:20px; position:absolute;z-index:101}
#gameMap span.info{position:absolute; width:60px; height:60px; top:100;left:100;z-index:102}
#gameMap span.AC{background:url(img/1.gif) no-repeat;position:absolute; width:40px; height:40px;z-index:102}
#gameInfo span.etankSam{background:url(img/etank.gif) no-repeat 0px -80px; width:40px; height:40px;float:left;margin-right:10px}
#gameInfo span.play1, .play2{background:url(img/tank.gif) no-repeat; width:100%; height:40px;float:left;margin-top:25px;margin-left:10px;color:#fff;text-indent:60px;Font-weight:bold;font-size:1.2em;line-height:40px}
#gameInfo span.level{width:100%;height:30px;float:left;margin-top:20px;color:#fff;text-align:center;font-weight:bold;font-size:1.2em;line-height:30px;letter-spacing:5px}
#gameInfo #infoBottom{position:absolute; width:100%; height:200px; top:295px;left:0px}
#gameOver{height:480px;width:650px;margin:3px auto;border:10px ridge #eee;background:#000;overflow:hidden;position:absolute;left:300px;top:8%;display:none;z-index:1001}
#gameOver img{height:100%;width:100%}
</style>
<body>
<div id="gameBg">
<div id="topBg"><img src="img/bg.jpg"></img></div>
<div id="bottomBg"><img src="img/play11.jpg"></img><img src="img/play21.jpg"></img></div>
</div>
<div id="gameMap"> </div>
<div id="gameInfo"> <div id="infoBottom"></div></div>
<div id="gameOver"><img src="img/gameover.jpg"></img></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<title>山寨坦克大战... 主坦克方向:WASD,空格发射. 副坦克方向:上下左右.L发射.</title>
<script src="jquery-1.3.2.min.js"></script>
<script src="map.js"></script>
<script>
~function(){
var mainTank; //主坦克
var subTank; //副坦克
var eTanks = []; //敌坦克
var plays; //单人或者双人模式
var eTankLife = 20; //敌坦克总数量
var level = 1; //当前关数
var eTanksLength = 3; //每次显示的敌坦克数量
var maps = [map1, map2, map3]; //地图
var map; //当前地图
var u; //长定时器
var xs = [[0,12,22], [0, 8, 16, 22], [0, 6, 12, 18, 22] ];
var Gb = {
attr : function(){
if (arguments.length == 1){
return Gb[arguments[0]];
}else if (arguments.length == 2){
Gb[arguments[1]] = arguments[0]
return Gb;
}
}
}
//--------------------------------------Mover类---------------------------------------------
function Mover(){};
Mover.prototype = {
locked : false //是否允许移动
,stepLocked : false //移动间隔锁
,der : false //移动方向
,obj : null //占位,子类对应的dom
,speed : 20 //移动速度
,moveRepeat : false //是否重复移动,默认否
,setXy : function(y, x){this.obj.css({top:y, left:x}); return this;}
,useGird : function(){ //占据网格
var x = this.x, y = this.y;
map[y][x].type = map[y][x+1].type = map[y+1][x].type = map[y+1][x+1].type = this.type;
map[y][x].span = map[y][x+1].span = map[y+1][x].span = map[y+1][x+1].span = this;
}
,freeGird : function(){ //释放网格
var x = this.x, y = this.y;
map[y][x].type = map[y][x+1].type = map[y+1][x].type = map[y+1][x+1].type = 0;
return this;
}
,move : function(fn){ //移动, fn: 撞击之后触发函数
if (this.stepLocked || this.locked || this.reliveLocked) return; //如果被锁定
if (this.toBorder(this.der, fn)) { //如果撞到边界
return;
}
this.freeGird();
if (this.hit(fn) == 1) return; //如果遇到障碍
this.stepLocked = true; //加锁
var der = this.der, w, d;
switch(der){ //计算下个网格的x,y
case 0: this.x -= 1; w = 'left'; d = -2; break;
case 2: this.x += 1; w = 'left'; d = 2; break;
case 1: this.y -= 1; w = 'top'; d = -2; break;
case 3: this.y += 1; w = 'top'; d = 2; break;
}
this.useGird(); //占据网格
var obj = this.obj.get(0);
for (var i = 0; i < 10; i++){ //移动
var closure = ~function(i, t){
var s = setTimeout(function(){
obj.style[w] = parseInt(obj.style[w]) + d + 'px';
clearTimeout(s);
if (i == 9){
closure = null;
t.stepLocked = false; //移动完成的时候释放移动锁
t.moveRepeat && t.move(fn); //是否重复移动
}
}, i*t.speed)
}(i, this);
}
}
,toBorder : function(der, fn){ //撞到边界
if (der == 1 && this.y == 0 || der == 3 && this.y == 22 || der == 0 && this.x == 0 || der == 2 && this.x == 22) {
if (jQuery.isFunction(fn)) fn();
return true;
}
}
,probe : function(){ //探测
var x = this.x, y = this.y;
var baffles = []; //前方障碍
switch(this.der){
case 0 : baffles[0] = [y, x-1]; baffles[1] = [y+1, x-1]; break; //左
case 2 : baffles[0] = [y, x+2]; baffles[1] = [y+1, x+2]; break; //右
case 1 : baffles[0] = [y-1, x]; baffles[1] = [y-1, x+1]; break; //上
case 3 : baffles[0] = [y+2, x]; baffles[1] = [y+2, x+1]; break; //下
}
return baffles;
}
}
//--------------------------------------------------------坦克--------------------------------------
function Tank(obj, speed, x, y, der){
this.obj = obj; //span
this.type = 5;
this.speed = speed;
this.x = x;
this.y = y;
this.der = der; //移动方向
this.fx = x; //初始x,坦克复活的时候使用
this.fy = y; //初始y
this.fder = der; //初始移动方向
this.clipLength = 3; //弹夹大小,最多存放3个子弹
this.clip = []; //弹夹
this.clipLocked = false; //弹夹锁
this.fireLocked = true;
this.life = 3;
this.exp = []; //爆炸效果
this.invTime = 2000; //无敌时间
this.reliveLocked = false; //复活锁,复活期间不能移动
}
Tank.prototype = new Mover; //继承Mover
Tank.prototype.init = function(){
this.setPos(this.der); //设置坦克方向
this.setXy(this.y*20, this.x*20); //设置位置
this.useGird(this); //占据网格
this.initClip(); //初始化弹夹
if (this.invTime) this.invincible(this.invTime); //无敌
return this;
}
Tank.prototype.initClip = function(){ //初始化弹夹
for (var i = 0;i < this.clipLength; i++) {
this.exp.push($('.explode').eq(0).clone().appendTo(Gb.attr('gameMap'))); //爆炸效果
this.clip.push(new Ball(this, 7));
}
}
Tank.prototype.setPos = function(der){ //设置移动方向
if (der == 0) this.der = 0;
else this.der = der || this.fder;
this.obj.css('background-position', '0px -'+ [3, 0, 1, 2][this.der]*40 +'px');
this.bobDer = der; //记录子弹方向
return this;
}
Tank.prototype.hit = function(){ //碰撞
var baffles = this.probe(); //前方物体
for (var i = 0; i < baffles.length; i++){
var type = map[baffles[i][0]][baffles[i][1]].type;
if ( (/^2|3|4|5|6|7$/).test(type)) return 1; //遇到障碍
if (type == 'speed' || type == 'hide' || type == 'life' || type == 'power' || type == 'defense') {
if (this == mainTank || this == subTank){
Gb.attr('.prop').hide();
Props[type](this); //吃道具
}
}
}
return 0;
}
Tank.prototype.fire = function(){ //开火
if (this.reliveLocked || this.clipLocked == true || this.clip.length <= 0) {
return;
}
this.clipLocked = true; //发射后锁定弹夹
this.clip.pop().init(); //取出一个子弹并发射
var self = this;
setTimeout(function(){ //子弹间隔时间
self.clipLocked = false;
}, 600)
return this;
}
Tank.prototype.relive = function(){ //复活
this.life ? this.life-- : eTankLife--;
if (this.showInfo() == 1){
this.freeGird();
if (this == mainTank){
mainTank = false;
}else if (this == subTank){
subTank = false;
}
return;
};
this.locked = true;
this.der = this.fder;
var me = this;
setTimeout(function(){
me.freeGird();
me.x = me.fx;
me.y = me.fy;
if( me != mainTank && me != subTank ) me.locked = false;
me.reliveLocked = false;
me.clipLocked = false;
me.setXy(me.y*20, me.x*20);
me.setPos(me.fder);
me.useGird();
me.invincible(me == mainTank ? 3000 : 1500);
}, 500);
return this;
}
Tank.prototype.showInfo = function(){
if ((plays == 1 && !mainTank.life) || (plays == 2 && !mainTank.life && !subTank.life)){
setTimeout(function(){ $('#gameOver').show(); return}, 1000);
}
var ary = this == mainTank ? [Gb.attr('P1'), '1P'] : [Gb.attr('P2'), '2P'];
ary[0].html(ary[1]+' * ' +this.life);
if (this.life <= 0) return 1;
}
Tank.prototype.invincible = function(time){ //坦克无敌
this.invTime = time;
var i = 0, me = this;
var u = setInterval(function(){
me.obj[i++ % 2 == 0 ? 'show' : 'hide']();
if (i >= time/150){
me.obj.show();
me.invTime = 0;
clearTimeout(u);
}
}, 150);
}
//---------------------------------------------敌方坦克-----------------------------------------------
var ETank = function(obj, speed, x, y, der){
this.obj = obj; //span
this.speed = speed;
this.x = x;
this.y = y;
this.type = 6;
this.der = der;
this.fx = x;
this.fy = y;
this.fder = der;
this.life = false;
this.clip = []; //弹夹
this.exp = []; //爆炸效果
this.invTime = 0; //无敌状态
}
ETank.prototype = new Tank;
ETank.prototype.showInfo = function(){
$('.etankSam').eq(0).remove();
if (eTankLife <= 0){
if (level == 3){
alert ('没有地图了,算你过关 - -!');
window.location.reload();
return;
}
level++;
setTimeout(function(){mapReload()}, 100);
return 1;
}
if (eTankLife <= eTanksLength-1){
this.freeGird();
return 1;
}
}
ETank.prototype.Ai = function(){
this.move();
var self = this;
var m = Math.round(Math.random()*100);
var ary = $.grep([0,1,2,3,3,2,3,1], function(n, i){
return n != self.der;
});
var len = ary.length;
for (var i = 0 ; i < len ; i++){ //洗牌,下一次的方向
var num = parseInt(Math.random()*len);
var tmp = ary[num];
ary[num] = ary[i];
ary[i] = tmp;
}
var nextDer = ary[0];
if (this.toBorder(this.der) || this.hit() == 1){
var s1 = setTimeout(function(){
self.setPos(nextDer).fire();
self.move();
var s2 = setTimeout(function(){
self.Ai();
clearTimeout(s2);
}, 400)
clearTimeout(s1);
}, 400);
return;
}
if (m < 20){
this.setPos(nextDer).fire();
}
else if (m < 60) this.fire();
var s3 = setTimeout(function(){
self.Ai();
clearTimeout(s3);
}, 200)
}
//----------------------------------------------------------------------------------------------------
//---------------------------------------------------------炮弹---------------------------------------
function Ball(pTank, speed){
this.obj = $('.ball').eq(0).clone().appendTo(Gb.attr('gameMap'));
this.speed = speed;
this.pTank = pTank;
this.type = 10;
this.moveRepeat = true;
}
Ball.prototype = new Mover;
Ball.prototype.init = function(){
this.reviseXy(); var self = this;
this.move(function(){
self.freeGird();
self.explode();
self.recover(); //爆炸并回收子弹
});
self.pTank.useGird(); //还原坦克所占网格
}
Ball.prototype.reviseXy = function(){ //调整子弹位置
var x = this.x = this.pTank.x, y = this.y = this.pTank.y;
this.der = this.pTank.bobDer || 0; //确认子弹发射方向
switch(this.der){
case 0: x -= 1; break; //左
case 1: y -= 1; break; //上
case 2: x += 1; break; //右
case 3: y += 1; break; //下
}
this.setXy(y*20, x*20);
}
Ball.prototype.hit = function(fn){
var ret = 0;
var baffles = this.probe(); //前方物体
for (var i = 0; i < baffles.length; i++){
var y = baffles[i][0], x = baffles[i][1], baffle = map[y][x], type = baffle.type, span = baffle.span;
if (type == 'speed' || type == 'hide' || type == 'life' || type == 'power' || type == 'defense'){ //击中道具
if ($.isFunction(fn)) { fn()}; //爆炸
this.clearUi(y, x, span);
Gb.attr('.prop').hide(); //隐藏物品
return 1;
}
if ((/^2|3|4|5|6|7$/).test(type)) { //爆炸
if (type == 4) {
this.freeGird().recover(); //击中海洋,回收子弹但不爆炸.
return 1;
}
if (type == 6 && this.pTank.type == 6) { //敌方坦克互相击中无效
this.freeGird().recover();
return 1;
}
if (type == 5 || type == 6) {
if (span.invTime) { //如果处在无敌状态
this.freeGird().recover(); //回收子弹但不爆炸.
return 1;
}
if ($.isFunction(fn)) { fn()};
span.obj.hide();
span.reliveLocked = true;
span.invTime = 1; //无敌
span.relive(); //坦克复活
return 1;
}
if ($.isFunction(fn)) { fn()};
if (type == 7) { $('#gameOver').show(); return};
if (type == 2 || (this.type == 11 && type == 3)) {
this.clearUi(y, x, span); //清除砖块
ret = 1;
}
else if (type == 3){
return 1;
}
}
}
return ret;
}
Ball.prototype.explode = function(){ //子弹爆炸
var explode = this.pTank.exp.pop();
if (!explode) return;
var x = this.x, y = this.y, der = this.der;
der == 0 ? x -= 1 : (der == 1 ? y -= 1 : ''); //调整爆炸位置
explode.show().css( {top: y*20, left: x*20} );
var m = Math.random()>.2;
for (var i = 0; i < 8; i++){
var closure = ~function(i, t){
var s = setTimeout(function(){
explode.css('background-position', '0px -'+i*60+'px');
if (i == 7) {
explode.hide();
t.pTank.exp.push(explode);
}
clearTimeout(s);
closure = null;
}, (m ? Math.sqrt(i): i*1.2)*100)
}(i, this);
}
return this;
};
Ball.prototype.clearUi = function(y, x, span){
map[y][x].type = 0;
if (span.length) span.attr('className', 'aa');
}
Ball.prototype.recover = function(){ //回收子弹
this.obj.css('left', '-1000px'); //扔到屏幕外
var clip = this.pTank.clip;
if(clip.length < 3) clip.push(this); //回收子弹,重新装入弹夹
}
//------------------------------------------道具-----------------------------------------------
$(document).ready(function(){
Gb.attr($('#gameMap'), 'gameMap');
$('#bottomBg img').each(function(i){
$(this).click(function(){
plays = i == 0 ? 1 : 2;
$('#gameBg').remove();
createMap();
});
$(this).hover(function(){
$(this).attr('src', i == 0 ? 'img/play12.jpg' : 'img/play22.jpg');
},function(){
$(this).attr('src', i == 0 ? 'img/play11.jpg' : 'img/play21.jpg');
})
});
$(document).keydown(function(event){
var k = event.keyCode;
if ( (/^65|87|68|83$/).test(k) ) {
mainTank.der = {'65':0,'87':1,'68':2,'83':3}[k];
mainTank.locked = false;
}
if (k == 32) mainTank.fireLocked = false;
if (plays == 1) return;
if ( (/^37|38|39|40$/).test(k) ) {
subTank.der = k - 37;
subTank.locked = false;
}
if (k == 76) subTank.fireLocked = false;
})
$(document).keyup(function(event){
var k = event.keyCode;
if ( (/^65|87|68|83$/).test(k) ) mainTank.locked = true;
if (k == 32) mainTank.fireLocked = true;
if (plays == 1) return;
if ((/^37|38|39|40$/).test(k) ) subTank.locked = true;
if (k == 76) subTank.fireLocked = true;
})
})
function createMap(){
var _class = ['aa', 'wall', 'ston', 'steel', 'sea'];
map = maps[level-1];
$(map).each(function(i, n){
$(n).each(function(j, n){
map[i][j] = { type : n, span : $('<span class='+_class[n]+'></span>').appendTo(Gb.attr('gameMap'))};
})
})
$('<span class=AC></span>').appendTo(Gb.attr('gameMap'));
$('<span class=tank></span>').appendTo(Gb.attr('gameMap'));
$('<span class=etank></span>').appendTo(Gb.attr('gameMap'));
$('<span class=ball></span>').appendTo(Gb.attr('gameMap'));
$('<span class=explode></span>').appendTo(Gb.attr('gameMap'));
$('<span class=props></span>').appendTo(Gb.attr('gameMap'));
Gb.attr($('#infoBottom'), '#infoBottom').attr($('.props'), '.prop').attr($('#gameInfo'), 'gameInfo').attr($('.tank'), '.tank').attr($('.etank'), '.etank').attr('$(.ball)', '.ball');
$('.AC').css({top : '440px',left : '240px'});
mainTank = new Tank(Gb.attr('.tank'), 15, 8, 22, 1).init();
mainTank.locked = true;
if (plays == 2){
subTank = new Tank(Gb.attr('.tank').clone().appendTo(Gb.attr('gameMap')), 15, 16, 22, 1).init();
subTank.locked = true;
}
for (var i = 0; i < eTanksLength; i++){
var x = xs[level -1];
eTanks[i] = new ETank(Gb.attr('.etank').eq(0).clone().appendTo(Gb.attr('gameMap')), 20, x[i], 0, 3).init().Ai();
}
for (var i = 0; i < eTankLife; i++){
$('<span class=etankSam></span>').appendTo(Gb.attr('gameInfo'));
}
$('<span class=play1>1P * ' +mainTank.life+ '</span>').appendTo(Gb.attr('#infoBottom'));
if (plays == 2) $('<span class=play2>2P * ' +subTank.life+ '</span>').appendTo(Gb.attr('#infoBottom'));
$('<span class=level>第 ' +level+ ' 关</span>').appendTo(Gb.attr('#infoBottom'));
Gb.attr($('.play1'), 'P1').attr($('.play2'), 'P2');
Props.init(); //道具初始化
u = setInterval(function(){
if (mainTank) mainTank.setPos(mainTank.der).move();
if (mainTank && !mainTank.fireLocked) mainTank.fire();
if (plays == 1) return;
if (subTank) subTank.setPos(subTank.der).move();
if (subTank && !subTank.fireLocked) subTank.fire();
}, 19);
}
var Props = { //道具类
Ui : [0, 0]
,init : function(){
setInterval(function(){
if (Props.use) {
Gb.attr('.prop').hide();
Props.use = false;
return;
}
var fn = ['speed', 'hide', 'life', 'power', 'defense'][Math.round(Math.random()*4)];
var Ui = Props.getUi();
Props.Ui = Ui;
map[Ui[0]][Ui[1]].type = fn;
Props.use = true;
Gb.attr('.prop').css({'background' : 'url(img/'+ fn +'.jpg)', top : Ui[0]*20, left : Ui[1]*20} ).show();
}, Math.max(10000, Math.round(Math.random()*20000)));
}
,use : false
,speed : function(obj){
obj.speed = obj.speed / 2;
setTimeout(function(){
obj.speed = obj.speed * 2;
Props.use = false;
map[Props.Ui[0]][Props.Ui[1]].type = 0;
}, 15000);
}
,hide : function(obj){
obj.invincible(5000);
setTimeout(function(){
Props.use = false;
map[Props.Ui[0]][Props.Ui[1]].type = 0;
}, 10000);
}
,life : function(obj){
obj.life++;
obj.showInfo();
Props.use = false;
map[Props.Ui[0]][Props.Ui[1]].type = 0;
}
,power : function(obj){
for (var i = 0; i < obj.clip.length; i++){
obj.clip[i].type = 11;
}
setTimeout(function(){
for (var i = 0; i < obj.clip.length; i++){
obj.clip[i].type = 10;
}
}, 10000)
}
,defense : function(obj){
var ary = [[21, 11], [21, 12], [21, 13], [21, 14], [22, 11], [22, 14], [23, 11], [23, 14]];
for (var i = 0; i < ary.length; i++){
var y = ary[i][0], x = ary[i][1];
map[y][x].type = 3;
map[y][x].span.attr('className', 'steel');
}
setTimeout(function(){
for (var i = 0; i < ary.length; i++){
var y = ary[i][0], x = ary[i][1];
map[y][x].type = 2;
map[y][x].span.attr('className', 'ston');
}
}, 15000)
}
,fn : false
,getUi : function(){
var i = Math.round(Math.random()*23);
var j = Math.round(Math.random()*23);
if (map[j][i].type == 0) {
return [j, i];
}
else {
return this.getUi();
}
}
}
function mapReload(){
Gb.attr('gameMap').empty();
Gb.attr('#infoBottom').empty();
$(document).keydown(function(event){
return false;
});
$(document).keyup(function(event){
return false;
});
clearInterval(u);
mainTank = null;
subTank = null;
eTanks = [];
eTankLife = 20;
map = maps[level-1];
eTanksLength++;
if (level == 3) {
eTanksLength = 12;
xs[2] = [0,2,4,6,8,10,12,14,16,18,20,22];
}
createMap();
}
}();
</script>
<style>
html, body{overflow:hidden}
#gameBg{height:480px;width:650px;margin:3px auto;border:10px ridge #eee;background:#000;overflow:hidden;position:absolute;left:300px;top:8%;z-index:1000}
#gameBg div {width:100%;height:50%}
#gameBg #topBg img {margin:30px auto;display:block}
#gameBg #bottomBg img {margin:20px auto;display:block;cursor:pointer;height:40px;width:150px}
#gameMap{height:480px;width:480px;margin:3px auto;border:10px ridge #eee;background:#000;overflow:hidden;position:absolute;left:300px;top:8%;float:left}
#gameInfo{height:480px;width:150px;margin:3px auto;border:10px ridge #eee;background:#000;overflow:hidden;position:absolute;left:790px;top:8%}
#gameMap span{width:20px;height:20px;float:left}
#gameMap span.steel{background:url(img/steel.gif) no-repeat}
#gameMap span.sea{background:url(img/sea.gif) no-repeat}
#gameMap span.wall{background:url(img/wall.gif) no-repeat;position:relative;z-index:104}
#gameMap span.ston{background:url(img/ston.gif) no-repeat}
#gameMap span.tank{position:absolute;background:url(img/tank.gif) no-repeat; width:40px; height:40px;z-index:101}
#gameMap span.etank{background:url(img/etank.gif) no-repeat; position:absolute; width:40px; height:40px;z-index:101}
#gameMap span.ball{background:url(img/ball.gif) no-repeat; position:absolute; width:40px; height:40px;z-index:103}
#gameMap span.aa{background:url(); width:20px; height:20px}
#gameMap span.explode{background:url(img/explode.gif) no-repeat; position:absolute; width:60px; height:60px;z-index:103}
#gameMap span.props{background:url(); width:20px; height:20px; position:absolute;z-index:101}
#gameMap span.info{position:absolute; width:60px; height:60px; top:100;left:100;z-index:102}
#gameMap span.AC{background:url(img/1.gif) no-repeat;position:absolute; width:40px; height:40px;z-index:102}
#gameInfo span.etankSam{background:url(img/etank.gif) no-repeat 0px -80px; width:40px; height:40px;float:left;margin-right:10px}
#gameInfo span.play1, .play2{background:url(img/tank.gif) no-repeat; width:100%; height:40px;float:left;margin-top:25px;margin-left:10px;color:#fff;text-indent:60px;Font-weight:bold;font-size:1.2em;line-height:40px}
#gameInfo span.level{width:100%;height:30px;float:left;margin-top:20px;color:#fff;text-align:center;font-weight:bold;font-size:1.2em;line-height:30px;letter-spacing:5px}
#gameInfo #infoBottom{position:absolute; width:100%; height:200px; top:295px;left:0px}
#gameOver{height:480px;width:650px;margin:3px auto;border:10px ridge #eee;background:#000;overflow:hidden;position:absolute;left:300px;top:8%;display:none;z-index:1001}
#gameOver img{height:100%;width:100%}
</style>
<body>
<div id="gameBg">
<div id="topBg"><img src="img/bg.jpg"></img></div>
<div id="bottomBg"><img src="img/play11.jpg"></img><img src="img/play21.jpg"></img></div>
</div>
<div id="gameMap"> </div>
<div id="gameInfo"> <div id="infoBottom"></div></div>
<div id="gameOver"><img src="img/gameover.jpg"></img></div>
</body>
</html>
扫一扫
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
