原生javascript开发仿微信打飞机小游戏
今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏。。
本来想用html5做的,但是毕竟人家才初学,连jquery都还不会,所以最终还是决定用原生的javascript。虽说相对于园内的高手们而言代码算不上优雅,效率算不上高,不过对于初学者来练手还是足以。。
三个文件,main.js(主函数),entity.js(实体类与工厂类),util.js(工具类),基本原理就是把位置信息保存在对象里面,然后在setInterval里面统一对所有对象进行更新显示。程序所用到的飞机与子弹图片都是从微信上截屏得来的。
先上图:
再上代码:
index.html:
<!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> <script type="text/javascript" src="js/util.js"></script> <script type="text/javascript" src="js/entity.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript">window.onload=function(){Main.init();Util.g("startBtn").onclick=function(){Main.start();this.style.display="none";} } </script> </head> <body> <div id="parent" style="margin: 0 auto; width:350px; height:480px; background-color:#c3c9c9; position: relative;overflow:hidden;"><div style="position:absolute;left:5px;top:5px;">积分:<span id="score">0</span></div><button style=" position:absolute; left:150px;top:240px;display:block;" id="startBtn">点击开始</button></div> </body> </html>
View Code
main.js:
// JavaScript Document var Main={init:function(){Util.init();},_totalEnemies:8,start:function(){//初始化敌机enemyPlaneFactory.creatEnemyPlane(this._totalEnemies);//初始化自己 selfPlane.init();//初始化子弹bulletFactory.creatBullet(100);//开始渲染画面this._render();//开始射击子弹this._startShoot();//初始化键盘事件响应this._initEvent();},//渲染定时器_render_t:null,_render:function(){this._render_t=setInterval(function(){var enemys=enemyPlaneFactory.enemys;for(var i in enemys){var enemy=enemys[i];enemy.move(0,enemy.speed);if(enemy.x+enemy.e.width>selfPlane.x+10&&enemy.x<selfPlane.x+selfPlane.e.width-10&&enemy.y+enemy.e.height>selfPlane.y+selfPlane.e.height/2&&enemy.y<selfPlane.y+selfPlane.e.height){enemy.isDied=true;clearInterval(Main._render_t);clearInterval(Main._startShoot_t);var b=window.confirm("对不起,您已经挂了,是否重玩?")if(b){window.location.reload();}}if(enemy.y>Util.windowHeight||enemy.isDied){enemy.restore();}}var bullets=bulletFactory.bullets;for(var i in bullets){var bullet=bullets[i];bullet.move(0,-bullet.speed);for(var i in enemys){var enemy=enemys[i];//判断子弹是否击中敌机,如果击中则隐藏子弹,杀死敌机,增加积分..if(bullet.y>10&&bullet.x>enemy.x&&bullet.x<enemy.x+enemy.e.width&&bullet.y<enemy.y+enemy.e.height){enemy.isDied=true;bullet.e.style.top=-bullet.e.height;selfPlane.score+=50;Util.scoreSpan.innerHTML=selfPlane.score+"";}}}},1000/15); },//射击定时器_startShoot_t:null,_startShoot:function(){var i=0;var bullets=bulletFactory.bullets;var bulletsCount=bullets.length;this._startShoot_t=setInterval(function(){if(i>=bulletsCount){i=0;}var bullet=bullets[i];bullet.moveTo(selfPlane.x+selfPlane.e.width/2-bullet.e.width/2,selfPlane.y-bullet.e.height-3);i++;},300);},keyMove:10,_initEvent:function(){window.onkeydown=function(e){/*37:左38:上39:右40:下*/var keynum;var left=37,up=38,right=39,down=40;if(window.event){// IEkeynum = e.keyCode}else if(e.which) {// Netscape/Firefox/Operakeynum = e.which}switch(keynum){case left:selfPlane.move(-Main.keyMove,0);break;case up:selfPlane.move(0,-Main.keyMove);break;case right:selfPlane.move(Main.keyMove,0);break;case down:selfPlane.move(0,Main.keyMove);break;default:break;}//console.log(keynum); }}}
View Code
entity.js:
//自身的对象 var selfPlane={x:0,y:0,score:0,e:null,init:function(){this.x=(Util.windowWidth-Util.selfPlaneElement.width)/2;//相对于父窗体的x偏移(css:left)this.y=Util.windowHeight-Util.selfPlaneElement.height;//相对于父窗体的y偏移(css:top)this.e=Util.selfPlaneElement;//对应的dom元素Util.selfPlaneElement.style.left=this.x+"px";Util.selfPlaneElement.style.top=this.y+"px";Util.parentElement.appendChild(this.e);},move:function(moveX,moveY){var x=this.x+moveX;var y=this.y+moveY;if(x<0-this.e.width/2||x>Util.windowWidth-this.e.width/2){return ;}if(y<0-this.e.height/2||y>Util.windowHeight-this.e.height/2){return ;}this.x=x;this.y=y;this.e.style.left=this.x+"px";this.e.style.top=this.y+"px";},moveTo:function(x,y){if(x<0-this.e.width/2||x>Util.windowWidth-this.e.width/2){return ;}if(y<0-this.e.height/2||y>Util.windowHeight-this.e.height/2){return ;}this.x=x;this.y=y;this.e.style.left=this.x+"px";this.e.style.top=this.y+"px";} }//敌机的类 var enemyPlane=function(x,y,speed){this.x=x;this.y=y;this.e=Util.enemyPlaneElement.cloneNode(true);this.e.style.left=x;this.e.style.top=y;this.e.style.display="none";Util.parentElement.appendChild(this.e);this.e.style.display="block";this.speed=speed;this.isDied=false; } //prototype:原型 enemyPlane.prototype.move=function(moveX,moveY){this.x+=moveX;this.y+=moveY;this.e.style.left=this.x+"px";this.e.style.top=this.y+"px"; } //敌人复活 enemyPlane.prototype.restore=function(){this.x=Math.random()*(Util.windowWidth-Util.enemyPlaneElement.width);this.y=-Math.random()*Util.windowHeight-Util.enemyPlaneElement.height;this.speed=2+Math.random()*4;this.e.style.left=this.x+"px";this.e.style.top=this.y+"px";this.isDied=false; } //敌机工厂 var enemyPlaneFactory={enemys:[],creatEnemyPlane:function(n){for(var i=0;i<n;i++){//0~1 乘以窗口宽度,得到的就是从0~窗口宽度的一个随机x值var x=Math.random()*(Util.windowWidth-Util.enemyPlaneElement.width);var y=-Math.random()*Util.windowHeight-Util.enemyPlaneElement.height;var speed=2+Math.random()*4;var ep=new enemyPlane(x,y,speed);this.enemys.push(ep);}} } //子弹 var bullet=function(x,y,speed){this.x=x;this.y=y;this.speed=speed;this.e=Util.bulletElement.cloneNode(true);this.e.style.left=this.x+"px";this.e.style.top=this.y+"px";Util.parentElement.appendChild(this.e);this.isUsed=false; }bullet.prototype.move=function(moveX,moveY){this.x+=moveX;this.y+=moveY;this.e.style.left=this.x+"px";this.e.style.top=this.y+"px"; } bullet.prototype.moveTo=function(X,Y){this.x=X;this.y=Y;this.e.style.left=this.x+"px";this.e.style.top=this.y+"px"; }//子弹恢复 bullet.prototype.restore=function(){this.x=Main.selfthis.y=-Math.random()*Util.windowHeight-Util.enemyPlaneElement.height;this.speed=2+Math.random()*4;this.e.style.left=this.x+"px";this.e.style.top=this.y+"px"; } //子弹工厂 var bulletFactory={bullets:[],creatBullet:function(n){for(var i=0;i<n;i++){var b=new bullet(0,-Util.bulletElement.height,20);this.bullets.push(b);}} }
View Code
util.js:
// JavaScript Document var Util={windowWidth:350,windowHeight:480,selfPlaneElement:null,enemyPlaneElement:null,bulletElement:null,parentElement:null,scoreSpan:null,g:function(id){return document.getElementById(id);},init:function(){this.parentElement=this.g("parent");this.selfPlaneElement=this._loadImg("images/self.gif");this.enemyPlaneElement=this._loadImg("images/boss.gif");this.bulletElement=this._loadImg("images/bullet.jpg");this.scoreSpan=this.g("score");},_loadImg:function(src){var e=document.createElement("img");e.style.position="absolute";e.src=src;return e;} }
View Code
在线预览:预览
源码下载地址:打飞机小游戏原生javascript版
转载于:https://www.cnblogs.com/Mr-Nobody/p/3537718.html
原生javascript开发仿微信打飞机小游戏相关推荐
- 微信打飞机小游戏的尝试
微信打飞机小游戏的尝试 问题:微信打飞机游戏出现不断跳出的问题 原因:未加return.
- H5版仿制微信跳一跳小游戏,网页版仿微信跳一跳小游戏源码,实现了跳一跳的基本核心功能
H5版仿制微信跳一跳小游戏,网页版仿微信跳一跳小游戏源码,实现了跳一跳的基本核心功能 完整代码下载地址:H5版仿制微信跳一跳小游戏,网页版仿微信跳一跳小游戏源码 运行截图 Project setup ...
- Python编写微信打飞机小游戏(三)
如果觉得这篇文章对您有所启发,欢迎关注我的公众号,我会尽可能积极和大家交流,谢谢. Python编写微信打飞机小游戏(一) Python编写微信打飞机小游戏(二) Python编写微信打飞机小游戏(三 ...
- js 实现微信打飞机小游戏 小练习
还是想练习js 的内容 看见了一个关于微信打飞机小游戏的例子,就照着做了一点,发现看懂和自己写真的是不一样,很多问题都是对函数理解不够透彻. 这次是使用了面向对象的方法创建了敌机类,在学习这个的时候也 ...
- Python编写微信打飞机小游戏(八)
如果觉得这篇文章对您有所启发,欢迎关注我的公众号,我会尽可能积极和大家交流,谢谢. Python编写微信打飞机小游戏(一) Python编写微信打飞机小游戏(二) Python编写微信打飞机小游戏(三 ...
- Python编写微信打飞机小游戏(十一)
如果觉得这篇文章对您有所启发,欢迎关注我的公众号,我会尽可能积极和大家交流,谢谢. Python编写微信打飞机小游戏(一) Python编写微信打飞机小游戏(二) Python编写微信打飞机小游戏(三 ...
- Javascript开发的金山打字简易小游戏
记得以前读书的时候,由于课前都预习过了,所以听课一般都是为了给老师面子很"耐心"的坐在教室里,发着呆走着神.突然,那天上课讲了几天前预习的课题,采用JS可以识别键盘输入,嘿嘿,好玩 ...
- Python编写微信打飞机小游戏(七)
如果觉得这篇文章对您有所启发,欢迎关注我的公众号,我会尽可能积极和大家交流,谢谢. Python编写微信打飞机小游戏(一) Python编写微信打飞机小游戏(二) Python编写微信打飞机小游戏(三 ...
- Python编写微信打飞机小游戏(十)
如果觉得这篇文章对您有所启发,欢迎关注我的公众号,我会尽可能积极和大家交流,谢谢. Python编写微信打飞机小游戏(一) Python编写微信打飞机小游戏(二) Python编写微信打飞机小游戏(三 ...
- Python编写微信打飞机小游戏(五)
如果觉得这篇文章对您有所启发,欢迎关注我的公众号,我会尽可能积极和大家交流,谢谢. Python编写微信打飞机小游戏(一) Python编写微信打飞机小游戏(二) Python编写微信打飞机小游戏(三 ...
最新文章
- 【Deep Clustering】Improving Unsupervised Image Clustering With Robust Learning
- 图方法:寻找无向图联通子集的JAVA版本
- Servlet的快速入门以及执行原理
- php的变量都放在哪里,php变量一般放在哪个位置
- CVE-2018-1000136:Electron nodeIntegration绕过漏洞
- 1.struts1.x基本action的配置与使用
- 信息学奥赛一本通(1162:字符串逆序)
- 嵌入式操作系统内核原理和开发(等值block内存池设计)
- ABP(现代ASP.NET样板开发框架)系列之20、ABP展现层——动态生成WebApi
- 在 Linux 平台中调试 C/C++ 内存泄漏方法
- [数据模型] 数据表三种关联的概述
- ISO 2768-2 标准
- Centos7安装masscan
- linux敏感内容检测工具,认识Linux平台四大IDS***检测工具
- 乒乓球侧旋球MATLAB,乒乓球的侧拐球、侧旋球和侧弧圈辨析
- 2018上海居住证续签
- 怎么给领导做项目汇报
- 探索嵌入式应用框架(EAF)
- golang对接支付宝支付
- Android端2016年9月系统使用以及兼容测试
热门文章
- 全球1/10女性受到盆腔脏器脱垂困扰
- angularjs学习:事件
- WCF服务部署到IIS上,然后通过web服务引用方式出现错误的解决办法
- JAVA.SQL.SQLEXCEPTION: INCORRECT STRING VALUE: '\XF0\X9F\X92\X94' FOR COLUMN 'CONTENT' AT ROW 1
- 支付宝报错:missing-signature 未设置签名参数
- 1.5W 字搞懂 Spring Cloud,太牛了!
- 这个教人写出烂代码的项目在 GitHub 上火了...
- 动图妙解高内聚与低耦合,觉得让你秒懂
- 月薪过万的岗位名单,大家久等了!
- 直播带货还有机会吗?