javascript飞机大战-----004创建子弹对象
/*
创建子弹:因为子弹不是只创建一个所以要用构造函数 注意一点:子弹发射的位置应该是英雄机的正中央的位置,所以需要传点东西进来
*/
function Bullet(l,t){
this.l = l;//保留一下传进来的l
this.t = t;//保留一下创进来的t
//初始图片
this.self = null;
//子弹初始left
this.left = 0;
//子弹初始top
this.top = 0;
//子弹的速度
this.speed = 2;
//子弹编号 因为在引擎里面有一个专门存放子弹的对象,所以我们要给每一个子弹生成编号
this.id = '';
}
Bullet.prototype = {
constructor:Bullet,
init:function(){
//创建一个元素
var img = document.createElement('img');
//将图片路径赋值给它
img.src='image/bullet1.png';
//插入到game中
Engine.game.appendChild(img);
//赋值给子弹的初始图片
this.self = img; //当图片加载完成以后获取图片的高度和宽度
var _this = this;//在函数里面this的指向会改变,所以我们提前报存下来
img.onload = function(){
//因为上面的属性有this.left所以我们应该和图片一样赋值给它
_this.left = _this.l-_this.self.offsetWidth/2;
_this.top = _this.t-_this.self.offsetHeight;
img.style.left = _this.left+'px';
img.style.top = _this.top+'px';
}; //生成子弹编号并放入引擎的bullet中
this.id = Math.random();
Engine.bullet[this.id]=this;
},
//子弹移动,定时器都交给引擎去做
move:function(){
this.top-=2;
this.self.style.top = this.top+'px';
//越界判断
if(this.top<=-this.self.offsetHeight){
this.destroy();
}
},
destroy:function(){
//销毁
} }
英雄机更新的部分
/*
英雄机:因为英雄机只有一辆所以不需要用构造函数
*/
var Hero = {
//初始图片
self:null,
//初始left
left:0,
//初始top
top:0,
//生命值
life:3,
//加载进来的图和爆照的图
imgs:['image/hero.gif','image/hero-bang.gif'],
//初始化
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;
var timer = setInterval(function(){
var l = _this.left+_this.self.offsetWidth/2
new Bullet(l,_this.top).init();
},100)
}
}
//在游戏没有开始的时候不能出现英雄机和子弹所以不能再这里面调用他的初始方法,要在引擎里面调用
//Hero.init();
英雄机更新部分
1、更新了发射子弹 2、在英雄机加载进来的时候移动和发射子弹 //发子弹
shoot:function(){
//每隔100毫秒发一次子弹
var _this = this;
var timer = setInterval(function(){
var l = _this.left+_this.self.offsetWidth/2
new Bullet(l,_this.top).init();
},100)
} 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();
};
引擎更新
/*
游戏引擎
*/
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(){
//创建敌机和英雄机
Hear.init();
},
//所有敌机和子弹都要动
handleMove:function(){
var _this=this;
var timer = setInterval(function(){
for(var i in _this.bullet){
_this.bullet[i].move()
}
},30)
}
};
Engine.init();
引擎更新部分
//所有敌机和子弹都要动
handleMove:function(){
var _this=this;
var timer = setInterval(function(){
for(var i in _this.bullet){
_this.bullet[i].move()
}
},30)
} //游戏开始
gameStart:function(){
var _this = this;
//点击图片的时候判断游戏状态
this.game.onclick = function(){
if(!_this.gameStatus){
_this.gameStatus = true;
//移动移动
_this.bgMove();
_this.handleMove();
}
}
},
javascript飞机大战-----004创建子弹对象的更多相关文章
- javascript飞机大战-----005创建子弹对象2
子弹销毁 /* 创建子弹:因为子弹不是只创建一个所以要用构造函数 注意一点:子弹发射的位置应该是英雄机的正中央的位置,所以需要传点东西进来 */ function Bullet(l,t){ this. ...
- javascript飞机大战-----006创建敌机
先写一个敌机类 /* 创建敌机: */ function Enemy(blood,speed,imgs){ //敌机left this.left = 0; //敌机top this.top = 0; ...
- javascript飞机大战-----003创建英雄机
/* 英雄机:因为英雄机只有一辆所以不需要用构造函数 */ var Hero = { //初始图片 self:null, //初始left left:0, //初始top top:0, //生命值 l ...
- 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飞机大战-----001分析
1.游戏引擎 首先要做飞机大战要考虑的是这个游戏被分成了哪几大部分?这样我们一块一块去做,特别清晰明了.那么接下来我们就简单的分析下飞机大战分成了哪几大部分 1.游戏引擎 2.英雄机 3.敌机 4.子 ...
- JavaScript—飞机大战
今天来写个游戏,飞机大战 1,布局 2,思路 1,动态创建自己的飞机 让它在规定的区域,跟着鼠标运动. 2,在自己飞机的上方,间隔1s生成子弹.子弹往上移动 当top:0 子弹消失 3,每隔1s 产生 ...
- [置顶] 【cocos2d-x入门实战】微信飞机大战之六:子弹层的处理
这一篇将会处理完子弹层的其他要点. 1.子弹的初始位置 子弹的初始位置在飞机的机头位置,因为飞机在游戏的过程中会随着玩家的触摸而改变其位置,所以,子弹的初始位置只能以当前飞机位置为基准进行添加. CC ...
- javascript飞机大战-----008积分
/* 创建敌机: */ function Enemy(blood,speed,imgs,scroe){ //敌机left this.left = 0; //敌机top this.top = 0; // ...
随机推荐
- Oracle 存储过程错误之PLS-00201: 必须声明标识符
转自:http://blog.csdn.net/u010678947/article/details/20702149 错误: ORA-06550: 第 1 行, 第 7 列: PLS-00201: ...
- C++ 判断
C++ 判断判断结构要求程序员指定一个或多个要评估或测试的条件,以及条件为真时要执行的语句(必需的)和条件为假时要执行的语句(可选的). #include <iostream> /* ru ...
- linux -- 终端执行可执行文件
有一个可执行文件:/media/home/1.sh 1.首先,得有权限 (1)如果已经是root用户(#),则不用做什么 (2)如果不是 $ sudo su pass your password:(这 ...
- Python的可变对象与不可变对象。
参考:http://thomaschen2011.iteye.com/blog/1441254 Python基础:Python可变对象和不可变对象 http://blog.jobbo ...
- 关于quartus ii软件中注释乱码问题的解决方法
乱码现象: 解决办法: 打开文件所在工程找到该verilog文件(后缀名是.v),使用记事本打开,这时你会看到注释好好的没乱码,很高兴是不,不用着急.接下来点击文件再另存为,选择编码:UTF-8,点保 ...
- Unity3d之Perfab
对于重复使用的游戏体可以将其制作成Perfab.首先在Project窗口中选择[Create]-[Prefab]创建一个空的Perfab.然后将该重复使用的游戏体拖到这个空的Perfab上就OK了. ...
- Ajax分页(MVC下)(附源码,前后台)
网上找的一个分页js,自己改了改.. 前台页面 @{ ViewBag.Title = "Index"; } <h1>分页方法封装</h1> <scri ...
- 关于Bundle
1. 黄色的文件夹,打包的时候,不会建立目录,主要保存程序文件 - 素材不允许重名 2. 蓝色的文件夹,打包的时候,会建立目录,可以分目录的存储素材文件 - 素材可以重名 - 游戏的场景,backgr ...
- jQuery异步请求模拟IE登录网站
具体请求的登录验证页面后台逻辑处理,这里我们忽略,不在我们的学习范围内:关键的是使用jQuery异步请求方法,如下例子: <%@ Page Language="C#" Aut ...
- angular学习(十五)——Provider
转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/60966263 Provider简单介绍 每一个web应用都是由多个对象协作完毕 ...