javascript飞机大战-----008积分
/*
创建敌机:
*/
function Enemy(blood,speed,imgs,scroe){
//敌机left
this.left = 0;
//敌机top
this.top = 0;
//敌机血量
this.blood = blood;
//敌机速度
this.speed = speed;
//敌机图片集合
this.imgs = imgs;//爆炸前和爆炸后
//分数
this.scroe = scroe;
}
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();
}
//判断与英雄机相撞
if(Engine.isCompact(this.self,Hero.self)){
//自己销毁
this.destroy();
//英雄机
Hero.die();
}
},
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)
},
destroy:function(){
//销毁
//从页面小时
this.self.remove();
this.bang();
//统计得分
Engine.updateScroe(this.scroe);
//从内存消失
delete Engine.enemy[this.id];
} }
每架飞机的分数
/*
创建所有类型的飞机
*/
function SmallEnemy(){
var s = parseInt(Math.random()*3+3);
Enemy.call(this,1,s,['image/enemy1.png','image/enemy1-bang.gif'],10)
}
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'],20)
}
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'],50)
}
LargeEnemy.prototype = {
constructor:LargeEnemy,
__proto__:Enemy.prototype
}
更新得分
/*
游戏引擎
*/
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(); //创建敌机
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)
},
//碰撞检测
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;
}
};
Engine.init();
javascript飞机大战-----008积分的更多相关文章
- javascript飞机大战-----001分析
1.游戏引擎 首先要做飞机大战要考虑的是这个游戏被分成了哪几大部分?这样我们一块一块去做,特别清晰明了.那么接下来我们就简单的分析下飞机大战分成了哪几大部分 1.游戏引擎 2.英雄机 3.敌机 4.子 ...
- JavaScript—飞机大战
今天来写个游戏,飞机大战 1,布局 2,思路 1,动态创建自己的飞机 让它在规定的区域,跟着鼠标运动. 2,在自己飞机的上方,间隔1s生成子弹.子弹往上移动 当top:0 子弹消失 3,每隔1s 产生 ...
- javascript 飞机大战完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript飞机大战-----0010完整版代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript飞机大战-----006创建敌机
先写一个敌机类 /* 创建敌机: */ function Enemy(blood,speed,imgs){ //敌机left this.left = 0; //敌机top this.top = 0; ...
- JavaScript—飞机大战2版
前面的思路对了 BUG 出在了计时器和没有加判断页面是否存在元素 <!DOCTYPE html> <html lang="en"> <head> ...
- javascript飞机大战-----009游戏结束
/* 游戏引擎 */ var Engine = { //刚开始的游戏状态 gameStatus:false, //所以敌机 enemy:{}, //子弹 bullet:{}, //得分 scroe:0 ...
- javascript飞机大战-----007爆炸效果
要检验什么时候碰撞,我们必须了解什么时候不相撞.以上四种情况是不相撞的时候 首先在引擎里面写好什么时候碰撞什么时候不碰撞 /* 游戏引擎 */ var Engine = { //刚开始的游戏状态 ga ...
- javascript飞机大战-----005创建子弹对象2
子弹销毁 /* 创建子弹:因为子弹不是只创建一个所以要用构造函数 注意一点:子弹发射的位置应该是英雄机的正中央的位置,所以需要传点东西进来 */ function Bullet(l,t){ this. ...
随机推荐
- 关于ARM中的tst、cmp、bne、beq指令
一.关于cmp的详细用法 假设现在AX寄存器中的数是0002H,BX寄存器中的数是0003H. 执行的指令是:CMP AX, BX 执行这条指令时,先做用AX中的数减去BX中的数的减法运算. 列出二进 ...
- 关于Cocos2d-x头文件的引用
cocos2d-x 3.10的G:\cocoshome\Cocos2d-x\cocos2d-x-3.10\extensions\GUI\CCControlExtension\CCScale9Sprit ...
- CentOS显示设置时间命令- date
概要: date命令的功能是显示和设置系统日期和时间 命令格式: date [OPTION]... [+FORMAT]date [-u|--utc|--universal] [MMDDhhmm[[CC ...
- PHPExcel正确读取excel表格时间单元格(转载)
error_reporting(E_ALL); date_default_timezone_set('Asia/shanghai'); /** PHPExcel_IOFactory */ requir ...
- Unity带参数的协程
两种方法都可以传递参数,代码如下: using UnityEngine; using System.Collections; public class Test : MonoBehaviour { v ...
- 安装并配置ROS环境1
ros学习之路(原创博文,转载请标明出处-周学伟http://www.cnblogs.com/zxouxuewei/) 一.ros核心教程 1.安装并配置ROS环境: 注意: 学习这节课之前请按 ...
- PL/SQL如何调试Oracle存储过程
from:http://jingyan.baidu.com/article/3a2f7c2e144d2826aed61167.html 调试过程对找到一个存过的bug或错误是非常重要的,Oracle作 ...
- JBPM4.4_核心概念与相关API
1. 核心概念与相关API(Service API) 1.1. 概念:Process definition, process instance , execution 1.1.1. Process ...
- 安装php5.5 mssql扩展报错
./configure 后,直接make可能会出现libtool: link: `php_mssql.lo' is not a valid libtool object 的错误. make clean ...
- m2014-architecture-imgserver->配置lighttpd mod_mem_cache 模块做静态资源服务器
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://freehat.blog.51cto.com/1239536/989171 一 l ...