<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <style> * { margin: 0; padding: 0; } body, html { width: 100%; height: 100%; } #StartView { width: 512px; height: 927px; margin: 0 auto; background: url("img/img_bg_logo.jpg") no-repeat; overflow: hidden; display: none; } #LoGo { width: 573px; height: 178px; margin: 330px auto; background: url("img/LOGO.png") no-repeat; background-size: 512px 178px; } #StartBtn { width: 176px; height: 75px; background: url("img/ui_new_btn_png.png") no-repeat; margin: 0 auto; font-size: 30px; line-height: 75px; text-align: center; color: #fff; } #GameView { width: 512px; height: 768px; margin: 0 auto; overflow: hidden; } #GameMap { position: relative; } .hero { width: 135px; height: 90px; background: url("img/img_plane_main.png") no-repeat; position: absolute; top: 0; left: 0; } .enemy1 { width: 106px; height: 74px; background: url("img/img_plane_enemy.png") 0 -484px no-repeat; position: absolute; } .enemy2 { width: 70px; height: 143px; background: url("img/img_plane_enemy.png") -205px -552px no-repeat; position: absolute; } .bullet { width: 15px; height: 35px; background: url("img/img_bullet.png") -335px -175px no-repeat; position: absolute; } </style> <script> var class_base = { _get: function (id) { return document.getElementById(id); }, _create: function (ele) { return document.createElement(ele); }, _random: function (min, max) { return Math.floor(min + Math.random() * (max - min)); } } /*页面加载完成*/ window.onload = function () { var StartView = class_base._get("StartView"); var StartBtn = class_base._get("StartBtn"); var GameView = class_base._get("GameView"); var GameMap = class_base._get("GameMap"); var game = { //获取窗口的宽高 _wWidth: document.documentElement.clientWidth, _wHeight: document.documentElement.clientHeight, //定义一个数组用于存放敌方飞机 _aEnemys: [1, 1, 1, 1, 2, 2, 2, 2], //定义一个数组用于存放子弹 _aBullets: [], _init: function () { //控制地图移动 setInterval(function () { game._moveMap(); }, 30); //创建己方飞机 this._createHero(); //创建敌方飞机 var i = 0;//数组的下标 setInterval(function () { game._createEnemy(i++); }, 1500); //子弹移动 setInterval(function () { game._moveFire(); }, 30); }, _moveMap: function () { if (parseInt(GameMap.style.top) < 768) { GameMap.style.top = GameMap.offsetTop + 2 + "px"; } else { GameMap.style.top = "0px"; } }, _createHero: function () { var hero = class_base._create("div"); hero.className = "hero"; hero.id = "hero"; hero.style.top = GameView.clientHeight - 90 + "px"; hero.style.left = (this._wWidth - 135) / 2 + "px"; GameView.appendChild(hero); }, _createEnemy: function (i) { var enemy = class_base._create("div"); enemy.className = "enemy" + this._aEnemys[i]; enemy.style.top = "0px"; enemy.style.left = class_base._random(672, 1000) + "px"; GameView.appendChild(enemy); this._aEnemys.splice(i,1,enemy); setInterval(function () { game._moveEnemy(enemy); }, 30); }, _moveEnemy: function (enemy) { var hero = class_base._get("hero"); if(this._hitTest(enemy,hero)){ enemy.style.display="none"; } enemy.style.top = enemy.offsetTop + 5 + "px"; }, _fire: function () { var hero = class_base._get("hero"); var bullet = class_base._create("div"); bullet.className = "bullet"; bullet.style.top = hero.style.top; bullet.style.left = parseInt(hero.style.left) + parseInt(getComputedStyle(hero).width) / 2 - 8 + "px"; GameView.appendChild(bullet); //获取子弹数组 并把子弹装入数组 this._aBullets.push(bullet); }, _moveFire: function () { if (this._aBullets.length > 0) { for (var i = 0; i < this._aBullets.length; i++) { if (parseInt(this._aBullets[i].style.top) > 0) { this._aBullets[i].style.top = this._aBullets[i].offsetTop - 10 + "px"; }else{ console.log(this._aBullets) if(this._aBullets[i].parentNode!=null){ this._aBullets[i].parentNode.removeChild(this._aBullets[i]); this._aBullets.splice(this._aBullets.indexOf(this._aBullets[i]),1); } } for (var j = 0; j < this._aEnemys.length; j++) { if (this._hitTest(this._aBullets[i],this._aEnemys[j])) { this._aBullets[i].style.display="none"; this._aEnemys[j].style.display="none"; } } } } }, _hitTest:function (main, box) { if (main == null || box == null) { return; } var m_top = main.offsetTop; var m_left = main.offsetLeft; var m_right = main.offsetLeft + main.offsetWidth; var m_bottom = main.offsetTop + main.offsetHeight; var b_top = box.offsetTop; var b_left = box.offsetLeft; var b_right = box.offsetLeft + box.offsetWidth; var b_bottom = box.offsetTop + box.offsetHeight; if (m_bottom > b_top && m_right > b_left && m_left < b_right && m_top < b_bottom) { return true; } } } game._init(); // StartBtn.onclick=function(){ // StartView.style.display="none"; // } document.body.onmousemove = function (e) { var hero = class_base._get("hero"); hero.style.left = e.clientX + "px"; hero.style.top = e.clientY + "px"; } document.body.onclick = function () { game._fire(); } } </script> </head> <body> <div id="StartView"> <div id="LoGo"></div> <div id="StartBtn">开始游戏</div> </div> <div id="GameView"> <div id="GameMap"> <img src="img/img_bg_level_1.jpg" style="margin-top: -768px"> <img src="img/img_bg_level_1.jpg" style="margin-top: -6px"> </div> </div> <div id="GameOverView"></div> </body> </html>
飞机大战
猜你喜欢
转载自blog.csdn.net/Davennewong/article/details/80015119
今日推荐
周排行