先写一个敌机类

/*
创建敌机:
*/
function Enemy(blood,speed,imgs){
//敌机left
this.left = 0;
//敌机top
this.top = 0;
//敌机血量
this.blood = blood;
//敌机速度
this.speed = speed;
//敌机图片集合
this.imgs = imgs;//爆炸前和爆炸后
}
Enemy.prototype = {
constructor:Enemy,
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 = parseInt(Math.random()*(320-img.offsetWidth));
_this.top = -img.offsetHeight;
img.style.left = _this.left+'px';
img.style.top = _this.top+'px';
}; //生成敌机编号并放入引擎的bullet中
this.id = Math.random();
Engine.enemy[this.id]=this;
},
//子弹移动,定时器都交给引擎去做
move:function(){
this.top+=this.speed;
this.self.style.top = this.top+'px';
//越界判断
if(this.top>568+this.self.offsetWidth){
this.destroy();
}
},
destroy:function(){
//销毁
//从页面小时
this.self.remove();
//从内存消失
delete Engine.bullet[this.id];
} }

在去创建小型 中型 大型敌机

/*
创建所有类型的飞机
*/
function SmallEnemy(){
var s = parseInt(Math.random()*3+3);
Enemy.call(this,1,s,['image/enemy1.png','image/enemy1-bang.gif'])
}
SmallEnemy.prototype = {
constructor:SmallEnemy;
__proto__:Enemy.prototype;
} function MiddleEnemy(){
var s = parseInt(Math.random()*3+2);
Enemy.call(this,5,s,['image/enemy2.png','image/enemy2-bang.gif'])
}
MiddleEnemy.prototype = {
constructor:MiddleEnemy;
__proto__:Enemy.prototype;
} function LargeEnemy(){
var s = parseInt(Math.random()*2+1);
Enemy.call(this,10,s,['image/enemy3.png','image/enemy3-bang.gif'])
}
LargeEnemy.prototype = {
constructor:LargeEnemy;
__proto__:Enemy.prototype;
}

去引擎里面不间断的创建敌机

/*
游戏引擎
*/
var Engine = {
//刚开始的游戏状态
gameStatus:false,
//所以敌机
enemy:{},
//子弹
bullet:{},
//得分
score:0,
//背景图片
game:document.querySelector('.game'),
//初始化
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(); //创建敌机
var timer = 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;
var timer = setInterval(function(){
//创建所有子弹
for(var i in _this.bullet){
_this.bullet[i].move()
}
//c创建所有敌机动
for(var i in
_this.enemy){
_this.enemy[i].move()
}
},30)
}
};
Engine.init();

javascript飞机大战-----006创建敌机的更多相关文章

  1. javascript飞机大战-----005创建子弹对象2

    子弹销毁 /* 创建子弹:因为子弹不是只创建一个所以要用构造函数 注意一点:子弹发射的位置应该是英雄机的正中央的位置,所以需要传点东西进来 */ function Bullet(l,t){ this. ...

  2. javascript飞机大战-----004创建子弹对象

    /* 创建子弹:因为子弹不是只创建一个所以要用构造函数 注意一点:子弹发射的位置应该是英雄机的正中央的位置,所以需要传点东西进来 */ function Bullet(l,t){ this.l = l ...

  3. javascript飞机大战-----003创建英雄机

    /* 英雄机:因为英雄机只有一辆所以不需要用构造函数 */ var Hero = { //初始图片 self:null, //初始left left:0, //初始top top:0, //生命值 l ...

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

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

  5. JavaScript—飞机大战

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

  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. javascript飞机大战-----008积分

    /* 创建敌机: */ function Enemy(blood,speed,imgs,scroe){ //敌机left this.left = 0; //敌机top this.top = 0; // ...

  9. JavaScript—飞机大战2版

    前面的思路对了  BUG 出在了计时器和没有加判断页面是否存在元素 <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. openfire数据库mysql配置

    <?php return array( //'配置项'=>'配置值' //'USERNAME'=>'admin', //赋值 //数据库配置信息 'DB_TYPE' => 'm ...

  2. 关于Cocos2d-x中init方法和onEnter方法的区别

    init()和onEnter()这两个方法都是写实例化对象的类(比如继承自Node的一些类等等)的时候用到的方法. 一般都是public类型下面的 bool init(); void onEnter( ...

  3. linux -- 查看Ubuntu命令行调用的文件

    which 如: 输入:which reboot 输出:/sbin/reboot 输入:which shutdown -h now 输出:/sbin/shutdown

  4. R语言低级绘图函数-title

    title 函数用来在一张图表上添加标题 基本用法: main 表示主标题,通常位于图像的上方, sub 表示副标题,位于图像的下方, xlab 表示x轴的标签,ylab 表示y轴的标签 par(om ...

  5. 【Java面试题】59 Math.round(11.5)等於多少? Math.round(-11.5)等於多少?

    Math类中提供了三个与取整有关的方法:ceil.floor.round,这些方法的作用与它们的英文名称的含义相对应,例如,ceil的英文意义是天花板,该方法就表示向上取整,Math.ceil(11. ...

  6. linux(十一)之初始化文件

    前面写了很多linux的知识,其实很多都是命令的,所以要去多多的练习才能学的更好,加油为了好工作. 要么现在懒惰,未来讨饭.要么现在努力,未来惬意. 一.初始化文件概述 1.1.概述 系统初始化文件是 ...

  7. iOS: UUID and SSKeyChain

    需要加入SSKeyChain文件 传送门:SSKeyChain // // UniqueIDCreater.h // Housemart // // Created by Haozhen Li on ...

  8. java web 复选框checked

    熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常Google到一些这个不好那个不 ...

  9. <UIKit>关于剪贴板共享数据

     http://blog.sina.com.cn/s/blog_45e2b66c010102h9.html 上面这篇文章将剪贴板的使用方法基本上已经讲清楚了,参考这篇文章,再加上一个使用剪贴板共享数据 ...

  10. 下载mysql server安装包的时候,不登录oracle账号,实现下载

    需求描述: 之前下载mysql安装包的时候,都是使用oracle账号进行登录下载,最近看到可以不登录账号 就实现下载的方法,在此记录下. 操作过程: 1.选择mysql linux服务器上的安装包,点 ...