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></font></td> </tr> </table> <!--//投票--> <table width="98%" border="0" cellspacing="0" cellpadding="0" style='TABLE-LAYOUT: fixed;WORD-WRAP: break-word;' align="center"> <tr> </tr> <tr> <td colspan="2" align="center" class="page" height="25"><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></td> </tr> <tr align="right"> <td colspan="2" height="25" > <SCRIPT LANGUAGE="JavaScript" src="https://www.cppentry.com/images/default/bencandy.js"></SCRIPT> 【<a href="javascript:doZoom(18)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>】【<a href="javascript:doPrint()">打印</a>】 <input type=hidden value=1 name="h1" id="h1"> 【<a href="javascript:ft(1)" id="Maiweb1">繁体</a>】【<a href="https://www.cppentry.com/member/post.php?job=postnew&fid=54" target=_blank>投稿</a>】【<a href="https://www.cppentry.com/do/job.php?job=collect&fid=54&id=73936">收藏</a>】 【<a href="https://www.cppentry.com/do/job.php?job=recommend&fid=54&id=73936" target=_blank>推荐</a>】【<a href="https://www.cppentry.com/do/job.php?job=report&fid=54&id=73936" target=_blank>举报</a>】【<a href="https://www.cppentry.com/do/comment.php?fid=54&id=73936" target=_blank>评论</a>】 【<a href="javascript:window.close()">关闭</a>】 【<a href="javascript:window.close()"></a><a href="#">返回顶部</a>】</td> </tr> <tr> <td colspan="2" style="text-align:right"> <div> <div style="float:right"> <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":"32"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};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 style="float:right; font-size:14px">分享到: </div> </div> </td> </tr> <tr class="nextpage"> <td width="50%" align="left"><a href="bencandy.php?fid=54&id=73937" onclick="">上一篇</a>：<a href="bencandy.php?fid=54&id=73937" onclick="" title="HTML5 小游戏：是男人就撑过30秒">HTML5 小游戏：是男人就撑过30秒</a></td> <td width="50%" align="right" height="25"><a href="bencandy.php?fid=54&id=73935" onclick="">下一篇</a>：<a href="bencandy.php?fid=54&id=73935" onclick="" title="Linux网络编程--struct hostent结构体">Linux网络编程--struct hostent结..</a></td> </tr> </table> </td> </tr> <tr> <td class="foot"> <h3 class="L"></h3> <h3 class="R"></h3> </td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="dragTable" id="view_article_bbs"> <tr> <td class="head"> <h3 class="L"></h3> <span class="TAG"> </span> <h3 class="R"></h3> </td> </tr> <tr> <td class="middle"> <script type="text/javascript" id="wumiiRelatedItems"></script><div style="display:none"><!--访问统计,这段代码,会加快内容的打开速度,但是会影响右边列表的打开速度,<script src='http://pw.cnzz.com/c.php?id=80674837' language='JavaScript' charset='gb2312'></script>--></div></td> </tr> <tr> <td class="foot"> <h3 class="L"></h3> <h3 class="R"></h3> </td> </tr> </table> <!-- --> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="dragTable" id="commentTable"> <tr> <td class="head"> <h3 class="L"></h3> <span class="TAG">评论</span> <h3 class="R"></h3> </td> </tr> <tr> <td class="middle"> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write('<span id="comment_show"><img alt="内容加载中,请稍候..." src="https://www.cppentry.com/images/default/ico_loading3.gif"></span>'); document.write('<div style="display:none;"><iframe src="https://www.cppentry.com/do/comment_ajax.php?fid=54&aid=73936&iframeID=comment_show" width=0 height=0 name="comment_show"></iframe></div>'); //--> </SCRIPT> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <form name="form_comment" id="form_comment" method="post" target="comment_show" action="https://www.cppentry.com/do/comment_ajax.php?fid=54&aid=73936&iframeID=comment_show"> <tr style="display:" id="comment_username_tr"> <td width="16%"><span class="L">帐 号:</span></td> <td width="84%"><span class="R"> <input type="text" name="username" id="comment_username" size="12"> 密码: <input type="password" name="password" id="comment_password" size="12"> (<a href="https://www.cppentry.com/do/reg.php" target="_blank"><u>新用户注册</u></a>)</span></td> </tr> <tr style="display:" id="comment_yzimg_tr"> <td width="16%"><span class="L">验 证 码:</span></td> <td width="84%"> <input id="yzImgNum" type="text" name="yzimg" size="8"> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write('<img border="0" id="yz_Img" name="imageField" onclick="this.src=this.src+Math.random();" src="https://www.cppentry.com/do/yzimg.php?'+Math.random()+'">'); //--> </SCRIPT> </td> </tr> <tr> <td width="16%"><span class="L">表 情:</span></td> <td width="84%"> <style type="text/css"> <!-- .selected {filter:Alpha(opacity=100);border:1px solid #FF9900} .unselected {filter:Alpha(opacity=50);border:1px solid #EDF8DD} --> </style> <SCRIPT LANGUAGE="JavaScript"> <!-- var prevIcon; function icon(num){ num.className="selected"; if(typeof(prevIcon)!="undefined"){ prevIcon.className="unselected"; }else{ document.all.firstface.className="unselected"; } if(num.className=="unselected"){ num.className="selected"; } prevIcon=num; document.getElementById("commentface").value=num.childNodes(0).id ; } //--> </SCRIPT> <table border=0 cellspacing=0 cellpadding=0> <tr> <td class="selected" onClick="icon(this)" id="firstface" style="cursor:hand"><img src="https://www.cppentry.com/images/default/faceicon/1.gif" width="20" height="20" id="1"></td> <td class="unselected" onClick="icon(this)" style="cursor:hand"><img src="https://www.cppentry.com/images/default/faceicon/2.gif" width="20" height="20" id="2"></td> <td class="unselected" onClick="icon(this)" style="cursor:hand"><img src="https://www.cppentry.com/images/default/faceicon/3.gif" width="20" height="20" id="3"></td> <td class="unselected" onClick="icon(this)" style="cursor:hand"><img src="https://www.cppentry.com/images/default/faceicon/4.gif" width="20" height="20" id="4"></td> <td class="unselected" onClick="icon(this)" style="cursor:hand"><img src="https://www.cppentry.com/images/default/faceicon/5.gif" width="20" height="20" id="5"></td> <td class="unselected" onClick="icon(this)" style="cursor:hand"><img src="https://www.cppentry.com/images/default/faceicon/6.gif" width="20" height="20" id="6"></td> <td class="unselected" onClick="icon(this)" style="cursor:hand"><img src="https://www.cppentry.com/images/default/faceicon/7.gif" width="20" height="20" id="7"></td> <td class="unselected" onClick="icon(this)" style="cursor:hand"><img src="https://www.cppentry.com/images/default/faceicon/8.gif" width="20" height="20" id="8"></td> <td class="unselected" onClick="icon(this)" style="cursor:hand"><img src="https://www.cppentry.com/images/default/faceicon/9.gif" width="20" height="20" id="9"></td> <td class="unselected" onClick="icon(this)" style="cursor:hand"><img src="https://www.cppentry.com/images/default/faceicon/10.gif" width="20" height="20" id="10"></td> <td class="unselected" onClick="icon(this)" style="cursor:hand"><img src="https://www.cppentry.com/images/default/faceicon/11.gif" width="20" height="20" id="11"></td> <td class="unselected" onClick="icon(this)" style="cursor:hand"><img src="https://www.cppentry.com/images/default/faceicon/12.gif" width="20" height="20" id="12"></td> <td class="unselected" onClick="icon(this)" style="cursor:hand"><img src="https://www.cppentry.com/images/default/faceicon/13.gif" width="20" height="20" id="13"></td> <td class="unselected" onClick="icon(this)" style="cursor:hand"><img src="https://www.cppentry.com/images/default/faceicon/14.gif" width="20" height="20" id="14"></td> <td align="center" valign="top"> <input name="commentface" type="hidden" value="1"> </td> </tr> </table> </td> </tr> <tr> <td width="16%"><span class="L">内 容:</span></td> <td width="84%"><span class="R"> <textarea name="content" cols="50" rows="5" id="comment_content" onKeyDown="quickpost(event)">