溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery實(shí)現(xiàn)飛機(jī)大戰(zhàn)的方法

發(fā)布時(shí)間：2020-07-06 10:26:02 來源：億速云 閱讀：299 作者：清晨 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)jQuery實(shí)現(xiàn)飛機(jī)大戰(zhàn)的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>飛機(jī)大戰(zhàn)</title>
 <style>
 * {
  margin: 0px
 }

 .container {
  height: 700px;
  width: 500px;
  background-color: black;
  margin: 5px auto; /*上下外邊距5px，左右自動(dòng)*/
  position: relative;
 }

 .plane {
  height: 80px;
  width: 80px;
  /*background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
  */
  background: url(images/plane.png) no-repeat center / 100% 100%;
  position: absolute;
  bottom: 10px;
  left: calc(50% - 40px);
 }

 .bullet {
  height: 10px;
  width: 5px;
  /*border-radius
  *每個(gè)半徑的四個(gè)值的順序是：左上角，右上角，右下角，左下角。
  *如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。
  *如果省略右上角，左上角是相同的。
  */
  border-radius: 45% 45% 0 0;
  /*box-shadow: h-shadow v-shadow blur spread color inset;
  *h-shadow: 必需，水平陰影的位置
  *v-shadow: 必需，垂直陰影的位置
  *blur: 可選，模糊距離
  *spread: 可選，陰影的大小
  *color: 可選，陰影的顏色
  *inset: 可選，從外層的陰影（開始時(shí)）改變陰影內(nèi)側(cè)陰影
  */
  box-shadow: 0px 2px 10px orange;
  background: gold;
  position: absolute;
 }

 .enemy {
  height: 34.4px;
  width: 32.5px;
  /*background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
  */
  background: url(images/enemy.png) no-repeat center / 100% 100%;
  transform: rotate(180deg);
  position: absolute;
  overflow: hidden;
  top: 0px;
 }

 h3 {
  height: 40px;
  display: table;
  border-color: deepskyblue;
  border-radius: 5px;
  background-color: deepskyblue;
  text-align: center;
  padding: 5px;
  position: relative;
  float: right;
  right: 300px;
 }
 </style>
 <!--引入jQuery-->
 <script src="jquery-3.4.1.js"></script>
</head>
<body>
<h3>得分：
 <span id="score" >0</span>
</h3>
<div class="container">
 <div class="plane">

 </div>
