先來看看開始的界面圖
實現思路：
1.打開頁面，背景開始走動；
2.點擊開始，飛機開始不斷發射子彈，敵人隨機出現在上方；
3.當敵人碰到子彈，敵人消失；
4.當敵人和飛機相遇，飛機死亡，結束游戲；
html頁面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>飛機大戰</title> <link rel="stylesheet" type="text/css" href="飛機大戰.css"></head><body> <div id="mainScreen"><!-- 背景圖片 --> <div id="bgImg1" class="bg"></div> <div id="bgImg2" class="bg"></div><!-- 飛機 --> <div id="airplane"></div><!-- 開始按鈕 --> <div id="startMenu"> <a href="#" id="start">Start</a> </div><!-- 重新開始按鈕 --> <div id="restartMenu"> <a href="#" id="restart">Game Over!<br/>重新開始</a> </div><!-- 敵人 --> <div class="enemy"></div> <div class="enemy"></div> <div class="enemy"></div> <div class="enemy"></div> <div class="enemy"></div><!-- 子彈 --> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> </div> <script type="text/javascript" src="sunckBase.js"></script> <script type="text/javascript" src="飛機大戰.js"></script></body></html>
css樣式
*{ margin: 0; padding: 0; font-family: "微軟雅黑";}#mainScreen{ width: 512px; height: 768px; margin:0 auto; position: relative; overflow: hidden;}.bg{ width: 512px; height:768px; position: absolute; background: url(bg.jpg);}#bgImg2{ top:-768px;}#airplane{ width: 109px; height: 82px; position: absolute; background: url(hero.png); left: 215px; top: 668px;}.enemy{ position: absolute; width: 30px; height: 30px; left: -100px; top: 0px; background: url(enemy.png); background-size: 30px 30px;}.bullet{ position: absolute; width: 5px; height: 10px; left: -100px; top: -100px; background: url(bullet.png); background-size: 5px 10px;}#startMenu, #restartMenu{ position: absolute; width: 512px; text-align: center; left: 0; top: 300px;}#start, #restart{ line-height:50px; font-size:30px; font-weight:bold; color:#F00; display:block; text-decoration:none;}#restartMenu{ display: none;}進入頁面時，背景開始動
//給背景設置定時器，讓背景不停的動，形成動感var bgTimer = setInterval(bgRun, 10);function bgRun() { jsBg1.style.top = jsBg1.offsetTop + 1 + "px"; jsBg2.style.top = jsBg2.offsetTop + 1 + "px"; if (jsBg1.offsetTop >= 768) { jsBg1.style.top = "-768px"; } else { if (jsBg2.offsetTop >= 768) { jsBg2.style.top = "-768px"; } }}點擊開始，進入游戲
游戲中
注：其實子彈和敵人的標簽沒有幾個，但是我們使用定時器，開始之前，現將表現都放在屏幕外，進入游戲需要時候再改變標簽定位，將其放入到頁面中。
var jsStartBox=document.getElementById("startMenu")jsStart.onclick = function startGame(){ jsStartBox.style.display="none"; var baseX = 0; var baseY = 0; var moveX = 0; var moveY = 0; jsAirplane.onmousedown = function(e) { var evt = e || window.event; baseX = evt.pageX; baseY = evt.pageY; jsDivBox.onmousemove = function(v) { var vt = v || window.event; moveX = vt.pageX - baseX; baseX = vt.pageX; moveY = vt.pageY - baseY; baseY = vt.pageY; jsAirplane.style.left = jsAirplane.offsetLeft + moveX + "px"; jsAirplane.style.top = jsAirplane.offsetTop + moveY + "px"; }; }; jsAirplane.onmouseup = function() { mainScreen.onmousemove = null; } //找到可用的子彈 var findBulletTimer = setInterval(findBullet, 300); function findBullet() { for (var i = 0; i < jsBullets.length; i++) { if (jsBullets[i]["isShow"] == false) { jsBullets[i]["isShow"] = true; //將子彈移動到飛機頭 jsBullets[i].style.left = jsAirplane.offsetLeft + jsAirplane.offsetWidth / 2 + "px"; jsBullets[i].style.top = jsAirplane.offsetTop + "px"; break; } } } // //讓子彈飛 var bulletFlyTimer = setInterval(bulletFlay, 100); function bulletFlay() { for (var j = 0; j < jsBullets.length; j++) { if (jsBullets[j]["isShow"] == true) { if (jsBullets[j].offsetTop > -20) { jsBullets[j].style.top = jsBullets[j].offsetTop - 20 + "px"; } else { jsBullets[j].style.left = "-100px"; jsBullets[j].style.top = "-100px"; jsBullets[j]["isShow"] = false; } } } } //找到可用敵人 var findEnemyTimer = setInterval(findEnemy, 500); function findEnemy(){ //找到一個沒有在屏幕中的敵人 for (var i = 0; i < jsEnemys.length; i++) { if (jsEnemys[i]["isShow"] == false) { //標記敵人已經使用 jsEnemys[i]["isShow"] = true; //將敵人移動到屏幕 var left = randomNum(0, 482); jsEnemys[i].style.left = left + "px"; jsEnemys[i].style.top = 0 + "px"; break; } } } // //讓敵人下落 var enemyLandTimer = setInterval(enemyLand, 100); function enemyLand() { for (var j = 0; j < jsEnemys.length; j++) { if (jsEnemys[j]["isShow"] == true) { var a = randomNum(4, 20); if (jsEnemys[j].offsetTop <= 768) { jsEnemys[j].style.top = jsEnemys[j].offsetTop + a + "px"; } else { jsEnemys[j].style.left = "-100px"; jsEnemys[j].style.top = "0px"; jsEnemys[j]["isShow"] = false; } } } } }打中怪物
用頁面上存在每一個敵人和每一個子彈的定位進行簡則，如果相撞，那么怪物消失
var perishEnemyTimer = setInterval(perishEnemy, 50);function perishEnemy() { for (var i = 0; i < jsBullets.length; i++) { if (jsBullets[i]["isShow"] == true) { for (var j = 0; j < jsEnemys.length; j++) { if (jsEnemys[j]["isShow"] == true) { var ret = pzjcFunc(jsBullets[i], jsEnemys[j]); if (ret) { jsBullets[i].style.left = "-100px"; jsBullets[i].style.top = "-100px"; jsBullets[i]["isShow"] = false; jsEnemys[j].style.left = "-100px"; jsEnemys[j].style.top = "-100px"; jsEnemys[j]["isShow"] = false; } } } } }}死亡檢測
游戲結束
用頁面上存在每一個敵人和飛機的定位進行檢測，如果兩者相遇，那么結束游戲。
注：檢測時考慮取反，坦克在飛機上面，在飛機下面，在飛機左邊，在飛機右邊是沒有碰到的時候，那么我們取反就是說明兩者已經相遇了。
//死亡檢測var dieTimer = setInterval(die, 50);var jsStop = document.getElementById("restartMenu")function die() { for (var i = 0; i < jsEnemys.length; i++) { if (jsEnemys[i]["isShow"] == true) { var isDie = pzjcFunc(jsAirplane, jsEnemys[i]); if (isDie) { jsStop.style.display="block"; jsAirplane.onmouseup = function() { mainScreen.onmousemove = null; } } } }}上述兩步中用到的檢測兩者是否碰撞的函數
//死亡檢測的函數function pzjcFunc(obj1, obj2){ var obj1Left = obj1.offsetLeft; var obj1Width = obj1Left + obj1.offsetWidth; var obj1Top = obj1.offsetTop; var obj1Height = obj1Top + obj1.offsetHeight; var obj2Left = obj2.offsetLeft; var obj2Width = obj2Left + obj2.offsetWidth; var obj2Top = obj2.offsetTop; var obj2Height = obj2Top + obj2.offsetHeight; if ( !(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top) ) { return true; } return false;}點擊重新開始之后刷新頁面
var jsRestart=document.getElementById("restart");jsRestart.onclick=function(){ jsStop.style.display="none"; window.location.reload();//刷新頁面}好的，現在我們的游戲就可以玩了，這個游戲的有些寫作思想有些是我們在以后的項目中可以學習的。比如，頁面之外的空間的運用；比如，檢測碰撞。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家學習或者使用Javascript能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
