垣克大战
本面使用jquery-1.3.2和面定位map.jsp,支持一人和双人游戏,实现如下:http://dl.iteye.com/upload/attachment/160376/d4b0e002-af6d-3ad4-a172-a3099bc4c643.bmp
<!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 = ; //地图var map; //当前地图var u; //长定时器var xs = [, , ];var Gb = {attr : function(){if (arguments.length == 1){return Gb];}else if (arguments.length == 2){Gb] = argumentsreturn 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.type = map.type = map.type = map.type = this.type;map.span = map.span = map.span = map.span = this;},freeGird : function(){ //释放网格var x = this.x, y = this.y;map.type = map.type = map.type = map.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,ycase 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 = parseInt(obj.style) + 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 = ; baffles = ; break; //左case 2 : baffles = ; baffles = ; break;//右case 1 : baffles = ; baffles = ; break;//上case 3 : baffles = ; baffles = ; break;//下}return baffles;}}//--------------------------------------------------------坦克--------------------------------------function Tank(obj, speed, x, y, der){this.obj = obj; //spanthis.type = 5;this.speed = speed; this.x = x; this.y = y;this.der = der; //移动方向this.fx = x; //初始x,坦克复活的时候使用this.fy = y; //初始ythis.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; //继承MoverTank.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 -'+ *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]].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(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 ? : ;ary.html(ary+' *' +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();if (i >= time/150){me.obj.show();me.invTime = 0;clearTimeout(u);}}, 150);}//---------------------------------------------敌方坦克-----------------------------------------------var ETank = function(obj, speed, x, y, der){this.obj = obj; //spanthis.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(, 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;ary = ary;ary = tmp;}var nextDer = ary;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, x = baffles, baffle = map, 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.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};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;$(map).each(function(i, n){$(n).each(function(j, n){map = { type : n, span : $('<span class='+_class+'></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;eTanks = new ETank(Gb.attr('.etank').eq(0).clone().appendTo(Gb.attr('gameMap')), 20, x, 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 : ,init : function(){setInterval(function(){if (Props.use) {Gb.attr('.prop').hide();Props.use = false;return;}var fn = ['speed', 'hide', 'life', 'power', 'defense'];var Ui = Props.getUi();Props.Ui = Ui;map]].type = fn;Props.use = true;Gb.attr('.prop').css({'background' : 'url(img/'+ fn +'.jpg)', top : Ui*20, left : Ui*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]].type = 0;}, 15000);},hide : function(obj){obj.invincible(5000);setTimeout(function(){Props.use = false;map]].type = 0;}, 10000);},life : function(obj){obj.life++;obj.showInfo();Props.use = false;map]].type = 0;},power : function(obj){for (var i = 0; i < obj.clip.length; i++){obj.clip.type = 11;}setTimeout(function(){for (var i = 0; i < obj.clip.length; i++){obj.clip.type = 10;}}, 10000)},defense : function(obj){var ary = [, , , , , , , ];for (var i = 0; i < ary.length; i++){var y = ary, x = ary;map.type = 3;map.span.attr('className', 'steel');}setTimeout(function(){for (var i = 0; i < ary.length; i++){var y = ary, x = ary;map.type = 2;map.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.type == 0) {return ;}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;eTanksLength++;if (level == 3) {eTanksLength = 12;xs = ;}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>
页:
[1]