/*
游戏引擎
*/
var Engine = {
//刚开始的游戏状态
gameStatus:false,
//所以敌机
enemy:{},
//子弹
bullet:{},
//得分
scroe:0,
//背景图片
game:document.querySelector('.game'),
//页面得分
textScroe:document.querySelector('.score'), //初始化
init:function(){
this.gameStart();
},
//游戏开始
gameStart:function(){
var _this = this;
//点击图片的时候判断游戏状态
this.game.onclick = function(){
if(!_this.gameStatus){
_this.gameStatus = true;
//移动移动
_this.bgMove();
_this.handleMove();
_this.createPlane();
}
}
},
//背景移动
bgMove:function(){
var y=0;
var _this = this;
this.bgTimer = setInterval(function(){
y+=2;
_this.game.style['background-position-y']=y+'px';
},50)
},
createPlane:function(){
//创建敌机和英雄机
Hero.init(); //创建敌机
this.createTimer = setInterval(function(){
var num = parseInt(Math.random()*15)+1;
switch (num) {
case 1:
case 3:
case 5:
case 7:
case 9:
new SmallEnemy().init();
break;
case 2:
case 4:
case 6:
new MiddleEnemy().init();
case 8:
case 12:
new LargeEnemy().init(); }
},500)
},
//所有敌机和子弹都要动
handleMove:function(){
var _this=this;
this.moveTimer = setInterval(function(){
//创建所有子弹
for(var i in _this.bullet){
_this.bullet[i].move()
}
//c创建所有敌机动
for(var i in _this.enemy){
_this.enemy[i].move()
} },30)
},
//碰撞检测
isCompact:function(obj1,obj2){
var l1 = obj1.offsetLeft>obj2.offsetLeft+obj2.offsetWidth;
var l2 = obj2.offsetLeft>obj1.offsetLeft+obj1.offsetWidth;
var t1 = obj1.offsetTop>obj2.offsetTop+obj2.offsetHeight;
var t2 = obj2.offsetTop>obj1.offsetTop+obj1.offsetHeight;
if(l1||l2||t1||t2){
return false;
}else{
return true;
}
},
//更新得分
updateScroe:function(scroe){ this.scroe+=scroe; this.textScroe.innerHTML="分数"+this.scroe;
},
gameOver:function(){
//停止创建敌机
clearInterval(this.createTimer); //子弹停止
clearInterval(this
.moveTimer);
}

};
Engine.init();

子弹停止

/*
英雄机:因为英雄机只有一辆所以不需要用构造函数
*/
var Hero = {
//初始图片
self:null,
//初始left
left:0,
//初始top
top:0,
//生命值
life:3,
//加载进来的图和爆照的图
imgs:['image/hero.gif','image/hero-bang.gif'],
//获得到自己的红星
allHero:document.querySelectorAll('.life>img'),
//初始化
init:function(){
//创建一个元素
var img = document.createElement('img');
//将图片路径赋值给它
img.src=this.imgs[0];
//插入到game中
Engine.game.appendChild(img);
//赋值给英雄机的初始图片
this.self = img;
//当图片加载完成以后获取图片的高度和宽度
var _this = this;//在函数里面this的指向会改变,所以我们提前报存下来
img.onload = function(){
//因为上面的属性有this.left所以我们应该和图片一样赋值给它
_this.left = (Engine.game.offsetWidth-img.offsetWidth)/2;//英雄机的left中心点等于(game的宽度-英雄机的宽度)除以2
_this.top = Engine.game.offsetHeight-img.offsetHeight;
img.style.left = _this.left+'px';
img.style.top = _this.top+'px';
//初始化的时候调用move
_this.move();
_this.shoot();
}; },
//鼠标移动的时候英雄机也要移动
move:function(){
//类似于放大镜
var _this = this;
document.onmousemove = function(e){
var e = e||event;
var l = e.clientX - Engine.game.offsetLeft - _this.self.offsetWidth/2;
var t = e.clientY - Engine.game.offsetTop - _this.self.offsetHeight/2;
//边界处理
var lmax = Engine.game.offsetWidth-_this.self.offsetWidth;//最大边界 var bmax = Engine.game.offsetHeight-_this.self.offsetHeight;//最大边界
l = l < 0 ? 0 : (l > lmax ? lmax : l);
t = t < 0 ? 0 : (t > bmax ? bmax : t); //赋值
_this.self.style.left = l+'px';
_this.self.style.top = t+'px'; //更新left top
_this.left = l;
_this.top = t;
}
},
//发子弹
shoot:function(){
//每隔100毫秒发一次子弹
var _this = this;
this.shootTimer = setInterval(function(){
var l = _this.left+_this.self.offsetWidth/2
new Bullet(l,_this.top).init();
},100)
},
bang:function(){
var img = document.createElement('img');
img.src = this.imgs[1];
img.style.left = this.left+'px';
img.style.top = this.top+'px';
Engine.game.appendChild(img)
setTimeout(function(){
img.remove();
},1000)
},
die:function(){
this.life--;
this.allHero = document.querySelectorAll('.life img');
this.allHero[0].remove(); console.log(this.allHeart,this.allHero[0])
if(this.life<=0){
this.destroy();
}
},
destroy:function(){
this.self.remove();
this.bang();
clearInterval(this.shootTimer);
//游戏结束
this
.gameOver();
}
}
//在游戏没开始的时候不能出现英雄机和子弹所以要放在引擎里面
//Hero.init();

