博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
原生javascript开发仿微信打飞机小游戏
阅读量:6697 次
发布时间:2019-06-25

本文共 6078 字,大约阅读时间需要 20 分钟。

hot3.png

  今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏。。

本来想用html5做的,但是毕竟人家才初学,连jquery都还不会,所以最终还是决定用原生的javascript。虽说相对于园内的高手们而言代码算不上优雅,效率算不上高,不过对于初学者来练手还是足以。。

 

   三个文件,main.js(主函数),entity.js(实体类与工厂类),util.js(工具类),基本原理就是把位置信息保存在对象里面,然后在setInterval里面统一对所有对象进行更新显示。程序所用到的飞机与子弹图片都是从微信上截屏得来的。

 

先上图:

 

再上代码:

index.html:

打飞机
积分:
0
View Code

 

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.x
selfPlane.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); } } }
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
View Code

 

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;    }}
View Code

 

 在线预览:

源码下载地址:

转载于:https://my.oschina.net/ZaneYoung/blog/330690

你可能感兴趣的文章
Oracle SELECT INTO 和 INSERT INTO SELECT 两种表复制语句详解
查看>>
用反卷积(Deconvnet)可视化理解卷积神经网络还有使用tensorboard
查看>>
SuperMap iObject入门开发系列之五管线属性查询
查看>>
策略模式、观察者模式、代理模式、装饰模式 应用场景和实现
查看>>
[转]简单的动态修改RDLC报表页边距和列宽的方法
查看>>
The Ultimate List of Open Source Static Code Analysis Security Tools
查看>>
Hadoop基础-Hdfs各个组件的运行原理介绍
查看>>
Android获取所有应用的资源id和对应的uri
查看>>
CentOS7查看开放端口命令
查看>>
一文搞懂:词法作用域、动态作用域、回调函数、闭包
查看>>
Linux tee的花式用法和pee
查看>>
Java实现多文件压缩打包的方法
查看>>
.NET Core和.NET Standard有什么不同
查看>>
Feign api调用方式
查看>>
Linux下安装FFmpeg
查看>>
用SSH登录远程的机器,在远程机器上执行本地机器上的脚本
查看>>
string interpolation in sql server
查看>>
测试一体机ASM failgroup的相关问题处理
查看>>
JVM技术周报第2期
查看>>
std::shared_ptr之deleter的巧妙应用
查看>>