前端开发javascript逻辑飞机大战改良版

由前端开发者 · 2018年5月12日20:52:28

摘要：前端开发javascript| html 代码 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title……

前端开发javascript|

html 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html">html</a>> <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(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200s48hqhyg778i86hq.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(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158mli5bl7p6506upvb.png”) repeat-y; background-position-y:0 ; display: none; overflow: hidden; } #jsbox{ width: 500px; height:750px; position:absolute; left:500px; top:0px; background:url(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200s48hqhyg778i86hq.jpg”); display: none; overflow: hidden; } #startBtn{ width:100px; height:50px; position:absolute; left:-100px; top:650px; border:0; border-radius: 20px; background:url(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158j8k83geel880k0j8.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(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158j8k83geel880k0j8.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(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158j8k83geel880k0j8.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(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200s48hqhyg778i86hq.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(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158j8k83geel880k0j8.png”); line-height: 40px; } #overbtn:focus{ outline:none; } </style> <script src = “<a href="https://www.rokub.com/category/javascript" title="js">js</a>/moveUtil.<a href="https://www.rokub.com/category/javascript" title="js">js</a>”></script> </head> <body> <div id = “show_box”> <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159fn0l55yaq9yq5all.png” alt=”” id = “showlogo”/> <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200rwlye977tj0tztsk.png” alt=”” id = “showimg1″/> <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200rwlye977tj0tztsk.png” alt=”” id = “showimg2″/> <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200rwlye977tj0tztsk.png” alt=”” id = “showimg3″/> <button id = “jsBtn”>游戏说明</button> <button id = “startBtn”>开始游戏</button> </div> <div id = “jsbox”> 空格键：第二种状态 回车键：第一种状态 “G”键：放大招 重新开始后无敌3s <button id = “returnBtn”>返回主界面</button> </div> <div id = “map”> 积分： </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(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159jh6pmfdfcla5fp2u.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 =”http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158tmjqnr6jybt4tn7a.png”; bulletModel.style.left = myPlane.offsetLeft+myPlane.offsetWidth/2-20+”px”; }else if(myPlane.index==2){ bulletModel.src =”http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159vrz718gga75ppg20.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 = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159k69wfbkju6bjj71j.png”; enemyModel.boomSrc = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159tl992mp5s2fpfoo2.png”; enemyModel.HP = 20; enemyModel.score = 10000 }else if(createNum%3==0){ enemyModel.src = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159e3oxddfpdo9bx7so.png”; enemyModel.boomSrc = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158fk9aa1ca92ecvb67.png”; enemyModel.HP = 5; enemyModel.score = 5000; }else{ enemyModel.src = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200kl9ks4k6lkh9kwl6.png”; enemyModel.boomSrc = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158fk9aa1ca92ecvb67.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(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200k03b0vny8afuv39e.png”,2) } }else if(e.keyCode==13){ //回车 if(myPlane.index!=1){ oMap.removeChild(myPlane); createPlane(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159jh6pmfdfcla5fp2u.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 = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200lusx7ujhfq87llfq.png”; restartGame(); }else if(myPlane.noDead == 2&&(myPlane.noDeadFlag==true)){ myPlane.noDeadIndex = 100; myPlane.noDeadFlag = false; } } } } } } } //大招 function bigBullet(){ bigModel = document.createElement(“img”); bigModel.src = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159bhe3e112qp2y55tk.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 = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158o6329xv7659xx16a.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(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159jh6pmfdfcla5fp2u.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>

javascript 代码