欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript原生編寫《飛機(jī)大戰(zhàn)坦克》游戲完整實例

 更新時間：2017年01月04日 15:43:42   作者：范小飯_  
飛機(jī)大戰(zhàn)坦克是一款小游戲，相信很多朋友都有玩過，由于最近在深入學(xué)習(xí)Javascript，所以想著用利用Javascript來實現(xiàn)這個游戲，下面這篇文章主要介紹了如何利用JavaScript原生編寫《飛機(jī)大戰(zhàn)坦克》游戲,需要的朋友可以參考下

先來看看開始的界面圖

實現(xiàn)思路：

      1.打開頁面，背景開始走動；

      2.點擊開始，飛機(jī)開始不斷發(fā)射子彈，敵人隨機(jī)出現(xiàn)在上方；

      3.當(dāng)敵人碰到子彈，敵人消失；

      4.當(dāng)敵人和飛機(jī)相遇，飛機(jī)死亡，結(jié)束游戲；

html頁面

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>飛機(jī)大戰(zhàn)</title>
 <link rel="stylesheet" type="text/css" href="飛機(jī)大戰(zhàn).css">
</head>
<body>
 <div id="mainScreen">
<!-- 背景圖片 -->
 <div id="bgImg1" class="bg"></div>
 <div id="bgImg2" class="bg"></div>
<!-- 飛機(jī) -->
 <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="飛機(jī)大戰(zhàn).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;
}

進(jìn)入頁面時，背景開始動

//給背景設(shè)置定時器，讓背景不停的動，形成動感
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";
 }
 }
}

點擊開始，進(jìn)入游戲


游戲中

注：其實子彈和敵人的標(biāo)簽沒有幾個，但是我們使用定時器，開始之前，現(xiàn)將表現(xiàn)都放在屏幕外，進(jìn)入游戲需要時候再改變標(biāo)簽定位，將其放入到頁面中。

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;
  //將子彈移動到飛機(jī)頭
  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) {
  //標(biāo)記敵人已經(jīng)使用
  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;
  }
  }
 }
 } 
}

打中怪物

用頁面上存在每一個敵人和每一個子彈的定位進(jìn)行簡則，如果相撞，那么怪物消失

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;
   }
  }
  }
 }
 }
}

死亡檢測


游戲結(jié)束

用頁面上存在每一個敵人和飛機(jī)的定位進(jìn)行檢測，如果兩者相遇，那么結(jié)束游戲。

注：檢測時考慮取反，坦克在飛機(jī)上面，在飛機(jī)下面，在飛機(jī)左邊，在飛機(jī)右邊是沒有碰到的時候，那么我們?nèi)》淳褪钦f明兩者已經(jīng)相遇了。

//死亡檢測
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;
  }
  }
 }
 }
}

上述兩步中用到的檢測兩者是否碰撞的函數(shù)

//死亡檢測的函數(shù)
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();//刷新頁面
}

好的，現(xiàn)在我們的游戲就可以玩了，這個游戲的有些寫作思想有些是我們在以后的項目中可以學(xué)習(xí)的。比如，頁面之外的空間的運(yùn)用；比如，檢測碰撞。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學(xué)習(xí)或者使用Javascript能帶來一定的幫助，如果有疑問大家可以留言交流。

相關(guān)文章

最新評論