飞机大战小游戏1.0版本
生活随笔
收集整理的這篇文章主要介紹了
飞机大战小游戏1.0版本
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
小時候大家應該都玩過飛機大戰吧，這就是仿的一個飛機大戰，但是沒有寫的很全，只能玩一次，死掉之后需要刷新頁面玩第二次，話不說多，上代碼：
初始頁面：
整個的html代碼還是很少，如下：
<div id="box"><!--存難度--><div id="level"><h1>飛機大戰 1.0</h1><p>簡單</p><p>中等</p><p>困難</p><p style="color:#f00">WM 難度</p></div><!--放地圖，每個難度的地圖都是不同的--><div id="map"><!--統一管理敵軍--><div id="BiuAll"></div></div> </div>?困難點：
代碼的重點就是判斷飛機之間的距離從而來確定是否碰撞到了，敵軍與子彈的距離判斷是否擊落敵軍
上代碼：
//碰撞檢測function coll(obj1,obj2) {//物體 1 的邊界var T1=obj1.offsetTop,B1=T1+obj1.clientHeight,L1=obj1.offsetLeft,R1=L1+obj1.clientWidth;//物體 2 的邊界var T2=obj2.offsetTop,B2=T2+obj2.clientHeight,L2=obj2.offsetLeft,R2=L2+obj2.clientWidth;if(B1<T2 ||R1<L2 ||T1>B2 || L1>R2){//沒有撞到的情況return false;}else{//撞到了的情況return true;}}子彈的碰撞檢測需要倒著遍歷，就像遍歷數組去重一樣，如果你從第一個開始遍歷，若數組第一個就重復的話，刪除第一個，原先的第二個會頂替到第一個的位置，會造成漏網之魚。
1 //子彈碰撞 倒著遍歷 2 for(var i=allBiu.length-1;i>=0;i--){ 3 var objBiu=allBiu[i]; 4 if(coll(oEnemy,objBiu)){ 5 boom(oEnemy.offsetLeft,oEnemy.offsetTop,0); 6 BiuAll.removeChild(objBiu); 7 oMap.removeChild(oEnemy); 8 return; 9 } 10 }
?
飛機的移動是用拖拽實現的，拖拽需要注意的一點就是不要把飛機拖出屏幕，需要有一個臨界值，如圖：
代碼：
left=Math.max(-oImg.clientWidth/2,left);left=Math.min(oBox.clientWidth-oImg.clientWidth/2,left);top=Math.min(oBox.clientHeight-oImg.clientHeight/2,top);top=Math.max(0,top);oImg.style.left=left+"px";oImg.style.top=top+"px";選擇的難度不同，子彈速度不同
附上全部代碼：
1 <!DOCTYPE html> 2 <html lang="en" onselectstart="return false"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Author" content=""> 6 <title>demo1</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 font-family: Microsoft YaHei, serif; 12 } 13 14 li { 15 list-style: none; 16 } 17 18 body { 19 overflow: hidden; 20 user-select: none; 21 -moz-user-select: none; 22 -ms-user-select: none; 23 } 24 25 #box { 26 position: relative; 27 width: 512px; 28 height: 768px; 29 margin: 20px auto; 30 } 31 32 #map { 33 position: absolute; 34 top: 0; 35 left: 0; 36 width: 100%; 37 height: 100%; 38 background: url("../img/bg_1.jpg"); 39 } 40 41 #level { 42 position: absolute; 43 top: 0; 44 left: 0; 45 width: 100%; 46 height: 100%; 47 z-index: 1; 48 } 49 50 #level.hid { 51 display: none; 52 } 53 54 #level h1 { 55 font-size: 40px; 56 padding-top: 60px; 57 padding-bottom: 30px; 58 line-height: 60px; 59 text-align: center; 60 color: white; 61 } 62 63 #level p:hover { 64 background: #ee4411; 65 color: #fff; 66 } 67 68 #level p { 69 margin: 100px auto; 70 width: 200px; 71 height: 35px; 72 line-height: 35px; 73 text-align: center; 74 background: #fff; 75 font-weight: bolder; 76 cursor: pointer; 77 } 78 79 #map .plane ,#map .biu , #map .enemy,#map .boom1 ,#map .boom2{ 80 position: absolute; 81 } 82 #map .biu{ 83 z-index: 10; 84 } 85 #map .plane{ 86 z-index: 8; 87 } 88 #map .boom1{ 89 z-index: 7; 90 animation: fade 1s 2; 91 animation-fill-mode: forwards; 92 } 93 @keyframes fade{ 94 from{opacity: 1} 95 to{opacity: 0} 96 } 97 #map .enemy{ 98 z-index: 9; 99 } 100 #map .boom2{ 101 z-index: 11; 102 animation: bling 2s 1; 103 } 104 @keyframes bling { 105 0%{opacity: 1} 106 50%{opacity: 0} 107 75%{opacity: 1} 108 100%{opacity: 0} 109 } 110 111 </style> 112 </head> 113 <body> 114 <div id="box"> 115 <!--存難度--> 116 <div id="level"> 117 <h1>飛機大戰 1.0</h1> 118 <p>簡單</p> 119 <p>中等</p> 120 <p>困難</p> 121 <p style="color:#f00">WM 難度</p> 122 </div> 123 <!--放地圖，每個難度的地圖都是不同的--> 124 <div id="map"> 125 <!--統一管理敵軍--> 126 <div id="BiuAll"></div> 127 </div> 128 </div> 129 <script> 130 ~function () { 131 //動畫兼容 132 window.requestAnimationFrame=window.requestAnimationFrame || function (fn) { 133 return setTimeout(fn,1000/60) 134 }; 135 window.cancelAnimationFrame= window.cancelAnimationFrame || clearTimeout; 136 //獲取局部的全局變量 137 var oLevel = document.getElementById("level"), 138 BiuAll=document.getElementById("BiuAll"), 139 allBiu=BiuAll.children, 140 oBox = document.getElementById("box"), 141 oMap = document.getElementById("map"), 142 boxOffsetTop = oBox.offsetTop, 143 boxOffsetLeft = oBox.offsetLeft; 144 145 //啟動游戲 146 exe(); 147 148 //選擇關卡 難度的點擊事件 149 function exe() { 150 var aP = oLevel.getElementsByTagName("p"); 151 for (var i = 0, len = aP.length; i < len; i++) { 152 !function (i) { 153 aP[i].onclick = function (e) { 154 e = e || window.event; 155 //第一個實參為關卡難度序號 156 //第二個存儲鼠標距離map邊緣距離的jn 157 startGame(i, { 158 x: e.clientX - boxOffsetLeft, 159 y: e.clientY - boxOffsetTop 160 }); 161 } 162 }(i); 163 } 164 165 166 } 167 168 //開始游戲 169 function startGame(level, pos) { 170 //執行清理 171 clearMap(); 172 //執行創建我軍 173 var rImg=plane(level, pos); 174 //執行敵軍 175 enemy(level, rImg); 176 177 178 } 179 180 //隱藏與清理地圖 181 function clearMap() { 182 //隱藏選擇關卡的選擇框 183 oLevel.classList.add("hid"); 184 } 185 186 //創建我軍 187 function plane(level,pos) { 188 //創建飛機的我軍圖片 189 var oImg = new Image(); 190 oImg.src = "../img/plane_0.png"; 191 oImg.width = 70; 192 oImg.height = 70; 193 oImg.className = "plane"; 194 oImg.style.left=pos.x-oImg.width/2+"px"; 195 oImg.style.top=pos.y-oImg.height/2+"px"; 196 oMap.appendChild(oImg); 197 198 199 //加入mousemove事件 200 document.οnmοusemοve=function (e) { 201 e = e || window.event; 202 //獲取飛機的實時坐標 203 var left=e.clientX-boxOffsetLeft-oImg.width/2, 204 top=e.clientY-boxOffsetTop-oImg.height/2; 205 //控制飛機的邊界值 206 left=Math.max(-oImg.clientWidth/2,left); 207 left=Math.min(oBox.clientWidth-oImg.clientWidth/2,left); 208 top=Math.min(oBox.clientHeight-oImg.clientHeight/2,top); 209 top=Math.max(0,top); 210 oImg.style.left=left+"px"; 211 oImg.style.top=top+"px"; 212 213 } 214 //等級不同子彈速度不同 215 fire(oImg,level); 216 //返回出去便于敵軍里面接收到這個函數 217 return oImg; 218 } 219 //我軍子彈 220 function fire(oImg,level) { 221 //選擇創建子彈的速率 222 var time=[100,200,200,20][level]; 223 oBox.timer=setInterval(function () { 224 //創建子彈 225 var oBiu=new Image(); 226 oBiu.src="../img/fire.png"; 227 oBiu.width=30; 228 oBiu.height=30; 229 oBiu.className="biu"; 230 oBiu.style.left=oImg.offsetLeft+oImg.width/2-oBiu.width/2 +"px"; 231 oBiu.style.top=oImg.offsetTop-oBiu.height+5+"px"; 232 BiuAll.appendChild(oBiu); 233 //子彈運動 234 function move() { 235 if(oBiu.parentNode){ 236 var top=oBiu.offsetTop-30; 237 if(top<-oBiu.height){ 238 top=-oBiu.height 239 BiuAll.removeChild(oBiu); 240 }else{ 241 oBiu.style.top=top+"px"; 242 243 requestAnimationFrame(move); 244 } 245 } 246 } 247 //用定時器把隊列往后拖一下,讓top不會重復計算一次 248 setTimeout(function () { 249 requestAnimationFrame(move) 250 },20); 251 252 253 },time); 254 } 255 //創建敵軍 256 function enemy(level,rImg) { 257 //敵軍下落速度; 258 var speed=[5,6,8,10][level]; 259 oBox.eTimer=setInterval(function () { 260 //生成敵軍 261 var oEnemy=new Image(); 262 oEnemy.src="../img/enemy_small.png"; 263 oEnemy.className="enemy"; 264 oEnemy.width=54; 265 oEnemy.height=40; 266 oEnemy.style.left=Math.random()*oMap.clientWidth-oEnemy.width/2 +"px"; 267 oEnemy.style.top=-oEnemy.height+"px"; 268 oMap.appendChild(oEnemy); 269 //敵方運動 270 function move () { 271 //檢測下在不在頁面中; 272 if(oEnemy.parentNode){ 273 var top=oEnemy.offsetTop; 274 top+=speed; 275 if(top>=oMap.clientHeight){ 276 oMap.removeChild(oEnemy); 277 }else{ 278 oEnemy.style.top=top+"px"; 279 //子彈碰撞 倒著遍歷 280 for(var i=allBiu.length-1;i>=0;i--){ 281 var objBiu=allBiu[i]; 282 if(coll(oEnemy,objBiu)){ 283 boom(oEnemy.offsetLeft,oEnemy.offsetTop,0); 284 BiuAll.removeChild(objBiu); 285 oMap.removeChild(oEnemy); 286 return; 287 } 288 } 289 //我軍碰撞檢測 290 if(rImg.parentNode&&coll(oEnemy,rImg)){ 291 //敵軍爆炸圖 292 boom(oEnemy.offsetLeft,oEnemy.offsetTop,0); 293 //我軍爆炸圖 294 boom(rImg.offsetLeft,rImg.offsetTop,1); 295 //移除敵軍 我軍; 296 oMap.removeChild(oEnemy); 297 oMap.removeChild(rImg); 298 //游戲結束 299 gameover(); 300 return; 301 } 302 requestAnimationFrame(move); 303 } 304 } 305 306 307 } 308 requestAnimationFrame(move) 309 },[350,250,120,80][level]); 310 } 311 //爆炸函數 312 function boom(l,t,i) { 313 var oBoom=new Image(); 314 oBoom.src="../img/"+["boom_small","plane_0"][i]+".png"; 315 oBoom.width=[54,70][i]; 316 oBoom.height=[40,70][i]; 317 oBoom.className=["boom1","boom2"][i]; 318 oBoom.style.left=l+"px"; 319 oBoom.style.top=t+"px"; 320 oMap.appendChild(oBoom); 321 setTimeout(function () { 322 oMap.removeChild(oBoom); 323 },[1200,2500][i]) 324 } 325 326 327 //碰撞檢測 328 function coll(obj1,obj2) { 329 //物體 1 的邊界 330 var T1=obj1.offsetTop, 331 B1=T1+obj1.clientHeight, 332 L1=obj1.offsetLeft, 333 R1=L1+obj1.clientWidth; 334 //物體 2 的邊界 335 var T2=obj2.offsetTop, 336 B2=T2+obj2.clientHeight, 337 L2=obj2.offsetLeft, 338 R2=L2+obj2.clientWidth; 339 340 if(B1<T2 ||R1<L2 ||T1>B2 || L1>R2){ 341 //沒有撞到的情況 342 return false; 343 }else{ 344 //撞到了的情況 345 return true; 346 } 347 } 348 //游戲結束 349 function gameover() { 350 //清除移動事件 351 document.οnmοusemοve=null; 352 //停止創建子彈 353 clearInterval(oBox.timer); 354 //停止創建敵軍 355 clearInterval(oBox.eTimer); 356 } 357 }(); 358 359 </script> 360 </body> 361 </html>?
這是1.0版本，后期我會把功能完善下，加上計分等。
上述代碼有問題請各位大佬們指出，謝謝啦。如果覺得有意思的麻煩點個贊哦。
轉載于:https://www.cnblogs.com/allenxia/p/9211122.html
總結
以上是生活随笔為你收集整理的飞机大战小游戏1.0版本的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到黑色皮筋是怎么回事
- 下一篇： 自定义标签 —— 实现时间转换和输出功能