最近微信的飞机大战非常流行，下载量非常高。

利用JS进行模拟制作了一个简单的飞机大战[此源码有很多地方可以进行重构和优化]

[此游戏中没有使用HTML5 任何浏览器都可以运行]。

效果图：

原理：利用javascript setInterval函数不停的进行元素位置的切换和添加飞机子弹，在飞机和子弹的运动中进行位置

检测，进行子弹和飞机的消失。

1、添加飞机

  1. setInterval(function () {
  2.             var flyDiv = $('<div class="flyDiv"></div>');
  3.             flyDiv.css({left: Math.random() * 578, top: -22});
  4.             flyDiv.appendTo(main);
  5.         }, 3000);

2、添加子弹

  1.     setInterval(function () {
  2.             var flyZ = $('<span class="z"></span>');
  3.             var l = m.offset().left + 23, t = m.offset().top;
  4.             flyZ.css({left: l, top: t});
  5.             flyZ.appendTo(main);
  6.         }, 600);

3、飞机的运动

  1. setInterval(function () {
  2.             var allDiv = main.find('div'), allZ = main.find('span');
  3.             for (var i = 0; i < allDiv.length; i++) {
  4.                 var f = $(allDiv[i]);
  5.                 var nowTop = f.offset().top;
  6.                 nowTop += 10;
  7.                 f.css({top: nowTop});
  8.                 for (var j = 0; j < allZ.length; j++) {
  9.                     var z = $(allZ[j]);
  10.                     if (testColl(
  11.                             z.offset().left, z.offset().top, z.width(), z.height(),
  12.                             f.offset().left, f.offset().top, f.width(), f.height()
  13.                     )) {
  14.                         z.remove();
  15.                         f.remove();
  16.                         sum.text(parseInt(sum.text()) + 1);
  17.                     }
  18.                 }
  19.                 if (nowTop + 22 >= 400) {
  20.                     f.remove();
  21.                 }
  22.             }
  23.         }, 60);
  1. 4、子弹的运动
  1.     setInterval(function () {
  2.             var allZ = main.find('span'),
  3.                     allDiv = main.find('div');
  4.             for (var i = 0; i < allZ.length; i++) {
  5.                 var z = $(allZ[i]);
  6.                 var nowTop = z.offset().top;
  7.                 nowTop -= 10;
  8.                 z.css({top: nowTop});
  9.  
  10.                 for (var j = 0; j < allDiv.length; j++) {
  11.                     var f = $(allDiv[j]);
  12.                     if (testColl(
  13.                             z.offset().left, z.offset().top, z.width(), z.height(),
  14.                             f.offset().left, f.offset().top, f.width(), f.height()
  15.                     )) {
  16.                         z.remove();
  17.                         f.remove();
  18.                         sum.text(parseInt(sum.text()) + 1);
  19.                     }
  20.                 }
  21.                 if (nowTop + 22 <= 0) {
  22.                     z.remove();
  23.                 }
  24.             }
  25.  
  26.         }, 60);

5、碰撞检测

  1. function testColl(x1, y1, w1, h1, x2, y2, w2, h2) {
  2.             var l1 = x1;
  3.             var r1 = x1 + w1;
  4.             var t1 = y1;
  5.             var b1 = y1 + h1;
  6.  
  7.             var l2 = x2;
  8.             var r2 = x2 + w2;
  9.             var t2 = y2;
  10.             var b2 = y2 + h2;
  11.  
  12.             if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {
  13.                 return false;
  14.             }
  15.             else {
  16.                 return true;
  17.             }
  18.         }

