原生 JS 实现飞机大战小游戏

最新推荐文章于 2024-03-09 10:25:08 发布
最新推荐文章于 2024-03-09 10:25:08 发布
阅读量661 收藏 7
点赞数 1
分类专栏： 前端 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43542074/article/details/97404468
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> 飞机大战 </title>
  <style type="text/css"> 
	*{margin:0;padding:0;font-family:"Microsoft yahei"}
	 body{overflow:hidden;;}
  </style>
 </head>

 <body>


  <script>
	window.onload = function(){
		Game.exe();
	};
	var Game = {
		//启动程序
		exe :function(){
			document.body.style.background = '#fff';
			var oDiv = document.createElement('div');
				oDiv.id = 'GameBox';
				oDiv.style.cssText = 'width:600px;height:500px;border:10px solid #999;margin:50px auto;font-family:"Microsoft yahei";text-align:center;position:relative;overflow:hidden;background:#fff';
			document.body.appendChild(oDiv);
			this.init();
		},

		score : 0 ,
		ifEnd : false,
		//初始化
		init: function(){
			
			var This = this;
			var oDiv = document.getElementById('GameBox');
			oDiv.innerHTML = '';
			Game.score = 0;
			Game.ifEnd = false;
			var oH = document.createElement('h1');
				oH.innerHTML = '飞机大战 v1.0';
				oH.style.cssText = 'color:#555555;font-size:30px;padding-top:50px;';
				oDiv.appendChild( oH );
			for (var i=0;i<4 ;i++ )
			{
				var oP = document.createElement('p');
					oP.index = i;
					oP.style.cssText = 'font-size:18px;color:white;width:180px;height:50px;margin:40px auto;text-align:center;background:#999;line-height:40px;font-family:"Microsoft yahei";font-weight:bold;cursor:pointer;'
				var html = '';
				oP.onmouseenter = function(){
					this.style.background = '#ff9933';
					this.style.color = '##ff6600'
				};
				oP.onmouseleave = function(){
					this.style.background = '#999';
					this.style.color = 'white'
				};
				oP.onclick = function( e ){
					e = e || window.event;
					This.start( this.index , oDiv , e );
				};
				switch( i ){
					case 0:
						html = '简单难度';
						break;
					case 1:
						html = '中等难度';
						break;
					case 2:
						html = '困难难度';
						break;
					case 3:
						html = '小天才附体';
						break;
				}
				oP.innerHTML = html;
				oDiv.appendChild(oP);

			};
		},
		//游戏开始
		start : function( index , oGameBox , e  ){
			oGameBox.innerHTML = '';

			var oS = document.createElement('span');
				oS.innerHTML = this.score;
				oS.style.cssText = 'position:absolute;left:20px;top:20px;font-size:14px;color:black;';
			oGameBox.appendChild( oS );
			this.plane( oGameBox , e ,index );
			this.enemy( oGameBox ,oS ,index );
		},
		//关于飞机
		plane : function( oGameBox , e ,index ){
			var x = e.pageX;
				y = e.pageY;
			var oPlane = new Image();
				oPlane.src = 'images/plane.png';
				oPlane.width = 60;
				oPlane.height = 36;
				oPlane.id = 'plane';
			var tY = oGameBox.offsetTop+parseInt(oGameBox.style.borderWidth)+oPlane.height/2;
			var lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2;
			window.onresize = function(){
				lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2;
			};
			var top = y- tY;
			var left = x- lX;
				oPlane.style.cssText = 'display:block;position:absolute;top:'+top+'px;left:'+left+'px;';
			oGameBox.appendChild( oPlane );
			
			var leftMin = - oPlane.width/2;
			var leftMax = oGameBox.clientWidth - oPlane.width/2;
			var topMin = 0;
			var topMax = oGameBox.clientHeight - oPlane.height;

			document.onmousemove = function(e){
				if( !Game.ifEnd )
				{

					e = e || window.event;
					var top = e.pageY -tY;
					var left = e.pageX -lX;

					top = Math.min( top , topMax );//取参数里最小的if( top > topMax )top = topMax;
					top = Math.max( top ,topMin );//取参数里最大的
					left = Math.min( left , leftMax );//取参数里最小的if( top > topMax )top = topMax;
					left = Math.max( left ,leftMin );

					oPlane.style.left = left + 'px';
					oPlane.style.top = top + 'px';
				}
			};
			this.biu( oPlane , oGameBox ,index );
		},

		biu : function( oPlane , oGameBox ,index ){
			var speed ;
			switch ( index )
			{
				case 0:
					speed = 30;
					break;
				case 1:
					speed = 40;
					break;
				case 2:
					speed = 50;
					break;
				case 3:
					speed = 10;
					break;
			
			}
			this.BiuTimer = setInterval(function(){
				var oBiu = new Image();
					oBiu.src = 'images/bullet.png';
					oBiu.width = 6;
					oBiu.height = 22;
					oBiu.className = 'bullet';
				var top = oPlane.offsetTop - oBiu.height +3 ;
				var left = oPlane.offsetLeft + oPlane.width/2 -oBiu.width/2;
					oBiu.style.cssText = 'position:absolute;top:'+top+'px;left:'+left+'px;';
				oGameBox.appendChild( oBiu );

				oBiu.timer = setInterval( function(){
					if( !oBiu.parentNode){
						clearInterval( oBiu.timer );
					}
					oBiu.style.top = oBiu.offsetTop - 10 + 'px';
					if( oBiu.offsetTop < -oBiu.height ){
						clearInterval( oBiu.timer );
						oBiu.parentNode.removeChild( oBiu );
					}
				}, 13 );
			} ,speed );
		},
		enemy : function( oGameBox ,oS , index ){
			var a , x;
			switch ( index )
			{
				case 0:
					a = 1;
					x = 500;
					break;
				case 1:
					a = 2;
					x = 300;
					break;
				case 2:
					a = 3;
					x = 200;
					break;
				case 3:
					a = 5;
					x = 100;
					break;
			
			}
			
			this.EnemyTimer = setInterval( function(){
				var oEnemy = new Image();
					oEnemy.src = 'images/enemy.png';
					oEnemy.width = 23;
					oEnemy.height = 30;
				var lMin = 0;
				var lMax = oGameBox.clientWidth - oEnemy.width;
				var left = Math.random()*(lMax-lMin) + lMin;
				oEnemy.style.cssText = 'position:absolute;top: -'+(-oEnemy.height)+'px; left:'+left+'px;';
				oGameBox.appendChild( oEnemy );

				var b = Math.random() * a + 1  ;
				oEnemy.timer = setInterval(function(){	
					oEnemy.style.top = oEnemy.offsetTop + b + 'px';//敌军的下落速度
					if( oEnemy.offsetTop >= oGameBox.clientHeight ){
						clearInterval( oEnemy.timer );
						oEnemy.parentNode.removeChild( oEnemy );
					}
				},13);

				//和子弹的碰撞监测
				var allBiu = Game.getClass('bullet');
				oEnemy.pzBiu = setInterval(function(){
					
					for(var i = 0;i < allBiu.length;i++)
					{
						if( Game.boom( oEnemy ,allBiu[i]))
						{
							Game.score ++;
							oS.innerHTML = Game.score;
							oEnemy.src = 'images/boom.png';
							clearInterval( oEnemy.pzBiu );
							clearInterval( oEnemy.pzPlane );
							allBiu[i].parentNode.removeChild( allBiu[i] );
							setTimeout(function(){
								if( oEnemy.parentNode ){
									oEnemy.parentNode.removeChild( oEnemy );
								};
							},300);
							break;
						}
					}
				},50);
				//和战机的碰撞监测

				var oPlane = document.getElementById('plane');
				oEnemy.pzPlane = setInterval(function(){
					if( Game.ifEnd ){
						clearInterval( oEnemy.pzPlane);
					}

					if( Game.boom( oEnemy , oPlane))
					{
						Game.ifEnd = true;
						clearInterval( oEnemy.pzPlane);
						clearInterval( Game.BiuTimer);
						clearInterval( Game.EnemyTimer);
						oEnemy.src = 'images/boom.png';
						oPlane.src = 'images/boom2.png';
						setTimeout(function(){
							Game.over( oGameBox );
						},300);
					}
				},50);
			} , x );//敌军生成速度
		},
		//碰撞监测
		boom : function( obj1 , obj2 ){
			var T1 = obj1.offsetTop;
			var B1 = T1 + obj1.clientHeight;
			var L1 = obj1.offsetLeft;
			var R1 = L1 + obj1.clientWidth;

			var T2 = obj2.offsetTop;
			var B2 = T2 + obj2.clientHeight;
			var L2 = obj2.offsetLeft;
			var R2 = L2 + obj2.clientWidth;

			if ( R2 < L1 || L2 > R1 || B2 < T1 || T2 > B1 )
			{
				return false; // 没撞上
			}
			else
			{
				return true; // 撞上了
			}
		},
			//游戏结束
			over : function( oGameBox ){
				oGameBox.innerHTML = '';
				var oDiv = document.createElement('div');
					oDiv.style.cssText = 'width:300px;height:200px;margin:100px auto;background:#e0e0e0;border:5px solid #858585';
				var oT = document.createElement('h3');
					oT.innerHTML = 'Game Over';
					oT.style.cssText = 'padding-top:50px;font-size:25px;';

				var oP1 = document.createElement('p');
					oP1.innerHTML = '您的得分是：' + '<span style="color:#ffffff;font-weight:bold;">' + this.score + '</span>';
					oP1.style.cssText = 'font-size:16px;color:#fff;';

				var oRestart = document.createElement('div');
					oRestart.style.cssText = 'width:100px;height:40px;font-size:14px;text-align:center;line-height:40px;color:white;background:#999;margin:20px auto;cursor:pointer;';
					oRestart.innerHTML = '重新开始';
					oRestart.onclick = function(){
						Game.init();
					};

				oDiv.appendChild( oT );
				oDiv.appendChild( oP1 );
				oDiv.appendChild( oRestart );
				oGameBox.appendChild( oDiv );
			},

			//getclass 方法
			getClass : function( cName , parent ){
				parent = parent || document;
				if( document.getElementsByClassName ){
					return parent.getElementsByClassName(cName);
				}
				else
				{
					var all = parent.getElementsByTagName('*');
					var arr = [];
					for( var i = 0;i<all.length;i++ )
					{
						var arrClass = all.className.split(' ');
						for( var j = 0; j < arrClass.length;j++ ){
							if( arrClass[j] == cName )
							{
								arr.push( all[i]);
								break;
							}
						}
					}
					return arr;
			}
		},
	};
  </script>
 </body>
