自己用jq写的打飞机游戏,希望大家给点意见,优化性能和一些想法

wocacaca
wocacaca 发布于 2014-12-11 16:08:18 浏览:5086 类型:原创 - 随笔 分类:HTML/CSS - 待整理 二维码: 作者原创 版权保护
<!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>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>

<style type="text/css">
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td ,span, object, iframe{ padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
ol, ul { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }
q:before, q:after { content:""; }
.clearfix:after{ content:""; height:0; visibility:hidden; display:block; clear:both;}
.clearfix{ zoom:1;}

/*star*/
body{ font-family:"微软雅黑";}
a{text-decoration:none;}
.box{width:900px; height:600px; margin:100px auto; background:#6CC; position:relative; overflow:hidden; }
.fullbg{width:900px; height:600px; background:#000; opacity:0.8; position:absolute; left:0; top:0; z-index:8;}
.start{ display:block; width:150px; height:50px; font-size:24px; border:6px solid #FFF; color:#fff; line-height:50px; text-align:center; margin:auto; left:0; top:0; bottom:0; right:0; z-index:100; position:absolute; }
.start:hover{ color:#F90; border-color:#f90;}
.fly{width:80px; height:80px; background:url(http://www.w3cfuns.com/data/attachment/album/201412/11/155649cx3rfrojb5nj5oa3.png.thumb.jpg) no-repeat; position:absolute; top:520px; left:410px; margin:0 auto;}
.zd{ padding:15px 10px; background:url(http://www.w3cfuns.com/data/attachment/album/201412/11/155650f7op7lw7pqlfolkg.png.thumb.jpg) no-repeat; position:absolute; display:none;}
.diji{width:60px; height:60px; background:url(http://www.w3cfuns.com/data/attachment/album/201412/11/155648hmirzlrrax8mdsax.png.thumb.jpg) no-repeat; position:absolute; left:0; top:-50px; display:none;}
.none{ background:none;}
.fs{ font-size:24px; color:#fff; position:absolute; left:10px; bottom:5px;}
.jf{}
</style>
</head>

<body>
<div class="box">
	<div class="fly" id="plane"></div>
    <div class="fullbg"></div>
    <a href="javascript:;" id="start" class="start">开始游戏</a>
    <p class="fs">积分:<span class="jf" id="jf"></span></p>
</div>
<script>
// JavaScript Document
$(document).ready(function(){
var $plane=$("#plane"),
	$box=$(".box"),
	$left=0,
	$right=0,
	$top=0,
	$bottom=0,
	$start=$("#start"),
	$diji=$(".diji"),
	$jf=$("#jf"),
	i=0,
	toleft=0,
	toright=0,
	toup=0,
	todown=0,
	width=900,
	height=600,
	y=520,
	x=410,
	//startgame,
	movespeed=2,
	shotspeed=100,
	zdspeed=500,
	mspeed=25,
	fenshu=0;                  //初始参数定义
	$start.click(function(){
		start();
		PZJC=setInterval(PZ,100);
		setdiji=setInterval(Diji,1000);   //敌机出现间隔
	});
	
	function shot(){
		site();
		var left=$left+32,
			top=$top-35,
			$zd=$(".zd"),
			move=top-1;
		$zd.css({"left":left+"px","top":top+"px","display":"block"});
		$box.prepend("<p class='zd'></p>");
		$zd.animate({"top":"0px"},zdspeed,function(){
			var zdtop=$(this).css("top");
			if(zdtop <= "0px"){
				$(this).remove();
			}	
		});
	}                     //子弹射出
	function site(){
		$left=parseInt($plane.css("left"));
		$top=parseInt($plane.css("top"));
		$right=parseInt($plane.css("right"));
		$bottom=parseInt($plane.css("bottom"));
	}                      //飞机定位
	//alert();
	function start(){
		$plane.css("display","block");     //重新开始时出现己方飞机
		$(".fullbg").css("display","none");
		$start.css("display","none");
		startgame=setInterval(shot,shotspeed);	
	}
	
	 $(document).keydown(function (event) {
            switch (event.which) {
                case 37:  if(x>0 && toleft==0){LEFT=setInterval(moveleft,1); toleft=1;}else if(x<0){$plane.css("left","0px");x=0;}else if(y<0){$plane.css("top","0px");y=0;}else if(y>height-80){$plane.css("bottom",height-80+"px");y=height-80; } Rleft();  break;
                case 38:  if(y>0&&toup==0){UP=setInterval(moveup,1); toup=1;}else if(y<0){$plane.css("top","0px");y=0;}else if(x<0){$plane.css("left","0px");x=0;}else if(x>width-80){$plane.css("left",width-80+"px");x=width-80;}   break;
                case 39:  if(x<width-80&&toright==0){RIGHT=setInterval(moveright,1); toright=1;}else if(x>width-80){$plane.css("left",width-80+"px");x=width-80;}else if(y<0){$plane.css("top","0px");y=0;}else if(y>height-80){$plane.css("bottom",height-80+"px");y=height-80; }  Rright();  break;
                case 40:  if(y<height-80&&todown==0){DOWN=setInterval(movedown,1); todown=1;}else if(y>height-80){$plane.css("bottom",height-80+"px");y=height-80; }else if(x<0){$plane.css("left","0px");x=0;}else if(x>width-80){$plane.css("left",width-80+"px");x=width-80;}   break;
                default: break;
            }
        });                    //键盘操作上下左右,边界划定
	$(document).keyup(function (event) {
            switch (event.which) {
                case 37: Tozero(); clearInterval(LEFT); x=x++; toleft=0; break;
                case 38: Tozero(); clearInterval(UP); y=y++; toup=0; break;
                case 39: Tozero(); clearInterval(RIGHT); x=x--; toright=0; break;
                case 40: Tozero(); clearInterval(DOWN); y=y--; todown=0; break;
                default: break;
            }
        });                 //倾斜复原
	function moveleft(){
		x=x-movespeed;
		//alert(x);
		
		$plane.css("left" , x + "px");
	}
	function moveup(){
		y=y-movespeed;
		
		$plane.css("top" , y + "px");
	}
	function moveright(){
		x=x+movespeed; 
		
		$plane.css("left" , x + "px");
	}
	function movedown(){
		y=y+movespeed;
		
		$plane.css("top" , y + "px");
	}
	function Rleft(){
		$plane.css({"transform":"rotateY(-45deg)"},{"-moz-transform":"rotateY(-45deg)"},{"-webkit-transform":"rotateY(-45deg)"});	 //向左倾斜		
	}
	function Rright(){
		$plane.css({"transform":"rotateY(45deg)"},{"-moz-transform":"rotateY(45deg)"},{"-webkit-transform":"rotateY(45deg)"});		 //向右倾斜	
	}
	function Tozero(){
		$plane.css({"transform":"rotateY(0deg)"},{"-moz-transform":"rotateY(0deg)"},{"-webkit-transform":"rotateY(0deg)"});			
	}
	
	function Diji(){                                             //创建敌机
		var $dj=$("#dj"+i);
			offsetleft=Math.round(Math.random()*850);
			i=i+1;
			//alert(i);
		$box.append("<p class='diji' id='dj"+i+"'></p>");
		$dj.css({"display":"block","left":offsetleft}).animate({"top":"600px"},3000,function(){
			$(this).remove();	
		});
		//alert(123);
		if(i>9){
			i=0; 
			$("#dj10").remove();                                                 //控制最多出现数量	
		}
			
	}
	
	
	function PZ(){                                               //碰撞
		for(var n=0;n<10;n++){
			$dj=$("#dj"+n);
			var Dleft=parseInt($dj.css("left")),
				Dtop=parseInt($dj.css("top"));
			site();
			var flagleft=$left+32,
				flagtop=$top;
			if(flagleft > Dleft && flagleft < Dleft+50 && flagtop > Dtop ){
				Boom();	
				//alert($left);
			}else if(flagtop<Dtop && flagtop+80>Dtop && flagleft > Dleft && flagleft < Dleft+50){
				Boom();
				Boom2();	
			}
		}
		
	}
	
	function Boom(){
		//var $dj=$("#dj"+i);
		$dj.stop().addClass("bz").css("background","none").html("<img src='http://www.w3cfuns.com/data/attachment/album/201412/11/155648a2jvj23jz992xvzx.gif' />");
		setTimeout(djremove,1000);	
		fenshu=fenshu+100;
		$jf.text(fenshu);
	}
	function Boom2(){
		$plane.addClass("none").html("<img src='http://www.w3cfuns.com/data/attachment/album/201412/11/155648a2jvj23jz992xvzx.gif' class='pb' />");
		setTimeout(planeremove,1000);	
	}
	function djremove(){
		var $bz=$(".bz");
			Dtop=$bz.css("top");
		$bz.removeClass("bz").remove();	
	}
	function planeremove(){
		window.clearInterval(startgame);
		clearInterval(setdiji);
		clearInterval(PZJC);
		$(".pb").remove();	
		$plane.css("display","none").removeClass("none");
		$(".fullbg").css("display","block");
		$start.css("display","block").html("重新开始");
	}
	
});

</script>
</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>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>

<style type="text/css">
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td ,span, object, iframe{ padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
ol, ul { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }
q:before, q:after { content:""; }
.clearfix:after{ content:""; height:0; visibility:hidden; display:block; clear:both;}
.clearfix{ zoom:1;}

/*star*/
body{ font-family:"微软雅黑";}
a{text-decoration:none;}
.box{width:900px; height:600px; margin:100px auto; background:#6CC; position:relative; overflow:hidden; }
.fullbg{width:900px; height:600px; background:#000; opacity:0.8; position:absolute; left:0; top:0; z-index:8;}
.start{ display:block; width:150px; height:50px; font-size:24px; border:6px solid #FFF; color:#fff; line-height:50px; text-align:center; margin:auto; left:0; top:0; bottom:0; right:0; z-index:100; position:absolute; }
.start:hover{ color:#F90; border-color:#f90;}
.fly{width:80px; height:80px; background:url(http://www.w3cfuns.com/data/attachment/album/201412/11/155649cx3rfrojb5nj5oa3.png.thumb.jpg) no-repeat; position:absolute; top:520px; left:410px; margin:0 auto;}
.zd{ padding:15px 10px; background:url(http://www.w3cfuns.com/data/attachment/album/201412/11/155650f7op7lw7pqlfolkg.png.thumb.jpg) no-repeat; position:absolute; display:none;}
.diji{width:60px; height:60px; background:url(http://www.w3cfuns.com/data/attachment/album/201412/11/155648hmirzlrrax8mdsax.png.thumb.jpg) no-repeat; position:absolute; left:0; top:-50px; display:none;}
.none{ background:none;}
.fs{ font-size:24px; color:#fff; position:absolute; left:10px; bottom:5px;}
.jf{}
</style>
</head>

<body>
<div class="box">
	<div class="fly" id="plane"></div>
    <div class="fullbg"></div>
    <a href="javascript:;" id="start" class="start">开始游戏</a>
    <p class="fs">积分:<span class="jf" id="jf"></span></p>
</div>
<script>
// JavaScript Document
$(document).ready(function(){
var $plane=$("#plane"),
	$box=$(".box"),
	$left=0,
	$right=0,
	$top=0,
	$bottom=0,
	$start=$("#start"),
	$diji=$(".diji"),
	$jf=$("#jf"),
	i=0,
	toleft=0,
	toright=0,
	toup=0,
	todown=0,
	width=900,
	height=600,
	y=520,
	x=410,
	//startgame,
	movespeed=2,
	shotspeed=100,
	zdspeed=500,
	mspeed=25,
	fenshu=0;                  //初始参数定义
	$start.click(function(){
		start();
		PZJC=setInterval(PZ,100);
		setdiji=setInterval(Diji,1000);   //敌机出现间隔
	});
	
	function shot(){
		site();
		var left=$left+32,
			top=$top-35,
			$zd=$(".zd"),
			move=top-1;
		$zd.css({"left":left+"px","top":top+"px","display":"block"});
		$box.prepend("<p class='zd'></p>");
		$zd.animate({"top":"0px"},zdspeed,function(){
			var zdtop=$(this).css("top");
			if(zdtop <= "0px"){
				$(this).remove();
			}	
		});
	}                     //子弹射出
	function site(){
		$left=parseInt($plane.css("left"));
		$top=parseInt($plane.css("top"));
		$right=parseInt($plane.css("right"));
		$bottom=parseInt($plane.css("bottom"));
	}                      //飞机定位
	//alert();
	function start(){
		$plane.css("display","block");     //重新开始时出现己方飞机
		$(".fullbg").css("display","none");
		$start.css("display","none");
		startgame=setInterval(shot,shotspeed);	
	}
	
	 $(document).keydown(function (event) {
            switch (event.which) {
                case 37:  if(x>0 && toleft==0){LEFT=setInterval(moveleft,1); toleft=1;}else if(x<0){$plane.css("left","0px");x=0;}else if(y<0){$plane.css("top","0px");y=0;}else if(y>height-80){$plane.css("bottom",height-80+"px");y=height-80; } Rleft();  break;
                case 38:  if(y>0&&toup==0){UP=setInterval(moveup,1); toup=1;}else if(y<0){$plane.css("top","0px");y=0;}else if(x<0){$plane.css("left","0px");x=0;}else if(x>width-80){$plane.css("left",width-80+"px");x=width-80;}   break;
                case 39:  if(x<width-80&&toright==0){RIGHT=setInterval(moveright,1); toright=1;}else if(x>width-80){$plane.css("left",width-80+"px");x=width-80;}else if(y<0){$plane.css("top","0px");y=0;}else if(y>height-80){$plane.css("bottom",height-80+"px");y=height-80; }  Rright();  break;
                case 40:  if(y<height-80&&todown==0){DOWN=setInterval(movedown,1); todown=1;}else if(y>height-80){$plane.css("bottom",height-80+"px");y=height-80; }else if(x<0){$plane.css("left","0px");x=0;}else if(x>width-80){$plane.css("left",width-80+"px");x=width-80;}   break;
                default: break;
            }
        });                    //键盘操作上下左右,边界划定
	$(document).keyup(function (event) {
            switch (event.which) {
                case 37: Tozero(); clearInterval(LEFT); x=x++; toleft=0; break;
                case 38: Tozero(); clearInterval(UP); y=y++; toup=0; break;
                case 39: Tozero(); clearInterval(RIGHT); x=x--; toright=0; break;
                case 40: Tozero(); clearInterval(DOWN); y=y--; todown=0; break;
                default: break;
            }
        });                 //倾斜复原
	function moveleft(){
		x=x-movespeed;
		//alert(x);
		
		$plane.css("left" , x + "px");
	}
	function moveup(){
		y=y-movespeed;
		
		$plane.css("top" , y + "px");
	}
	function moveright(){
		x=x+movespeed; 
		
		$plane.css("left" , x + "px");
	}
	function movedown(){
		y=y+movespeed;
		
		$plane.css("top" , y + "px");
	}
	function Rleft(){
		$plane.css({"transform":"rotateY(-45deg)"},{"-moz-transform":"rotateY(-45deg)"},{"-webkit-transform":"rotateY(-45deg)"});	 //向左倾斜		
	}
	function Rright(){
		$plane.css({"transform":"rotateY(45deg)"},{"-moz-transform":"rotateY(45deg)"},{"-webkit-transform":"rotateY(45deg)"});		 //向右倾斜	
	}
	function Tozero(){
		$plane.css({"transform":"rotateY(0deg)"},{"-moz-transform":"rotateY(0deg)"},{"-webkit-transform":"rotateY(0deg)"});			
	}
	
	function Diji(){                                             //创建敌机
		var $dj=$("#dj"+i);
			offsetleft=Math.round(Math.random()*850);
			i=i+1;
			//alert(i);
		$box.append("<p class='diji' id='dj"+i+"'></p>");
		$dj.css({"display":"block","left":offsetleft}).animate({"top":"600px"},3000,function(){
			$(this).remove();	
		});
		//alert(123);
		if(i>9){
			i=0; 
			$("#dj10").remove();                                                 //控制最多出现数量	
		}
			
	}
	
	
	function PZ(){                                               //碰撞
		for(var n=0;n<10;n++){
			$dj=$("#dj"+n);
			var Dleft=parseInt($dj.css("left")),
				Dtop=parseInt($dj.css("top"));
			site();
			var flagleft=$left+32,
				flagtop=$top;
			if(flagleft > Dleft && flagleft < Dleft+50 && flagtop > Dtop ){
				Boom();	
				//alert($left);
			}else if(flagtop<Dtop && flagtop+80>Dtop && flagleft > Dleft && flagleft < Dleft+50){
				Boom();
				Boom2();	
			}
		}
		
	}
	
	function Boom(){
		//var $dj=$("#dj"+i);
		$dj.stop().addClass("bz").css("background","none").html("<img src='http://www.w3cfuns.com/data/attachment/album/201412/11/155648a2jvj23jz992xvzx.gif' />");
		setTimeout(djremove,1000);	
		fenshu=fenshu+100;
		$jf.text(fenshu);
	}
	function Boom2(){
		$plane.addClass("none").html("<img src='http://www.w3cfuns.com/data/attachment/album/201412/11/155648a2jvj23jz992xvzx.gif' class='pb' />");
		setTimeout(planeremove,1000);	
	}
	function djremove(){
		var $bz=$(".bz");
			Dtop=$bz.css("top");
		$bz.removeClass("bz").remove();	
	}
	function planeremove(){
		window.clearInterval(startgame);
		clearInterval(setdiji);
		clearInterval(PZJC);
		$(".pb").remove();	
		$plane.css("display","none").removeClass("none");
		$(".fullbg").css("display","block");
		$start.css("display","block").html("重新开始");
	}
	
});

</script>
</body>
</html>
标签:
z
给个赞 9 人点赞
收藏 1 人收藏
评论 已有 26 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
豆角
豆角2014-12-19 11:14:2726F
好屌~~ //@冰女潮汐:貌似有个bug.把飞机放最左边,分数一直涨,不用动 //@wocacaca:业余时间,可以考虑呀~~
举报 支持 (0) 回复 (0)
yiduanchengxu
yiduanchengxu2014-12-17 20:58:3425F
太牛了。学习了。 //@冰女潮汐:貌似有个bug.把飞机放最左边,分数一直涨,不用动 //@wocacaca:业余时间,可以考虑呀~~
举报 支持 (0) 回复 (0)
Sakura
Sakura2014-12-17 08:43:0024F
   //@冰女潮汐:貌似有个bug.把飞机放最左边,分数一直涨,不用动 //@wocacaca:业余时间,可以考虑呀~~
举报 支持 (0) 回复 (0)
wocacaca
wocacaca2014-12-15 17:36:1123F
这个分数本来就是个bug因为在爆炸的时候移动分数会一直加,刚开始只是想觉得完整点上传的时候临时加的,我会继续完善的~谢谢哈!~ //@冰女潮汐:貌似有个bug.把飞机放最左边,分数一直涨,不用动 //@wocacaca:业余时间,可以考虑呀~~
举报 支持 (0) 回复 (0)
冰女潮汐
冰女潮汐2014-12-15 12:31:2922F
貌似有个bug.把飞机放最左边,分数一直涨,不用动 //@wocacaca:业余时间,可以考虑呀~~ //@lawrence:弄游戏有趣么,呵呵
举报 支持 (0) 回复 (4)
wocacaca
wocacaca2014-12-15 09:33:1821F
传图就好了啊,别的直接贴在运行里面呗 //@wocacaca:业余时间,可以考虑呀~~ //@lawrence:弄游戏有趣么,呵呵
举报 支持 (0) 回复 (0)
那个人。
那个人。2014-12-15 08:56:3020F
我们也写了一个 不过我们的那个好多个类  我都不知道怎么上传 //@wocacaca:业余时间,可以考虑呀~~ //@lawrence:弄游戏有趣么,呵呵
举报 支持 (0) 回复 (0)
lawrence
lawrence2014-12-12 17:37:5019F
弄粗几个游戏了? //@wocacaca:业余时间,可以考虑呀~~ //@lawrence:弄游戏有趣么,呵呵
举报 支持 (0) 回复 (0)
Sakura
Sakura2014-12-12 17:14:0018F
   //@lawrence:弄游戏有趣么,呵呵 //@wocacaca:木有刚毕业五个月,js只接触四个月吧..我知道还有很多地方可以优化,可是不懂从哪里下手
举报 支持 (0) 回复 (0)
wocacaca
wocacaca2014-12-12 17:07:0417F
业余时间,可以考虑呀~~ //@lawrence:弄游戏有趣么,呵呵 //@wocacaca:木有刚毕业五个月,js只接触四个月吧..我知道还有很多地方可以优化,可是不懂从哪里下手
举报 支持 (0) 回复 (4)
wocacaca
wocacaca2014-12-12 17:06:4316F
谢谢 //@wocacaca:木有刚毕业五个月,js只接触四个月吧..我知道还有很多地方可以优化,可是不懂从哪里下手 //@lawrence:楼主用JS多少年了呢?写的不错额:)
举报 支持 (0) 回复 (0)
wocacaca
wocacaca2014-12-12 17:06:2715F
啥意思???听不懂 //@wocacaca:木有刚毕业五个月,js只接触四个月吧..我知道还有很多地方可以优化,可是不懂从哪里下手 //@lawrence:楼主用JS多少年了呢?写的不错额:)
举报 支持 (0) 回复 (0)
Sakura
Sakura2014-12-12 15:34:5114F
你好牛啊,我给不了意见,给点掌声吧      //@wocacaca:木有刚毕业五个月,js只接触四个月吧..我知道还有很多地方可以优化,可是不懂从哪里下手 //@lawrence:楼主用JS多少年了呢?写的不错额:)
举报 支持 (0) 回复 (0)
lawrence
lawrence2014-12-12 14:52:1213F
弄游戏有趣么,呵呵 //@wocacaca:木有刚毕业五个月,js只接触四个月吧..我知道还有很多地方可以优化,可是不懂从哪里下手 //@lawrence:楼主用JS多少年了呢?写的不错额:)
举报 支持 (0) 回复 (2)
LegendaryZtachi
LegendaryZtachi2014-12-12 11:22:3212F
   少年,F多少的 //@wocacaca:应该是,传上来就变成黑色背景了,大家给点意见吧,关于性能优化,还有要改进的地方呢 //@pure_lug:是不是png-24格式的
举报 支持 (0) 回复 (0)
wocacaca wocacaca 作者

快闪开,我要帅炸了!

作者最新