【完整源码】

  1. <!DOCTYPE html>

  1. <html lang="zh">

  1. <head>

  1.     <meta charset="utf-8"/>

  1.     <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

  1.     <title> new document </title>

  1.     <style type="text/css">

  1.         * {

  1.             margin: 0;

  1.             padding: 0;

  1.         }

  1.  

  1.         #main {

  1.             width: 600px;

  1.             height: 400px;

  1.             border: solid 1px #000;

  1.             background: #cccccc;

  1.         }

  1.  

  1.         .flyDiv {

  1.             width: 20px;

  1.             height: 20px;

  1.             background: red;

  1.             position: absolute;

  1.         }

  1.  

  1.         .z {

  1.             display: block;

  1.             width: 4px;

  1.             background: #000000;

  1.             height: 10px;

  1.             position: absolute;

  1.             top: 390px;

  1.         }

  1.  

  1.         .m {

  1.             width: 50px;

  1.             height: 50px;

  1.             background: #000000;

  1.             position: absolute;

  1.             top: 345px;

  1.             left: 275px;

  1.         }

  1.     </style>

  1. </head>

  1.  

  1. <body>

  1. <!-- html :begin -->

  1. <div id="main"></div>

  1. <div class="m" id="m"></div>

  1. <div>

  1.     打击飞机数：<label id="sum">0</label>

  1. </div>

  1. <!-- html :end -->

  1. </body>

  1. <script src="js/jquery-1.10.2.min.js"></script>

  1. <script>

  1.     $(document).ready(function () {

  1.         var main = $('#main'),

  1.                 m = $('#m'),

  1.                 sum = $('#sum');

  1.         $(document).on('keydown', function (ev) {

  1.             var oEvent = ev || window.event;

  1.             var l = m.offset().left,

  1.                     t = m.offset().top;

  1.             switch (oEvent.keyCode) {

  1.                 case 37:

  1.                     if (l >= 0) {

  1.                         l -= 12;

  1.                     }

  1.                     break;

  1.                 /*    case 38:

  1.                  if (t >= 0) {

  1.                  t -= 2;

  1.                  }

  1.                  break;*/

  1.                 case 39:

  1.                     if (!(l + 50 > 600)) {

  1.                         l += 12;

  1.                     }

  1.                     break;

  1.                 case 40:

  1.                     if (!(t + 50 > 400)) {

  1.                         t += 12;

  1.                     }

  1.                     break;

  1.             }

  1.             m.css({left: l, top: t});

  1.         });

  1.         setInterval(function () {

  1.             var flyDiv = $('<div class="flyDiv"></div>');

  1.             flyDiv.css({left: Math.random() * 578, top: -22});

  1.             flyDiv.appendTo(main);

  1.         }, 3000);

  1.  

  1.         setInterval(function () {

  1.             var allDiv = main.find('div'), allZ = main.find('span');

  1.             for (var i = 0; i < allDiv.length; i++) {

  1.                 var f = $(allDiv[i]);

  1.                 var nowTop = f.offset().top;

  1.                 nowTop += 10;

  1.                 f.css({top: nowTop});

  1.                 for (var j = 0; j < allZ.length; j++) {

  1.                     var z = $(allZ[j]);

  1.                     if (testColl(

  1.                             z.offset().left, z.offset().top, z.width(), z.height(),

  1.                             f.offset().left, f.offset().top, f.width(), f.height()

  1.                     )) {

  1.                         z.remove();

  1.                         f.remove();

  1.                         sum.text(parseInt(sum.text()) + 1);

  1.                     }

  1.                 }

  1.                 if (nowTop + 22 >= 400) {

  1.                     f.remove();

  1.                 }

  1.             }

  1.         }, 60);

  1.  

  1.         setInterval(function () {

  1.             var flyZ = $('<span class="z"></span>');

  1.             var l = m.offset().left + 23, t = m.offset().top;

  1.             flyZ.css({left: l, top: t});

  1.             flyZ.appendTo(main);

  1.         }, 600);

  1.  

  1.         setInterval(function () {

  1.             var allZ = main.find('span'),

  1.                     allDiv = main.find('div');

  1.             for (var i = 0; i < allZ.length; i++) {

  1.                 var z = $(allZ[i]);

  1.                 var nowTop = z.offset().top;

  1.                 nowTop -= 10;

  1.                 z.css({top: nowTop});

  1.  

  1.                 for (var j = 0; j < allDiv.length; j++) {

  1.                     var f = $(allDiv[j]);

  1.                     if (testColl(

  1.                             z.offset().left, z.offset().top, z.width(), z.height(),

  1.                             f.offset().left, f.offset().top, f.width(), f.height()

  1.                     )) {

  1.                         z.remove();

  1.                         f.remove();

  1.                         sum.text(parseInt(sum.text()) + 1);

  1.                     }

  1.                 }

  1.                 if (nowTop + 22 <= 0) {

  1.                     z.remove();

  1.                 }

  1.             }

  1.  

  1.         }, 60);

  1.  

  1.         function testColl(x1, y1, w1, h1, x2, y2, w2, h2) {

  1.             var l1 = x1;

  1.             var r1 = x1 + w1;

  1.             var t1 = y1;

  1.             var b1 = y1 + h1;

  1.  

  1.             var l2 = x2;

  1.             var r2 = x2 + w2;

  1.             var t2 = y2;

  1.             var b2 = y2 + h2;

  1.  

  1.             if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {

  1.                 return false;

  1.             }

  1.             else {

  1.                 return true;

  1.             }

  1.         }

  1.     });

  1. </script>

  1.  

  1. </html>

