首页> 基础笔记 >JS/JQ基础学习 >经典案例 经典案例

JavaScript实例：飞机大战

作者：小萝卜 2023-03-23 【 】 浏览 241

简介JavaScript实例：飞机大战


images

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>飞机大战</title>
	<style type="text/css">
		#game{width:400px;height:450px;border:solid 1px #333;margin:0 auto;position:relative;overflow:hidden;
				background:url(./images/bg_1.jpg);
				background-position:0px 0px;
			}
		#me{width:106px;height:76px;position:absolute;left:0px;bottom:0px;}
		.enemy{width:100px;height:70px;position:absolute;left:0px;top:0px;}
		.b{width:20px;height:30px;background:url(./images/b.png);position:absolute;}
		#boom{width:100px;height:70px;display:none;position:absolute;}
		#start{width:120px;height:50px;color:white;position:absolute;background:orange;left:150px;top:200px;font-family:microsoft yahei;text-align:center;line-height:40px;cursor:pointer;}
		#score{position:absolute;right:0px;top:0px;width:50px;height:20px;background:orange;
			text-align:center;color:white;
		}
		#imgScore{width:200px;height:40px;border:solid 1px #333;}
		.num{background:url(./images/num.png);height:32px;width:22px;background-position:0px 0px;float:left;}
	</style>
