1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <script src="xiaoshu.js"></script>
  7.     <style>
  8.         #div1 {
  9.             width: 602px;
  10.             margin: 20px auto;
  11.             border: 1px solid #efdede;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="div1">
  17.         <canvas id="ca" width="600" height="600"></canvas>
  18.     </div>
  19. </body>
  20. </html>
  21. <script>
  22.     var OC = document.getElementById('ca');
  23.     var CG = OC.getContext('2d');
  24.     var mx = 0, my = 0;
  25.     var iRoat = 0;
  26.     var ball = [];
  27.     setInterval(function () {
  28.         ball.push({
  29.             x: 200,
  30.             y: 0,
  31.             r: 100,
  32.             num: 0,
  33.             starX: 200,
  34.             starY: 0
  35.         });
  36.     }, 400);
  37.  
  38.     var bollet = [];
  39.  
  40.     var oImg = new Image();
  41.     oImg.src = "img/person.png";
  42.     oImg.onload = function () {
  43.         //画图运动
  44.         setInterval(function () {
  45.             CG.clearRect(0, 0, OC.width, OC.height);
  46.  
  47.             CG.save();
  48.             CG.translate(180, 100);
  49.             CG.rotate(iRoat);
  50.             CG.translate(-25, -25);
  51.             CG.drawImage(oImg, 0, 0, 50, 50);
  52.             CG.restore();
  53.  
  54.             CG.beginPath();
  55.             CG.arc(200, 100, 100, -90 * Math.PI / 180, 180 * Math.PI / 180, false);
  56.             CG.stroke();
  57.  
  58.             CG.beginPath();
  59.             CG.arc(180, 100, 80, 180 * Math.PI / 180, 360 * Math.PI / 180, false);
  60.             CG.stroke();
  61.  
  62.             CG.beginPath();
  63.             CG.arc(260, 100, 10, 0, 360 * Math.PI / 180, true)
  64.             CG.stroke();
  65.             CG.closePath();
  66.  
  67.             for (var i = 0; i < ball.length; i++) {
  68.                 CG.beginPath();
  69.                 CG.moveTo(ball[i].x, ball[i].y);
  70.                 CG.arc(ball[i].x, ball[i].y, 10, 0, 360 * Math.PI / 180, false);
  71.                 CG.closePath();
  72.                 CG.fill();
  73.             }
  74.  
  75.             for (var i = 0; i < bollet.length; i++) {
  76.                 CG.save();
  77.                 CG.beginPath();
  78.                 CG.fillStyle = 'red';
  79.                 CG.moveTo(bollet[i].startX, bollet[i].startY);
  80.                 CG.arc(bollet[i].startX, bollet[i].startY, 10, 0, 360 * Math.PI / 180, false);
  81.                 CG.closePath();
  82.                 CG.fill();
  83.                 CG.restore();
  84.             }
  85.  
  86.         }, 1000 / 60);
  87.  
  88.         //为运动提供数据
  89.         setInterval(function () {
  90.             for (var i = 0; i < ball.length; i++) {
  91.                 ball[i].num++;
  92.                 if (ball[i].num >= 270) {
  93.                     ball[i].r = 80;
  94.                     ball[i].starX = 180;
  95.                     ball[i].starY = 100;
  96.                     ball[i].x = add(ball[i].starX, mul(Math.sin(ball[i].num * Math.PI / 180), ball[i].r));
  97.                     ball[i].y = add(-mul(Math.cos(ball[i].num * Math.PI / 180), ball[i].r), ball[i].starY);
  98.                     if (ball[i].num == 270 + 180) {
  99.                         alert('游戏结束');
  100.                         window.location.reload();
  101.                     }
  102.  
  103.                 }
  104.                 else if (ball[i].num < 270) {
  105.                     ball[i].x = Math.sin(ball[i].num * Math.PI / 180) * ball[i].r + ball[i].starX;
  106.                     ball[i].y = ball[i].r - Math.cos(ball[i].num * Math.PI / 180) * ball[i].r + ball[i].starY;
  107.                 }
  108.             }
  109.             for (var i = 0; i < bollet.length; i++) {
  110.                 bollet[i].startX = bollet[i].startX + bollet[i].sX;
  111.                 bollet[i].startY = bollet[i].startY + bollet[i].sY;
  112.             }
  113.  
  114.             for (var i = 0; i < bollet.length; i++) {
  115.                 for (var j = 0; j < ball.length; j++) {
  116.                     var a = {
  117.                         x: Math.abs( bollet[i].startX),
  118.                         y: Math.abs(bollet[i].startY),
  119.                         r: 10
  120.                     };
  121.                     var b = {
  122.                         x: Math.abs(ball[j].x),
  123.                         y: Math.abs(ball[j].y),
  124.                         r: 10
  125.                     };
  126.                     if (afoul(a, b))
  127.                     {
  128.                         bollet.splice(i, 1);
  129.                         ball.splice(j, 1);
  130.                         break;
  131.                     }
  132.                 }
  133.             }
  134.  
  135.         }, 30);
  136.  
  137.     }
  138.     OC.onmousemove = function (ev) {
  139.         var ev = ev || event;
  140.         var a = ev.clientX - OC.offsetLeft - 180;
  141.         var b = ev.clientY - OC.offsetTop - 100;
  142.         var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
  143.         if (a >= 0 && b <= 0) {
  144.             iRoat = Math.asin(a / c);
  145.         } else if (a > 0) {
  146.             iRoat = Math.acos(a / c) + 90 * Math.PI / 180;
  147.         }
  148.         if (a <= 0 && b <= 0) {
  149.             iRoat = Math.asin(a / c);
  150.         } else if (a < 0) {
  151.             iRoat = -(Math.asin(b / c) + 90 * Math.PI / 180);
  152.         }
  153.     }
  154.     OC.onmousedown = function (ev) {
  155.         var ev = ev || event;
  156.         var a = ev.clientX - OC.offsetLeft - 180;
  157.         var b = ev.clientY - OC.offsetTop - 100;
  158.         var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
  159.         var iSpeed = 5;
  160.         var sX = iSpeed * a / c;
  161.         var sY = iSpeed * b / c;
  162.         bollet.push({
  163.             startX: 180,
  164.             startY: 100,
  165.             sX: sX,
  166.             sY: sY
  167.         });
  168.     }
  169.  
  170.      //碰撞检测
  171.     function afoul(a, b) {
  172.         var x = Math.pow((a.x - b.x), 2);
  173.         var y = Math.pow((a.y - b.y), 2);
  174.         var r = Math.pow((a.r + b.r), 2);
  175.         if (Math.sqrt( x + y) <Math.sqrt(r)) {
  176.             return true;
  177.         }
  178.         return false;
  179.     }
  180.  
  181. </script>

