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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php对数组排序代码分享
2014/02/24 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
dess中一个简单的多路委托的实现
2010/07/20 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
Python实现的简单hangman游戏实例
2015/06/28 Python
Python中将字典转换为列表的方法
2016/09/21 Python
Python 数据结构之队列的实现
2017/01/22 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
浅析python redis的连接及相关操作
2019/11/07 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
Internet体系结构
2014/12/21 面试题
师范生教师实习自我鉴定
2013/09/27 职场文书
白血病捐款倡议书
2014/05/14 职场文书
民主评议党员工作总结
2014/10/20 职场文书
交通事故协议书范文
2014/10/23 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android