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实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
使用jquery实现轮播图效果
Jan 02 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+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
js实现弹窗效果
2020/08/09 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python fileinput模块使用实例
2015/06/03 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
一套C++笔试题面试题
2012/06/06 面试题
安全教育心得体会
2013/12/29 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
《在家里》教后反思
2014/03/01 职场文书
反腐倡廉标语
2014/06/24 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers