用js写飞机大战的小游戏-基于js实现飞机大战游戏的示例代码是什么软件

lxf2023-04-06 17:32:01
摘要

这篇文章主要为大家详细介绍如何利用JS实现飞机大战游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

目录
  • 演示
  • 技术栈
  • 源码
    • 定义敌方战机
    • 定义我方战机
    • 碰撞检测

演示

用js写飞机大战的小游戏-基于js实现飞机大战游戏的示例代码是什么软件

技术栈

今天没有什么特别要讲的,要不我们提前介绍下次要做的技术吧。你不说话就是同意了。我们开始了。 下图是正则表达式的一些总结大家可以先看看哦

用js写飞机大战的小游戏-基于js实现飞机大战游戏的示例代码是什么软件

(function() {
    
    const str = "abchelloasdasdhelloasd";

    // 1. 查找
    console.log(str.search("h")); // 3
    
    // 2. 替换
    console.log(str.replace(/a/, "s")); // sbchelloasdasdhelloasd
    
    // 3. 切割
    console.log(str.split(/ab/)); // ["", "bchello", "sd", "sdhello", "sd"]
    
    // 4. RegExp.prototype.test方法:检测该字符串是否包含指定串
    console.log(/hello/.test("abchello")); // true
    
    // 5. RegExp.prototype.exec方法:将满足条件的字符串放到数组
    let reg=/hello/g;
    reg.exec("abchelloasdasdhelloasd");  // ["hello"]

}());

源码

<div id='box'></div>

定义敌方战机

//敌方战机
				'enemy' : function(){
					var oEnemy = Game.ctE('img');
					oEnemy. class="lazy" src="images/enemy.png";
					oEnemy.className='enemy';
					Game.box.appendChild(oEnemy);
					var left = Math.random()*(Game.box.clientWidth-Game.getstyle(oEnemy,'width')/2);
					var top = Game.getstyle(oEnemy,'top');
					oEnemy.style.left=left+'px';
					oEnemy.timer=setInterval(function(){
						
						top+=3;
						oEnemy.style.top=top+'px';
						if(top>Game.box.clientHeight){
							clearInterval(oEnemy.tiamr);
							if(!oEnemy.parentnode){
								return;
							}else{
								oEnemy.parentNode.removeChild(oEnemy);
							};
						}else{
							var allB = Game.getclass(Game.box,'img','bullet');
							for(var i=0;i<allB.length;i++){
								if(Game.pz(oEnemy,allB[i])){
									allB[i].parentNode.removeChild(allB[i]);
									oEnemy. class="lazy" src="images/boom.png";
									clearInterval(oEnemy.timer);
									setTimeout(function(){
										if(!oEnemy.parentNode){
											return;
										}else{
											oEnemy.parentNode.removeChild(oEnemy);
										};
									},500);
									Game.num+=10;
									Game.oScore.innerhtml=Game.num+'分';
									Game.fenshu=Game.oScore.innerHTML;
								};	
							};
							if(Game.pz(oEnemy,Game.oPlane)){
								oEnemy. class="lazy" src="images/boom.png";
								clearInterval(oEnemy.timer);
								setTimeout(function(){
									if(!oEnemy.parentNode){
										return;
									}else{
										oEnemy.parentNode.removeChild(oEnemy);
									};
								},500);
								Game.oPlane. class="lazy" src="images/boom2.png";
								clearInterval(Game.bTimer);
								clearInterval(Game.start.timer);
								document.onmousemove=null;
								setTimeout(function(){
									Game.over();
								},3000);
							};
						};
					},30);
				},

定义我方战机

		'plane' : function(ev,t,c){
					Game.box.appendChild(Game.oPlane);
					var bT = Game.box.offsetTop + Game.oPlane.clientHeight/2 + (Game.box.offsetHeight-Game.getstyle(Game.box,'height'))/2;
					var bL = Game.box.offsetLeft + Game.oPlane.clientWidth/2 + (Game.box.offsetWidth-Game.getstyle(Game.box,'width'))/2;
					var top = ev.pageY - bT;
					var left = ev.pageX - bL;
					Game.oPlane.style.CSSText='top:'+top+'px;left:'+left+'px;';	

					var topMax = Game.getstyle(Game.box,'height')-Game.oPlane.clientHeight/2;
					var leftMin = -Game.oPlane.clientWidth/2;
					var leftMax = Game.getstyle(Game.box,'width')-Game.oPlane.clientWidth/2;
					document.onmousemove = function(ev){
						ev = ev||event;
						top = ev.pageY - bT;
						left = ev.pageX - bL;
						if(top<0){
							top=0;
						}else if(top>topMax){
							top = topMax;
						};
						if(left<leftMin){
							left = leftMin;
						}else if(left>leftMax){
							left = leftMax;
						};
						Game.oPlane.style.cssText='top:'+top+'px;left:'+left+'px;';	
					};
					
					
					Game.bTimer=setInterval(function(){Game.bullet(top,left,c);},t);

				},

碰撞检测

//碰撞检测
				'pz' : function(obj1,obj2){
					var T1 = Game.getstyle(obj1,'top');
					var B1 = T1+Game.getstyle(obj1,'height');
					var L1 = Game.getstyle(obj1,'left');
					var R1 = L1+Game.getstyle(obj1,'width');

					var T2 = Game.getstyle(obj2,'top');
					var B2 = T2+Game.getstyle(obj2,'height');
					var L2 = Game.getstyle(obj2,'left');
					var R2 = L2+Game.getstyle(obj2,'width');

					if(T1>B2||L1>R2||B1<T2||R1<L2){
						return false;
					}else{
						return true;
					};
				},

用js写飞机大战的小游戏-基于js实现飞机大战游戏的示例代码是什么软件

到此这篇关于基于js实现飞机大战游戏的示例代码的文章就介绍到这了,更多相关JS飞机大战内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.adminjs.cn!