基本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背景会移动