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 tip提示插件(实例分享)
Apr 28 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
详解jquery和vue对比
Apr 16 jQuery
jquery向后台提交数组的代码分析
Feb 20 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/05 新手入门
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
Python3.2中Print函数用法实例详解
2015/05/19 Python
python2.7的编码问题与解决方法
2016/10/04 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
python去除文件中重复的行实例
2018/06/29 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
python3让print输出不换行的方法
2020/08/24 Python
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
建筑施工实习自我鉴定
2013/09/19 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
工商行政处罚决定书
2015/06/24 职场文书
关于幸福的感言
2015/08/03 职场文书
诚实守信主题班会
2015/08/13 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
jquery插件实现悬浮的菜单
2021/04/24 jQuery