jQuery实现简单飞机大战


Posted in jQuery onJuly 05, 2020

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>飞机大战</title>
 <style>
 * {
  margin: 0px
 }

 .container {
  height: 700px;
  width: 500px;
  background-color: black;
  margin: 5px auto; /*上下外边距5px,左右自动*/
  position: relative;
 }

 .plane {
  height: 80px;
  width: 80px;
  /*background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
  */
  background: url(images/plane.png) no-repeat center / 100% 100%;
  position: absolute;
  bottom: 10px;
  left: calc(50% - 40px);
 }

 .bullet {
  height: 10px;
  width: 5px;
  /*border-radius
  *每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。
  *如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。
  *如果省略右上角,左上角是相同的。
  */
  border-radius: 45% 45% 0 0;
  /*box-shadow: h-shadow v-shadow blur spread color inset;
  *h-shadow: 必需,水平阴影的位置
  *v-shadow: 必需,垂直阴影的位置
  *blur: 可选,模糊距离
  *spread: 可选,阴影的大小
  *color: 可选,阴影的颜色
  *inset: 可选,从外层的阴影(开始时)改变阴影内侧阴影
  */
  box-shadow: 0px 2px 10px orange;
  background: gold;
  position: absolute;
 }

 .enemy {
  height: 34.4px;
  width: 32.5px;
  /*background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
  */
  background: url(images/enemy.png) no-repeat center / 100% 100%;
  transform: rotate(180deg);
  position: absolute;
  overflow: hidden;
  top: 0px;
 }

 h2 {
  height: 40px;
  display: table;
  border-color: deepskyblue;
  border-radius: 5px;
  background-color: deepskyblue;
  text-align: center;
  padding: 5px;
  position: relative;
  float: right;
  right: 300px;
 }
 </style>
 <!--引入jQuery-->
 <script src="jquery-3.4.1.js"></script>
</head>
<body>
<h2>得分:
 <span id="score" style="color: white;">0</span>
</h2>
<div class="container">
 <div class="plane">

 </div>
