jQuery实现飞机大战小游戏


Posted in jQuery onJuly 05, 2020

本文实例为大家分享了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>
   
   
   
  得分:<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>

更多有趣的经典小游戏实现专题,分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery实现滚动效果
Nov 17 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
jquery实现上传图片功能
Jun 29 #jQuery
jQuery实时统计输入框字数及限制
Jun 24 #jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 #jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 #jQuery
jQuery 移除事件的方法
Jun 20 #jQuery
Jquery ajax书写方法代码实例解析
Jun 12 #jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 #jQuery
You might like
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
mongodb和php的用法详解
2019/03/25 PHP
javascript 写类方式之六
2009/07/05 Javascript
JavaScript 继承详解 第一篇
2009/08/30 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
JS中的作用域链
2017/03/01 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
Vue触发式全局组件构建的方法
2018/11/28 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
Python删除n行后的其他行方法
2019/01/28 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
python IDLE添加行号显示教程
2020/04/25 Python
Django在Model保存前记录日志实例
2020/05/14 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
创立科技Java面试题
2015/11/29 面试题
专科毕业生求职简历的自我评价
2013/10/12 职场文书
小加工厂管理制度
2014/01/21 职场文书
天鹅的故事教学反思
2014/02/04 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
酒店管理求职信范文
2014/04/06 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
详解Python描述符的工作原理
2021/06/11 Python