前端开发javascript| html 代码 <!DOCTYPE <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>><br /><br /> <<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>><br /><br /> <head><br /><br /> <meta charset=”utf-8″ /><br /><br /> <title>飞机大战</title><br /><br /> <style><br /><br /> *{margin:0;padding:0;}<br /><br /> #show_box{<br /><br /> width: 500px;<br /><br /> height:750px;<br /><br /> position:absolute;<br /><br /> left:500px;<br /><br /> top:0px;<br /><br /> background:url(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200s48hqhyg778i86hq.jpg”);<br /><br /> display: block;<br /><br /> }<br /><br /> #showlogo{<br /><br /> position:absolute;<br /><br /> left:0;<br /><br /> top:250px;<br /><br /> animation: logoMove 5s ;<br /><br /> animation-fill-mode : forwards<br /><br /> }<br /><br /> #showimg1{<br /><br /> position: absolute;<br /><br /> left:0;<br /><br /> top:0;<br /><br /> animation: showpic1 5s ;<br /><br /> animation-fill-mode : forwards<br /><br /> }<br /><br /> #showimg2{<br /><br /> position: absolute;<br /><br /> left:0;<br /><br /> top:0;<br /><br /> animation: showpic2 5s ;<br /><br /> animation-fill-mode : forwards<br /><br /> }<br /><br /> #showimg3{<br /><br /> position: absolute;<br /><br /> left:0;<br /><br /> top:0;<br /><br /> animation: showpic3 5s ;<br /><br /> animation-fill-mode : forwards;<br /><br /> }<br /><br /> @keyframes showpic1{<br /><br /> from{left:0;top:0;}<br /><br /> to{left:50px;top:400px;}<br /><br /> }<br /><br /> @keyframes showpic2{<br /><br /> from{left:0;top:0;}<br /><br /> to{left:200px;top:400px;}<br /><br /> }<br /><br /> @keyframes showpic3{<br /><br /> from{left:0;top:0;}<br /><br /> to{left:350px;top:400px;}<br /><br /> }<br /><br /> @keyframes myplanefly{<br /><br /> from{left:236px;top:800px;}<br /><br /> to{left:236px;top:660px;}<br /><br /> }<br /><br /> @keyframes logoMove{<br /><br /> 0% {left:0px;top:800px;}<br /><br /> 50%{left:0;top:0}<br /><br /> 100% {left:0px;top:250px;}<br /><br /> }<br /><br /> @keyframes leftBtnMove{<br /><br /> from{left:-100px;top:650px;}<br /><br /> to{left:200px;top:650px;}<br /><br /> }<br /><br /> @keyframes rightBtnMove{<br /><br /> from{left:500px;top:580px;}<br /><br /> to{left:200px;top:580px;}<br /><br /> }<br /><br /> #map{<br /><br /> width: 500px;<br /><br /> height:750px;<br /><br /> position:absolute;<br /><br /> left:500px;<br /><br /> top:0px;<br /><br /> background:url(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158mli5bl7p6506upvb.png”) repeat-y;<br /><br /> background-position-y:0 ;<br /><br /> display: none;<br /><br /> overflow: hidden;<br /><br /> }<br /><br /> #jsbox{<br /><br /> width: 500px;<br /><br /> height:750px;<br /><br /> position:absolute;<br /><br /> left:500px;<br /><br /> top:0px;<br /><br /> background:url(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200s48hqhyg778i86hq.jpg”);<br /><br /> display: none;<br /><br /> overflow: hidden;<br /><br /> }<br /><br /> #startBtn{<br /><br /> width:100px;<br /><br /> height:50px;<br /><br /> position:absolute;<br /><br /> left:-100px;<br /><br /> top:650px;<br /><br /> border:0;<br /><br /> border-radius: 20px;<br /><br /> background:url(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158j8k83geel880k0j8.png”);<br /><br /> line-height: 40px;<br /><br /> animation: leftBtnMove 5s ;<br /><br /> animation-fill-mode : forwards;<br /><br /> }<br /><br /> #startBtn:focus{<br /><br /> outline:none;<br /><br /> }<br /><br /> #jsBtn{<br /><br /> width:100px;<br /><br /> height:50px;<br /><br /> position:absolute;<br /><br /> left:200px;<br /><br /> top:580px;<br /><br /> border:0;<br /><br /> border-radius: 20px;<br /><br /> background:url(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158j8k83geel880k0j8.png”);<br /><br /> line-height: 40px;<br /><br /> animation: rightBtnMove 5s ;<br /><br /> animation-fill-mode : forwards;<br /><br /> }<br /><br /> #jsBtn:focus{<br /><br /> outline:none;<br /><br /> }<br /><br /> #returnBtn{<br /><br /> width:100px;<br /><br /> height:50px;<br /><br /> position:absolute;<br /><br /> left:350px;<br /><br /> top:700px;<br /><br /> border:0;<br /><br /> border-radius: 20px;<br /><br /> background:url(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158j8k83geel880k0j8.png”);<br /><br /> line-height: 40px;<br /><br /> }<br /><br /> #returnBtn:focus{<br /><br /> outline:none;<br /><br /> }<br /><br /> #tit{<br /><br /> width:100px;<br /><br /> height:50px;<br /><br /> position:absolute;<br /><br /> left:200px;<br /><br /> top:250px;<br /><br /> border:0;<br /><br /> background: #3591F8;<br /><br /> text-align: center;<br /><br /> line-height: 50px;<br /><br /> }<br /><br /> #opdiv{<br /><br /> width: 500px;<br /><br /> height:750px;<br /><br /> position:absolute;<br /><br /> left:500px;<br /><br /> top:0px;<br /><br /> z-index:10000;<br /><br /> display: none;<br /><br /> }<br /><br /> #overbox{<br /><br /> width: 500px;<br /><br /> height:750px;<br /><br /> position:absolute;<br /><br /> left:500px;<br /><br /> top:0px;<br /><br /> background:url(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200s48hqhyg778i86hq.jpg”);<br /><br /> display: none;<br /><br /> overflow: hidden;<br /><br /> opacity: .8;<br /><br /> }<br /><br /> #score{<br /><br /> color:#fff;<br /><br /> width:100px;<br /><br /> height:30px;<br /><br /> position:absolute;<br /><br /> }<br /><br /> #jsp{<br /><br /> width:200px;<br /><br /> height:400px;<br /><br /> font:20px/40px “微软雅黑”;<br /><br /> font-weight: bold;<br /><br /> position:absolute;<br /><br /> left:150px;<br /><br /> top:300px;<br /><br /> }<br /><br /> #overbtn{<br /><br /> width:100px;<br /><br /> height:50px;<br /><br /> position:absolute;<br /><br /> left:200px;<br /><br /> top:580px;<br /><br /> border:0;<br /><br /> border-radius: 20px;<br /><br /> background:url(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158j8k83geel880k0j8.png”);<br /><br /> line-height: 40px;<br /><br /> }<br /><br /> #overbtn:focus{<br /><br /> outline:none;<br /><br /> }<br /><br /> </style><br /><br /> <script src = “<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/javascript" title="js" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">js</a></span>/moveUtil.<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/javascript" title="js" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">js</a></span>”></script><br /><br /> </head><br /><br /> <body><br /><br /> <div id = “show_box”><br /><br /> <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159fn0l55yaq9yq5all.png” alt=”” id = “showlogo”/><br /><br /> <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200rwlye977tj0tztsk.png” alt=”” id = “showimg1″/><br /><br /> <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200rwlye977tj0tztsk.png” alt=”” id = “showimg2″/><br /><br /> <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200rwlye977tj0tztsk.png” alt=”” id = “showimg3″/><br /><br /> <button id = “jsBtn”>游戏说明</button><br /><br /> <button id = “startBtn”>开始游戏</button><br /><br /> </div><br /><br /> <div id = “jsbox”><br /><br /> <p id = “jsp”><br /><br /> 空格键：第二种状态<br /><br /><br /> 回车键：第一种状态<br /><br /><br /> “G”键：放大招<br /><br /><br /> 重新开始后无敌3s<br /><br /> </p><br /><br /> <button id = “returnBtn”>返回主界面</button><br /><br /> </div><br /><br /> <div id = “map”><br /><br /> 积分：<span id =”score”></span><br /><br /> </div><br /><br /> <div id = “overbox”><br /><br /> <button id = “overbtn”>重新开始</button><br /><br /> </div><br /><br /> <div id = “opdiv”></div><br /><br /> </body><br /><br /> <script><br /><br /> var oShowBox = document.getElementById(“show_box”);<br /><br /> var jsBox = document.getElementById(“jsbox”);<br /><br /> var returnBtn = document.getElementById(“returnBtn”);<br /><br /> var startBtn = document.getElementById(“startBtn”);<br /><br /> var jsBtn = document.getElementById(“jsBtn”);<br /><br /> var opBox = document.getElementById(“opdiv”);<br /><br /> var oMap = document.getElementById(“map”);<br /><br /> var oScore = document.getElementById(“score”);<br /><br /> var overBtn = document.getElementById(“overbtn”);<br /><br /> var overBox = document.getElementById(“overbox”);<br /><br /> var arrBullet = [];<br /><br /> var arrEnemy = [];<br /><br /> var myPlane;<br /><br /> var timer;<br /><br /> var backgroundNum = 0;//背景移动参数<br /><br /> var bulletSpeed = 40;<br /><br /> var enemySpeed = 5;<br /><br /> var index = 0;<br /><br /> var sumScore = 0;<br /><br /> var bigModel;<br /><br /> var bigModel_flag = false;<br /><br /> var keyFlag = true;</p><br /> <p> startBtn.addEventListener(“click”,startRun,false);<br /><br /> jsBtn.addEventListener(“click”,jsRun,false);<br /><br /> returnBtn.addEventListener(“click”,returnRun,false);<br /><br /> //开始游戏<br /><br /> function startRun(){<br /><br /> oMap.style.display = “block”;<br /><br /> oShowBox.style.display = “none”;<br /><br /> opBox.style.display = “block”;<br /><br /> createPlane(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159jh6pmfdfcla5fp2u.png”,1);<br /><br /> document.addEventListener(“keydown”,changeModel,false);<br /><br /> opBox.addEventListener(“mousemove”,myPlaneMove,false);<br /><br /> startMove();<br /><br /> }<br /><br /> //游戏介绍<br /><br /> function jsRun(){<br /><br /> oShowBox.style.display = “none”;<br /><br /> jsBox.style.display = “block”;<br /><br /> }<br /><br /> //返回主界面<br /><br /> function returnRun(){<br /><br /> oShowBox.style.display = “block”;<br /><br /> jsBox.style.display = “none”;<br /><br /> }<br /><br /> //运动<br /><br /> function startMove(){<br /><br /> timer = setInterval(function(){<br /><br /> index++;<br /><br /> myPlane.noDeadIndex–;<br /><br /> //背景图移动<br /><br /> if(backgroundNum==800){<br /><br /> backgroundNum=0;<br /><br /> }else{<br /><br /> backgroundNum++;<br /><br /> }<br /><br /> oMap.style.backgroundPositionY = backgroundNum+”px”;<br /><br /> //移动子弹<br /><br /> moveBullet();<br /><br /> createBullet();<br /><br /> if(bigModel_flag){<br /><br /> moveBigBullet();<br /><br /> }</p><br /> <p> //移动敌机<br /><br /> if(index%30==0){<br /><br /> createEnemy();<br /><br /> }<br /><br /> moveEnemy();<br /><br /> isBoom();<br /><br /> if(myPlane.noDeadIndex == 0){<br /><br /> myPlane.noDead = 1;<br /><br /> }<br /><br /> },30)<br /><br /> }<br /><br /> //创建飞机<br /><br /> function createPlane(str,myplaneIndex){<br /><br /> myPlane = document.createElement(“img”);<br /><br /> myPlane.src = str;<br /><br /> myPlane.noDead = 1;<br /><br /> myPlane.index = myplaneIndex;<br /><br /> myPlane.style.position = “absolute”;<br /><br /> myPlane.style.left = “236px”;<br /><br /> myPlane.style.top = “660px”;<br /><br /> myPlane.style.animation = “myplanefly 1s “<br /><br /> opBox.style.cursor = “none”;<br /><br /> oMap.appendChild(myPlane);<br /><br /> }<br /><br /> //移动飞机<br /><br /> function myPlaneMove(e){<br /><br /> var e = e||event;<br /><br /> var mpX = e.offsetX-20;<br /><br /> var mpY = e.offsetY-20;<br /><br /> myPlane.style.left = mpX+”px”;<br /><br /> myPlane.style.top = mpY+”px”;<br /><br /> }<br /><br /> //创建子弹<br /><br /> function createBullet(){<br /><br /> var bulletModel = document.createElement(“img”);<br /><br /> if(myPlane.index==1){<br /><br /> bulletModel.src =”http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158tmjqnr6jybt4tn7a.png”;<br /><br /> bulletModel.style.left = myPlane.offsetLeft+myPlane.offsetWidth/2-20+”px”;<br /><br /> }else if(myPlane.index==2){<br /><br /> bulletModel.src =”http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159vrz718gga75ppg20.png”;<br /><br /> bulletModel.style.left = myPlane.offsetLeft+myPlane.offsetWidth/2-50+”px”;<br /><br /> }</p><br /> <p> bulletModel.style.position = “absolute”;<br /><br /> bulletModel.style.top = myPlane.offsetTop-20+”px”;<br /><br /> oMap.appendChild(bulletModel);<br /><br /> arrBullet.push(bulletModel);<br /><br /> }<br /><br /> //子弹运动<br /><br /> function moveBullet(){<br /><br /> for(var i = 0 ; i < arrBullet.length ;i++){<br /><br /> if(arrBullet[i].offsetTop<-16){<br /><br /> oMap.removeChild(arrBullet[i]);<br /><br /> arrBullet.splice(i,1);<br /><br /> i–;//防止删除后漏掉已遍历的那个子弹<br /><br /> }else{<br /><br /> arrBullet[i].style.top = arrBullet[i].offsetTop-bulletSpeed + “px”;<br /><br /> }<br /><br /> }<br /><br /> }<br /><br /> //创建敌机<br /><br /> function createEnemy(){<br /><br /> var createNum = parseInt(Math.random()*100)<br /><br /> var ranNum = parseInt(Math.random()*450);<br /><br /> enemyModel = document.createElement(“img”);<br /><br /> if(createNum%5==0){<br /><br /> enemyModel.src = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159k69wfbkju6bjj71j.png”;<br /><br /> enemyModel.boomSrc = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159tl992mp5s2fpfoo2.png”;<br /><br /> enemyModel.HP = 20;<br /><br /> enemyModel.score = 10000<br /><br /> }else if(createNum%3==0){<br /><br /> enemyModel.src = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159e3oxddfpdo9bx7so.png”;<br /><br /> enemyModel.boomSrc = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158fk9aa1ca92ecvb67.png”;<br /><br /> enemyModel.HP = 5;<br /><br /> enemyModel.score = 5000;<br /><br /> }else{<br /><br /> enemyModel.src = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200kl9ks4k6lkh9kwl6.png”;<br /><br /> enemyModel.boomSrc = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158fk9aa1ca92ecvb67.png”;<br /><br /> enemyModel.HP = 2;<br /><br /> enemyModel.score = 1000;<br /><br /> }<br /><br /> enemyModel.style.position = “absolute”;<br /><br /> enemyModel.style.left = ranNum+”px”;<br /><br /> enemyModel.style.top = “-75px”;<br /><br /> oMap.appendChild(enemyModel);<br /><br /> arrEnemy.push(enemyModel)<br /><br /> }<br /><br /> //敌机运动<br /><br /> function moveEnemy(){<br /><br /> for(var i = 0 ; i < arrEnemy.length ;i++){<br /><br /> if(arrEnemy[i].boom){<br /><br /> arrEnemy[i].index-=1;<br /><br /> if(arrEnemy[i].index==0){<br /><br /> oMap.removeChild(arrEnemy[i]);<br /><br /> arrEnemy.splice(i,1);<br /><br /> }<br /><br /> }else{<br /><br /> if(arrEnemy[i].offsetTop>875){<br /><br /> oMap.removeChild(arrEnemy[i]);<br /><br /> arrEnemy.splice(i,1);<br /><br /> i–;//防止删除后漏掉已遍历的那个子弹<br /><br /> }else{<br /><br /> arrEnemy[i].style.top = arrEnemy[i].offsetTop+enemySpeed+ “px”;<br /><br /> }<br /><br /> }</p><br /> <p> }<br /><br /> }<br /><br /> //变换形态<br /><br /> function changeModel(e){<br /><br /> var e = e||event;<br /><br /> //空格<br /><br /> if(e.keyCode==32){<br /><br /> if(myPlane.index!=2){<br /><br /> oMap.removeChild(myPlane);<br /><br /> createPlane(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200k03b0vny8afuv39e.png”,2)<br /><br /> }<br /><br /> }else if(e.keyCode==13){ //回车<br /><br /> if(myPlane.index!=1){<br /><br /> oMap.removeChild(myPlane);<br /><br /> createPlane(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159jh6pmfdfcla5fp2u.png”,1)<br /><br /> }<br /><br /> }else if(e.keyCode==71){<br /><br /> if(keyFlag){<br /><br /> bigBullet();<br /><br /> }<br /><br /> }<br /><br /> }<br /><br /> //碰撞判断<br /><br /> function isBoom(){<br /><br /> //四个边界判断 子弹左面和敌机右面<br /><br /> for(var i = 0 ; i<arrBullet.length ; i++){<br /><br /> for(var j = 0 ;j < arrEnemy.length ;j++){<br /><br /> //判断是否属于的boom状态，是的话 跳过<br /><br /> if(arrEnemy[j].boom){<br /><br /> continue;<br /><br /> }<br /><br /> if(arrBullet[i].offsetLeft+arrBullet[i].offsetWidth>arrEnemy[j].offsetLeft){<br /><br /> if(arrBullet[i].offsetLeft<arrEnemy[j].offsetLeft+arrEnemy[j].offsetWidth){<br /><br /> if(arrBullet[i].offsetTop+arrBullet[i].offsetHeight>arrEnemy[j].offsetTop){<br /><br /> if(arrBullet[i].offsetTop<arrEnemy[j].offsetTop+arrEnemy[j].offsetHeight){<br /><br /> //子弹消失 飞机消失<br /><br /> oMap.removeChild(arrBullet[i]);<br /><br /> arrBullet.splice(i,1);<br /><br /> i–;</p><br /> <p> isHp(arrEnemy[j]);<br /><br /> break;<br /><br /> }<br /><br /> }<br /><br /> }<br /><br /> }<br /><br /> }<br /><br /> }<br /><br /> //飞机与敌机碰撞<br /><br /> for(var k = 0 ; k<arrEnemy.length;k++){<br /><br /> if(arrEnemy[k].boom){<br /><br /> continue;<br /><br /> }<br /><br /> if(myPlane.offsetLeft+myPlane.offsetWidth>arrEnemy[k].offsetLeft){<br /><br /> if(myPlane.offsetLeft<arrEnemy[k].offsetLeft+arrEnemy[k].offsetWidth){<br /><br /> if(myPlane.offsetTop+myPlane.offsetHeight>arrEnemy[k].offsetTop){<br /><br /> if(myPlane.offsetTop<arrEnemy[k].offsetTop+arrEnemy[k].offsetHeight){<br /><br /> if(myPlane.noDead == 1){<br /><br /> myPlane.src = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154200lusx7ujhfq87llfq.png”;<br /><br /> restartGame();<br /><br /> }else if(myPlane.noDead == 2&&(myPlane.noDeadFlag==true)){<br /><br /> myPlane.noDeadIndex = 100;<br /><br /> myPlane.noDeadFlag = false;<br /><br /> }<br /><br /> }<br /><br /> }<br /><br /> }<br /><br /> }<br /><br /> }<br /><br /> }<br /><br /> //大招<br /><br /> function bigBullet(){<br /><br /> bigModel = document.createElement(“img”);<br /><br /> bigModel.src = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159bhe3e112qp2y55tk.png”;<br /><br /> bigModel.style.width=”128px”;<br /><br /> bigModel.style.heihgt=”128px”;<br /><br /> bigModel.style.left = myPlane.offsetLeft+myPlane.offsetWidth/2-63+”px”;<br /><br /> bigModel.style.position = “absolute”;<br /><br /> bigModel.style.top = myPlane.offsetTop-60+”px”;<br /><br /> bigModel_flag = true;<br /><br /> oMap.appendChild(bigModel);<br /><br /> keyFlag =false;<br /><br /> }<br /><br /> //大招运动<br /><br /> function moveBigBullet(){<br /><br /> if(bigModel.offsetTop<100){<br /><br /> bigModel.src = “http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154158o6329xv7659xx16a.png”;<br /><br /> bigModel.style.width = bigModel.offsetWidth+10+”px”;<br /><br /> bigModel.style.height = bigModel.offsetHeight+10+”px”;<br /><br /> bigModel.style.left = bigModel.offsetLeft-5+”px”;<br /><br /> bigModel.style.top = bigModel.offsetTop-5+”px”;<br /><br /> if(bigModel.offsetWidth>=600){<br /><br /> oMap.removeChild(bigModel);<br /><br /> for(var i = 0 ;i<arrEnemy.length ;i++){<br /><br /> arrEnemy[i].HP=0;<br /><br /> isHp(arrEnemy[i]);<br /><br /> }<br /><br /> bigModel_flag=false;<br /><br /> keyFlag = true;<br /><br /> }</p><br /> <p> }else{<br /><br /> bigModel.style.top = bigModel.offsetTop-10 + “px”;<br /><br /> }<br /><br /> }<br /><br /> //血量判断<br /><br /> function isHp(element){<br /><br /> element.HP–;<br /><br /> if(element.HP<=0){<br /><br /> element.src = element.boomSrc;<br /><br /> element.boom = true;<br /><br /> element.index = 20;<br /><br /> if(myPlane.index==2){<br /><br /> sumScore+=element.score*2;<br /><br /> }else{<br /><br /> sumScore+=element.score<br /><br /> }<br /><br /> oScore.innerHTML = sumScore;<br /><br /> }<br /><br /> }<br /><br /> //重新开始<br /><br /> function restartGame(){<br /><br /> clearInterval(timer);<br /><br /> oMap.style.display = “block”;<br /><br /> oShowBox.style.display = “none”;<br /><br /> opBox.style.display = “none”;<br /><br /> overBox.style.display = “block”;<br /><br /> document.removeEventListener(“keydown”,changeModel,false);<br /><br /> opBox.removeEventListener(“mousemove”,myPlaneMove,false)<br /><br /> overBtn.onclick = function(){<br /><br /> oMap.style.display = “block”;<br /><br /> oShowBox.style.display = “none”;<br /><br /> opBox.style.display = “block”;<br /><br /> overBox.style.display = “none”;<br /><br /> createPlane(“http://cdn.attach.w3cfuns.com/notes/pics/201610/21/154159jh6pmfdfcla5fp2u.png”,1);<br /><br /> document.addEventListener(“keydown”,changeModel,false) ;<br /><br /> opBox.addEventListener(“mousemove”,myPlaneMove,false);<br /><br /> myPlane.noDead = 2;<br /><br /> myPlane.noDeadFlag = true<br /><br /> var index = 0;<br /><br /> var sumScore = 0;<br /><br /> var arrBullet = [];<br /><br /> var arrEnemy = [];<br /><br /> startMove();<br /><br /> }<br /><br /> }<br /><br /> </script><br /><br /> </html> javascript 代码 function startMove(element,obj,speed,fn){<br /><br /> clearInterval(element.timer)<br /><br /> element.timer = setInterval(function(){<br /><br /> //计时器每次刷新isComplete状态<br /><br /> var isComplete = true;<br /><br /> //通过for in 获得对象中的属性 和 属性值<br /><br /> for(var attr in obj){<br /><br /> //获取 当前页面内目标的样式 并通过计时器实时刷新 调用getStyle方法<br /><br /> var current = Math.round(parseFloat(getStyle(element,attr)));<br /><br /> //如果取不到或者 取到返回的不为num类型 定义为0<br /><br /> if(!current){<br /><br /> current = 0;<br /><br /> }<br /><br /> //减速运动框架<br /><br /> // var speed = (obj[attr]-current)/10;<br /><br /> // if(speed<0){<br /><br /> // speed = Math.floor(speed);<br /><br /> // }else if(speed>0){<br /><br /> // speed = Math.ceil(speed);<br /><br /> // }<br /><br /> //判断运动是否结束<br /><br /> if(obj[attr]==current){</p><br /> <p> }else{<br /><br /> element.style[attr]=current+speed+”px”;<br /><br /> isComplete = false;<br /><br /> }<br /><br /> }<br /><br /> //运动结束 清空计时器<br /><br /> if(isComplete){<br /><br /> clearInterval(element.timer);<br /><br /> if(fn){<br /><br /> fn();<br /><br /> }<br /><br /> }<br /><br /> },20);<br /><br /> }</p><br /> <p>//获得内敛样式<br /><br /> function getStyle(element,attr){<br /><br /> if(element.currentStyle){<br /><br /> return element.currentStyle[attr]; //IE<br /><br /> }else{<br /><br /> return window.getComputedStyle(element,false)[attr];//非IE<br /><br /> }<br /><br /> } 网站前端开发_前端开发者 https://www.rokub.com » 本文来自：前端开发者 » 《前端开发javascript逻辑飞机大战 改良版》 » 本文链接地址：https://www.rokub.com/2729.html » 您也可以订阅本站：https://www.rokub.com
前端开发者
评论前必须登录！
注册