<!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
今日推荐
周排行