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="data:image/heart.png" alt="">

            <img src="data:image/heart.png" alt="">

            <img src="data: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背景会移动

巴特西

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

最新文章

热门文章