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: 50px auto;
            background: url('image/bg.png');
        }
        .game>img,.score,.life{
            position: absolute;
        }
        .score{
            top: 20px;
        }
        .life{
            right: 0;
            top: 20px;
        }
        .life{width:60px;}
        .life img{float: left;}
    </style>
</head>
<body>
    <div class="game">
        <div class="score">得分:0</div>
        <div class="life">
            <img src="image/heart.png" alt="">
            <img src="image/heart.png" alt="">
            <img src="image/heart.png" alt="">
        </div>
    </div>
</body>
</html>

效果展示

游戏引擎engine.js

/*
游戏引擎
 */
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();
            }
        }
    },
    //背景移动
    bgMove:function(){
        var y=0;
        var _this = this;
        this.bgTimer = setInterval(function(){
            y+=2;
            _this.game.style['background-position-y']=y+'px';
        },50)
    }
};
Engine.init();

如果做到这的话点击game背景会移动

posted @ 2017-09-10 10:57  Alley-巷子  阅读(544)  评论(0)  编辑  收藏  举报