</div>
<script type="text/javascript">
 // 入口函数
 $(function () {
 // 变量定义
 var bulletCreateInterval = 300; // 子弹发射时间间隔
 var bulletMoveInterval = 100; // 子弹飞行时间间隔
 var bulletSpeed = 10;  // 子弹飞行速度
 var enemyCreateInterval = 2000; // 敌机出生时间间隔
 var enemyMoveInterval = 100; // 敌机下降时间间隔
 var enemySpeed = 5;   // 敌机下降速度
 var bGamePlaying = false;  // 游戏状态
 var score = 0;
 var endTime = new Date();
 // 计算飞机位置
 var calcPosition = (left, top, maxLeft, maxTop, minLeft = 0, minTop = 0) => {
  left = left < minLeft ? minLeft : left > maxLeft ? maxLeft : left;
  top = top < minTop ? minTop : top > maxTop ? maxTop : top;
  return {left, top};
 }
 // 获取DOM对象的四个边界位置
 var getDomTRBL = (dom) => {
  var bounds = {};
  bounds.left = dom.offsetLeft;
  bounds.right = dom.offsetLeft + dom.offsetWidth;
  bounds.top = dom.offsetTop;
  bounds.bottom = dom.offsetTop + dom.offsetHeight;
  return bounds;
 }
 // 计算两个div是否相撞
 var calcHit = (div1, div2) => {
  var bounds1 = getDomTRBL(div1);
  var bounds2 = getDomTRBL(div2);
  if (bounds1.left >= bounds2.left && bounds1.left <= bounds2.right) {
  if (bounds1.top >= bounds2.top && bounds1.top <= bounds2.bottom) {
   return true;
  }
  else if (bounds1.bottom >= bounds2.top && bounds1.bottom <= bounds2.bottom) {
   return true;
  }
  }
  else if (bounds1.right >= bounds2.left && bounds1.right <= bounds2.right) {
  if (bounds1.top >= bounds2.top && bounds1.top <= bounds2.bottom) {
   return true;
  }
  else if (bounds1.bottom >= bounds2.top && bounds1.bottom <= bounds2.bottom) {
   return true;
  }
  }
  return false;
 }
 // 发射子弹
 var shoot = () => {
  // 控制发射时间间隔
  if (new Date() - endTime < bulletCreateInterval) {
  return false;
  }
  /*addClass() 方法向被选元素添加一个或多个类名。
  *该方法不会移除已存在的 class 属性,仅仅添加一个或多个类名到 class 属性。
  *提示:如需添加多个类,请使用空格分隔类名。
  */
  var planeLF = $(".plane").position().left;
  var planeTP = $(".plane").position().top;
  var bullet = $("<div></div>").addClass("bullet");
  $(".container").append(bullet);
  var bulletLF = planeLF + $(".plane").innerWidth() / 2 - bullet.innerWidth() / 2;
  var bulletTP = planeTP - $(".plane").innerHeight() / 2 + 20;
  bullet.css("left", bulletLF).css("top", bulletTP);

  endTime = new Date();
  return true;
 }
 // 键盘按下事件
 $(window).keydown(function (e) {
  if (e.keyCode == 13) { //enter 开始游戏
  bGamePlaying = true;
  console.log("game start!")
  }
  if (!bGamePlaying) return;
  var tp = $(".plane").position().top;
  var lf = $(".plane").position().left;
  switch (e.keyCode) {
  case 87:// w
   tp -= 10;
   break;
  case 83:// s
   tp += 10;
   break;
  case 65:// a
   lf -= 10;
   break;
  case 68:// d
   lf += 10;
   break;
  case 74:// j
   shoot(); // 发射子弹
   break;
  }
  var maxLeft = $(".container").innerWidth() - $(".plane").innerWidth();
  var maxTop = $(".container").innerHeight() - $(".plane").innerHeight();
  var position = calcPosition(lf, tp, maxLeft, maxTop);
  $(".plane").css("left", position.left).css("top", position.top);
 });
 // 鼠标移动事件
 var containerBounds = getDomTRBL($(".container")[0]);
 $(document).mousemove(function (e) {
  if (!bGamePlaying) return;
  var tp = e.pageY;
  var lf = e.pageX;
  if (tp >= containerBounds.top && tp <= containerBounds.bottom && lf >= containerBounds.left && lf <= containerBounds.right) {
  tp -= containerBounds.top;
  lf -= containerBounds.left;
  }
  else return;
  tp -= $(".plane").innerHeight() / 2;
  lf -= $(".plane").innerWidth() / 2;
  var maxLeft = $(".container").innerWidth() - $(".plane").innerWidth();
  var maxTop = $(".container").innerHeight() - $(".plane").innerHeight();
  var position = calcPosition(lf, tp, maxLeft, maxTop);
  $(".plane").css("left", position.left).css("top", position.top);
 });
 // 鼠标点击事件
 $(window).click(() => {
  if (!bGamePlaying) {
  bGamePlaying = true;
  }
  shoot();
 });
 // 为了便于对计时器进行操作,选择用一个计时器对选取到的所有元素进行操作
 // 这样可以大幅减少计时器的数目
 // 生成敌方战机计时器
 var enemyCreateTimer = setInterval(() => {
  var enemy = $("<div></div>").addClass("enemy").css("top", 0);
  $(".container").append(enemy);
  // round()方法可把一个数字舍入为最接近的整数(四舍五入)
  var left = Math.round(Math.random() * ($(".container").innerWidth() - $(".enemy").innerWidth()));
  enemy.css("left", left);
 }, enemyCreateInterval);
 // 让子弹飞计时器
 var bulletTimer = setInterval(() => {
  $(".bullet").each((index, element) => {
  var bullet = $(element);
  bullet.css("top", bullet.position().top - bulletSpeed);
  if (bullet.position().top < 0) {
   bullet.remove();
  }
  });
 }, bulletMoveInterval);
 // 敌机下落计时器
 var enemyTimer = setInterval(() => {
  $(".enemy").each((index, element) => {
  var enemy = $(element);
  enemy.css("top", enemy.position().top + enemySpeed);
  if (enemy.position().top > $(".container").innerHeight()) {
   enemy.remove();
  }
  });
 }, enemyMoveInterval);
 // 游戏主计时器
 var mainTimer = setInterval(() => {
  var plane = $(".plane").get(0);
  $(".enemy").each(function (index, enemy) {
  //判断玩家是否撞上了敌机
  if (calcHit(plane, enemy) || calcHit(enemy, plane)) {
   stopGame();
   return;
  }
  // 判断子弹是否撞上敌机
  $(".bullet").each((index, bullet) => {
   if (calcHit(enemy, bullet) || calcHit(bullet, enemy)) {
   enemy.remove();
   bullet.remove();
   score += 10;
   $("#score").text(score);
   }
  });
  });
 }, 50);
 // 停止游戏
 var stopGame = () => {
  bGamePlaying = false;
  clearInterval(enemyCreateTimer);
  clearInterval(enemyTimer);
  clearInterval(bulletTimer);
  clearInterval(mainTimer);
  alert("游戏结束!你的积分为" + score);
 }
 });
</script>
</body>
</html>

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

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

jQuery 相关文章推荐
jQuery日期范围选择器附源码下载
May 23 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
jquery自定义组件实例详解
Dec 31 jQuery
jQuery实现简单日历效果
Jul 05 #jQuery
jQuery实现飞机大战小游戏
Jul 05 #jQuery
jquery实现上传图片功能
Jun 29 #jQuery
jQuery实时统计输入框字数及限制
Jun 24 #jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 #jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 #jQuery
jQuery 移除事件的方法
Jun 20 #jQuery
You might like
php 301转向实现代码
2008/09/18 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
php调用c接口无错版介绍
2014/03/11 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
简单JS代码压缩器
2006/10/12 Javascript
动态改变textbox的宽高的js
2006/10/26 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
对python中dict和json的区别详解
2018/12/18 Python
Python骚操作之动态定义函数
2019/03/26 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
python如何停止递归
2020/09/09 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
医院领导班子四风对照检查材料
2014/09/27 职场文书
清明扫墓感想
2015/08/11 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android