　　用到的处理小数的js  xiaoshu.js

  1. //加法
  2. function add(a, b) {
  3.     var c, d, e;
  4.     try {
  5.         c = a.toString().split(".")[1].length;
  6.     } catch (f) {
  7.         c = 0;
  8.     }
  9.     try {
  10.         d = b.toString().split(".")[1].length;
  11.     } catch (f) {
  12.         d = 0;
  13.     }
  14.     return e = Math.pow(10, Math.max(c, d)), (mul(a, e) + mul(b, e)) / e;
  15. }
  16. //减法
  17. function sub(a, b) {
  18.     var c, d, e;
  19.     try {
  20.         c = a.toString().split(".")[1].length;
  21.     } catch (f) {
  22.         c = 0;
  23.     }
  24.     try {
  25.         d = b.toString().split(".")[1].length;
  26.     } catch (f) {
  27.         d = 0;
  28.     }
  29.     return e = Math.pow(10, Math.max(c, d)), (mul(a, e) - mul(b, e)) / e;
  30. }
  31. //乘法
  32. function mul(a, b) {
  33.     var c = 0,
  34.         d = a.toString(),
  35.         e = b.toString();
  36.     try {
  37.         c += d.split(".")[1].length;
  38.     } catch (f) { }
  39.     try {
  40.         c += e.split(".")[1].length;
  41.     } catch (f) { }
  42.     return Number(d.replace(".", "")) * Number(e.replace(".", "")) / Math.pow(10, c);
  43. }
  44. //除法
  45. function div(a, b) {
  46.     var c, d, e = 0,
  47.         f = 0;
  48.     try {
  49.         e = a.toString().split(".")[1].length;
  50.     } catch (g) { }
  51.     try {
  52.         f = b.toString().split(".")[1].length;
  53.     } catch (g) { }
  54.     return c = Number(a.toString().replace(".", "")), d = Number(b.toString().replace(".", "")), mul(c / d, Math.pow(10, f - e));
  55. }

