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 表单序列化实例代码
Jun 11 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 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
缅甸的咖啡简史
2021/03/04 咖啡文化
php获取错误信息的方法
2015/07/17 PHP
Smarty保留变量用法分析
2016/05/23 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
对Python _取log的几种方式小结
2019/07/25 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
大学生军训广播稿
2014/01/24 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
儿园租房协议书范本
2014/12/02 职场文书
教师先进个人材料
2014/12/17 职场文书
家长反馈意见及建议
2015/06/03 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL