演示

技术栈

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

(function() {
    /**
     * 1. JavaScript使用正则式的函数
     */
    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.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.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.src='images/boom.png';
								clearInterval(oEnemy.timer);
								setTimeout(function(){
									if(!oEnemy.parentNode){
										return;
									}else{
										oEnemy.parentNode.removeChild(oEnemy);
									};
								},500);
								Game.oPlane.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飞机大战内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

基于JS实现飞机大战游戏的示例代码的更多相关文章

  1. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. swift皮筋弹动发射飞机ios源码

    这是一个款采用swift实现的皮筋弹动发射飞机游戏源码,游戏源码比较详细,大家可以研究学习一下吧。

  4. Swift coreAnimation 加计时器写的游戏《飞机大战》

    最近在学习swift的动画和图层,就用现学的东西写了个游戏,基本思想基本功能都实现了,图片都是在网上找得。希望能帮助大家更好的理解动画和图层、声明下,我是初学者,代码写的不好。大家应该都能看懂。游戏所有代码都是swift加动画加计时器,没有用任何游戏引擎框架。效果图源代码地址:点击打开链接地址失效了的话我可以补上

  5. Swift与Js通过WebView交互

    开发环境:Swfit2.3XCode8.2基础概念jscontext,jscontext是代表JS的执行环境,通过-evaluateScript:方法就可以执行一JS代码JSValue,JSValue封装了JS与ObjC中的对应的类型,以及调用JS的API等JSExport,JSExport是一个协议,遵守此协议,就可以定义我们自己的协议,在协议中声明的API都会在JS中暴露出来,才能调用Swif

  6. JSCore swift

    如果双方相互引用,会造成循环引用,而导致内存泄露。以上是Jscore的基本使用,比较简单

  7. Swift WKWebView的js调用swift

    最近项目需求,需要用到JavaScriptCore和WebKit,但是网上的资源有限,而且比较杂,都是一个博客复制另外一个博客,都没有去实际敲代码验证,下面给大家分享一下我的学习过程。

  8. Swift WKWebView的swift调用js

    不多说,直接上代码:在html里面要添加的的代码,显示swift传过去的参数:这样就实现了swift给js传参数和调用!

  9. 在 Swift 專案中使用 Javascript:編寫一個將 Markdown 轉為 HTML 的編輯器

    你有強烈的好奇心,希望在你的iOS專案中使用JavaScript。jscontext中的所有值都是JSValue對象,JSValue類用於表示任意類型的JavaScript值。因此,我們既需要寫Swift代碼也要寫JavaScript代碼。此外,我們還會在JavaScript中按照這個類的定義來創建一個對象并對其屬性進行賦值。從Swift中呼叫JavaScript就如介紹中所言,JavaScriptCore中最主要的角色就是jscontext類。一個jscontext對象是位於JavaScript環境和本

  10. swift - WKWebView JS 交互

    本文介绍WKWebView怎么与js交互,至于怎么用WKWebView这里就不介绍了HTML代码APP调JS代码结果JS给APP传参数首先注册你需要监听的js方法名2.继承WKScriptMessageHandler并重写userContentController方法,在该方法里接收JS传来的参数3.结果

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部