</div>
<script type="text/javascript">
 // 入口函數(shù)
 $(function () {
 // 變量定義
 var bulletCreateInterval = 300; // 子彈發(fā)射時(shí)間間隔
 var bulletMoveInterval = 100; // 子彈飛行時(shí)間間隔
 var bulletSpeed = 10;  // 子彈飛行速度
 var enemyCreateInterval = 2000; // 敵機(jī)出生時(shí)間間隔
 var enemyMoveInterval = 100; // 敵機(jī)下降時(shí)間間隔
 var enemySpeed = 5;   // 敵機(jī)下降速度
 var bGamePlaying = false;  // 游戲狀態(tài)
 var score = 0;
 var endTime = new Date();
 // 計(jì)算飛機(jī)位置
 var calcPosition = (left, top, maxLeft, maxTop, minLeft = 0, minTop = 0) => {
  left = left < minLeft &#63; minLeft : left > maxLeft &#63; maxLeft : left;
  top = top < minTop &#63; minTop : top > maxTop &#63; maxTop : top;
  return {left, top};
 }
 // 獲取DOM對(duì)象的四個(gè)邊界位置
 var getDomTRBL = (dom) => {
  var bounds = {};
  bounds.left = dom.offsetLeft;
  bounds.right = dom.offsetLeft + dom.offsetWidth;
  bounds.top = dom.offsetTop;
  bounds.bottom = dom.offsetTop + dom.offsetHeight;
  return bounds;
 }
 // 計(jì)算兩個(gè)div是否相撞
 var calcHit = (div1, div2) => {
  var bounds1 = getDomTRBL(div1);
  var bounds2 = getDomTRBL(div2);
  if (bounds1.left >= bounds2.left && bounds1.left <= bounds2.right) {
  if (bounds1.top >= bounds2.top && bounds1.top <= bounds2.bottom) {
   return true;
  }
  else if (bounds1.bottom >= bounds2.top && bounds1.bottom <= bounds2.bottom) {
   return true;
  }
  }
  else if (bounds1.right >= bounds2.left && bounds1.right <= bounds2.right) {
  if (bounds1.top >= bounds2.top && bounds1.top <= bounds2.bottom) {
   return true;
  }
  else if (bounds1.bottom >= bounds2.top && bounds1.bottom <= bounds2.bottom) {
   return true;
  }
  }
  return false;
 }
 // 發(fā)射子彈
 var shoot = () => {
  // 控制發(fā)射時(shí)間間隔
  if (new Date() - endTime < bulletCreateInterval) {
  return false;
  }
  /*addClass() 方法向被選元素添加一個(gè)或多個(gè)類名。
  *該方法不會(huì)移除已存在的 class 屬性，僅僅添加一個(gè)或多個(gè)類名到 class 屬性。
  *提示：如需添加多個(gè)類，請(qǐng)使用空格分隔類名。
  */
  var planeLF = $(".plane").position().left;
  var planeTP = $(".plane").position().top;
  var bullet = $("<div></div>").addClass("bullet");
  $(".container").append(bullet);
  var bulletLF = planeLF + $(".plane").innerWidth() / 2 - bullet.innerWidth() / 2;
  var bulletTP = planeTP - $(".plane").innerHeight() / 2 + 20;
  bullet.css("left", bulletLF).css("top", bulletTP);

  endTime = new Date();
  return true;
 }
 // 鍵盤按下事件
 $(window).keydown(function (e) {
  if (e.keyCode == 13) { //enter 開始游戲
  bGamePlaying = true;
  console.log("game start!")
  }
  if (!bGamePlaying) return;
  var tp = $(".plane").position().top;
  var lf = $(".plane").position().left;
  switch (e.keyCode) {
  case 87:// w
   tp -= 10;
   break;
  case 83:// s
   tp += 10;
   break;
  case 65:// a
   lf -= 10;
   break;
  case 68:// d
   lf += 10;
   break;
  case 74:// j
   shoot(); // 發(fā)射子彈
   break;
  }
  var maxLeft = $(".container").innerWidth() - $(".plane").innerWidth();
  var maxTop = $(".container").innerHeight() - $(".plane").innerHeight();
  var position = calcPosition(lf, tp, maxLeft, maxTop);
  $(".plane").css("left", position.left).css("top", position.top);
 });
 // 鼠標(biāo)移動(dòng)事件
 var containerBounds = getDomTRBL($(".container")[0]);
 $(document).mousemove(function (e) {
  if (!bGamePlaying) return;
  var tp = e.pageY;
  var lf = e.pageX;
  if (tp >= containerBounds.top && tp <= containerBounds.bottom && lf >= containerBounds.left && lf <= containerBounds.right) {
  tp -= containerBounds.top;
  lf -= containerBounds.left;
  }
  else return;
  tp -= $(".plane").innerHeight() / 2;
  lf -= $(".plane").innerWidth() / 2;
  var maxLeft = $(".container").innerWidth() - $(".plane").innerWidth();
  var maxTop = $(".container").innerHeight() - $(".plane").innerHeight();
  var position = calcPosition(lf, tp, maxLeft, maxTop);
  $(".plane").css("left", position.left).css("top", position.top);
 });
 // 鼠標(biāo)點(diǎn)擊事件
 $(window).click(() => {
  if (!bGamePlaying) {
  bGamePlaying = true;
  }
  shoot();
 });
 // 為了便于對(duì)計(jì)時(shí)器進(jìn)行操作，選擇用一個(gè)計(jì)時(shí)器對(duì)選取到的所有元素進(jìn)行操作
 // 這樣可以大幅減少計(jì)時(shí)器的數(shù)目
 // 生成敵方戰(zhàn)機(jī)計(jì)時(shí)器
 var enemyCreateTimer = setInterval(() => {
  var enemy = $("<div></div>").addClass("enemy").css("top", 0);
  $(".container").append(enemy);
  // round()方法可把一個(gè)數(shù)字舍入為最接近的整數(shù)（四舍五入）
  var left = Math.round(Math.random() * ($(".container").innerWidth() - $(".enemy").innerWidth()));
  enemy.css("left", left);
 }, enemyCreateInterval);
 // 讓子彈飛計(jì)時(shí)器
 var bulletTimer = setInterval(() => {
  $(".bullet").each((index, element) => {
  var bullet = $(element);
  bullet.css("top", bullet.position().top - bulletSpeed);
  if (bullet.position().top < 0) {
   bullet.remove();
  }
  });
 }, bulletMoveInterval);
 // 敵機(jī)下落計(jì)時(shí)器
 var enemyTimer = setInterval(() => {
  $(".enemy").each((index, element) => {
  var enemy = $(element);
  enemy.css("top", enemy.position().top + enemySpeed);
  if (enemy.position().top > $(".container").innerHeight()) {
   enemy.remove();
  }
  });
 }, enemyMoveInterval);
 // 游戲主計(jì)時(shí)器
 var mainTimer = setInterval(() => {
  var plane = $(".plane").get(0);
  $(".enemy").each(function (index, enemy) {
  //判斷玩家是否撞上了敵機(jī)
  if (calcHit(plane, enemy) || calcHit(enemy, plane)) {
   stopGame();
   return;
  }
  // 判斷子彈是否撞上敵機(jī)
  $(".bullet").each((index, bullet) => {
   if (calcHit(enemy, bullet) || calcHit(bullet, enemy)) {
   enemy.remove();
   bullet.remove();
   score += 10;
   $("#score").text(score);
   }
  });
  });
 }, 50);
 // 停止游戲
 var stopGame = () => {
  bGamePlaying = false;
  clearInterval(enemyCreateTimer);
  clearInterval(enemyTimer);
  clearInterval(bulletTimer);
  clearInterval(mainTimer);
  alert("游戲結(jié)束！你的積分為" + score);
 }
 });
</script>
</body>
</html>

關(guān)于jQuery實(shí)現(xiàn)飛機(jī)大戰(zhàn)的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手