用Javascript模拟微信飞机大战游戏的更多相关文章

  1. 用javascript写星际飞机大战游戏

    在github里看到了个不错的脚本游戏,决定亲自动手来写,效果如下 下面是代码的思路分享 把整个代码理解消化确实不容易,但是如果你坚持看完相信你一定会有收获 如果没兴趣可以直接点击下面的链接 复制代码 ...

  2. 用Swift语言和Sprite Kit复制微信飞机大战游戏

    先上GitHub链接: https://github.com/songrotek/PlaneWar.git 接下来略微解说一下! 这个程序还有点Bug,见谅! 1 说明 游戏採用了Sprite kit ...

  3. 用DIV+Css+Jquery 实现的旧版微信飞机大战。

    用jquery 实现的旧版微信飞机大战. 以前一直都是做后台和业务逻辑,前端很少去做, 现在个小游戏. 方向键控制方向,Ctrl 键 放炸弹(当然你的有炸弹,哈哈)! 主要都是用div+Css实现的, ...

  4. 【一】仿微信飞机大战cocos2d-x3.0rc1

    參考 [偶尔e网事] 的 [cocos2d-x入门实战]微信飞机大战  cocos2dx 2.0版本号,偶尔e网事他写的很具体,面面俱到,大家很有必要看下.能够通过以下链接跳转: cocos2d-x入 ...

  5. 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（上）

    最近接触过几个版本的cocos2dx,决定每个大变动的版本都尝试一下.本实例模仿微信5.0版本中的飞机大战游戏,如图: 一.工具 1.素材:飞机大战的素材(图片.声音等)来自于网络 2.引擎:coco ...

  6. Cocos2d-x 3.0final 终结者系列教程16-《微信飞机大战》实现

    看到cocos2d-x推出了3.1版本号,真是每月一次新版本号,速度. 另一个好消息就是http://cn.cocos2d-x.org/上线了,祝贺!啥时候把我的视频和教程放上去呢?!! . 视频下载 ...

  7. 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（下）

    在飞机大战游戏开发中遇到的问题和解决方法: 1.在添加菜单时,我要添加一个有背景的菜单,需要在菜单pMenu中添加一个图片精灵,结果编译过了但是运行出错,如下图: 查了很多资料,调试了很长时间,整个人 ...

  8. 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（中）

    接<基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(上)> 三.代码分析 1.界面初始化 bool PlaneWarGame::init() { bool bRet = fals ...

  9. 11.pygame飞机大战游戏整体代码

    主程序 # -*- coding: utf-8 -*- # @Time: 2022/5/20 22:26 # @Author: LiQi # @Describe: 主程序 import pygame ...

随机推荐

  1. c#解析XML到DATASET及dataset转为xml文件函数

    //将xml对象内容字符串转换为DataSet         public static DataSet ConvertXMLToDataSet(string xmlData)         { ...

  2. libreoffice转换文件为pdf文件乱码问题解决办法

    最近系统需要一个office文件预览功能 解决方案为使用libreoffice将office文件转换为pdf文件,然后使用swftools将pdf文件转换为swf文件 最后在前台使用flexpaper ...

  3. PHP的日期和时间处理函数

    1. 将日期和时间转变为时间戳 1.1 time() 原型:time(void) 作用:返回当前时间的 UNIX时间戳. 参数:void,可选(即无参数) 1.2 mktime() 原型:int mk ...

  4. 为什么使用Binder而不是其他IPC机制

    本文搬运自:Advantages of using Binder for IPC in Android 使用Binder而不是其他(Semaphores , Message Queue, PIPES) ...

  5. 记录Office Add-in开发经验

    原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com 得益于微软系强大的共通能力和Visual Studio的开发支持,做Office插件不是什么难事.一点经验记录如下 ...

  6. 备忘-Sql server Timeout expired 超时时间已到. 达到了最大池大小 错误及Max Pool Size设置

    select * from sysprocesses where dbid= db_id('数据库名') 通过此语句可查看目前所有的连接进程 不够了就必须设置Max Pool Size,理论最大值为3 ...

  7. [大数据之Sqoop] —— 什么是Sqoop?

    介绍 sqoop是一款用于hadoop和关系型数据库之间数据导入导出的工具.你可以通过sqoop把数据从数据库(比如mysql,oracle)导入到hdfs中:也可以把数据从hdfs中导出到关系型数据 ...

  8. Java程序员的日常—— FileUtils工具类的使用

    package cn.xingoo.learn.commons; import org.apache.commons.io.FileUtils; import org.apache.commons.i ...

  9. AngularJS移动开发中的各种坑

    捂脸,辛酸泪ing...... 本文主要涉及部分在移动设备上特有的问题. 相对来说,Jquery侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的. DOM操作的问题 避免使用 jQue ...

  10. 实战MEF（5）：导出元数据

    如何理解元数 我们可以把元数据理解为随类型一起导出的附加信息.有时候我们会考虑,把元数据随类型一并导出,增加一些说明,使得我们在导入的时候,可以多一些筛选条件. 默认的类型导出带有元数据吗 上面的内容 ...