1. 程式人生 > 程式設計 >jQuery實現飛機大戰小遊戲

jQuery實現飛機大戰小遊戲

本文例項為大家分享了jQuery實現飛機大戰的具體程式碼,供大家參考,具體內容如下

遊戲規則:

WSAD鍵控制大飛機移動方向,按下J鍵可發射子彈消滅敵機,每殲滅一架敵機可得10分;

與敵機相撞或者有遺漏敵機沒有殲滅,則遊戲結束

遊戲顯示如下圖:

jQuery實現飛機大戰小遊戲

css部分:

<style>
  .container {
   width: 800px;
   height: 500px;
   margin: 10vh auto;
   background: #000;
   position: relative;
   overflow: hidden;
  }

  .plane {
   color: #fff;
   width: 70px;
   height: 70px;
   position: absolute;
   bottom: 10px;
   left: calc(50% - 30px);
   background: url(img/戰鬥機.png) no-repeat;
   background-size: 70px 70px;

  }

  .bullet {
   width: 25px;
   height: 30px;
   background: url(img/子彈.png) no-repeat;
   background-size: 100% 100%;
   position: absolute;
  }

  .enemy {
   width: 40px;
   height: 40px;
   background: url(img/戰鬥機.png) no-repeat;
   transform: rotate(180deg);
   background-size: 100% 100%;
   position: absolute;
   top: 0;
  }

  .again {
   width: 220px;
   height: 160px;
   border: 1px solid #ccc;
   box-shadow: 5px 5px #ccc;
   background: rgb(252,187,187);
   text-align: center;
   line-height: 80px;
   color: #fff;
   font-size: 20px;
   position: absolute;
   top: calc(50% - 80px);
   left: calc(50% - 110px);
   margin: 0 auto;
   cursor: pointer;
  }

  i {
   font-style: normal;
  }

  .sorce {
   height: 30px;
   font-size: 20px;
   text-align: center;
   font-weight: bold;
   margin: 0 auto;
   position: absolute;
   top: 65px;
   left: calc(50% - 100px);
   color: #fff;
   z-index: 100;
   background: linear-gradient(to right,rgb(255,163,220),rgb(243,176,213));
   -webkit-background-clip: text;
   color: transparent;
  }
</style>

html部分:

<div class="sorce">
  擊敗:<i class="ok">0</i>
  &nbsp;
  &nbsp;
  &nbsp;
  得分:<i class="get">0</i>
 </div>
 <div class="container">
  <div class="plane">
  </div>
</div>

js部分:

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>
  $(function () {
   let maxtop = $(".container").innerHeight() - $(".plane").innerHeight()
   let maxleft = $(".container").innerWidth() - $(".plane").innerWidth()
   let ok = 0,get = 0;

   $(window).keydown(function ({
    keyCode
   }) {
    let {
     top: t,left: l
    } = $(".plane").position()

    switch (keyCode) {
     case 87:
      t -= 10
      break;
     case 83:
      t += 10
      break;
     case 65:
      l -= 10
      break;
     case 68:
      l += 10
      break;
     case 74:
      shoot();
      break;
     default:
      break;
    }
    if (t < 0) t = 0
    if (t > maxtop) t = maxtop
    if (l < 0) l = 0
    if (l > maxleft) l = maxleft
    $(".plane").css("top",t).css("left",l)
   })

   let endTime = new Date()

   function shoot() {
    if (new Date() - endTime < 500) return
    let bullet = $('<div/>').addClass("bullet")
    $('.container').append(bullet)
    bullet.css('top',$('.plane').position().top - 30)
    bullet.css('left',$('.plane').position().left + $('.plane').innerWidth() / 2 - bullet
     .innerWidth() / 2)
    endTime = new Date()

   }
   let timer1 = setInterval(() => {
    $('.bullet').each(function () {
     let bullet = $(this)
     let {
      top
     } = bullet.position()
     if (top < 0) bullet.remove()
     else bullet.css('top',bullet.position().top - 10)
    })

   },100);
   let timer2 = setInterval(() => {
    $('.enemy').each(function () {
     let enemy = this
     if (calc(enemy,$('.plane').get(0)) || calc($('.plane').get(0),enemy)) {
      let again = $('<div/>').html(`GAME OVER<br/>點選重新開始`).addClass(
       'again')
      $('.container').append(again)
      clearInterval(timer1)
      clearInterval(timer2)
      clearInterval(timer3)
      clearInterval(timer4)
     }
     $('.again').click(function () {
      location.reload()
     })
     $('.bullet').each(function () {
      let bullet = this
      if (calc(enemy,bullet) || calc(bullet,enemy)) {
       bullet.remove()
       enemy.remove()
       get += 10
       ok++
       $('.ok').html(ok)
       $('.get').html(get)
      }
     })

    })
   },50)

   let timer3 = setInterval(() => {
    let enemy = $('<div/>').addClass("enemy")
    $('.container').append(enemy)
    enemy.css('left',Math.round(Math.random() * ($('.container').innerWidth() - enemy
     .innerWidth())))
   },2000)

   let timer4 = setInterval(() => {

    $('.enemy').each(function () {
     let enemy = $(this)
     let {
      top
     } = enemy.position()
     if (top > $('.container').innerHeight() - enemy.innerHeight()) {
      clearInterval(timer1)
      clearInterval(timer2)
      clearInterval(timer3)
      clearInterval(timer4)
      let again = $('<div/>').html(`GAME OVER<br/>點選重新開戰`).addClass(
       'again')
      $('.container').append(again)
      $('.again').click(function () {
       location.reload()
      })
     } else enemy.css('top',enemy.position().top + 10)
    })
   },200);

   function getLTRB(node) {
    return {
     l: node.offsetLeft,t: node.offsetTop,r: node.offsetLeft + node.offsetWidth,b: node.offsetTop + node.offsetHeight
    }
   }
   
   //獲取上下左右位置
    function calc(a,b) {
    a = getLTRB(a)
    b = getLTRB(b)
    //判斷飛機與敵機是否相撞
    if (a.l > a.l && b.l < a.r && b.t > a.t && b.t < a.b) return true
    else if (b.l > a.l && b.l < a.r && b.b > a.t && b.b < a.b) return true
    else if (b.r > a.l && b.r < a.r && b.b > a.t && b.b < a.b) return true
    else if (b.r > a.l && b.r < a.r && b.t > a.t && b.t < a.b) return true
    else return false
   }
  })
</script>

更多有趣的經典小遊戲實現專題,分享給大家:

C++經典小遊戲彙總

python經典小遊戲彙總

python俄羅斯方塊遊戲集合

JavaScript經典遊戲 玩不停

java經典小遊戲彙總

javascript經典小遊戲彙總

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。