javascript飞机大战-----009游戏结束的更多相关文章

  1. javascript飞机大战-----002游戏引擎

    基本html布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. canvas绘制“飞机大战”小游戏,真香!

    canvas是ArkUI开发框架里的画布组件,常用于自定义绘制图形.因为其轻量.灵活.高效等优点,被广泛应用于UI界面开发中. 本期,我们将为大家介绍canvas组件的使用. 一.canvas介绍 1 ...

  3. 用面向对象的编程方式实现飞机大战小游戏,java版

    概述 本文将使用java语言以面向对象的编程方式一步一步实现飞机大战这个小游戏 本篇文章仅供参考,如有写的不好的地方或者各位读者哪里没看懂可以在评论区给我留言 或者邮件8274551712@qq.co ...

  4. javascript飞机大战-----001分析

    1.游戏引擎 首先要做飞机大战要考虑的是这个游戏被分成了哪几大部分?这样我们一块一块去做,特别清晰明了.那么接下来我们就简单的分析下飞机大战分成了哪几大部分 1.游戏引擎 2.英雄机 3.敌机 4.子 ...

  5. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)

    整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...

  6. javascript 飞机大战完整代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. javascript飞机大战-----0010完整版代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. android:怎样用一天时间,写出“飞机大战”这种游戏!(无框架-SurfaceView绘制)

    序言作为一个android开发人员,时常想开发一个小游戏娱乐一下大家,今天就说说,我是怎么样一天写出一个简单的"飞机大战"的. 体验地址:http://www.wandoujia. ...

  9. JavaScript—飞机大战

    今天来写个游戏,飞机大战 1,布局 2,思路 1,动态创建自己的飞机 让它在规定的区域,跟着鼠标运动. 2,在自己飞机的上方,间隔1s生成子弹.子弹往上移动 当top:0 子弹消失 3,每隔1s 产生 ...

随机推荐

  1. 在hibernate中查询单个对象的方法,get()、load()、

    查询单个对象可以直接通过Session对象来做到,其中session这个对象提过了2种获得单个对象的方法,一个是get方法和load方法,我去看这个两个方法的时候发现这两个方法的参数是一样的,使用方式 ...

  2. 初识EseNt

    转自:http://www.cnblogs.com/goosao/archive/2011/09/23/2186412.html 一.什么是EseNtEseNt(Extensible Storage ...

  3. 【从0開始Tornado建站】整体设计

    Tornado是一个非堵塞的webserver,也是python的web框架中很优秀的一款.网上关于django的tutorial许多并且具体,关于tornado的使用就很少了.我想以我从0開始的方式 ...

  4. CentOS查看何人何时登陆用户

    使用linux 的last命令: last命令列出的是/var/log 目录下的wtmp文件内容,这个文件存的是二进制内容,不可以直接用vi等文本边界软件打开.这样即使是root用户也不可能随随便便的 ...

  5. iOS 使用AFNetworking 设置cookie

    本问题是由于多账号访问统一服务器时, 由于服务器那边接收到sessionid一样, 故无法区分账号信息. 所以需要在移动端请求的时候重新设置cookie, 步骤如下: 1. 在登录的时候, 先将 re ...

  6. Ubuntu创建新用户并增加管理员权限

    1.Ubuntu中的root帐号默认是被禁用了的,所以登陆的时候没有这个账号 打开终端开启root账户 sudo passwd -u root sudo passwd root 设置root密码,输入 ...

  7. MathType在字母上加虚线的方法

    在数学中根据不同的需要,会对其中的公式或变量字母作不同的标记.这些标记在用MathType编辑数学公式时同样也要准确地编辑出来,例如在字母上方加虚线.这种数学样式在使用时也是根据自己的数学问题来使用的 ...

  8. ModelState.AddModelError使用

    后台: ModelState.AddModelError("userPwd", "请输入密码!"); ModelState是一个字典类型,这句话的作用是向Mod ...

  9. mac 开发环境安装使用 记录

    常用命令 1 查找文件位置: $locate php-fpm 软件变动的话更新locate本地库,可能比较耗时. $sudo /usr/libexec/locate.updatedb 2 查找运行文件 ...

  10. JBOSS-EAP-6.2集群部署

    1 概述 应用的合理部署即能提高系统的可靠性和稳定性,又能提高系统的可维护性和扩展性.本文档详细阐述基于Apache负载均衡和JBOSS7集群的应用系统部署方案和配置步骤.内容涉及部署方案.环境配置. ...