index.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <link rel="manifest" href="/site.webmanifest">
  5. <!-- <link async rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
  6. integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> -->
  7. <link rel="stylesheet" href="../css/bootstrap.min.css"
  8. integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  9. <link rel="stylesheet" href="../css/style.css">
  10. <link rel="preconnect" href="https://fonts.gstatic.com">
  11. <link href="https://fonts.loli.net/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
  12. &family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  13. <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  14. <meta charset="UTF-8">
  15. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  16. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  17. <title>Gravity</title>
  18. <style>
  19. * {
  20. margin: 0;
  21. padding: 0;
  22. width: 100%;
  23. height: 100%;
  24. overflow: hidden;
  25. }
  26. .btn {
  27. width: auto;
  28. height: auto;
  29. }
  30. body {
  31. background: radial-gradient(rgb(235, 235, 235), floralwhite);
  32. padding: 0;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <a class="btn btn-default" href="/" onmouseenter="alert('单击屏幕添加元素。\n所有元素互相吸引,鼠标亦有引力。');$('.btn').hide()"
  38. style="position:fixed;margin: 0 auto;text-shadow: rgb(185, 185, 185) 3px 2px 4px;"><span
  39. class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>
  40. <canvas id="canvas" onclick='init(10)' width="500" height="500"></canvas>
  41. </body>
  42. <script>
  43. const LOST = 0.3;
  44. var canvas = document.getElementById('canvas');
  45. var context = canvas.getContext('2d');
  46. var planets = [];
  47. const MAX_MASS = 3000;
  48. const PLANET_COUNT = 300;
  49. const FRAGMENT_COUNT = 100;
  50. const FRAGMENT_SPEED = 10;
  51. const MAX_SPEED = 8;
  52. const G = 0.5;
  53. var maxLineLength = 45;
  54. const DEFAULT_MASS = 20;
  55. const LOCK_TIME = 50;
  56. const COLOR = '#333';
  57. const LINE_COLOR = '#2344';
  58. const MOUSE_MASS = 100;
  59. var mousepoint = { x: 0, y: 0 };
  60. window.AudioContext = window.AudioContext || window.webkitAudioContext;
  61. if (!window.AudioContext) {
  62. console.log('当前浏览器不支持Web Audio API');
  63. }
  64. var audioCtx = new AudioContext();
  65. var arrFrequency = [196.00, 220.00, 246.94, 261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25, 587.33, 659.25, 698.46, 783.99, 880.00, 987.77, 1046.50];
  66. function init(count) {
  67. if (planets.length > 300) return;
  68. var w = canvas.clientWidth;
  69. var h = canvas.clientHeight;
  70. for (var i = 0; i < count; i++) {
  71. planets.push({ x: Math.random() * w, y: Math.random() * h, mass: DEFAULT_MASS, vx: Math.random() * 2 - 1, vy: Math.random() * 2 - 1, lock: 0 });
  72. }
  73. }
  74. function fillRound(cx, cy, r, color) {
  75. context.beginPath();
  76. context.fillStyle = color;
  77. context.arc(cx, cy, Math.sqrt(r) / Math.PI, 0 * Math.PI, 2 * Math.PI, true);
  78. context.fill();
  79. }
  80. function drawLine(x1, y1, x2, y2, color) {
  81. context.beginPath();
  82. context.moveTo(x1, y1);
  83. context.strokeStyle = color;
  84. context.lineTo(x2, y2);
  85. context.stroke();
  86. }
  87. function collide() {
  88. for (var i = 0, count = planets.length; i < count; i++) {
  89. if (planets[i].lock <= 0) {
  90. for (var i1 = 0; i1 < count; i1++) {
  91. if (i1 != i && planets[i1] && planets[i1].lock <= 0) {
  92. var r = Math.sqrt(Math.pow((planets[i].x - planets[i1].x), 2) + Math.pow((planets[i].y - planets[i1].y), 2));
  93. if (r <= Math.max(Math.sqrt(planets[i1].mass) / Math.PI + Math.sqrt(planets[i].mass) / Math.PI) && planets[i1].mass >= planets[i].mass) {
  94. var amplitude = Math.min(planets[i1].mass, planets[i].mass) / 1000 + (planets[i1].mass + planets[i].mass) / 2000;
  95. planets[i1].vy = (planets[i1].mass * planets[i1].vy + planets[i].mass * planets[i].vy) / (planets[i1].mass + planets[i].mass);
  96. planets[i1].vx = (planets[i1].mass * planets[i1].vx + planets[i].mass * planets[i].vx) / (planets[i1].mass + planets[i].mass);
  97. planets[i1].mass += planets[i].mass;
  98. planets[i] = null;
  99. var frequency = arrFrequency[Math.floor(Math.random() * 15)];
  100. var oscillator = audioCtx.createOscillator();
  101. var gainNode = audioCtx.createGain();
  102. oscillator.connect(gainNode);
  103. gainNode.connect(audioCtx.destination);
  104. oscillator.type = 'sawtooth';
  105. oscillator.frequency.value = frequency;
  106. gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
  107. gainNode.gain.linearRampToValueAtTime(amplitude, audioCtx.currentTime + 0.01);
  108. oscillator.start(audioCtx.currentTime);
  109. gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
  110. oscillator.stop(audioCtx.currentTime + 1);
  111. break;
  112. }
  113. }
  114. }
  115. }
  116. }
  117. }
  118. function explode() {
  119. for (var i = 0, count = planets.length; i < count; i++) {
  120. if (planets[i] && planets[i].mass >= MAX_MASS) {
  121. for (var i1 = 0; i1 < FRAGMENT_COUNT; i1++) {
  122. planets.push({
  123. x: planets[i].x + Math.random(),
  124. y: planets[i].y + Math.random(),
  125. mass: planets[i].mass / FRAGMENT_COUNT,
  126. vx: FRAGMENT_SPEED * (Math.random() * 2 - 1),
  127. vy: FRAGMENT_SPEED * (Math.random() * 2 - 1),
  128. lock: LOCK_TIME
  129. });
  130. }
  131. var frequency = arrFrequency[Math.floor(Math.random() * 10)];
  132. var oscillator = audioCtx.createOscillator();
  133. var gainNode = audioCtx.createGain();
  134. oscillator.connect(gainNode);
  135. gainNode.connect(audioCtx.destination);
  136. oscillator.type = 'sine';
  137. oscillator.frequency.value = frequency;
  138. gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
  139. gainNode.gain.linearRampToValueAtTime(1.3, audioCtx.currentTime + 0.01);
  140. oscillator.start(audioCtx.currentTime);
  141. gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 10);
  142. oscillator.stop(audioCtx.currentTime + 10);
  143. planets[i] = null;
  144. }
  145. }
  146. }
  147. canvas.onmousemove = function (event) {
  148. var e = event || window.event;
  149. mousepoint = { 'x': e.clientX, 'y': e.clientY };
  150. }
  151. function step() {
  152. var w = canvas.clientWidth;
  153. var h = canvas.clientHeight;
  154. collide();
  155. explode();
  156. for (var i = 0, count = planets.length; i < count; i++) {
  157. if (planets[i]) {
  158. if (planets[i].vx === NaN) {
  159. planets[i].vx = 0
  160. }
  161. if (planets[i].vy === NaN) {
  162. planets[i].vy = 0
  163. }
  164. }
  165. }
  166. planets = planets.filter(e => e && e.x !== NaN && e.y !== NaN && e.vx !== NaN && e.vy !== NaN && e.mass !== NaN);
  167. for (var i = 0, count = planets.length; i < count; i++) {
  168. if (planets[i].x > w) {
  169. planets[i].x -= (planets[i].x - w) * 2;
  170. planets[i].vx *= -(1 - LOST);
  171. } else if (planets[i].x < 0) {
  172. planets[i].x += planets[i].x * -2;
  173. planets[i].vx *= -(1 - LOST);
  174. }
  175. if (planets[i].y > h) {
  176. planets[i].y -= (planets[i].y - h) * 2;
  177. planets[i].vy *= -(1 - LOST);
  178. } else if (planets[i].y < 0) {
  179. planets[i].y += planets[i].y * -2;
  180. planets[i].vy *= -(1 - LOST);
  181. }
  182. fillRound(planets[i].x, planets[i].y, planets[i].mass, COLOR)
  183. for (var i1 = 0; i1 < count; i1++) {
  184. if (i1 != i) {
  185. var r = Math.sqrt(Math.pow((planets[i].x - planets[i1].x), 2) + Math.pow((planets[i].y - planets[i1].y), 2));
  186. var f = r != 0 ? G * G * planets[i1].mass / Math.pow(r, 2) : 0;
  187. var dx = planets[i1].x - planets[i].x;
  188. var dy = planets[i1].y - planets[i].y;
  189. if (planets[i].mass > 0) {
  190. planets[i].vy += f / r * dy;
  191. planets[i].vx += f / r * dx;
  192. }
  193. if (i1 > i && r <= maxLineLength) {
  194. drawLine(planets[i].x, planets[i].y, planets[i1].x, planets[i1].y, LINE_COLOR)
  195. }
  196. }
  197. }
  198. //
  199. var r = Math.max(1, Math.sqrt(Math.pow((planets[i].x - mousepoint.x), 2) + Math.pow((planets[i].y - mousepoint.y), 2)));
  200. if (r > maxLineLength / 8) {
  201. var f = r != 0 ? G * G * MOUSE_MASS / Math.pow(r, 2) : 0;
  202. var dx = mousepoint.x - planets[i].x;
  203. var dy = mousepoint.y - planets[i].y;
  204. if (planets[i].mass > 0) {
  205. planets[i].vy += f / r * dy;
  206. planets[i].vx += f / r * dx;
  207. }
  208. if (r <= maxLineLength) {
  209. drawLine(planets[i].x, planets[i].y, mousepoint.x, mousepoint.y, LINE_COLOR);
  210. }
  211. }
  212. //
  213. var speedNow = Math.sqrt(Math.pow(planets[i].vx, 2) + Math.pow(planets[i].vy, 2))
  214. if (speedNow > MAX_SPEED) {
  215. planets[i].vx = planets[i].vx * MAX_SPEED / speedNow;
  216. planets[i].vy = planets[i].vy * MAX_SPEED / speedNow;
  217. }
  218. planets[i].x += planets[i].vx;
  219. planets[i].y += planets[i].vy;
  220. planets[i].lock--;
  221. }
  222. }
  223. // init(PLANET_COUNT);
  224. setInterval(function () {
  225. var w = document.body.clientWidth;
  226. var h = document.body.clientHeight;
  227. maxLineLength = Math.max(30, Math.min(w / 10, h / 10));
  228. canvas.setAttribute('width', w);
  229. canvas.setAttribute('height', h);
  230. canvas.style.width = w + 'px';
  231. canvas.style.height = h + 'px';
  232. step();
  233. }, 30)
  234. </script>
  235. </html>