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

Posted 2020-10-06 Alley-巷子

/*
英雄机：因为英雄机只有一辆所以不需要用构造函数
 */
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();