今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏。。
本来想用html5做的,但是毕竟人家才初学,连jquery都还不会,所以最终还是决定用原生的javascript。虽说相对于园内的高手们而言代码算不上优雅,效率算不上高,不过对于初学者来练手还是足以。。
三个文件,main.js(主函数),entity.js(实体类与工厂类),util.js(工具类),基本原理就是把位置信息保存在对象里面,然后在setInterval里面统一对所有对象进行更新显示。程序所用到的飞机与子弹图片都是从微信上截屏得来的。
先上图:
再上代码:
index.html:
打飞机 积分: 0
main.js:
// JavaScript Documentvar 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.xselfPlane.y+selfPlane.e.height/2 &&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 =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){ // IE keynum = e.keyCode }else if(e.which) { // Netscape/Firefox/Opera keynum = 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); } } }
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
util.js:
// JavaScript Documentvar 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; }}
在线预览:
源码下载地址: