jQuery实现飞机大战小游戏

180 阅读 0 评论 119 点赞

我是靠谱客的博主失眠黑猫，最近开发中收集的这篇文章主要介绍jQuery实现飞机大战小游戏，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例为大家分享了jQuery实现飞机大战的具体代码，供大家参考，具体内容如下

游戏规则：

WSAD键控制大飞机移动方向，按下J键可发射子弹消灭敌机，每歼灭一架敌机可得10分；

与敌机相撞或者有遗漏敌机没有歼灭，则游戏结束

游戏显示如下图：

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经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持靠谱客。