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