<style> | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
#box { | |
height: 600px; | |
width: 400px; | |
border: 1px solid red; | |
position: relative; | |
margin: 20px auto; | |
overflow: hidden; | |
cursor: pointer; | |
} | |
#myPlan { | |
position: absolute; | |
width: 98px; | |
height: 122px; | |
left: 151px; | |
bottom: 0; | |
background: url("images/me.png"); | |
} | |
.bullet { | |
position: absolute; | |
width: 8px; | |
height: 18px; | |
background: url("images/bullet.png"); | |
background-size: 8px 18px; | |
} | |
.plain1 { | |
position: absolute; | |
width: 60px; | |
height: 36px; | |
background: url("images/plain1.png"); | |
background-size: 60px 36px; | |
top: 0; | |
} | |
.plain2 { | |
position: absolute; | |
width: 70px; | |
height: 92px; | |
background: url("images/plain2.png"); | |
background-size: 70px 92px; | |
top: 0; | |
} | |
.plain3 { | |
position: absolute; | |
width: 156px; | |
height: 256px; | |
background: url("images/plain3.png"); | |
background-size: 156px 256px; | |
top: 0; | |
} | |
#myScore { | |
position: absolute; | |
height: 30px; | |
width: 100px; | |
color: #FF0000; | |
left: 0; | |
top: 0; | |
} | |
#myLife { | |
width: 20px; | |
height: 150px; | |
background-color: #FF0000; | |
border-radius: 10px; | |
position: absolute; | |
left: 0; | |
bottom: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="box"> | |
<div id="myScore">0</div> | |
<div id="myPlan"></div> | |
<div id="myLife"></div> | |
</div> | |
</body> | |
<script> | |
var myPlan = document.getElementById("myPlan"); | |
var myLife = document.getElementById("myLife"); | |
myPlan.life = 3; | |
var box = document.getElementById("box"); | |
var boxWidth = parseInt(getStyleAttr(box, "width")); | |
var boxHeight = parseInt(getStyleAttr(box, "height")); | |
var myPlanWidth = parseInt(getStyleAttr(myPlan, "width")); | |
var myPlanHeight = parseInt(getStyleAttr(myPlan, "height")); | |
var boxLeft = parseInt(getStyleAttr(box, "marginLeft")); | |
var boxTop = parseInt(getStyleAttr(box, "marginTop")); | |
var maxMyPlanLeft = boxWidth - myPlanWidth; | |
var maxMyplanTop = boxHeight - myPlanHeight; | |
var plainList = document.getElementsByClassName("plain");//找到页面上所有敌机的集合 | |
var bulletSpeed = 30; | |
var plainSpeed = 10; | |
var bossSpeed = 10; | |
var createBulletTimer = null; | |
var createPlainTimer = null; | |
var myScore = document.getElementById("myScore"); | |
var score = 0; | |
createBullet(); | |
function createBullet() { | |
var bullet = document.createElement("div"); | |
bullet.className = "bullet"; | |
box.appendChild(bullet); | |
bullet.style.left = myPlan.offsetLeft + myPlanWidth / 2 - bullet.offsetWidth / 2 + "px"; | |
bullet.style.top = myPlan.offsetTop - bullet.offsetHeight + "px"; | |
bullet.timer = setInterval(function () { | |
bullet.style.top = bullet.offsetTop - bulletSpeed + "px"; | |
var x = getStyleAttr(bullet, "left"); | |
var y = getStyleAttr(bullet, "top"); | |
for (var i = 0; i < plainList.length; i++) { | |
var plain = plainList[i]; | |
var minX = getStyleAttr(plain, "left") - getStyleAttr(bullet, "width"); | |
var maxX = getStyleAttr(plain, "left") + getStyleAttr(plain, "width"); | |
var minY = getStyleAttr(plain, "top") - getStyleAttr(bullet, "height"); | |
var maxY = getStyleAttr(plain, "top") + getStyleAttr(plain, "height"); | |
if (x >= minX && x <= maxX && y >= minY && y <= maxY) { //碰撞的条件 | |
clearInterval(bullet.timer); | |
bullet.remove(); | |
var life = plain.life; // 3 | |
life--; //2 | |
plain.life = life; // | |
if (life <= 0) { | |
score += plain.score; | |
myScore.innerHTML = score; | |
clearInterval(plain.timer); | |
plain.remove(); | |
} | |
} | |
} | |
if (parseInt(getStyleAttr(bullet, "top")) <= 0) { //子弹到达临界条件 | |
bullet.remove(); | |
clearInterval(bullet.timer); | |
} | |
}, 80); | |
createBulletTimer = setTimeout(createBullet, 100); | |
} | |
createPlain(); | |
function createPlain() { | |
var plain = document.createElement("div"); | |
if (score > 100) { //产生boss | |
plain.className = "plain plain3"; | |
plain.life = 1000; | |
plain.score = 1500; | |
box.appendChild(plain); | |
plain.timer = setInterval(function () { | |
plain.style.left = plain.offsetLeft + bossSpeed + "px"; | |
if (plain.offsetLeft >= boxWidth - plain.offsetWidth) { | |
bossSpeed = -Math.abs(bossSpeed); | |
} | |
if (plain.offsetLeft <= 0) { | |
bossSpeed = Math.abs(bossSpeed); | |
} | |
}, 500); | |
} else { //普通的敌机 | |
if (score > 50) { | |
plain.className = "plain plain2"; | |
plain.life = 5; | |
plain.score = 15; | |
} else { | |
plain.className = "plain plain1"; | |
plain.life = 2; | |
plain.score = 5; | |
} | |
box.appendChild(plain); | |
plain.style.left = Math.round(Math.random() * (boxWidth - plain.offsetWidth)) + "px"; | |
plain.timer = setInterval(function () { | |
plain.style.top = parseInt(getStyleAttr(plain, "top")) + plainSpeed + "px"; | |
if (getStyleAttr(plain, "top") >= boxHeight) { | |
clearInterval(plain.timer); | |
plain.remove(); | |
} | |
}, 100); | |
createPlainTimer = setTimeout(createPlain, 500); | |
} | |
} | |
box.onmousemove = function (e) { | |
var evt = window.event || e; | |
var clientX = evt.clientX; | |
var clientY = evt.clientY; | |
var x = clientX - boxLeft - myPlanWidth / 2; | |
var y = clientY - boxTop - myPlanHeight / 2; | |
if (x <= 0) { | |
x = 0; | |
} | |
y = y <= 0 ? 0 : y; | |
x = x >= maxMyPlanLeft ? maxMyPlanLeft : x; | |
y = y >= maxMyplanTop ? maxMyplanTop : y | |
myPlan.style.left = x + "px"; | |
myPlan.style.top = y + "px"; | |
for (var i = 0; i < plainList.length; i++) { | |
var plain = plainList[i]; | |
var minX = getStyleAttr(plain, "left") - getStyleAttr(myPlan, "width"); | |
var maxX = getStyleAttr(plain, "left") + getStyleAttr(plain, "width"); | |
var minY = getStyleAttr(plain, "top") - getStyleAttr(myPlan, "height"); | |
var maxY = getStyleAttr(plain, "top") + getStyleAttr(plain, "height"); | |
if (x >= minX && x <= maxX && y >= minY && y <= maxY) { //碰撞的条件 | |
// myPlan.life = --myPlan.life; | |
plain.life = 0; | |
score += plain.score; | |
plain.remove(); | |
clearInterval(plain.timer); | |
myPlan.life--; | |
myLife.style.height = 50 * (myPlan.life) + "px"; | |
if (myPlan.life == 0) { | |
if (confirm("游戏结束 是否重新开始")) { | |
window.location.reload(); | |
} else { | |
window.close(); | |
} | |
} | |
} | |
} | |
} | |
function getStyleAttr(obj, attr) { | |
if (window.getComputedStyle) { | |
return parseInt(window.getComputedStyle(obj)[attr]); | |
} else { | |
return parseInt(obj.currentStyle[attr]); | |
} | |
} | |
</script> |
飞机大战
最新推荐文章于 2021-07-19 21:43:54 发布