第二个写的jquery游戏坦克大战新鲜出炉
闲话少说
代码贴出
js和css贴出来了,由于代码太长不让输了,如果想玩可以去下面去下载
$(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