</head>
<body>
	<div id="game">
		<div id="me"><img src="./images/me.png" alt=""></div>
		<div id="start">开始游戏哦!!</div>
		<div id="score">0</div>
	</div>
	<!-- 显示分数div -->
	<div id="imgScore">
	</div>
	<div id="boom"><img src="./images/boom.gif" alt="" width="100%"></div>
	<script type="text/javascript">
	//获取元素
	var game = document.getElementById('game');
	var me = document.getElementById('me');
	var step = 2;//飞机移动的步进
	var inte = null;//定时器变量
	var isVip = true;
	var meSpeed = 100;
	var enemyStep = 5;//敌机的移动步进
	var bStep = 5;//子弹的移动步进
	var bSpeed = 100;
	var bY = 0;//背景的y轴位置
	var isStart = false;//
	var s = 0;//分数


	//初始化函数
	function init(){
		//使自己的div水平居中
			//获取大div的宽度
			var bw = game.offsetWidth;
			//获取小div的宽度
			var xw = me.offsetWidth;
			//计算中间的left属性
			var newLeft = (bw-xw)/2;
			//设置css样式
			me.style.left = newLeft + 'px';
		//如果是vip的话   自己飞机的移动事件间隔修改
			if(isVip){
				meSpeed = 10;
				step = 10;
				bStep = 10;
				bSpeed = 10;
			}
	}
	init();

	//绑定键盘按下事件
	window.onkeypress = function(e){
		//检测游戏是否开始 如果没有开始 直接返回
		if(!isStart) return ;
		//获取当前的按键信息
		var k = e.keyCode || e.charCode;
		switch(k){
			case 37:
				moveLeft();
				break;
			case 38:
				moveUp();
				break;
			case 39:
				moveRight();
				break;
			case 40:
				moveDown();
				break;
			case 32:
				fire();
				break;
		}
	}

	//绑定键盘抬起事件
	window.onkeyup = function(){
		//清空定时器
		clearInterval(inte);
		inte = null;
	}

	//创建敌机函数
	function createEnemy(){
		// <!-- <div class="enemy"><img src="./images/e1.png" alt="" width="100%"></div> -->
		//创建div元素 
		var d = document.createElement('div');
		//添加class属性
		d.className = "enemy";
		//创建img标签
		var img = document.createElement('img');
		//设置属性
		var r = rand(1,3);
		img.setAttribute('src','./images/e'+r+'.png');
		img.setAttribute('width','100%');
		//计算敌机的最大值left
		var maxLeft = game.offsetWidth - 100;
		var newLeft = rand(0, maxLeft);
		//设置敌机left属性
		d.style.left = newLeft + 'px';
		//将img插入div中
		d.appendChild(img);
		//将敌机div插入game div中
		game.appendChild(d);

		//启动定时器使敌机自动移动
		var inte2 = setInterval(function(){
			//获得当前新产生元素的top属性
			var t = parseInt(getComputedStyle(d).top);
			//计算新的top属性
			var newTop = t + enemyStep;
			//判断是否越界
			if(newTop > game.offsetHeight){
				//清空定时器
				clearInterval(inte2);
				inte2 = null;
				//删除元素
				game.removeChild(d);
			}

			//设置top样式
			d.style.top = newTop + 'px';

		},100);
	}

	//启动定时器 没过一段时间产生一个新的敌机
	setInterval(function(){
		if(!isStart) return;
		createEnemy();
	}, 2000);
	
	setInterval(function(){
		bY += 1;
		game.style.backgroundPosition = "0px "+bY+"px";
	},10)

	//向左移动
	function moveLeft(){
		//判断定时器是否已经存在
		if(inte != null) return;
		//启动定时器 自动移动
		inte = setInterval(function(){
			//获取left属性 off
			var css = getComputedStyle(me);
			var l = parseInt(css.left);//获得left的尺寸
			var newLeft = l - step;
			//对left进行边界判断
			if(newLeft < 0){
				newLeft = 0;
			}

			//设定css样式
			me.style.left = newLeft + 'px';
		}, meSpeed);
	}

	//向上移动
	function moveUp(){
	}

	//向右移动
	function moveRight(){
		//判断定时器是否已经存在
		if(inte != null) return;
		//启动定时器 自动移动
		inte = setInterval(function(){
			//获取left属性 off
			var css = getComputedStyle(me);
			var l = parseInt(css.left);//获得left的尺寸
			var newLeft = l + step;
			//对left进行边界判断
			// 计算div最大的left值
			var maxLeft = game.offsetWidth - me.offsetWidth - 2;
			if(newLeft > maxLeft){
				newLeft = maxLeft;
			}

			//设定css样式
			me.style.left = newLeft + 'px';
		}, meSpeed);
	}

	//向下移动
	function moveDown(){
	}

	//发射子弹函数 <div class="b"></div>
	function fire(){
		//如果不是vip检测页面子弹的数量
		if(!isVip){
			//获取子弹div元素
			var ds = document.getElementsByClassName('b');
			//检测
			if(ds.length >= 2){//超过两个  直接返回
				return ;
			}
		}

		//创建div子弹
		var d = document.createElement('div');
		//添加class属性
		d.className = 'b';
		//修改子弹的left和top
		//计算子弹的left值
		var l = me.offsetLeft + me.offsetWidth/2;
		//计算top值
		var t = game.offsetHeight - 76 - 20;
		//设置子弹的left和top
		d.style.left = l + 'px';
		d.style.top = t + 'px';
		//将子弹插入到game中
		game.appendChild(d);
		//启动定时器  使子弹自动移动
		var inte3 = setInterval(function(){
			//获取当前子弹的top属性
			var t = parseInt(getComputedStyle(d).top);
			//计算新的top值
			var newTop = t - bStep;
			//对新的top值进行检测 
			if(newTop < -20){//如果越界的话
				clearInterval(inte3);
				inte3 = null;
				//删除子弹
				game.removeChild(d);
			}

			//检测子弹是否打中飞机
			var es = document.getElementsByClassName('enemy');
			for(var i=0;i<es.length;i++){
				//当前正在遍历的敌机左侧的偏移量
				var minLeft = es[i].offsetLeft;
				//获取最大的left
				var maxLeft = es[i].offsetLeft + 100;
				//获取当前敌机距离顶部的偏移量
				var minTop = es[i].offsetTop;
				var maxTop = es[i].offsetTop + 70;
				//如果满足条件证明打中了飞机
				if(d.offsetLeft >= minLeft && d.offsetLeft <= maxLeft && d.offsetTop >= minTop && d.offsetTop <= maxTop){
					//加分
					showScore(++s);
					//删除子弹元素
					game.removeChild(d);
					//清空定时器
					clearInterval(inte3);
					inte3 = null;
					//克隆元素
					var newBoom = document.getElementById('boom').cloneNode(true);
					//设置元素显示
					newBoom.style.display = "block";
					//设置当前爆炸元素的left和top
					newBoom.style.left = minLeft + 'px';
					newBoom.style.top = minTop + 'px';
					//执行替换
					game.replaceChild(newBoom, es[i]);
					//过一段时间之后 执行删除操作
					setTimeout(function(){
						game.removeChild(newBoom);
					}, 300);
				}
			}

			//设置新的top值
			d.style.top = newTop + 'px';
		}, bSpeed);
	}

	//给开始按钮绑定单击事件
	document.getElementById('start').onclick = function(){
		//修改全局变量
		isStart = true;
		//
		this.style.display = "none";
	}

	//显示当前的分数
	function showScore(num){
		//清空imgScore div
		document.getElementById('imgScore').innerHTML = "";
		// document.getElementById('score').innerHTML = num;
		//用图片显示单个数字  5 =>  -110   2 => -44   n=>-22*(n)
		// var left = -22*num;
		//设置背景的位置
		// document.getElementsByClassName('num')[0].style.backgroundPosition = left+"px 0px";
		//获取数字的长度 根据长度来创建div数字元素 imgScore
		var str = String(num);
		for(var i=0;i<str.length;i++){
			var d = document.createElement('div');
			//添加class属性
			d.className = 'num';
			//修改当前元素的background-position
			var ch = str.charAt(i);
			//计算新的背景位置的属性
			var newLeft = -22*(ch);
			d.style.backgroundPosition = newLeft+"px 0px";
			//执行插入操作
			document.getElementById('imgScore').appendChild(d);
		}
	}
	// showScore(25000);

	//获取随机数的函数封装他
	function rand(m,n){
		return Math.ceil(Math.random()*(n-m+1))+m-1;
	}
	</script>
</body>
</html>

很赞哦！ (0)

上一篇：

下一篇：

相关文章

文章评论

点击排行

MySQL报错： SQLSTATE[HY000]: General error: 1030 Got error 28 from storage engine解决办法

标签云

微信赞助 支付宝赞助

申请链接友情链接

    高端网站建设