<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>飞机大战</title>
<style>
body {
background: #ffffcc;
pointer: none;
}
* {
margin: 0;
padding: 0;
list-style: none;
}
#content {
width: 400px;
height: 620px;
position: absolute;
top: 10px;
left: 400px;
overflow: hidden;
box-shadow: 0 0 20px dodgerblue;
}
#introduce h1 {
text-align: center;
margin-bottom: 20px;
}
#introduce {
width: 300px;
font-size: 16px;
line-height: 30px;
/* font-weight:bold;*/
position: absolute;
top: 50px;
left: 50px;
}
#hidden {
cursor: pointer;
text-align: center;
border-radius: 5px;
width: 150px;
height: 40px;
font-size: 16px;
line-height: 40px;
box-shadow: 0 0 20px lightblue;
background: lightgreen;
position: absolute;
left: 100px;
top: 550px;
}
#level {
width: 400px;
font-size: 16px;
line-height: 22px;
position: absolute;
top: 35px;
left: 850px;
}
#level h1 {
text-align: center;
margin-bottom: 20px;
}
#introduce .red {
color: red;
font-weight: bold;
}
#level .red {
color: red;
font-weight: bold;
}
#startDiv {
width: 400px;
height: 620px;
background-image: url("http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232009pr5aq8copo2c5722.jpg");
}
#startDiv #edition {
/*margin-left:80px;*/
width: 400px;
height: 30px;
font-size: 22px;
line-height: 30px;
position: absolute;
top: 360px;
left: 500px;
color: #333;
}
#startDiv #toYou {
width: 400px;
height: 30px;
font-size: 24px;
line-height: 30px;
position: absolute;
/*margin-left:80px;*/
top: 260px;
left: -400px;
color: #333333;
}
#startDiv #imgid1 {
position: absolute;
top: 660px;
width: 400px;
height: 124px;
}
#startDiv #imgid2 {
position: absolute;
top: 460px;
left: 120px;
opacity: 0;
}
#startDiv #imgid2:hover {
border-radius: 5px;
cursor: pointer;
box-shadow: 0 0 20px #FF0000;
}
#loading {
background: url("http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232009pr5aq8copo2c5722.jpg");
width: 400px;
height: 620px;
position: absolute;
color: #333;
}
#loading h1 {
position: absolute;
left: 100px;
top: 450px;
}
#loading #bar {
width: 0px;
height: 10px;
position: absolute;
left: 50px;
top: 550px;
background: red;
border-radius: 5px;
}
#mainDiv {
width: 400px;
height: 620px;
background-image: url("http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232034ryxb72t7gyt4bgqg.jpg");
display: none;
position: absolute;
/*opacity: 0;*/
}
#mainDiv #hp {
z-index: 10;
position: absolute;
top: 10px;
left: 10px;
width: 57px;
height: 34px;
background: url("http://cdn.attach.w3cfuns.com/notes/pics/201610/22/231855b5grottg8j5t8888.png") no-repeat -602px -223px;
}
#mainDiv #wrap {
z-index: 10;
width: 148px;
height: 10px;
border: 1px solid red;
box-shadow: 0 0 20px red;
position: absolute;
/*border-radius: 3px;*/
left: 10px;
top: 50px;
}
#mainDiv #hpBar {
z-index: 10;
width: 150px;
height: 10px;
background: red;
/*border-radius: 3px;*/
}
#mainDiv #score {
z-index: 10;
position: absolute;
top: 15px;
right: 15px;
/*-webkit-animation: neon3 1.5s ease-in-out infinite alternate;
-moz-animation: neon3 1.5s ease-in-out infinite alternate;
animation: neon3 1.5s ease-in-out infinite alternate;*/
color: #fff;
font-size: 24px;
font-weight: 900;
text-align: right;
text-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700, 0 0 15px #ffd700, 0 0 20px #ffd700, 0 0 25px #ffd700, 0 0 30px #ffd700, 0 0 50px #ffd700, 0 0 80px #ffd700, 0 0 100px #ffd700, 0 0 150px #ffd700;
}
#mainDiv #num {
z-index: 10;
position: absolute;
bottom: 15px;
right: 15px;
color: #fff;
font-size: 20px;
font-weight: 900;
text-align: right;
text-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 15px #00f, 0 0 20px #00f, 0 0 25px #00f, 0 0 30px #00f, 0 0 50px #00f, 0 0 80px #00f, 0 0 100px #00f, 0 0 150px #00f;
}
#startDiv #btn1 {
width: 200px;
height: 40px;
position: absolute;
left: 100px;
top: 450px;
background: burlywood;
border: none;
border-radius: 5px;
font-size: 20px;
line-height: 40px;
opacity: .8;
}
#startDiv #btn1:hover {
background: red;
color: #fff;
}
</style>
<script type="text/javascript" src="moveUtil.js"></script>
</head>
<body>
<div id="introduce">
<h1>游戏说明</h1>
<ul>
<li>1.点击“开始游戏”按钮，即可进入游戏界面</li>
<li class="red">2.鼠标控制飞机移动</li>
<li>3.按<span class="red">空格键</span>，发射一次子弹.初始子弹总数为 6 颗</li>
<li class="red">4.当剩余子弹数量为0时，就无法发射子弹!</li>
<li>5.击落小飞机，需要 1 颗子弹； 击落中飞机，需要 2 颗子弹；击落大飞机，需要 3 颗子弹</li>
<li>6.打中中飞机，获得 4 颗子弹；打中大飞机，获得 7 颗子弹</li>
<li class="red">7.越往后的关卡，难度越大，奖励也越丰厚，你敢挑战吗？!</li>
</ul>
</div>
<div id="hidden">隐藏</div>
<div id="content">
<div id="startDiv">
<!--<h1 id="toYou">致世界上唯一的你</h1>-->
<!--增加浪漫人文情怀-->
<h1 id="edition">(版本号：0.4.14.1610231055)</h1>
<img id="imgid1" src="http://cdn.attach.w3cfuns.com/notes/pics/201610/22/231901pqrrmfocrrcoxofi.png">
<img id="imgid2" src="http://cdn.attach.w3cfuns.com/notes/pics/201610/22/231913n9w4cfcoej4x12gz.png">
</div>
<div id="loading">
<h1>玩命加载中...</h1>
<div id="bar"></div>
</div>
<div id="mainDiv">
<div id="hp"></div>
<div id="wrap">
<div id="hpBar"></div>
</div>
<div id="score">总分：<span id="total">0</span></div>
<div id="num">剩余子弹数量：<span id="number">6</span></div>
</div>
</div>
<script>
var img1 = document.getElementById("imgid1");
var img2 = document.getElementById("imgid2");
var content = document.getElementById("content");
var startDiv = document.getElementById("startDiv");
var loading = document.getElementById("loading");
var bar = document.getElementById("bar");
var btn1 = document.getElementById("btn1");
var mainDiv = document.getElementById("mainDiv");
var totalScore = document.getElementById("total");
var number = document.getElementById("number");
var toYou = document.getElementById("toYou");
var edition = document.getElementById("edition");
var hidden = document.getElementById("hidden");
var show = document.getElementById("show");
var hpBar = document.getElementById("hpBar");
var w = 150 //血条长度
var hide = true;
var timer;
var mainDivPositionY = 0;
var myPlane;
var arrBullet = [];
var arrEnemyBullet = [];
var speedBullet = 50;
var count = 0;
var countMain = 0;
var arrEnemy = [];
var enemyBig = {
score: 100,
speed: 5,
hp: 3,
width: 196
}
var enemyMiddle = {
score: 10,
speed: 7,
hp: 2
}
var enemySmall = {
score: 1,
speed: 6,
hp: 1
}
var arrEnemyHpBar = [];
var arrTen = [1, 2, 3, 4, 5, 6];
var total = 0;
var isPause = false;
var left;
//游戏初始UI界面
move(img1, {
"top": 80
}, function() {
move(edition, {
"left": 50
}, function() {
move(img2, {
"opacity": 100
});
});
});
hidden.onclick = function() {
if(hide) {
move(introduce, {
"opacity": 0
});
hide = !hide;
hidden.innerHTML = "显示";
} else {
move(introduce, {
"opacity": 100
});
hide = !hide;
hidden.innerHTML = "隐藏";
}
}
//点击开始游戏
img2.addEventListener("click", function() {
startDiv.style.display = "none";
loading.style.display = "block";
createMyPlane();
moveMyPlane();
start();
}, false);
function moveMyPlane() {
mainDiv.onmousemove = function(e) {
if(!isPause) {
var eX = e.clientX - 400 - 60;
var eY = e.clientY - 40;
myPlane.style.left = eX + "px";
myPlane.style.top = eY + "px";
}
}
}
mainDiv.onclick = function() {
isPause = !isPause;
}
//start函数，里面是总的定时器
function start() {
content.style.cursor = "none";
clearInterval(timer);
timer = setInterval(function() {
if(!isPause) {
if(countMain >= 100) {
countMain == 100;
loading.style.display = "none";
mainDiv.style.display = "block";
//move(loading,{"opacity":0})
//背景移动
mainDiv.style.backgroundPositionY = mainDivPositionY + "px";
mainDivPositionY++;
//创建子弹，移动子弹
count++;
moveBullet();
//创建敌机，移动敌机
createEnemy();
moveEnemy();
moveEnemyBullet();
//碰撞
check();
} else {
bar.style.width = 3 * countMain + "px";
}
countMain++;
}
}, 30)
}
document.onkeydown = function(e) {
if(arrTen.length > 0) {
e = event || window.event;
switch(e.keyCode) {
case 32:
createBullet();
break;
}
arrTen.pop();
} else {
document.onkeydown = null;
}
number.innerHTML = arrTen.length;
}
//我的飞机 初始化
function createMyPlane() {
myPlane = document.createElement("img");
myPlane.style.borderRadius = "50%";
myPlane.style.boxShadow = "0 0 20px #ffd700"
myPlane.style.width = "120px";
myPlane.style.height = "80px";
myPlane.style.position = "absolute";
myPlane.src = "http://cdn.attach.w3cfuns.com/notes/pics/201610/22/231933xcuc4nvgbak3l36k.png";
myPlane.style.top = "420px";
myPlane.style.left = "120px";
myPlane.style.zIndex = 999;
mainDiv.appendChild(myPlane);
return myPlane;
}
function createBullet() {
var bullet = document.createElement("img");
bullet.style.width = "30px";
bullet.style.height = "30px";
//bullet.style.borderRadius = "50%"
bullet.style.position = "absolute";
bullet.src = "http://cdn.attach.w3cfuns.com/notes/pics/201610/22/231956buguwjajz7d2a8u5.png"
bullet.style.top = myPlane.offsetTop + speedBullet - 30 + "px";
bullet.style.left = myPlane.offsetLeft + 60 - 15 + "px";
mainDiv.appendChild(bullet);
arrBullet.push(bullet);
}
function createEnemyBullet(left) {
var enemyBullet = document.createElement("img");
enemyBullet.style.width = "16px";
enemyBullet.style.height = "16px";
enemyBullet.src = "http://cdn.attach.w3cfuns.com/notes/pics/201610/23/100029z16frlld8f1oroii.png"
enemyBullet.style.position = "absolute";
//enemyBullet.style.backgroundColor = "red";
enemyBullet.style.top = 10 + "px";
enemyBullet.style.left = left + 98 - 10 + "px";
mainDiv.appendChild(enemyBullet);
arrEnemyBullet.push(enemyBullet);
}
function moveBullet() {
for(var i = 0; i < arrBullet.length; i++) {
arrBullet[i].style.top = arrBullet[i].offsetTop - speedBullet + "px";
}
for(var j = 0; j < arrBullet.length; j++) {
if(arrBullet[j].offsetTop <= -128) {
mainDiv.removeChild(arrBullet[j]);
arrBullet.splice(j, 1);
}
}
}
function moveEnemyBullet() {
for(var i = 0; i < arrEnemyBullet.length; i++) {
arrEnemyBullet[i].style.top = arrEnemyBullet[i].offsetTop + (enemyBig.speed + 3) + "px";
}
for(var j = 0; j < arrEnemyBullet.length; j++) {
if(arrEnemyBullet[j].offsetTop >= 660) {
mainDiv.removeChild(arrEnemyBullet[j]);
arrEnemyBullet.splice(j, 1);
}
}
}
function createEnemy() {
if(count % 320 == 0) {
initEnemy(196, 134, "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232003yvvnvh339vhommdi.png) no-repeat -260px -204px", enemyBig.score, enemyBig.speed, enemyBig.hp, "big")
for(var i = 0; i < arrEnemy.length; i++) {
if(arrEnemy[i].score > 0) {
var left = arrEnemy[i].offsetLeft;
}
}
createEnemyBullet(left); //大飞机发射子弹
}
if(count % 120 == 0) {
initEnemy(100, 78, "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232003yvvnvh339vhommdi.png) no-repeat -266px -475px", enemyMiddle.score, enemyMiddle.speed, enemyMiddle.hp, "middle")
}
if(count % 30 == 0) {
initEnemy(44, 44, "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232003yvvnvh339vhommdi.png) no-repeat -290px -550px", enemySmall.score, enemySmall.speed, enemySmall.hp, "small")
}
}
function initEnemy(width, height, url, score, speed, hp, style) {
var enemy = document.createElement("div");
var hpBar = document.createElement("div");
// hpBar.style.width = width/2 + "px";
// hpBar.style.height = "5px";
// hpBar.style.backgroundColor = "red";
// hpBar.style.position = "absolute";
// hpBar.style.left = width/4 + "px";
// hpBar.style.top = height + 10 + "px"
enemy.style.borderRadius = "50%";
enemy.appendChild(hpBar);
enemy.speed = speed;
enemy.score = score;
enemy.hp = hp;
enemy.sty = style;
enemy.style.width = width + "px";
enemy.style.height = height + "px";
enemy.style.background = url;
enemy.style.position = "absolute";
enemy.style.top = -height + "px";
enemy.style.left = Math.floor(Math.random() * (400 - width)) + "px";
mainDiv.appendChild(enemy);
arrEnemy.push(enemy);
arrEnemyHpBar.push(hpBar);
}
function moveEnemy() {
for(var i = 0; i < arrEnemy.length; i++) {
arrEnemy[i].style.top = arrEnemy[i].offsetTop + arrEnemy[i].speed + "px";
arrEnemy[i].index--;
if(arrEnemy[i].index == 0) {
mainDiv.removeChild(arrEnemy[i]);
arrEnemy.splice(i, 1);
}
}
for(var j = 0; j < arrEnemy.length; j++) {
if(arrEnemy[j].offsetTop >= 660) {
mainDiv.removeChild(arrEnemy[j]);
arrEnemy.splice(j, 1);
j--;
}
}
}
//碰撞
function check() {
//子弹和敌机
for(var i = 0; i < arrBullet.length; i++) {
for(var j = 0; j < arrEnemy.length; j++) {
if(arrBullet[i].offsetLeft + arrBullet[i].offsetWidth > arrEnemy[j].offsetLeft) {
if(arrBullet[i].offsetLeft < arrEnemy[j].offsetLeft + arrEnemy[j].offsetWidth) {
if(arrBullet[i].offsetTop < arrEnemy[j].offsetTop + arrEnemy[j].offsetHeight) {
if(arrBullet[i].offsetTop + arrBullet[i].offsetHeight + 10 > arrEnemy[j].offsetTop) {
//var k = j;
arrEnemy[j].hp--;
//arrEnemyHpBar[j].style.width = 10 + "px";
//删除子弹
mainDiv.removeChild(arrBullet[i]);
arrBullet.splice(i, 1);
i--;
if(arrEnemy[j].hp == 0) {
arrEnemy[j].style.background = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/231933g1c3fr816t5dfy1y.png) no-repeat";
arrEnemy[j].index = 5;
//总分增加
total += arrEnemy[j].score;
totalScore.innerHTML = total;
if(total >= 200) {
level2();
}
if(total >= 500) {
level3();
}
if(total >= 1000) {
level4();
}
if(total >= 3000) {
level5();
}
if(total >= 6000) {
level6();
}
if(total >= 10000) {
level7();
}
if(total >= 20000) {
level8();
}
if(total >= 50000) {
level9();
}
if(total >= 100000) {
level10();
}
//打败敌机获得战利品:子弹
if(arrEnemy[j].sty == "big") {
arrTen.push(1, 2, 3, 4, 5, 6, 7);
} else if(arrEnemy[j].sty == "middle") {
arrTen.push(1, 2, 3, 4);
}
number.innerHTML = arrTen.length;
}
break;
}
}
}
}
}
}
//本机和敌机
for(var j = 0; j < arrEnemy.length; j++) {
if(myPlane.offsetLeft + myPlane.offsetWidth - 10 > arrEnemy[j].offsetLeft) {
if(myPlane.offsetLeft + 10 < arrEnemy[j].offsetLeft + arrEnemy[j].offsetWidth) {
if(myPlane.offsetTop + 10 < arrEnemy[j].offsetTop + arrEnemy[j].offsetHeight) {
if(myPlane.offsetTop + myPlane.offsetHeight - 10 > arrEnemy[j].offsetTop) {
if(arrEnemy[j].sty == "big") {
w -= 35;
} else if(arrEnemy[j].sty == "middle") {
w -= 15;
} else {
w -= 6;
}
move(myPlane,{"opacity":0},function(){
move(myPlane,{"opacity":100},function(){
})
})
hpBar.style.width = w + "px";
if(w <= 0) {
gameOver();
hpBar.style.width = 0 + "px";
}
}
}
}
}
}
//本机和敌方子弹相撞
for(var j = 0; j < arrEnemyBullet.length; j++) {
if(myPlane.offsetLeft + myPlane.offsetWidth > arrEnemyBullet[j].offsetLeft) {
if(myPlane.offsetLeft < arrEnemyBullet[j].offsetLeft + arrEnemyBullet[j].offsetWidth) {
if(myPlane.offsetTop < arrEnemyBullet[j].offsetTop + arrEnemyBullet[j].offsetHeight) {
if(myPlane.offsetTop + myPlane.offsetHeight > arrEnemyBullet[j].offsetTop) {
w -= 5;
move(myPlane,{"opacity":0},function(){
move(myPlane,{"opacity":100},function(){
})
})
hpBar.style.width = w + "px"
if(w == 0) {
gameOver();
hpBar.style.width = 0 + "px";
}
}
}
}
}
}
}
function level2() {
mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232034xyyhnae8b9eanng9.jpg)"
enemySmall.speed = 7;
enemyMiddle.speed = 9;
enemyBig.speed = 6;
enemyBig.score = 120;
enemyMiddle.score = 12;
enemySmall.score = 2;
}
function level3() {
mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232039d76m2pl3a8qudj3p.jpg)"
enemySmall.speed = 8;
enemyMiddle.speed = 10;
enemyBig.speed = 6;
enemyBig.score = 150;
enemyMiddle.score = 15;
enemySmall.score = 3;
}
function level4() {
mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232042byk996qgrja63qop.jpg)"
enemySmall.speed = 9;
enemyMiddle.speed = 10;
enemyBig.speed = 7;
enemyBig.score = 200;
enemyMiddle.score = 20;
enemySmall.score = 5;
}
function level5() {
mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232013chyj82jfee2l8sj8.jpg)"
enemySmall.speed = 9;
enemyMiddle.speed = 11;
enemyBig.speed = 8;
enemyBig.score = 300;
enemyMiddle.score = 40;
enemySmall.score = 8;
}
function level6() {
mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232034ryxb72t7gyt4bgqg.jpg)"
enemySmall.speed = 10;
enemyMiddle.speed = 12;
enemyBig.speed = 9;
enemyBig.score = 500;
enemyMiddle.score = 60;
enemySmall.score = 12;
}
function level7() {
mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232034xyyhnae8b9eanng9.jpg)"
enemySmall.speed = 11;
enemyMiddle.speed = 13;
enemyBig.speed = 9;
enemyBig.score = 700;
enemyMiddle.score = 80;
enemySmall.score = 17;
}
function level8() {
mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232039d76m2pl3a8qudj3p.jpg)"
enemySmall.speed = 12;
enemyMiddle.speed = 13;
enemyBig.speed = 10;
enemyBig.score = 1000;
enemyMiddle.score = 120;
enemySmall.score = 23;
}
function level9() {
mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232042byk996qgrja63qop.jpg)"
enemySmall.speed = 13;
enemyMiddle.speed = 14;
enemyBig.speed = 11;
enemyBig.score = 1501;
enemyMiddle.score = 150;
enemySmall.score = 29;
}
function level10() {
mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232013chyj82jfee2l8sj8.jpg)"
enemySmall.speed = 13;
enemyMiddle.speed = 15;
enemyBig.speed = 12;
enemyBig.score = 2002;
enemyMiddle.score = 201;
enemySmall.score = 40;
}
function gameOver() {
clearInterval(timer);
mainDiv.onmousemove = null;
alert("游戏结束,刷新界面重新开始游戏")
}
function move(element, target, fn) {
clearInterval(element.timer); //一定要注意，刚开始就要清定时器!!!
element.timer = setInterval(function() {
var isComplete = true;
for(var attr in target) {
if(attr == 'opacity') {
var current = Math.round(parseFloat(getstyle(element, attr)) * 100);
} else {
var current = Math.round(parseFloat(getstyle(element, attr)));
}
if(!current) {
current = 0;
}
var speed = (target[attr] - current) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(current != target[attr]) {
element.style[attr] = current + speed + "px";
isComplete = false;
if(current != target[attr]) {
if(attr == 'opacity') {
//关于透明度的一个兼容
//ie 如果是ie，就直接用就行
element.style[attr] = 'alpha(opacity:' + parseInt(current + speed) + ')'; //加current的原因：有一个渐变的过程
//其他浏览器 如果是其他浏览器，还需要除以100
element.style[attr] = (current + speed) / 100;
} else {
element.style[attr] = current + speed + "px";
}
}
}
}
if(isComplete) {
clearInterval(element.timer);
if(fn) {
fn();
}
}
}, 30)
}
//获得当前的样式的值
function getstyle(dom, name) {
if(dom.currentStyle) {
return dom.currentStyle[name];
} else {
return window.getComputedStyle(dom, false)[name];
}
}
</script>
</body>
</html>