H5——简易马祖的更多相关文章

  1. h5简易手写板

    ............. 我该说点什么呢,开头居然不知道想说点什么!好吧不知道说什么,我们就来说说这个手写板吧,虽然这个手写板现在没什么用,但是.....,好像的确没什么用啊! 只是存粹哪里练手的的 ...

  2. Html5 Page Creator，简易h5页面场景制作

  3. h5页面调用摄像头(简易版)

    <input type="button" value="OpenVideo" id="btnOpenVideo" /> < ...

  4. h5图片上传简易版（FileReader+FormData+ajax）

    一.选择图片(input的file类型) <input type="file" id="inputImg"> 1. input的file类型会渲染为 ...

  5. 一个简易h5涉及的ps技巧

    事实证明,很长时间不做,是会忘掉的呀,的呀,呀,啊~ 1.合并图层 CTRL+E合并多个图层 2.切片 3.导出 文件-------导出------存储为web所用格式-------->> ...

  6. 用微信小程序做H5游戏尝试

    微信小程序发布后,公司虽然没有拿到第一批内测资格,但作为微信亲密合作伙伴,一定要第一时间去尝试啦.现在微信小程序刚发布还在测试阶段,可以说是1.0版本,所以框架和结构内容都还不多,相关的文档跟微信AP ...

  7. 用PHP+H5+Boostrap做简单的音乐播放器（进阶版）

    前言:之前做了一个音乐播放器(纯前端),意外的受欢迎,然后有人建议我把后台一起做了,正好也想学习后台,所以学了两天php(不要吐槽我的速度,慢工出细活嘛~)然后在之前的基础上也又完善了一些功能,所以这 ...

  8. h5的瀑布流

    <!doctype html><html><head><meta charset="utf-8"><title>超简易瀑 ...

  9. 简易RPC框架-学习使用

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

随机推荐

  1. shell脚本动画小工具

    shell脚本动画小工具 看gif图: shell脚本版 脚本内容如下: #!/usr/bin/env bash ## ---------------------------------------- ...

  2. 监控MySQL组复制

    使用 Perfomance Schema 中的表来监控组复制,假定你的MySQL编译时已经启动了 Performance Schema 表.组复制将添加如下两张 P_S 表: performance_ ...

  3. 解读经典《C#高级编程》第七版 Page50-68.核心C#.Chapter2

    前言 本篇讲述Main方法,控制台,注释,预处理指令,编程规范等.这些概念比较琐碎,为避免长篇大论,主要以列举要点的方式来说明. 01 Main方法 Main方法并不是所有应用类型的入口方法,它只是控 ...

  4. OJ：神秘的数组初始化

    描述 填空,使得程序输出指定结果 #include <iostream> using namespace std; int main() { int * a[] = { // 在此处补充你 ...

  5. iOS多线程（上）——GCD详解（上）

    GCD(Grand central Dispatch)是Apple开发的一个多核编程的较新的解决方法.它主要用于优化应用程序以支持多核处理器以及其他对称多处理系统.下面我讲讲述关于GCD的点,通篇读完 ...

  6. double在输出为字符串的几种方法效率测试

    测试结果: double->none 366msdouble->long 161msdouble->long2 188msdouble->format 564msdouble- ...

  7. [angularjs] angularjs系列笔记（七）HTML DOM

    AngularJs为HTML DOM元素的属性提供了绑定数据的指令 ng-disabled指令 ng-disabled指令直接绑定数据到HTML元素的disabled属性 ng-show指令 ng-s ...

  8. tomcat端口修改以及jvm启动参数设置

    1.端口更改:找到config目录下server.xml文件 如下 <?xml version='1.0' encoding='utf-8'?> <!-- Licensed to t ...

  9. [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  10. ACM ICPC 2017 Warmup Contest 9 I

    I. Older Brother Your older brother is an amateur mathematician with lots of experience. However, hi ...