jQuery 写的坦克大战新鲜出炉，闲话少说。
具体下载目录在 /2012年资料/1月/30日/jQuery 写的坦克大战【附源代码】/
演示地址：http://www.muu.cc/html5/Tank/index.html
代码贴出
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>坦克大战</title> <mce:script language="java script" type="text/java script" src="http://code.jquery.com/jquery-1.4.2.min.js" mce_src="http://code.jquery.com/jquery-1.4.2.min.js"></mce:script> <mce:script language="java script" type="text/java script"><!-- $(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").</span> </div> <div class="pagination mt-40"> <a href="bencandy.php?fid=54&aid=73936&page=1" title="首页">首页</A> <a href="bencandy.php?fid=54&aid=73936&page=1" title="上一页">上一页</A> <a href='#'><font color=red>1</font></a> <a href="bencandy.php?fid=54&aid=73936&page=2" title="第2页">2</a> <a href="bencandy.php?fid=54&aid=73936&page=2" title="下一页">下一页</A> <a href="bencandy.php?fid=54&aid=73936&page=2" title="尾页">尾页</A> <a href='#'><font color=red>1</font>/2/2</a> </div> <div class="article-footer mt-60 pt-40"> <div class="share-box"> <!-- Baidu Share Code Simplified or Removed if not needed. Keeping basic structure --> <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </div> <div class="prev-next mt-20"> <div class="prev"> <span class="label">上一篇</span> <a href="bencandy.php?fid=54&id=73937" onclick="" class="link">HTML5 小游戏：是男人就撑过30秒</a> </div> <div class="next"> <span class="label">下一篇</span> <a href="bencandy.php?fid=54&id=73935" onclick="" class="link">Linux网络编程--struct hostent结..</a> </div> </div> </div> </div> </div> </div> </div><!-- End .container.main-content --> <footer class="container mt-20 site-footer"> <div id="copyright"> Copyright © https://www.cppentry.com all rights reserved <a href="http://www.miibeian.gov.cn" target="_blank">粤ICP备13067022号-3</a><br> </div> </footer> <script> // Logic for double click admin editing </script> <script> if(typeof clickEdit !== 'undefined') clickEdit.init(); </script> </body> </html>