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

/*
英雄机:因为英雄机只有一辆所以不需要用构造函数
 */
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();
    },
    //鼠标移动的时候英雄机也要移动
    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‘;
        }
    }
}
Hero.init();
时间: 2024-08-13 18:15:41

javascript飞机大战-----003创建英雄机的相关文章

javascript飞机大战-----006创建敌机

先写一个敌机类 /* 创建敌机: */ 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(){ //

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; //子弹编号 因为在引擎里面有

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

子弹销毁 /* 创建子弹:因为子弹不是只创建一个所以要用构造函数 注意一点:子弹发射的位置应该是英雄机的正中央的位置,所以需要传点东西进来 */ 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; //子弹编号 因为在

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

1.游戏引擎 首先要做飞机大战要考虑的是这个游戏被分成了哪几大部分?这样我们一块一块去做,特别清晰明了.那么接下来我们就简单的分析下飞机大战分成了哪几大部分 1.游戏引擎 2.英雄机 3.敌机 4.子弹 5.敌机还分为小型 中型 大型 不过这个我们可以直接继承敌机的一些方法就好了 那么接下来我们逐个分析每一大块里面主要的属性和方法 游戏引擎 属性: 游戏状态=====>gameStatus 所有敌机=====>enemy 所有子弹=====>bullet 游戏分数=====>scr

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} .game{ position:relative; width: 320px; height: 568px; margin: 50px auto; b

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:Ene

javascript飞机大战-----009游戏结束

/* 游戏引擎 */ var Engine = { //刚开始的游戏状态 gameStatus:false, //所以敌机 enemy:{}, //子弹 bullet:{}, //得分 scroe:0, //背景图片 game:document.querySelector('.game'), //页面得分 textScroe:document.querySelector('.score'), //初始化 init:function(){ this.gameStart(); }, //游戏开始 g

javascript飞机大战-----007爆炸效果

要检验什么时候碰撞,我们必须了解什么时候不相撞.以上四种情况是不相撞的时候 首先在引擎里面写好什么时候碰撞什么时候不碰撞 /* 游戏引擎 */ var Engine = { //刚开始的游戏状态 gameStatus:false, //所以敌机 enemy:{}, //子弹 bullet:{}, //得分 score:0, //背景图片 game:document.querySelector('.game'), //初始化 init:function(){ this.gameStart(); }

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

基本html布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} .game{ position:relative; width: 320px; height: 568px; margin: 50p