[新手上路]批处理新手入门导读[视频教程]批处理基础视频教程[视频教程]VBS基础视频教程[批处理精品]批处理版照片整理器
[批处理精品]纯批处理备份&还原驱动[批处理精品]CMD命令50条不能说的秘密[在线下载]第三方命令行工具[在线帮助]VBScript / JScript 在线参考
返回列表 发帖
aa77dd@163.com

Rank: 5Rank: 5

帖子
548 
积分
1246 
技术
176  
捐助
0  
注册时间
2015-6-4 
1楼 跳转到 » 倒序看帖
打印
tT
发表于 2015-7-22 13:20 | 只看该作者

[原创代码] DIV+CSS+JS 导弹截击简单跟踪算法演示

本帖最后由 aa77dd@163.com 于 2015-7-22 14:30 编辑

请将下面代码保存为 HTML 文件运行, 本代码在最新版 Chrome 和 Firefox 浏览器中测试通过, 未考虑低版本浏览器(特别是IE)的兼容性

演示地址 http://a7d.net46.net/MISSILE_php/MISSILE.php

全代码+资源 包 下载 http://pan.baidu.com/s/1dDsC2cT
  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <style>

  5. * {

  6.     margin: 0;

  7.     padding: 0;

  8.     box-sizing: content-box;

  9. }

  10. body {

  11.     background: url("Metro Bliss.jpg") no-repeat center center fixed;

  12.     background-size: cover;

  13.     overflow: hidden;

  14. }

  15. .enemy {

  16.     display: block;

  17.     position: absolute;

  18.     left: -9999px;

  19. }

  20. .missile {

  21.     display: block;

  22.     position: absolute;

  23.     /*  background-color: red; */

  24.     left: -9999px;

  25. }

  26. .missile>img {

  27.     width: 7px;

  28.     height: 44px;

  29. }

  30. audio,#btn {

  31.     display: inline-block;

  32.     bottom: 0px;

  33.     position: absolute;

  34.     width: 0px;

  35. }

  36. #btn {

  37.     width: auto;

  38.     cursor: pointer;

  39.     color: white;

  40. }

  41. #btn:hover {

  42.     background-color: rgba(192, 192, 192, 0.3);

  43. }

  44. </style>

  45. </head>

  46.     <body>

  47.         <div class=enemy>

  48.             <img src="JetFighter.png">

  49.         </div>

  50.         <div class=missile>

  51.             <img src="missile122x734.png">

  52.         </div>

  53.         <div id=btn onclick="$('audio').width(function (i, old) {return 300 - old});">

  54.             显/隐音效控件

  55.         </div>

  56.         <audio id=audio_hit controls>

  57.             <source src="CruiseMissileDeath.wav" type="audio/wav">

  58.         </audio>

  59.         <audio id=audio_miss controls>

  60.             <source src="JetFighterAttackMissile.wav" type="audio/wav">

  61.         </audio>

  62.     </body>

  63. </html>

  64. <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

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

  66. <script>

  67. var vxe = [], vye = [], xe = [], ye = [];

  68. vxe[0] = 10, vye[0] = 0, xe[0] = 0, ye[0] = document.documentElement.clientHeight * .8;

  69. var vxm = [], vym = [], xm = [], ym = [];

  70. xm[0] = document.documentElement.clientWidth / 2, ym[0] = 10;

  71. var vwm = [], vm = [], am = [];

  72. vwm[0] = 2 * Math.PI / 72;              // 导弹转向角速度极限 5deg

  73. vm[0] = 20;                             // 导弹飞行速度; vxm = vm * cos(am); vym = vm * sin(am);

  74. am[0] = Math.PI / 2;                    // 导弹飞行角度

  75. vxm[0] = vm[0] * Math.cos(am[0]);

  76. vym[0] = vm[0] * Math.sin(am[0]);

  77. var lastdistSQ = Array(1 + 1).join(Number.MAX_VALUE).split('');

  78. var xOffs_e = -$('.enemy').width() / 2, yOffs_e = -$('.enemy').height() / 2;

  79. var xOffs_m = -$('.missile').width() / 2, yOffs_m = -$('.missile').height() / 2;

  80. var audio_hit = $('#audio_hit')[0], audio_miss = $('#audio_miss')[0];

  81. $('audio').map(function (i) {

  82.     $(this).css('left', (120 + i * 300) + 'px');

  83.     $('audio')[i].muted = true;

  84. });

  85. window.setInterval('tick();', 1000 / 60);

  86. function tick() {

  87.     $('.enemy').map(function (i) {

  88.         $(this).css({'left': (xe[i] + xOffs_e) + 'px',

  89.             'bottom': (ye[i] + yOffs_e) + 'px',

  90.             'transform': 'scaleX(' + (vxe[i] >= 0 ? 1 : -1) + ')'

  91.         });

  92.         xe[i] += vxe[i];

  93.         ye[i] += vye[i];

  94.         if (xe[i] >= document.documentElement.clientWidth) {

  95.             vxe[i] = -Math.abs(vxe[i]);

  96.         }

  97.         if (xe[i] <= 0) {

  98.             vxe[i] = Math.abs(vxe[i]);

  99.         }

  100.     });

  101.     $('.missile').map(function (i) {

  102.         $(this).css({'left': (xm[i] + xOffs_m) + 'px', 'bottom': (ym[i] + yOffs_m) + 'px',

  103.             'transform': 'rotate(' + ((Math.PI / 2 - angle(vxm[i], vym[i])) * 180 / Math.PI) + 'deg)'

  104.         });

  105.         xm[i] += vxm[i];

  106.         ym[i] += vym[i];

  107.         // 导弹相对速度方向调整为与敌位置方向一致

  108.         // 姿态角差 = 相对位置角 - 相对速度角

  109.         // 姿态调整角方向 = |姿态角差| <= PI ? 姿态角差方向 : 姿态角差负方向

  110.         // 姿态调整角模值 = min(|姿态角差|, 导弹转向角速度极限)

  111.         var distSQ = Math.pow(xe[i] - xm[i], 2) + Math.pow(ye[i] - ym[i], 2);

  112.         if (distSQ < 10 * 10) { // 目标距离在引爆半径内时引爆 引爆半径 10

  113.             audio_miss.pause();

  114.             audio_hit.load();

  115.             audio_hit.play();

  116.         } else if (distSQ < 40 * 40 && distSQ < lastdistSQ[i]) { // 逼近目标

  117.             audio_hit.pause();

  118.             audio_miss.load();

  119.             audio_miss.play();

  120.         }

  121.         lastdistSQ[i] = distSQ;

  122.         var a_pos = angle(xe[i] - xm[i], ye[i] - ym[i]);

  123.         if (a_pos != null) {

  124.             var a_vel = angle(vxm[i] - vxe[i], vym[i] - vye[i]); // 相对速度角

  125.             if (a_vel == null) {

  126.                 // 导弹和目标等速度, 无法成功击中

  127.             } else {

  128.                 var a_d = a_pos - a_vel;

  129.                 // 计算姿态调整角

  130.                 var a_adjust = (Math.abs(a_d) <= Math.PI ? (a_d >= 0 ? 1 : -1) : (a_d >= 0 ? -1 : 1))

  131.                         * Math.min(Math.abs(a_d), vwm[i]);

  132.                 am[i] += a_adjust;

  133.                 vxm[i] = vm[i] * Math.cos(am[i]);

  134.                 vym[i] = vm[i] * Math.sin(am[i]);

  135.             }

  136.         } else {

  137.             // 拦截成功, 引爆

  138.         }

  139.     });

  140. }

  141. // 角度计算

  142. function angle(x, y) {

  143.     var ang;

  144.     return x == 0 ? (y == 0 ? null : (y > 0 ? Math.PI / 2 : -Math.PI / 2))

  145.             : (ang = Math.atan(Math.abs(y / x)), x > 0 ?

  146.                     (y >= 0 ? ang : 2 * Math.PI - ang) :

  147.                     (y >= 0 ? Math.PI - ang : ang + Math.PI));

  148. }

  149. </script>
复制代码
2

评分人数

    • CrLf: 哇哦技术 + 1
    • yu2n: 感谢分享~技术 + 1
收藏 分享

yu2n

Rank: 5Rank: 5

帖子
715 
积分
1295 
技术
150  
捐助
0  
注册时间
2012-11-1 
2楼
发表于 2015-7-22 18:00 | 只看该作者
无注释，无力吐槽…希望多年以后还看得懂。。。
  1. var vxe = [], vye = [], xe = [], ye = [];

  2. var vxm = [], vym = [], xm = [], ym = [];
复制代码
『千江有水千江月』千江有水，月映千江；万里无云，万里青天。    http://yu2n.qiniudn.com/

TOP

返回列表