jquery 写的坦克大战。。。
2010-06-22 15:23
411 查看
第二个写的jquery游戏坦克大战新鲜出炉
闲话少说
代码贴出
新版坦克大战源码，改进了运行不连贯性和增加了等级和血的信息
下载地址
http://download.csdn.net/source/2475923
新版下载地址
http://download.csdn.net/source/2477943
闲话少说
代码贴出
<!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="javascript" type="text/javascript" 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="javascript" type="text/javascript"><!--
$(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('结束了');
}
// --></mce:script>
<mce:style type="text/css"><!--
.map
{
width: 600px;
height: 600px;
border: 1px solid #000;
float: left;
position:absolute;
top:0;
left:0;
}
.bullet
{
width:10px;
height:10px;
background: #FF0;
position:absolute;
}
.tank
{
width: 50px;
height: 50px;
position:absolute;
}
.enemy
{
background-color:Red;
}
.right
{
background-image: url(images/right.gif);
}
.left
{
background-image: url(images/left.gif);
}
.up
{
background-image: url(images/up.gif);
}
.down
{
background-image: url(images/down.gif);
}
--></mce:style><style type="text/css" mce_bogus="1"> .map
{
width: 600px;
height: 600px;
border: 1px solid #000;
float: left;
position:absolute;
top:0;
left:0;
}
.bullet
{
width:10px;
height:10px;
background: #FF0;
position:absolute;
}
.tank
{
width: 50px;
height: 50px;
position:absolute;
}
.enemy
{
background-color:Red;
}
.right
{
background-image: url(images/right.gif);
}
.left
{
background-image: url(images/left.gif);
}
.up
{
background-image: url(images/up.gif);
}
.down
{
background-image: url(images/down.gif);
}
</style>
</head>
<body>
</body>
</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="javascript" type="text/javascript" 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="javascript" type="text/javascript"><!--
$(function() {
$("body").append('<div class="map"></div>');
$("body").append('<div class="UserPanel">您共有<span id="Blood"></span>滴血<br /> 您当前的等级：<span id="Grade"></span><br />未消灭敌人个数:<span id="enemyNum"></span></div>');
$("#Blood").html(Blood);
$("#Grade").html(Grade);
$("#enemyNum").html(enemyNum);
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 enemymoveLong = 5;//敌人移动速度
var bulletmoveLong = 20;//子弹移动速度
var timeSpan = 300;//刷新页面时间
var long = 600;
var high = 600;
var enemymoveTime = 10;//敌人走多少次判断距离坦克的方位和打子弹的频率
var enemyNum = 5;//剩余敌人个数
var Blood = 3;//用户的血量
var MaxBlood = 5;//最大血量
var Grade = 0;//等级
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).stop().animate({'top':(mtop + 'px'),'left':(mleft + 'px')},timeSpan);
}
$(".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 = enemymoveTime;
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*enemymoveLong;
eleft = eleft + ex*enemymoveLong;
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*enemymoveLong;
eleft = eleft + offset.x*enemymoveLong;
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).stop().animate({'top':(etop + 'px'),'left':(eleft + 'px')},timeSpan).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).stop().animate({'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).stop().hide();
$(this).stop().hide();
}
});
});
}
//判断坦克相碰
function CheckTank()
{
var me = $("#me");
$(".tank").not("#me").each(function(){
if(IsCollision(me,this))
{
Failure();
}
});
}
//判断子弹打在坦克上
function CheckBulletTank()
{
var me = $("#me");
$(".bullet[owner!='me']:visible").each(function(){
if(IsCollision(me,this))
{
$(this).stop().hide();
FallBlood();
}
});
$(".bullet[owner='me']:visible").each(function(){
var fme = this;
$(".tank").not("#me").each(function(){
if(IsCollision(fme,this))
{
$(this).stop().hide();
$(fme).stop().hide();
InitEnemy();
FallEnemy();
Plusblood();
}
});
});
}
//根据方向返回偏移量
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}).removeClass($("#enemy1").attr("direction")).addClass("down").attr("direction","down").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 FallBlood()
{
Blood--;
if(Blood<=0)
{
Failure();
}
$("#Blood").html(Blood);
}
//加血
function Plusblood()
{
if(Blood<MaxBlood)
{
Blood++;
}
$("#Blood").html(Blood);
}
//升级
function Upgrade()
{
Grade++;
enemyNum = 5+Grade*2;//更新敌人个数
enemymoveLong = ((10+Grade<20)?10+Grade:20);//更新敌人移动速度
$("#Grade").html(Grade);
}
//减少敌人
function FallEnemy()
{
if(enemyNum==0)
{
Upgrade();
}else
{
enemyNum--;
}
$("#enemyNum").html(enemyNum);
}
//失败
function Failure()
{
clearInterval(MyInterval);
alert('结束了');
}
// --></mce:script>
<mce:style type="text/css"><!--
.map
{
width: 600px;
height: 600px;
border: 1px solid #000;
float: left;
position:absolute;
top:0;
left:0;
}
.bullet
{
width:10px;
height:10px;
background: #FF0;
position:absolute;
}
.tank
{
width: 50px;
height: 50px;
position:absolute;
}
.right
{
background-image: url(images/right.gif);
}
.left
{
background-image: url(images/left.gif);
}
.up
{
background-image: url(images/up.gif);
}
.down
{
background-image: url(images/down.gif);
}
.UserPanel{
position:absolute;
width:200px;
height:300px;
left:600px;
top:0px;
border:1px solid #fff000;
}
--></mce:style><style type="text/css" mce_bogus="1"> .map
{
width: 600px;
height: 600px;
border: 1px solid #000;
float: left;
position:absolute;
top:0;
left:0;
}
.bullet
{
width:10px;
height:10px;
background: #FF0;
position:absolute;
}
.tank
{
width: 50px;
height: 50px;
position:absolute;
}
.right
{
background-image: url(images/right.gif);
}
.left
{
background-image: url(images/left.gif);
}
.up
{
background-image: url(images/up.gif);
}
.down
{
background-image: url(images/down.gif);
}
.UserPanel{
position:absolute;
width:200px;
height:300px;
left:600px;
top:0px;
border:1px solid #fff000;
}
</style>
</head>
<body>
</body>
</html> 下载地址
http://download.csdn.net/source/2475923
新版下载地址
http://download.csdn.net/source/2477943
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 坦克大战 搜索
- 坦克大战_坦克绘制
- 韩顺平 javascript教学视频_学习笔记31_随意拖拽窗口案例_dom对象（style对象）_坦克大战1.0版
- 坦克大战0.0-0.4
- js面向对象编程小游戏（坦克大战1.0版本）
- 坦克大战，看你能坚持几秒 ~~Duang~~Duang
- unity3D游戏开发实战原创视频讲座系列2之2D坦克大战开发过程
- java 实现坦克大战2.1版
- 坦克大战1（坦克的绘图实现）
- JAVA项目学习之坦克大战图片版
- 线程的控制之守护线程_坦克大战帮助理解
- NYOJ 284--坦克大战【BFS && 优先队列】
- 超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等
- J2SE 坦克大战 马士兵（5）
- nyoj 284 坦克大战 简单搜索
- C++_坦克大战_源码_注释
- Java学习总结之坦克大战项目（一）
- Java学习总结之坦克大战项目（二）
- nyoj 284-坦克大战
- 坦克大战 Java版