jquery贪吃蛇之后另一js游戏新鲜出炉----坦克大战(散分)
第二个写的jquery游戏坦克大战新鲜出炉
闲话少说
代码贴出
js和css贴出来了,由于代码太长不让输了,如果想玩可以去下面去下载
- JScript code
$(function() { $("body").append('<div class="map"></div>'); InitTank('me', {x:(long-50)/2, y:high-50}, 'up'); InitEnemy(); //键盘点击事件 $(document).keydown(function(evt) { evt = evt || window.event; var key = evt.which || evt.keyCode; if(key==32) { SendBullet("me"); } switch (key) { case 37: direction = "left"; break; case 38: direction = "up"; break; case 39: direction = "right"; break; case 40: direction = "down"; break; } if (key >= 37 && key <= 40) { ChangeDirection('me', direction); isMeMove = true; } }); $(document).keyup(function(evt) { evt = evt || window.event; var key = evt.which || evt.keyCode; if (key >= 37 && key <= 40) { isMeMove = false; } }); MyInterval=setInterval("Refresh()",timeSpan); }); var isMeMove = false; var moveLong = 10; var bulletmoveLong = 20; var timeSpan = 300; var long = 600; var high = 600; function Refresh() { var me = $("#me"); var mtop = $(me).position().top; var mleft = $(me).position().left; if (isMeMove) { direction = $(me).attr("direction"); var offset = GetOffset(direction); mtop += offset.y*moveLong; mleft += offset.x*moveLong; if(mtop<0){ mtop = 0; }else if(mtop>long-$(me).height()) { mtop = long-$(me).height(); } if(mleft<0){ mleft = 0; }else if(mleft>long-$(me).width()) { mleft = long-$(me).width(); } $(me).css({'top':(mtop + 'px'),'left':(mleft + 'px')}); } $(".tank:visible[enemy='enemy']").each(function(){ var etop = $(this).position().top; var eleft = $(this).position().left; var bullettime = parseInt($(this).attr("bullettime")); if(bullettime<=0) { bullettime = 10; var topSpan = etop-mtop; var leftSpan = eleft-mleft; ex = Math.abs(leftSpan)>Math.abs(topSpan)?leftSpan/Math.abs(leftSpan)*-1:0; ey = Math.abs(leftSpan)>Math.abs(topSpan)?0:topSpan/Math.abs(topSpan)*-1; etop = etop + ey*moveLong; eleft = eleft + ex*moveLong; var direction = GetDirection({x:ex,y:ey}); ChangeDirection($(this).attr("id"),direction); SendBullet($(this).attr("id")); }else { direction = $(this).attr("direction"); var offset = GetOffset(direction); etop = etop + offset.y*moveLong; eleft = eleft + offset.x*moveLong; bullettime--; } if(etop<0){ etop = 0; }else if(etop>long-$(this).height()) { etop = long-$(this).height(); } if(eleft<0){ eleft = 0; }else if(eleft>long-$(this).width()) { eleft = long-$(this).width(); } $(this).css({'top':(etop + 'px'),'left':(eleft + 'px')}).attr(""); $(this).attr("bullettime",bullettime); }); $(".bullet:visible").each(function(){ direction = $(this).attr("direction"); var offset = GetOffset(direction); var top = $(this).position().top + offset.y*bulletmoveLong; var left = $(this).position().left + offset.x*bulletmoveLong; if(top<0){ $(this).hide(); return; }else if(top>long-$(this).height()) { $(this).hide(); return; } if(left<0){ $(this).remove(); return; }else if(left>long-$(this).width()) { $(this).remove(); return; } $(this).css({'top':(top + 'px'),'left':(left + 'px')},timeSpan); }); CheckBullet(); CheckTank(); CheckBulletTank(); } //判断子弹相碰 function CheckBullet() { $(".bullet[owner='me']:visible").each(function(){ var me = this; $(".bullet[owner!='me']:visible").each(function(){ if(IsCollision(me,this)) { $(me).hide(); $(this).hide(); } }); }); } //判断坦克相碰 function CheckTank() { var me = $("#me"); $(".tank").not("#me").each(function(){ if(IsCollision(me,this)) { alert("被坦克"+$(this).attr("id")+"打死了"); Failure(); } }); } //判断子弹打在坦克上 function CheckBulletTank() { var me = $("#me"); $(".bullet[owner!='me']:visible").each(function(){ if(IsCollision(me,this)) { alert("被子弹"+$(this).attr("id")+"打死了"); Failure(); } }); $(".bullet[owner='me']:visible").each(function(){ var fme = this; $(".tank").not("#me").each(function(){ if(IsCollision(fme,this)) { $(this).hide(); $(fme).hide(); InitEnemy(); } }); }); } //根据方向返回偏移量 function GetOffset(direction) { ox = 0; oy = 0; if(direction=='left') { ox = -1; oy = 0; }else if(direction=='right') { ox = 1; oy = 0; }else if(direction=='up') { ox = 0; oy = -1; }else if(direction=='down') { ox = 0; oy = 1; } return {x:ox,y:oy}; } //获取方向 function GetDirection(offset) { var direction = 'down'; if(offset.x==-1 && offset.y==0) { direction = 'left' ; }else if(offset.x==1 && offset.y==0) { direction = 'right' ; }else if(offset.x==0 && offset.y==-1) { direction = 'up' ; }else if(offset.x==0 && offset.y==1) { direction = 'down' ; } return direction; } //发送炮弹 function SendBullet(tid) { if($(".bullet[owner='" + tid + "']:visible").size()<2) { var x = $("#"+tid).position().left; var y = $("#"+tid).position().top; var direction = $("#"+tid).attr("direction"); var offset = GetOffset(direction); var ox = x+offset.x*20+(offset.x==1?30:20); var oy = y+offset.y*20+(offset.y==1?30:20); if($(".bullet:hidden").size()==0) { $(".map").append($('<div class="bullet" style="left:' + ox + 'px;top:' + oy + 'px;" direction="' + direction + '" owner="' + tid + '"></div>')); }else { $(".bullet:hidden").eq(0).css({left: ox + 'px',top: oy + 'px'}).attr("direction",direction).attr("owner",tid).show(); } } } //初始化敌人 function InitEnemy() { if($("#enemy1:hidden").size()==0) { InitTank('enemy1', {x:(Math.round(Math.random()*3)-1)*((long-50)/2), y:0}, 'down'); }else { $("#enemy1").css({left:(Math.round(Math.random()*3)-1)*((long-50)/2)+"px",top:0}).show(); } $("#enemy1").attr("enemy",'enemy').attr("bullettime","10"); SendBullet("enemy1"); } //初始化坦克 //tid 坦克id //x横坐标(left值) //y纵坐标(top值) //方向 function InitTank(tid,position, direction) { x = position.x < 0 ? 0 : position.x; x = position.x > 600 ? 600 : position.x; y = position.y < 0 ? 0 : position.y; y = position.y > 600 ? 600 : position.y; $(".map").append('<div id="' + tid + '" style="left:' + position.x + 'px;top:' + position.y + 'px;" direction="' + direction + '" class="tank ' + direction + '"></div>'); } //改变坦克的方向 function ChangeDirection(tid, direction) { $("#" + tid).removeClass($("#" + tid).attr("direction")).addClass(direction).attr("direction", direction); } //判断两个元素是否碰撞 function IsCollision(obja,objb) { var objaInfo = {width:$(obja).width(),height:$(obja).height(),left:$(obja).position().left,top:$(obja).position().top}; var objbInfo = {width:$(objb).width(),height:$(objb).height(),left:$(objb).position().left,top:$(objb).position().top}; if(objaInfo.left<objbInfo.left) { if(objaInfo.left+objaInfo.width<=objbInfo.left) { return false; } }else { if(objbInfo.left+objbInfo.width<=objaInfo.left) { return false; } } if(objaInfo.top<objbInfo.top) { if(objaInfo.top+objaInfo.height<=objbInfo.top) { return false; } }else { if(objbInfo.top+objbInfo.height<=objaInfo.top) { return false; } } return true; } function success() { clearInterval(MyInterval); alert("您获胜了"); } function Failure() { clearInterval(MyInterval); alert('结束了'); }
效果图
博客地址
http://blog.csdn.net/li277680701/archive/2010/06/22/5686648.aspx
下载地址
http://download.csdn.net/source/2475923
[解决办法]
不错,沙发~
[解决办法]
sf..
[解决办法]
赶紧占位 。。。广告招租!
[解决办法]
恭喜恭喜
[解决办法]
给个截图看看
[解决办法]
我对lz的头像很感兴趣。。。。。。。
[解决办法]
接分。。。
[解决办法]
接分了,恭喜楼主。。。
[解决办法]
谢谢分享!
[解决办法]
[解决办法]
[解决办法]
哇哈哈、LZ天才
[解决办法]
[解决办法]
好样的!
[解决办法]
额,你好厉害哈,忽忽
[解决办法]
看看什么情况
[解决办法]
提议:敌人应该用不同的颜色,以免误伤友军!
呵呵。。。
[解决办法]
接分。。。。。
[解决办法]
坦克大战我喜欢。
[解决办法]
拿分。。。
[解决办法]
ihai
[解决办法]
谢谢、、、、
[解决办法]
xiexie
[解决办法]
学习,帮顶!
[解决办法]
帮顶,接分。。
[解决办法]
啊哈哈 下载下来了。
[解决办法]
有点看不懂
[解决办法]
学习 ```
[解决办法]
e - -
[解决办法]
[解决办法]
很好的,顶。。
[解决办法]
回帖接分!回家再下来看看
[解决办法]
效果感觉不是很好!
------解决方案--------------------
太强了.我对js都还不熟悉.jquery就更....
[解决办法]
LZ强人啊。。。。。。。啊 。。。。。。。 啊。。。。。。。。
[解决办法]
恭喜LZ
[解决办法]
太牛X了 真的 佩服佩服
[解决办法]
厉害 赞……
[解决办法]
LZ太强大了 下载来玩玩
[解决办法]
[解决办法]
看着不错,特别是头像,雷死人
[解决办法]
牛人啊 呵呵 加油啊
[解决办法]
还要下载,还要分....
[解决办法]
楼主牛人啊~!
[解决办法]
JF.
[解决办法]
NB....顶下
[解决办法]
哇!真牛啊
[解决办法]
顶一下!
[解决办法]
[解决办法]
神奇的事件