</html>

效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三宝鸭
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript实现飞机大战
编程界明世隐的博客
08-04 3万+
系列目录 1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 引言： 之前我有用Java写过一个飞机大战，感觉挺受欢迎的，有的小伙伴想用Javasript写，我这次就按我的思路写了一个版本。 实现思路 分2张画布来实现，画布1仅仅用来绘制背景图，画布2用来绘制游戏相关的动态内容。 创建我方飞机 定时创建敌机 开启主线程，用来刷新画布2. 代码实现 编写页面 <!DOCTYPE html&
从零开始用js手写飞机大战全过程（附源码）
weixin_73261958的博客
08-29 2643
plane game飞机大战
JS 飞机大战 （含源码）.pdf
12-16
JS 飞机大战 （含源码）
JavaScript 实现飞机大战
最新发布
qqrrjj2011的博客
03-09 1047
JavaScript实现飞机大战示例
h5原生实现飞机大战(完整代码)
MRD
11-19 1567
js版本飞机大战(完整代码)
JS实现飞机大战小游戏 超详细 附源码和原图
qq_52901751的博客
12-13 1756
JS写个简单的飞机大战小游戏~ 附源码原图，超详细哦~
原生JavaScript飞机大战
08-21
通过原生js实现了经典小游戏飞机大战，实现的功能比较简单，包括积分，开始游戏，暂停游戏和重新开始，比较适合刚学习js的朋友看看，希望能利于提升你的js编程。
JavaScript原生编写《飞机大战坦克》游戏完整实例
10-20
飞机大战坦克是一款小游戏，相信很多朋友都有玩过，由于最近在深入学习Javascript，所以想着用利用Javascript来实现这个游戏，下面这篇文章主要介绍了如何利用JavaScript原生编写《飞机大战坦克》游戏,需要的朋友...
原生JS编写的坦克大战小游戏代码.zip
07-11
原生JS编写的坦克大战小游戏代码，坦克大战的游戏，这个在网站中用的不多，几乎用不上，但是可以很好的学习，当了解原生js之后，也可以自己做一些小游戏玩玩，那样也不错，php中文网推荐下载！
原生js自制坦克大战小游戏代码
11-03
原生js自制坦克大战小游戏代码 原生js自制坦克大战小游戏代码
JS原生编写飞机大战小蜜蜂游戏
09-14
本游戏主要由JS编写完成，共200多行JS代码，代码完整，结构清晰，注释详细，很适合初学者学习，下载好解压后点击html文件即可玩。
原生JS简单版飞机大战游戏
11-07
原生JS简单版飞机大战游戏
js原生飞机大战源码
11-27
纯js原生代码飞机大战。
JS实现飞机大战
06-28
html+css基本框架得搭建，定时器，方法，对象，基本循环语句实现简单的飞机大战
原生js写的飞机大战游戏
08-10
原生js写的飞机大战游戏
js个飞机大战游戏
06-01
html小游戏。。。
JS 飞机大战 （含源码）
m0_56732260的博客
12-01 1395
飞机大战
前端案例：飞机大战( js+dom 操作，代码完整，附图片素材)
热门推荐
商务合作 | 共同学习 | 携手共进
03-02 10万+
通过 js 逻辑与 dom 操作结合实现了简易的飞机大战小游戏，附带图片素材。
原生JS实现飞机大战游戏 超详细解析 快来做一个自己玩吧
qq_49900295的博客
05-19 5609
案例分析： 1.开始前 ：一个弹窗面板 2.游戏中：背景滚动 hero的操作 敌机的创建与运动 子弹的创建与运动 碰撞检测 3.游戏结束：一个弹窗面板 下面介绍一下一些核心的代码： 背景滚动的实现： function start() { var timer = setInterval(function() { bgMove(); },30) } start(); 这是我们的初始化函数，为了实现背景滚动的效果我们需要定义一...
原生js canvas小游戏
10-11
可以使用原生js和canvas来开发小游戏，通过canvas绘制游戏界面，监听用户交互，更新游戏状态并重新绘制界面。常见的小游戏类型包括射击游戏、跳跃游戏、平台游戏等。 开发原生js canvas小游戏需要掌握canvas的基本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值