<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#wrap{
width: 400px;
height: 600px;
border: 1px solid red;
margin: 20px auto;
position: relative;
overflow: hidden;
}
#myPlan{
width: 98px;
height: 122px;
background-image: url(img/me.png);
position: absolute;
left: 0px;
top: 0px;;
}
.bullet {
width: 8px;
height: 18px;
background: url("img/bullet.png");
position: absolute;
}
.plain1 {
width: 60px;
height: 36px;
position: absolute;
background: url("img/plain1.png");
}
.maxPlain{
width: 166px;
height: 256px;
position: absolute;
background:url(img/plain3.png)
}
#news{
width: 100px;
height: 40px;
background: red;
position: absolute;
left: 350px;
top: 0px;
}
</style>
</head>
<body>
<div id="news">
距离大飞机出现还有<span id="span_1"></span>分
</div>
<div id="wrap">
<div id="myPlan">
</div>
</div>
</body>
<script type="text/javascript">
var wrap = document.getElementById("wrap");
var myPlan = document.getElementById("myPlan");
var wrapHeight = wrap.offsetHeight;
var wrapWidth = wrap.offsetWidth;
var wrapLeft = wrap.offsetLeft;//获得飞机场的左右偏移量
var wrapTop = wrap.offsetTop;//获得飞机场的上下偏移量
var myPlanHeight = myPlan.offsetHeight;
var myPlanWidth = myPlan.offsetWidth;
var maxLeft = wrapWidth-myPlanWidth;//左右移动的最大距离
var maxTop = wrapHeight-myPlanHeight;//上下移动的最大距离
var timer = null;//定义一个子弹发射定时器
var createBulletTimer = null;
var createPlainTimer = null;
var bulletSpeed = 10;
var plainSpeed = 10;
var score = 0;//记录打飞机的分数
var maxPlainSpeed = 3;//大飞机每次移动的距离
var life = 200;//大飞机的总生命值
var news = document.getElementById("span_1");
var num = 20;//打满30辆小飞机才能出现大飞机
news.innerHTML = num-score;
wrap.onmousemove=function(e){
var evt = window.event || e;//时间的兼容
evt.stopPropagation()//阻止事件的传递
var clientX = evt.clientX;//这里的clientX和clientY都是相对于浏览器的偏移量
var clientY = evt.clientY;
//求出飞机的当前坐标
var x = clientX-wrapLeft-myPlanWidth/2;
var y = clientY-wrapTop-myPlanHeight/2;
if(x<0){
x = 0;
}
if(y<0){
y = 0;
}
if (x >= maxLeft) {
x = maxLeft;
}
if (y >= maxTop) {
y = maxTop;
}
myPlan.style.left = x + "px";
myPlan.style.top = y+ "px";
}
//产生敌机
createEnemy();
function createEnemy(){
var enemy = document.createElement("div");
if(score>=num){
alert("注意!!!大飞机要来了")
var maxEnemy = document.createElement("div");
maxEnemy.className="maxPlain";
maxEnemy.innerHTML = life;
maxEnemy.style.color = "#ff5384";
wrap.appendChild(maxEnemy);
//大飞机能够出现的最大的左边距离
var maxMaxenemy = wrapWidth-maxEnemy.offsetWidth;
setInterval(function(){
maxEnemy.style.left = maxEnemy.offsetLeft+maxPlainSpeed+"px";
//到达最右边的时候反向移动
if(maxEnemy.offsetLeft>=maxMaxenemy){
maxPlainSpeed = -3;
}
if(maxEnemy.offsetLeft<=0){
maxPlainSpeed = 3;
}
},100);
}else{
enemy.className="plain1";
wrap.appendChild(enemy);
//敌机能够出现的最大的左边距离
var maxLeft = wrapWidth-enemy.offsetWidth;
//Math.random()的范围是0 到1(取0不取1)
var x = Math.round(Math.random() * maxLeft);//随机产生一个距离（在最大值和最小值之间）
enemy.style.left = x+"px";
enemy.timer = setInterval(function(){
enemy.style.top = enemy.offsetTop+plainSpeed+"px";
if(enemy.offsetTop>wrapHeight){
clearInterval(enemy.timer);
wrap.removeChild(enemy);
}
},100);
createPlainTimer = setTimeout(createEnemy,500);
}
}
//产生子弹
function createBullet(){
var bullet = document.createElement("div");//创建div 子弹对象
bullet.className = "bullet";
wrap.appendChild(bullet);
//定义子弹的位置
var X = myPlan.offsetLeft-bullet.offsetWidth/2+myPlan.offsetWidth/2;
var Y = myPlan.offsetTop-bullet.offsetHeight;
bullet.style.left = X + "px";
bullet.style.top = Y + "px";
bullet.timer = setInterval(function(){
//控制子弹飞行
bullet.style.top = bullet.offsetTop - bulletSpeed + "px";
//这里是子弹的移动 需要在此处检查它是否碰撞到了敌机
var bulletX = bullet.offsetLeft;
var bulletY = bullet.offsetTop;
var enemyList = document.getElementsByClassName("plain1");//获得所有的敌机
var maxEnemyList = document.getElementsByClassName("maxPlain");
if(enemyList.length==0 && maxEnemyList.length!=0){
var maxEnemy = maxEnemyList[0];
var minEnemyX = maxEnemy.offsetLeft-bullet.offsetWidth;
var maxEnemyX = maxEnemy.offsetLeft+maxEnemy.offsetWidth;
var minEnemyY = maxEnemy.offsetTop-bullet.offsetHeight;
var maxEnemyY = maxEnemy.offsetTop+maxEnemy.offsetHeight;
if(bulletX>=minEnemyX && bulletX<=maxEnemyX && bulletY>=minEnemyY && bulletY<=maxEnemyY){
life = life-1;
maxEnemy.innerHTML = life;
maxEnemy.style.color = "#ff5384";
// clearInterval(bullet.timer);
bullet.remove();
// wrap.removeChild(bullet);
if(life<=0){
alert("我大某人还会回来的")
wrap.removeChild(maxEnemy);
if (confirm("游戏结束 是否重来一次")) {
window.location.reload();
} else {
window.close();
}
}
}
}else{
for(var i=0;i<enemyList.length;i++){
var enemySingle =enemyList[i];
//分析子弹在飞机两边的两种临界情况
var minX = enemySingle.offsetLeft-bullet.offsetWidth;
var maxX = enemySingle.offsetLeft+enemySingle.offsetWidth;
var minY = enemySingle.offsetTop-bullet.offsetHeight;
var maxY = enemySingle.offsetTop+enemySingle.offsetHeight;
if(bulletX>=minX && bulletX <=maxX && bulletY>=minY && bulletY<=maxY){//代表发生了碰撞
clearInterval(enemySingle.timer);
clearInterval(bullet.timer);
wrap.removeChild(enemySingle);
wrap.removeChild(bullet);
if(score<num){
score++;
}else{
score = num;
}
news.innerHTML = num-score;
}
}
}
if (getStyleAttr(bullet, "top") <= 0) {
clearInterval(bullet.timer);//让子弹停止运动
wrap.removeChild(bullet);//将子弹从飞机场移除
}
},100);
//源源不断的产生子弹
createBulletTimer = setTimeout(createBullet, 100);
}
createBullet();
function getStyleAttr(obj, attr) {
if (window.getComputedStyle) {
return parseInt(window.getComputedStyle(obj)[attr]);
} els
评论0