JQuery_小蜜蜂

最新推荐文章于 2024-05-18 22:08:03 发布

明平姚博客

最新推荐文章于 2024-05-18 22:08:03 发布

阅读量255

点赞数 1

分类专栏： web前端文章标签：前端

本文链接：https://blog.csdn.net/mingpingyao/article/details/78987740

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

	<!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>
	<style>
	*{ margin:0; padding:0;}
	li{ list-style:none;}
	#div1{ width:800px; height:600px; overflow:hidden; background:black; margin:20px auto; position:relative;}
	#gameBtn{ color:white; font-size:20px; cursor:pointer; border:1px #FFFFFF solid; width:100px; height:30px; line-height:30px; text-align:center; position:absolute; top:285px; left:350px;}

	#score{ color:#FFFFFF;}
	#bee{ position:relative;}
	.enemy1{ width:40px; height:28px; background:url(images/mf1.png) no-repeat; float:left;}
	.enemy2{ width:40px; height:28px; background:url(images/mf2.png) no-repeat; float:left;}
	.enemy3{ width:40px; height:28px; background:url(images/mf3.png) no-repeat; float:left;}

	.air1{ width:46px; height:60px; background:url(images/fj.png) no-repeat; position:absolute;}
	.bullet{ width:1px; overflow:hidden; height:10px; background:white; position:absolute;}
	</style>

	<script>

	window.onload = function(){
	var oBtn = document.getElementById('gameBtn');

	oBtn.onclick = function(){
	this.style.display = 'none';
	Game.init('div1'); //游戏gogogo!!!
	};

	};

	var Game = {

	oEnemy : { //敌人的数据
	e1 : {style:'enemy1',blood:1,speed:5,score:1},
	e2 : {style:'enemy2',blood:2,speed:7,score:2},
	e3 : {style:'enemy3',blood:3,speed:10,score:3}
	},

	gk : [ //关卡的数据
	{
	eMap : [
	'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
	'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
	'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
	'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
	'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
	'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1'
	],
	colNum : 10,
	iSpeedX : 10,
	iSpeedY : 10,
	times : 2000
	},
	{
	eMap : [
	'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3',
	'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3',
	'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3',
	'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
	'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
	'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1'
	],
	colNum : 10,
	iSpeedX : 10,
	iSpeedY : 10,
	times : 2000
	}
	],
	air : { //飞机的数据
	style : 'air1',
	bulletStyle : 'bullet'
	},

	init : function(id){ //初始化
	this.oParent = document.getElementById(id);

	this.createScore();

	this.createEemey(0);

	this.createAir();

	},
	createScore : function(){ //创建积分
	var oS = document.createElement('div');
	oS.id = 'score';
	oS.innerHTML = '积分:<span>0</span>分';
	this.oParent.appendChild(oS);
	this.oSNum = oS.getElementsByTagName('span')[0];
	},
	createEemey : function(iNow){ //创建敌人

	if( this.oUl ){
	this.oParent.removeChild( this.oUl );
	clearInterval(this.oUl.timer);
	}

	document.title = '第'+ (iNow + 1) +'关';

	var gk = this.gk[iNow];
	var oUl = document.createElement('ul');
	this.oUl = oUl;
	this.aLi = null;

	var arr = [];

	oUl.id = 'bee';
	oUl.style.width = gk.colNum * 40 + 'px';
	this.oParent.appendChild(oUl);
	oUl.style.left = (this.oParent.offsetWidth - oUl.offsetWidth)/2 + 'px';

	for(var i=0;i<gk.eMap.length;i++){
	var oLi = document.createElement('li');
	oLi.className = this.oEnemy[gk.eMap[i]].style;
	oLi.blood = this.oEnemy[gk.eMap[i]].blood;
	oLi.speed = this.oEnemy[gk.eMap[i]].speed;
	oLi.score = this.oEnemy[gk.eMap[i]].score;
	oUl.appendChild(oLi);
	}

	this.aLi = oUl.getElementsByTagName('li');

	for(var i=0;i<this.aLi.length;i++){
	arr.push( [ this.aLi[i].offsetLeft , this.aLi[i].offsetTop ] );
	}

	for(var i=0;i<this.aLi.length;i++){
	this.aLi[i].style.position = 'absolute';
	this.aLi[i].style.left = arr[i][0] + 'px';
	this.aLi[i].style.top = arr[i][1] + 'px';
	}

	this.runEnemy(gk);

	},
	runEnemy : function(gk){ //敌人移动

	var This = this;

	var L = 0;
	var R = this.oParent.offsetWidth - this.oUl.offsetWidth;

	this.oUl.timer = setInterval(function(){

	if(This.oUl.offsetLeft>R){
	gk.iSpeedX *= -1;
	This.oUl.style.top = This.oUl.offsetTop + gk.iSpeedY + 'px';
	}
	else if(This.oUl.offsetLeft<L){
	gk.iSpeedX *= -1;
	This.oUl.style.top = This.oUl.offsetTop + gk.iSpeedY + 'px';
	}

	This.oUl.style.left = This.oUl.offsetLeft + gk.iSpeedX + 'px';

	},200);

	setInterval(function(){

	This.oneMove();

	},gk.times);

	},

	oneMove : function(){ //单兵作战

	var nowLi = this.aLi[ Math.floor(Math.random()*this.aLi.length) ];
	var This = this;

	nowLi.timer = setInterval(function(){

	var a = (This.oAir.offsetLeft + This.oAir.offsetWidth/2) - (nowLi.offsetLeft + nowLi.parentNode.offsetLeft + nowLi.offsetWidth/2);
	var b = (This.oAir.offsetTop + This.oAir.offsetHeight/2) - (nowLi.offsetTop + nowLi.parentNode.offsetTop + nowLi.offsetHeight/2);

	var c = Math.sqrt(aa + bb);

	var sX = nowLi.speed * a/c;
	var sY = nowLi.speed * b/c;

	nowLi.style.left = nowLi.offsetLeft + sX + 'px';
	nowLi.style.top = nowLi.offsetTop + sY + 'px';

	if( This.pz( This.oAir , nowLi ) ){
	alert("Game Over");
	window.location.reload();
	}

	},30);

	},

	createAir : function(){ //创建飞机
	var oAir = document.createElement('div');

	oAir.className = this.air.style;

	this.oAir = oAir;

	this.oParent.appendChild( oAir );

	oAir.style.left = (this.oParent.offsetWidth - oAir.offsetWidth)/2 + 'px';
	oAir.style.top = this.oParent.offsetHeight - oAir.offsetHeight + 'px';

	this.bindAir();

	},
	bindAir : function(){ //操作飞机

	var timer = null;
	var iNum = 0;
	var This = this;

	document.onkeydown = function(ev){
	var ev = ev \|\| window.event;
	var F=document.getElementById('a2');
	if(!timer){
	timer = setInterval(show,30);
	}

	if( ev.keyCode == 37 ){

	F.src='music/spawn.mp3';
	F.play();

	iNum = 1;
	}
	else if( ev.keyCode == 39 ){

	F.src='music/spawn.mp3';
	F.play();
	iNum = 2;
	}
	};

	document.onkeyup = function(ev){
	var ev = ev \|\| window.event;
	clearInterval(timer);
	timer = null;
	iNum = 0;

	if(ev.keyCode == 32){
	//A.src='music/shot.mp3';
	//A.play();
	var A=document.getElementById('a2');
	A.src='music/shot.mp3';
	A.play();
	This.createBullet();
	}

	};

	function show(){
	if(iNum == 1){
	This.oAir.style.left = This.oAir.offsetLeft - 10 + 'px';
	}
	else if(iNum == 2){
	This.oAir.style.left = This.oAir.offsetLeft + 10 + 'px';
	}
	}

	},
	createBullet : function(){ //创建子弹
	var oB = document.createElement('div');
	oB.className = this.air.bulletStyle;
	this.oParent.appendChild( oB );
	oB.style.left = this.oAir.offsetLeft + this.oAir.offsetWidth/2 + 'px';
	oB.style.top = this.oAir.offsetTop - 10 + 'px';
	this.runBullet(oB);
	},
	runBullet : function(oB){ //子弹移动

	var This = this;
	oB.timer = setInterval(function(){

	var T = oB.offsetTop - 10;

	if(T<-10){
	clearInterval(oB.timer);
	This.oParent.removeChild(oB);
	}
	else{
	oB.style.top = T + 'px';
	}

	for(var i=0;i<This.aLi.length;i++){
	if( This.pz(oB,This.aLi[i]) ){

	if(This.aLi[i].blood == 1){

	clearInterval( This.aLi[i].timer );
	This.oSNum.innerHTML = parseInt(This.oSNum.innerHTML) + This.aLi[i].score;

	This.oUl.removeChild( This.aLi[i] );

	}
	else{
	This.aLi[i].blood--;
	}


	This.oParent.removeChild(oB);
	clearInterval(oB.timer);
	}
	}

	if( !This.aLi.length ){
	This.createEemey(1);
	}

	},30);

	},
	pz : function(obj1,obj2){ //碰撞检测
	var L1 = obj1.offsetLeft;
	var R1 = obj1.offsetLeft + obj1.offsetWidth;
	var T1 = obj1.offsetTop;
	var B1 = obj1.offsetTop + obj1.offsetHeight;
	var L2 = obj2.offsetLeft+obj2.parentNode.offsetLeft;
	var R2 = obj2.offsetLeft + obj2.offsetWidth + obj2.parentNode.offsetLeft;
	var T2 = obj2.offsetTop + obj2.parentNode.offsetTop;;
	var B2 = obj2.offsetTop + obj2.offsetHeight + obj2.parentNode.offsetTop;

	if( R1<L2 \|\| L1>R2 \|\| T1>B2 \|\| B1<T2 ){

	return false;
	}
	else{
	return true;
	}
	}
	};

	</script>
	</head>

	<body>
	<div id="div1">
	<div id="gameBtn">开始游戏</div>
	</div>
	<audio id="a2"></audio>
	</body>
	</html>

明平姚博客

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery_小蜜蜂

xmlns="http://www.w3.org/1999/xhtml"> http-equiv="Content-Type" content="text/html; charset=utf-8" /> 无标题文档 *{ margin:0; padding:0;} li{ list-styl
复制链接

扫一扫