原生JS,运动的小人
2024-04-30 21:57:20
今天突然想起来,不知道在什么网站上看的一个纯纯的原生ＪＳ写的效果,运动的小人,所以在这里给大家分享一下代码:
并说明:
这不是本人写的,而是我在浏览网站是无意中发现的,现在已经不记得是哪个网站了,但是要说明,这不是本人的代码,求大神现身吧!!
先看效果图:先是统一动作
后随机动作:
并且鼠标可任意拉扯小人进行拖拽,拽到最上方时,鼠标不松手,即可会有两只小人从屏幕上方掉下来,一直是被你鼠标托上去那只,一直是
比拖的那只大两倍大小人!!
来看代码:
1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <title>The Last Experience</title>
6 <style>
7 html {
8 overflow: hidden;
9 }
10
11 body {
12 position: absolute;
13 margin: 0;
14 padding: 0;
15 width: 100%;
16 height: 100%;
17 background: #000;
18 }
19
20 canvas {
21 position: absolute;
22 width: 100%;
23 height: 100%;
24 background: #000;
25 }
26 </style>
27
28
29 </head>
30
31 <body>
32
33
34 <script>
35 'use strict';
36
37 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
38
39 var Robot = function () {
40 function Robot(color, light, size, x, y, struct) {
41 _classCallCheck(this, Robot);
42
43 this.points = [];
44 this.links = [];
45 this.frame = 0;
46 this.dir = 1;
47 this.size = size;
48 this.color = Math.round(color);
49 this.light = light;
50
51 // ---- points ----
52 var id = 0;
53 for (var _iterator = struct.points, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
54 var _ref;
55
56 if (_isArray) {
57 if (_i >= _iterator.length) break;
58 _ref = _iterator[_i++];
59 } else {
60 _i = _iterator.next();
61 if (_i.done) break;
62 _ref = _i.value;
63 }
64
65 var p = _ref;
66
67 this.points.push(new Point(id++, size * p[0] + x, size * p[1] + y, p[2]));
68 }
69
70 // ---- links ----
71 for (var _iterator2 = struct.links, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
72 var _ref2;
73
74 if (_isArray2) {
75 if (_i2 >= _iterator2.length) break;
76 _ref2 = _iterator2[_i2++];
77 } else {
78 _i2 = _iterator2.next();
79 if (_i2.done) break;
80 _ref2 = _i2.value;
81 }
82
83 var l = _ref2;
84
85 var p0 = this.points[l[0]];
86 var p1 = this.points[l[1]];
87 var dx = p0.x - p1.x;
88 var dy = p0.y - p1.y;
89 this.links.push(new Link(this, p0, p1, Math.sqrt(dx * dx + dy * dy), l[2] * size / 3, l[3], l[4]));
90 }
91 }
92
93 Robot.prototype.update = function update() {
94
95 // ---- beat ----
96 if (++this.frame % 20 === 0) this.dir = -this.dir;
97
98 // ---- create giants ----
99 if (dancerDrag && this === dancerDrag && this.size < 16 && this.frame > 600) {
100 dancerDrag = null;
101 dancers.push(new Robot(this.color, this.light * 1.25, this.size * 2, pointer.x, pointer.y - 100 * this.size * 2, struct));
102 dancers.sort(function (d0, d1) {
103 return d0.size - d1.size;
104 });
105 }
106
107 // ---- update links ----
108 for (var _iterator3 = this.links, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
109 var _ref3;
110
111 if (_isArray3) {
112 if (_i3 >= _iterator3.length) break;
113 _ref3 = _iterator3[_i3++];
114 } else {
115 _i3 = _iterator3.next();
116 if (_i3.done) break;
117 _ref3 = _i3.value;
118 }
119
120 var link = _ref3;
121
122 var p0 = link.p0;
123 var p1 = link.p1;
124 var dx = p0.x - p1.x;
125 var dy = p0.y - p1.y;
126 var dist = Math.sqrt(dx * dx + dy * dy);
127
128 if (dist) {
129
130 var tw = p0.w + p1.w;
131 var r1 = p1.w / tw;
132 var r0 = p0.w / tw;
133 var dz = (link.distance - dist) * link.force;
134 dx = dx / dist * dz;
135 dy = dy / dist * dz;
136 p1.x -= dx * r0;
137 p1.y -= dy * r0;
138 p0.x += dx * r1;
139 p0.y += dy * r1;
140 }
141 }
142
143 // ---- update points ----
144 for (var _iterator4 = this.points, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
145 var _ref4;
146
147 if (_isArray4) {
148 if (_i4 >= _iterator4.length) break;
149 _ref4 = _iterator4[_i4++];
150 } else {
151 _i4 = _iterator4.next();
152 if (_i4.done) break;
153 _ref4 = _i4.value;
154 }
155
156 var point = _ref4;
157
158 // ---- drag ----
159 if (this === dancerDrag && point === pointDrag) {
160
161 point.x += (pointer.x - point.x) * 0.1;
162 point.y += (pointer.y - point.y) * 0.1;
163 }
164
165 // ---- dance ----
166 if (this !== dancerDrag) {
167
168 point.fn && point.fn(16 * Math.sqrt(this.size), this.dir);
169 }
170
171 // ---- verlet integration ----
172 point.vx = point.x - point.px;
173 point.vy = point.y - point.py;
174 point.px = point.x;
175 point.py = point.y;
176 point.vx *= 0.995;
177 point.vy *= 0.995;
178 point.x += point.vx;
179 point.y += point.vy + 0.01;
180 }
181
182 for (var _iterator5 = this.links, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
183 var _ref5;
184
185 if (_isArray5) {
186 if (_i5 >= _iterator5.length) break;
187 _ref5 = _iterator5[_i5++];
188 } else {
189 _i5 = _iterator5.next();
190 if (_i5.done) break;
191 _ref5 = _i5.value;
192 }
193
194 var link = _ref5;
195
196 var p1 = link.p1;
197
198 // ---- ground ----
199 if (p1.y > canvas.height * ground - link.size * 0.5) {
200 p1.y = canvas.height * ground - link.size * 0.5;
201 p1.x -= p1.vx;
202 p1.vx = 0;
203 p1.vy = 0;
204 }
205
206 // ---- borders ----
207 if (p1.id === 1 || p1.id === 2) {
208 if (p1.x > canvas.width - link.size) p1.x = canvas.width - link.size;else if (p1.x < link.size) p1.x = link.size;
209 }
210 }
211 };
212
213 Robot.prototype.draw = function draw() {
214
215 for (var _iterator6 = this.links, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
216 var _ref6;
217
218 if (_isArray6) {
219 if (_i6 >= _iterator6.length) break;
220 _ref6 = _iterator6[_i6++];
221 } else {
222 _i6 = _iterator6.next();
223 if (_i6.done) break;
224 _ref6 = _i6.value;
225 }
226
227 var link = _ref6;
228
229 if (link.size) {
230
231 var dx = link.p1.x - link.p0.x;
232 var dy = link.p1.y - link.p0.y;
233 var a = Math.atan2(dy, dx);
234 var d = Math.sqrt(dx * dx + dy * dy);
235
236 // ---- shadow ----
237 ctx.save();
238 ctx.translate(link.p0.x + link.size * 0.25, link.p0.y + link.size * 0.25);
239 ctx.rotate(a);
240 ctx.drawImage(link.shadow, -link.size * 0.5, -link.size * 0.5, d + link.size, link.size);
241 ctx.restore();
242
243 // ---- stroke ----
244 ctx.save();
245 ctx.translate(link.p0.x, link.p0.y);
246 ctx.rotate(a);
247 ctx.drawImage(link.image, -link.size * 0.5, -link.size * 0.5, d + link.size, link.size);
248 ctx.restore();
249 }
250 }
251 };
252
253 return Robot;
254 }();
255
256 var Link = function Link(parent, p0, p1, dist, size, light, force) {
257 _classCallCheck(this, Link);
258
259 // ---- cache strokes ----
260 function stroke(color, axis) {
261
262 var image = document.createElement('canvas');
263 image.width = dist + size;
264 image.height = size;
265 var ict = image.getContext('2d');
266 ict.beginPath();
267 ict.lineCap = "round";
268 ict.lineWidth = size;
269 ict.strokeStyle = color;
270 ict.moveTo(size * 0.5, size * 0.5);
271 ict.lineTo(size * 0.5 + dist, size * 0.5);
272 ict.stroke();
273 if (axis) {
274 var s = size / 10;
275 ict.fillStyle = "#000";
276 ict.fillRect(size * 0.5 - s, size * 0.5 - s, s * 2, s * 2);
277 ict.fillRect(size * 0.5 - s + dist, size * 0.5 - s, s * 2, s * 2);
278 }
279 return image;
280 }
281
282 this.p0 = p0;
283 this.p1 = p1;
284 this.distance = dist;
285 this.size = size;
286 this.light = light || 1.0;
287 this.force = force || 0.5;
288 this.image = stroke("hsl(" + parent.color + " ,30%, " + parent.light * this.light + "%)", true);
289 this.shadow = stroke("rgba(0,0,0,0.5)");
290 };
291
292 var Point = function Point(id, x, y, fn, w) {
293 _classCallCheck(this, Point);
294
295 this.id = id;
296 this.x = x;
297 this.y = y;
298 this.w = w || 0.5;
299 this.fn = fn || null;
300 this.px = x;
301 this.py = y;
302 this.vx = 0;
303 this.vy = 0;
304 };
305
306 var Canvas = function () {
307 function Canvas() {
308 var _this = this;
309
310 _classCallCheck(this, Canvas);
311
312 this.elem = document.createElement('canvas');
313 this.ctx = this.elem.getContext('2d');
314 document.body.appendChild(this.elem);
315 this.resize();
316 window.addEventListener('resize', function () {
317 return _this.resize();
318 }, false);
319 }
320
321 Canvas.prototype.resize = function resize() {
322
323 this.width = this.elem.width = this.elem.offsetWidth;
324 this.height = this.elem.height = this.elem.offsetHeight;
325 ground = this.height > 500 ? 0.85 : 1.0;
326 };
327
328 return Canvas;
329 }();
330
331 var Pointer = function () {
332 function Pointer(canvas) {
333 var _this2 = this;
334
335 _classCallCheck(this, Pointer);
336
337 this.x = 0;
338 this.y = 0;
339 this.canvas = canvas;
340
341 window.addEventListener('mousemove', function (e) {
342 return _this2.move(e);
343 }, false);
344 canvas.elem.addEventListener('touchmove', function (e) {
345 return _this2.move(e);
346 }, false);
347 window.addEventListener('mousedown', function (e) {
348 return _this2.down(e);
349 }, false);
350 window.addEventListener('touchstart', function (e) {
351 return _this2.down(e);
352 }, false);
353 window.addEventListener('mouseup', function (e) {
354 return _this2.up(e);
355 }, false);
356 window.addEventListener('touchend', function (e) {
357 return _this2.up(e);
358 }, false);
359 }
360
361 Pointer.prototype.down = function down(e) {
362
363 this.move(e);
364
365 for (var _iterator7 = dancers, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
366 var _ref7;
367
368 if (_isArray7) {
369 if (_i7 >= _iterator7.length) break;
370 _ref7 = _iterator7[_i7++];
371 } else {
372 _i7 = _iterator7.next();
373 if (_i7.done) break;
374 _ref7 = _i7.value;
375 }
376
377 var dancer = _ref7;
378
379 for (var _iterator8 = dancer.points, _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) {
380 var _ref8;
381
382 if (_isArray8) {
383 if (_i8 >= _iterator8.length) break;
384 _ref8 = _iterator8[_i8++];
385 } else {
386 _i8 = _iterator8.next();
387 if (_i8.done) break;
388 _ref8 = _i8.value;
389 }
390
391 var point = _ref8;
392
393 var dx = pointer.x - point.x;
394 var dy = pointer.y - point.y;
395 var d = Math.sqrt(dx * dx + dy * dy);
396 if (d < 60) {
397 dancerDrag = dancer;
398 pointDrag = point;
399 dancer.frame = 0;
400 }
401 }
402 }
403 };
404
405 Pointer.prototype.up = function up(e) {
406 dancerDrag = null;
407 };
408
409 Pointer.prototype.move = function move(e) {
410
411 var touchMode = e.targetTouches,
412 pointer = undefined;
413 if (touchMode) {
414 e.preventDefault();
415 pointer = touchMode[0];
416 } else pointer = e;
417 this.x = pointer.clientX;
418 this.y = pointer.clientY;
419 };
420
421 return Pointer;
422 }();
423
424 // ---- init ----
425
426 var ground = 1.0;
427 var canvas = new Canvas();
428 var ctx = canvas.ctx;
429 var pointer = new Pointer(canvas);
430 var dancerDrag = null;
431 var pointDrag = null;
432
433 // ---- main loop ----
434
435 function run() {
436
437 requestAnimationFrame(run);
438 ctx.clearRect(0, 0, canvas.width, canvas.height);
439 ctx.fillStyle = "#222";
440 ctx.fillRect(0, 0, canvas.width, canvas.height * 0.15);
441 ctx.fillRect(0, canvas.height * 0.85, canvas.width, canvas.height * 0.15);
442
443 for (var _iterator9 = dancers, _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) {
444 var _ref9;
445
446 if (_isArray9) {
447 if (_i9 >= _iterator9.length) break;
448 _ref9 = _iterator9[_i9++];
449 } else {
450 _i9 = _iterator9.next();
451 if (_i9.done) break;
452 _ref9 = _i9.value;
453 }
454
455 var dancer = _ref9;
456
457 dancer.update();
458 dancer.draw();
459 }
460 }
461
462 // ---- robot structure ----
463
464 var struct = {
465
466 points: [[0, -4, function (s, d) {
467 this.y -= 0.01 * s;
468 }], [0, -16, function (s, d) {
469 this.y -= 0.02 * s * d;
470 }], [0, 12, function (s, d) {
471 this.y += 0.02 * s * d;
472 }], [-12, 0], [12, 0], [-3, 34, function (s, d) {
473 if (d > 0) {
474 this.x += 0.01 * s;
475 this.y -= 0.015 * s;
476 } else {
477 this.y += 0.02 * s;
478 }
479 }], [3, 34, function (s, d) {
480 if (d > 0) {
481 this.y += 0.02 * s;
482 } else {
483 this.x -= 0.01 * s;
484 this.y -= 0.015 * s;
485 }
486 }], [-28, 0, function (s, d) {
487 this.x += this.vx * 0.035;
488 this.y -= 0.001 * s;
489 }], [28, 0, function (s, d) {
490 this.x += this.vx * 0.035;
491 this.y -= 0.001 * s;
492 }], [-3, 64, function (s, d) {
493 this.y += 0.02 * s;
494 if (d > 0) {
495 this.y -= 0.01 * s;
496 } else {
497 this.y += 0.05 * s;
498 }
499 }], [3, 64, function (s, d) {
500 this.y += 0.02 * s;
501 if (d > 0) {
502 this.y += 0.05 * s;
503 } else {
504 this.y -= 0.01 * s;
505 }
506 }], [0, -4.1]],
507
508 links: [[3, 7, 12, 0.5], [1, 3, 24, 0.5], [1, 0, 18, 0.5], [0, 11, 60, 0.8], [5, 9, 16, 0.5], [2, 5, 32, 0.5], [1, 2, 50, 1], [6, 10, 16, 1.5], [2, 6, 32, 1.5], [4, 8, 12, 1.5], [1, 4, 24, 1.5]]
509 };
510
511 // ---- instanciate robots ----
512 var dancers = [];
513
514 for (var i = 0; i < 6; i++) {
515 dancers.push(new Robot(i * 360 / 7, 80, 4, (i + 2) * canvas.width / 9, canvas.height * ground - 295, struct));
516 }
517
518 run();
519 </script>
520
521 </body>
522 </html>我还没研究透彻!!这位大神 不会是外国人吧??
原生JS,运动的小人相关推荐
- php cms 轮播图,原生JS运动实现轮播图
原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到 ...
- 原生JS实现各种运动之匀速运动
给大家分享一个用原生JS实现的匀速运动,效果如下: 需要注意的是,这种运动效果在实际的开发中用的比较少,用的更多的还是弹性运动和缓冲运动,以下是代码实现,欢迎大家复制粘贴及吐槽. <!DOCTY ...
- animate用法 js原生_原生JS封装animate运动框架的实例
如下所示: div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 5 ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
- 打砖块小游戏php程序,利用原生js实现html5打砖块小游戏（代码示例）
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
- php跳一跳小游戏,原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成 ...
- html js轮播图无白链接,JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)...
简介这篇文章主要介绍了JavaScript:100%原生js实现左右切换的轮播图(无延迟加载)以及相关的经验技巧,文章约11114字,浏览量505,点赞数3,值得参考! *{ margin:0; pa ...
- matlab 模拟心电图,使用原生js+canvas实现模拟心电图的实例
从2015年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...
- html实现跳跳棋游戏,原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成 ...
最新文章
- 用了 3 年 Apollo，最后我选择了 Nacos，原因不多说了
- Ruby 三元一次线性方程组
- 动态加载的js文件在Chrome进行调试时找不到
- centos7 vnc oracle,Centos7远程桌面的安装与vnc/vnc-server的设置
- Python3了，你还在用%和format格式化输出吗
- 面试39 MySQL读写分离
- Bloom Filter算法
- 【Python】Python随机数random模块的应用
- iOS SDK具体解释之UIDevice（系统版本号，设备型号...）
- 2022年全新美观的春节倒计时代码
- JavaScript结合Bootstrap仿微信后台多图文界面管理
- 像素级复制！荣威R品牌“撞车”小鹏P7剪刀门，还是手动的？
- linux串口环形缓冲区,能不能讲解下串口环形缓冲区的概念？
- Exchange2007获取OWA邮箱容量的代码
- mysql酒店客房管理系统的设计_酒店客房信息管理系统的设计实现(MySQL)
- Windows装机必备软件
- MacOS升级Big Sur后32位锐捷客户端排坑历程
- win2008服务器系统玩红警,如何让Win8顺利兼容红警2
- moment.js中文api
- 转载CSDN博客时的错误