逻辑飞机大战"/>
纯js 逻辑飞机大战
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>飞机大战</title>
<style>
*{margin:0;padding:0;}
#show_box{
width: 500px;
height:750px;
position:absolute;
left:500px;
top:0px;
background:url(".jpg");
display: block;
}
#showlogo{
position:absolute;
left:0;
top:250px;
animation: logoMove 5s ;
animation-fill-mode : forwards
}
#showimg1{
position: absolute;
left:0;
top:0;
animation: showpic1 5s ;
animation-fill-mode : forwards
}
#showimg2{
position: absolute;
left:0;
top:0;
animation: showpic2 5s ;
animation-fill-mode : forwards
}
#showimg3{
position: absolute;
left:0;
top:0;
animation: showpic3 5s ;
animation-fill-mode : forwards;
}
@keyframes showpic1{
from{left:0;top:0;}
to{left:50px;top:400px;}
}
@keyframes showpic2{
from{left:0;top:0;}
to{left:200px;top:400px;}
}
@keyframes showpic3{
from{left:0;top:0;}
to{left:350px;top:400px;}
}
@keyframes myplanefly{
from{left:236px;top:800px;}
to{left:236px;top:660px;}
}
@keyframes logoMove{
0% {left:0px;top:800px;}
50%{left:0;top:0}
100% {left:0px;top:250px;}
}
@keyframes leftBtnMove{
from{left:-100px;top:650px;}
to{left:200px;top:650px;}
}
@keyframes rightBtnMove{
from{left:500px;top:580px;}
to{left:200px;top:580px;}
}
#map{
width: 500px;
height:750px;
position:absolute;
left:500px;
top:0px;
background:url(".png") repeat-y;
background-position-y:0 ;
display: none;
overflow: hidden;
}
#jsbox{
width: 500px;
height:750px;
position:absolute;
left:500px;
top:0px;
background:url(".jpg");
display: none;
overflow: hidden;
}
#startBtn{
width:100px;
height:50px;
position:absolute;
left:-100px;
top:650px;
border:0;
border-radius: 20px;
background:url(".png");
line-height: 40px;
animation: leftBtnMove 5s ;
animation-fill-mode : forwards;
}
#startBtn:focus{
outline:none;
}
#jsBtn{
width:100px;
height:50px;
position:absolute;
left:200px;
top:580px;
border:0;
border-radius: 20px;
background:url(".png");
line-height: 40px;
animation: rightBtnMove 5s ;
animation-fill-mode : forwards;
}
#jsBtn:focus{
outline:none;
}
#returnBtn{
width:100px;
height:50px;
position:absolute;
left:350px;
top:700px;
border:0;
border-radius: 20px;
background:url(".png");
line-height: 40px;
}
#returnBtn:focus{
outline:none;
}
#tit{
width:100px;
height:50px;
position:absolute;
left:200px;
top:250px;
border:0;
background: #3591F8;
text-align: center;
line-height: 50px;
}
#opdiv{
width: 500px;
height:750px;
position:absolute;
left:500px;
top:0px;
z-index:10000;
display: none;
}
#overbox{
width: 500px;
height:750px;
position:absolute;
left:500px;
top:0px;
background:url(".jpg");
display: none;
overflow: hidden;
opacity: .8;
}
#score{
color:#fff;
width:100px;
height:30px;
position:absolute;
}
#jsp{
width:200px;
height:400px;
font:20px/40px "微软雅黑";
font-weight: bold;
position:absolute;
left:150px;
top:300px;
}
#overbtn{
width:100px;
height:50px;
position:absolute;
left:200px;
top:580px;
border:0;
border-radius: 20px;
background:url(".png");
line-height: 40px;
}
#overbtn:focus{
outline:none;
}
</style>
<script src = "js/moveUtil.js"></script>
</head>
<body>
<div id = "show_box">
<img src=".png" alt="" id = "showlogo"/>
<img src=".png" alt="" id = "showimg1"/>
<img src=".png" alt="" id = "showimg2"/>
<img src=".png" alt="" id = "showimg3"/>
<button id = "jsBtn">游戏说明</button>
<button id = "startBtn">开始游戏</button>
</div>
<div id = "jsbox">
<p id = "jsp">
空格键：第二种状态<br />
回车键：第一种状态<br />
“G”键：放大招<br />
重新开始后无敌3s
</p>
<button id = "returnBtn">返回主界面</button>
</div>
<div id = "map">
积分：<span id ="score"></span>
</div>
<div id = "overbox">
<button id = "overbtn">重新开始</button>
</div>
<div id = "opdiv"></div>
</body>
<script>
var oShowBox = document.getElementById("show_box");
var jsBox = document.getElementById("jsbox");
var returnBtn = document.getElementById("returnBtn");
var startBtn = document.getElementById("startBtn");
var jsBtn = document.getElementById("jsBtn");
var opBox = document.getElementById("opdiv");
var oMap = document.getElementById("map");
var oScore = document.getElementById("score");
var overBtn = document.getElementById("overbtn");
var overBox = document.getElementById("overbox");
var arrBullet = [];
var arrEnemy = [];
var myPlane;
var timer;
var backgroundNum = 0;//背景移动参数
var bulletSpeed = 40;
var enemySpeed = 5;
var index = 0;
var sumScore = 0;
var bigModel;
var bigModel_flag = false;
var keyFlag = true;
startBtn.addEventListener("click",startRun,false);
jsBtn.addEventListener("click",jsRun,false);
returnBtn.addEventListener("click",returnRun,false);
//开始游戏
function startRun(){
oMap.style.display = "block";
oShowBox.style.display = "none";
opBox.style.display = "block";
createPlane(".png",1);
document.addEventListener("keydown",changeModel,false);
opBox.addEventListener("mousemove",myPlaneMove,false);
startMove();
}
//游戏介绍
function jsRun(){
oShowBox.style.display = "none";
jsBox.style.display = "block";
}
//返回主界面
function returnRun(){
oShowBox.style.display = "block";
jsBox.style.display = "none";
}
//运动
function startMove(){
timer = setInterval(function(){
index++;
myPlane.noDeadIndex--;
//背景图移动
if(backgroundNum==800){
backgroundNum=0;
}else{
backgroundNum++;
}
oMap.style.backgroundPositionY = backgroundNum+"px";
//移动子弹
moveBullet();
createBullet();
if(bigModel_flag){
moveBigBullet();
}
//移动敌机
if(index%30==0){
createEnemy();
}
moveEnemy();
isBoom();
if(myPlane.noDeadIndex == 0){
myPlane.noDead = 1;
}
},30)
}
//创建飞机
function createPlane(str,myplaneIndex){
myPlane = document.createElement("img");
myPlane.src = str;
myPlane.noDead = 1;
myPlane.index = myplaneIndex;
myPlane.style.position = "absolute";
myPlane.style.left = "236px";
myPlane.style.top = "660px";
myPlane.style.animation = "myplanefly 1s "
opBox.style.cursor = "none";
oMap.appendChild(myPlane);
}
//移动飞机
function myPlaneMove(e){
var e = e||event;
var mpX = e.offsetX-20;
var mpY = e.offsetY-20;
myPlane.style.left = mpX+"px";
myPlane.style.top = mpY+"px";
}
//创建子弹
function createBullet(){
var bulletModel = document.createElement("img");
if(myPlane.index==1){
bulletModel.src =".png";
bulletModel.style.left = myPlane.offsetLeft+myPlane.offsetWidth/2-20+"px";
}else if(myPlane.index==2){
bulletModel.src =".png";
bulletModel.style.left = myPlane.offsetLeft+myPlane.offsetWidth/2-50+"px";
}
bulletModel.style.position = "absolute";
bulletModel.style.top = myPlane.offsetTop-20+"px";
oMap.appendChild(bulletModel);
arrBullet.push(bulletModel);
}
//子弹运动
function moveBullet(){
for(var i = 0 ; i < arrBullet.length ;i++){
if(arrBullet[i].offsetTop<-16){
oMap.removeChild(arrBullet[i]);
arrBullet.splice(i,1);
i--;//防止删除后漏掉已遍历的那个子弹
}else{
arrBullet[i].style.top = arrBullet[i].offsetTop-bulletSpeed + "px";
}
}
}
//创建敌机
function createEnemy(){
var createNum = parseInt(Math.random()*100)
var ranNum = parseInt(Math.random()*450);
enemyModel = document.createElement("img");
if(createNum%5==0){
enemyModel.src = ".png";
enemyModel.boomSrc = ".png";
enemyModel.HP = 20;
enemyModel.score = 10000
}else if(createNum%3==0){
enemyModel.src = ".png";
enemyModel.boomSrc = ".png";
enemyModel.HP = 5;
enemyModel.score = 5000;
}else{
enemyModel.src = ".png";
enemyModel.boomSrc = ".png";
enemyModel.HP = 2;
enemyModel.score = 1000;
}
enemyModel.style.position = "absolute";
enemyModel.style.left = ranNum+"px";
enemyModel.style.top = "-75px";
oMap.appendChild(enemyModel);
arrEnemy.push(enemyModel)
}
//敌机运动
function moveEnemy(){
for(var i = 0 ; i < arrEnemy.length ;i++){
if(arrEnemy[i].boom){
arrEnemy[i].index-=1;
if(arrEnemy[i].index==0){
oMap.removeChild(arrEnemy[i]);
arrEnemy.splice(i,1);
}
}else{
if(arrEnemy[i].offsetTop>875){
oMap.removeChild(arrEnemy[i]);
arrEnemy.splice(i,1);
i--;//防止删除后漏掉已遍历的那个子弹
}else{
arrEnemy[i].style.top = arrEnemy[i].offsetTop+enemySpeed+ "px";
}
}
}
}
//变换形态
function changeModel(e){
var e = e||event;
//空格
if(e.keyCode==32){
if(myPlane.index!=2){
oMap.removeChild(myPlane);
createPlane(".png",2)
}
}else if(e.keyCode==13){ //回车
if(myPlane.index!=1){
oMap.removeChild(myPlane);
createPlane(".png",1)
}
}else if(e.keyCode==71){
if(keyFlag){
bigBullet();
}
}
}
//碰撞判断
function isBoom(){
//四个边界判断 子弹左面和敌机右面
for(var i = 0 ; i<arrBullet.length ; i++){
for(var j = 0 ;j < arrEnemy.length ;j++){
//判断是否属于的boom状态，是的话 跳过
if(arrEnemy[j].boom){
continue;
}
if(arrBullet[i].offsetLeft+arrBullet[i].offsetWidth>arrEnemy[j].offsetLeft){
if(arrBullet[i].offsetLeft<arrEnemy[j].offsetLeft+arrEnemy[j].offsetWidth){
if(arrBullet[i].offsetTop+arrBullet[i].offsetHeight>arrEnemy[j].offsetTop){
if(arrBullet[i].offsetTop<arrEnemy[j].offsetTop+arrEnemy[j].offsetHeight){
//子弹消失 飞机消失
oMap.removeChild(arrBullet[i]);
arrBullet.splice(i,1);
i--;
isHp(arrEnemy[j]);
break;
}
}
}
}
}
}
//飞机与敌机碰撞
for(var k = 0 ; k<arrEnemy.length;k++){
if(arrEnemy[k].boom){
continue;
}
if(myPlane.offsetLeft+myPlane.offsetWidth>arrEnemy[k].offsetLeft){
if(myPlane.offsetLeft<arrEnemy[k].offsetLeft+arrEnemy[k].offsetWidth){
if(myPlane.offsetTop+myPlane.offsetHeight>arrEnemy[k].offsetTop){
if(myPlane.offsetTop<arrEnemy[k].offsetTop+arrEnemy[k].offsetHeight){
if(myPlane.noDead == 1){
myPlane.src = ".png";
restartGame();
}else if(myPlane.noDead == 2&&(myPlane.noDeadFlag==true)){
myPlane.noDeadIndex = 100;
myPlane.noDeadFlag = false;
}
}
}
}
}
}
}
//大招
function bigBullet(){
bigModel = document.createElement("img");
bigModel.src = ".png";
bigModel.style.width="128px";
bigModel.style.heihgt="128px";
bigModel.style.left = myPlane.offsetLeft+myPlane.offsetWidth/2-63+"px";
bigModel.style.position = "absolute";
bigModel.style.top = myPlane.offsetTop-60+"px";
bigModel_flag = true;
oMap.appendChild(bigModel);
keyFlag =false;
}
//大招运动
function moveBigBullet(){
if(bigModel.offsetTop<100){
bigModel.src = ".png";
bigModel.style.width = bigModel.offsetWidth+10+"px";
bigModel.style.height = bigModel.offsetHeight+10+"px";
bigModel.style.left = bigModel.offsetLeft-5+"px";
bigModel.style.top = bigModel.offsetTop-5+"px";
if(bigModel.offsetWidth>=600){
oMap.removeChild(bigModel);
for(var i = 0 ;i<arrEnemy.length ;i++){
arrEnemy[i].HP=0;
isHp(arrEnemy[i]);
}
bigModel_flag=false;
keyFlag = true;
}
}else{
bigModel.style.top = bigModel.offsetTop-10 + "px";
}
}
//血量判断
function isHp(element){
element.HP--;
if(element.HP<=0){
element.src = element.boomSrc;
element.boom = true;
element.index = 20;
if(myPlane.index==2){
sumScore+=element.score*2;
}else{
sumScore+=element.score
}
oScore.innerHTML = sumScore;
}
}
//重新开始
function restartGame(){
clearInterval(timer);
oMap.style.display = "block";
oShowBox.style.display = "none";
opBox.style.display = "none";
overBox.style.display = "block";
document.removeEventListener("keydown",changeModel,false);
opBox.removeEventListener("mousemove",myPlaneMove,false)
overBtn.onclick = function(){
oMap.style.display = "block";
oShowBox.style.display = "none";
opBox.style.display = "block";
overBox.style.display = "none";
createPlane(".png",1);
document.addEventListener("keydown",changeModel,false) ;
opBox.addEventListener("mousemove",myPlaneMove,false);
myPlane.noDead = 2;
myPlane.noDeadFlag = true
var index = 0;
var sumScore = 0;
var arrBullet = [];
var arrEnemy = [];
startMove();
}
}
</script>
</html>
<title>飞机大战</title>
<style>
*{margin:0;padding:0;}
#show_box{
width: 500px;
height:750px;
position:absolute;
left:500px;
top:0px;
background:url(".jpg");
display: block;
}
#showlogo{
position:absolute;
left:0;
top:250px;
animation: logoMove 5s ;
animation-fill-mode : forwards
}
#showimg1{
position: absolute;
left:0;
top:0;
animation: showpic1 5s ;
animation-fill-mode : forwards
}
#showimg2{
position: absolute;
left:0;
top:0;
animation: showpic2 5s ;
animation-fill-mode : forwards
}
#showimg3{
position: absolute;
left:0;
top:0;
animation: showpic3 5s ;
animation-fill-mode : forwards;
}
@keyframes showpic1{
from{left:0;top:0;}
to{left:50px;top:400px;}
}
@keyframes showpic2{
from{left:0;top:0;}
to{left:200px;top:400px;}
}
@keyframes showpic3{
from{left:0;top:0;}
to{left:350px;top:400px;}
}
@keyframes myplanefly{
from{left:236px;top:800px;}
to{left:236px;top:660px;}
}
@keyframes logoMove{
0% {left:0px;top:800px;}
50%{left:0;top:0}
100% {left:0px;top:250px;}
}
@keyframes leftBtnMove{
from{left:-100px;top:650px;}
to{left:200px;top:650px;}
}
@keyframes rightBtnMove{
from{left:500px;top:580px;}
to{left:200px;top:580px;}
}
#map{
width: 500px;
height:750px;
position:absolute;
left:500px;
top:0px;
background:url(".png") repeat-y;
background-position-y:0 ;
display: none;
overflow: hidden;
}
#jsbox{
width: 500px;
height:750px;
position:absolute;
left:500px;
top:0px;
background:url(".jpg");
display: none;
overflow: hidden;
}
#startBtn{
width:100px;
height:50px;
position:absolute;
left:-100px;
top:650px;
border:0;
border-radius: 20px;
background:url(".png");
line-height: 40px;
animation: leftBtnMove 5s ;
animation-fill-mode : forwards;
}
#startBtn:focus{
outline:none;
}
#jsBtn{
width:100px;
height:50px;
position:absolute;
left:200px;
top:580px;
border:0;
border-radius: 20px;
background:url(".png");
line-height: 40px;
animation: rightBtnMove 5s ;
animation-fill-mode : forwards;
}
#jsBtn:focus{
outline:none;
}
#returnBtn{
width:100px;
height:50px;
position:absolute;
left:350px;
top:700px;
border:0;
border-radius: 20px;
background:url(".png");
line-height: 40px;
}
#returnBtn:focus{
outline:none;
}
#tit{
width:100px;
height:50px;
position:absolute;
left:200px;
top:250px;
border:0;
background: #3591F8;
text-align: center;
line-height: 50px;
}
#opdiv{
width: 500px;
height:750px;
position:absolute;
left:500px;
top:0px;
z-index:10000;
display: none;
}
#overbox{
width: 500px;
height:750px;
position:absolute;
left:500px;
top:0px;
background:url(".jpg");
display: none;
overflow: hidden;
opacity: .8;
}
#score{
color:#fff;
width:100px;
height:30px;
position:absolute;
}
#jsp{
width:200px;
height:400px;
font:20px/40px "微软雅黑";
font-weight: bold;
position:absolute;
left:150px;
top:300px;
}
#overbtn{
width:100px;
height:50px;
position:absolute;
left:200px;
top:580px;
border:0;
border-radius: 20px;
background:url(".png");
line-height: 40px;
}
#overbtn:focus{
outline:none;
}
</style>
<script src = "js/moveUtil.js"></script>
</head>
<body>
<div id = "show_box">
<img src=".png" alt="" id = "showlogo"/>
<img src=".png" alt="" id = "showimg1"/>
<img src=".png" alt="" id = "showimg2"/>
<img src=".png" alt="" id = "showimg3"/>
<button id = "jsBtn">游戏说明</button>
<button id = "startBtn">开始游戏</button>
</div>
<div id = "jsbox">
<p id = "jsp">
空格键：第二种状态<br />
回车键：第一种状态<br />
“G”键：放大招<br />
重新开始后无敌3s
</p>
<button id = "returnBtn">返回主界面</button>
</div>
<div id = "map">
积分：<span id ="score"></span>
</div>
<div id = "overbox">
<button id = "overbtn">重新开始</button>
</div>
<div id = "opdiv"></div>
</body>
<script>
var oShowBox = document.getElementById("show_box");
var jsBox = document.getElementById("jsbox");
var returnBtn = document.getElementById("returnBtn");
var startBtn = document.getElementById("startBtn");
var jsBtn = document.getElementById("jsBtn");
var opBox = document.getElementById("opdiv");
var oMap = document.getElementById("map");
var oScore = document.getElementById("score");
var overBtn = document.getElementById("overbtn");
var overBox = document.getElementById("overbox");
var arrBullet = [];
var arrEnemy = [];
var myPlane;
var timer;
var backgroundNum = 0;//背景移动参数
var bulletSpeed = 40;
var enemySpeed = 5;
var index = 0;
var sumScore = 0;
var bigModel;
var bigModel_flag = false;
var keyFlag = true;
startBtn.addEventListener("click",startRun,false);
jsBtn.addEventListener("click",jsRun,false);
returnBtn.addEventListener("click",returnRun,false);
//开始游戏
function startRun(){
oMap.style.display = "block";
oShowBox.style.display = "none";
opBox.style.display = "block";
createPlane(".png",1);
document.addEventListener("keydown",changeModel,false);
opBox.addEventListener("mousemove",myPlaneMove,false);
startMove();
}
//游戏介绍
function jsRun(){
oShowBox.style.display = "none";
jsBox.style.display = "block";
}
//返回主界面
function returnRun(){
oShowBox.style.display = "block";
jsBox.style.display = "none";
}
//运动
function startMove(){
timer = setInterval(function(){
index++;
myPlane.noDeadIndex--;
//背景图移动
if(backgroundNum==800){
backgroundNum=0;
}else{
backgroundNum++;
}
oMap.style.backgroundPositionY = backgroundNum+"px";
//移动子弹
moveBullet();
createBullet();
if(bigModel_flag){
moveBigBullet();
}
//移动敌机
if(index%30==0){
createEnemy();
}
moveEnemy();
isBoom();
if(myPlane.noDeadIndex == 0){
myPlane.noDead = 1;
}
},30)
}
//创建飞机
function createPlane(str,myplaneIndex){
myPlane = document.createElement("img");
myPlane.src = str;
myPlane.noDead = 1;
myPlane.index = myplaneIndex;
myPlane.style.position = "absolute";
myPlane.style.left = "236px";
myPlane.style.top = "660px";
myPlane.style.animation = "myplanefly 1s "
opBox.style.cursor = "none";
oMap.appendChild(myPlane);
}
//移动飞机
function myPlaneMove(e){
var e = e||event;
var mpX = e.offsetX-20;
var mpY = e.offsetY-20;
myPlane.style.left = mpX+"px";
myPlane.style.top = mpY+"px";
}
//创建子弹
function createBullet(){
var bulletModel = document.createElement("img");
if(myPlane.index==1){
bulletModel.src =".png";
bulletModel.style.left = myPlane.offsetLeft+myPlane.offsetWidth/2-20+"px";
}else if(myPlane.index==2){
bulletModel.src =".png";
bulletModel.style.left = myPlane.offsetLeft+myPlane.offsetWidth/2-50+"px";
}
bulletModel.style.position = "absolute";
bulletModel.style.top = myPlane.offsetTop-20+"px";
oMap.appendChild(bulletModel);
arrBullet.push(bulletModel);
}
//子弹运动
function moveBullet(){
for(var i = 0 ; i < arrBullet.length ;i++){
if(arrBullet[i].offsetTop<-16){
oMap.removeChild(arrBullet[i]);
arrBullet.splice(i,1);
i--;//防止删除后漏掉已遍历的那个子弹
}else{
arrBullet[i].style.top = arrBullet[i].offsetTop-bulletSpeed + "px";
}
}
}
//创建敌机
function createEnemy(){
var createNum = parseInt(Math.random()*100)
var ranNum = parseInt(Math.random()*450);
enemyModel = document.createElement("img");
if(createNum%5==0){
enemyModel.src = ".png";
enemyModel.boomSrc = ".png";
enemyModel.HP = 20;
enemyModel.score = 10000
}else if(createNum%3==0){
enemyModel.src = ".png";
enemyModel.boomSrc = ".png";
enemyModel.HP = 5;
enemyModel.score = 5000;
}else{
enemyModel.src = ".png";
enemyModel.boomSrc = ".png";
enemyModel.HP = 2;
enemyModel.score = 1000;
}
enemyModel.style.position = "absolute";
enemyModel.style.left = ranNum+"px";
enemyModel.style.top = "-75px";
oMap.appendChild(enemyModel);
arrEnemy.push(enemyModel)
}
//敌机运动
function moveEnemy(){
for(var i = 0 ; i < arrEnemy.length ;i++){
if(arrEnemy[i].boom){
arrEnemy[i].index-=1;
if(arrEnemy[i].index==0){
oMap.removeChild(arrEnemy[i]);
arrEnemy.splice(i,1);
}
}else{
if(arrEnemy[i].offsetTop>875){
oMap.removeChild(arrEnemy[i]);
arrEnemy.splice(i,1);
i--;//防止删除后漏掉已遍历的那个子弹
}else{
arrEnemy[i].style.top = arrEnemy[i].offsetTop+enemySpeed+ "px";
}
}
}
}
//变换形态
function changeModel(e){
var e = e||event;
//空格
if(e.keyCode==32){
if(myPlane.index!=2){
oMap.removeChild(myPlane);
createPlane(".png",2)
}
}else if(e.keyCode==13){ //回车
if(myPlane.index!=1){
oMap.removeChild(myPlane);
createPlane(".png",1)
}
}else if(e.keyCode==71){
if(keyFlag){
bigBullet();
}
}
}
//碰撞判断
function isBoom(){
//四个边界判断 子弹左面和敌机右面
for(var i = 0 ; i<arrBullet.length ; i++){
for(var j = 0 ;j < arrEnemy.length ;j++){
//判断是否属于的boom状态，是的话 跳过
if(arrEnemy[j].boom){
continue;
}
if(arrBullet[i].offsetLeft+arrBullet[i].offsetWidth>arrEnemy[j].offsetLeft){
if(arrBullet[i].offsetLeft<arrEnemy[j].offsetLeft+arrEnemy[j].offsetWidth){
if(arrBullet[i].offsetTop+arrBullet[i].offsetHeight>arrEnemy[j].offsetTop){
if(arrBullet[i].offsetTop<arrEnemy[j].offsetTop+arrEnemy[j].offsetHeight){
//子弹消失 飞机消失
oMap.removeChild(arrBullet[i]);
arrBullet.splice(i,1);
i--;
isHp(arrEnemy[j]);
break;
}
}
}
}
}
}
//飞机与敌机碰撞
for(var k = 0 ; k<arrEnemy.length;k++){
if(arrEnemy[k].boom){
continue;
}
if(myPlane.offsetLeft+myPlane.offsetWidth>arrEnemy[k].offsetLeft){
if(myPlane.offsetLeft<arrEnemy[k].offsetLeft+arrEnemy[k].offsetWidth){
if(myPlane.offsetTop+myPlane.offsetHeight>arrEnemy[k].offsetTop){
if(myPlane.offsetTop<arrEnemy[k].offsetTop+arrEnemy[k].offsetHeight){
if(myPlane.noDead == 1){
myPlane.src = ".png";
restartGame();
}else if(myPlane.noDead == 2&&(myPlane.noDeadFlag==true)){
myPlane.noDeadIndex = 100;
myPlane.noDeadFlag = false;
}
}
}
}
}
}
}
//大招
function bigBullet(){
bigModel = document.createElement("img");
bigModel.src = ".png";
bigModel.style.width="128px";
bigModel.style.heihgt="128px";
bigModel.style.left = myPlane.offsetLeft+myPlane.offsetWidth/2-63+"px";
bigModel.style.position = "absolute";
bigModel.style.top = myPlane.offsetTop-60+"px";
bigModel_flag = true;
oMap.appendChild(bigModel);
keyFlag =false;
}
//大招运动
function moveBigBullet(){
if(bigModel.offsetTop<100){
bigModel.src = ".png";
bigModel.style.width = bigModel.offsetWidth+10+"px";
bigModel.style.height = bigModel.offsetHeight+10+"px";
bigModel.style.left = bigModel.offsetLeft-5+"px";
bigModel.style.top = bigModel.offsetTop-5+"px";
if(bigModel.offsetWidth>=600){
oMap.removeChild(bigModel);
for(var i = 0 ;i<arrEnemy.length ;i++){
arrEnemy[i].HP=0;
isHp(arrEnemy[i]);
}
bigModel_flag=false;
keyFlag = true;
}
}else{
bigModel.style.top = bigModel.offsetTop-10 + "px";
}
}
//血量判断
function isHp(element){
element.HP--;
if(element.HP<=0){
element.src = element.boomSrc;
element.boom = true;
element.index = 20;
if(myPlane.index==2){
sumScore+=element.score*2;
}else{
sumScore+=element.score
}
oScore.innerHTML = sumScore;
}
}
//重新开始
function restartGame(){
clearInterval(timer);
oMap.style.display = "block";
oShowBox.style.display = "none";
opBox.style.display = "none";
overBox.style.display = "block";
document.removeEventListener("keydown",changeModel,false);
opBox.removeEventListener("mousemove",myPlaneMove,false)
overBtn.onclick = function(){
oMap.style.display = "block";
oShowBox.style.display = "none";
opBox.style.display = "block";
overBox.style.display = "none";
createPlane(".png",1);
document.addEventListener("keydown",changeModel,false) ;
opBox.addEventListener("mousemove",myPlaneMove,false);
myPlane.noDead = 2;
myPlane.noDeadFlag = true
var index = 0;
var sumScore = 0;
var arrBullet = [];
var arrEnemy = [];
startMove();
}
}
</script>
</html>
转载于:
更多推荐
纯js 逻辑飞机大战
发布评论