js模拟蛇爬行运动效果
代码语言:html
所属分类:动画
代码描述:js模拟蛇爬行运动效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { height: 100%; } body { background-color: #37444F; font-family: 'Oxygen', sans-serif; line-height: 2rem; } a { color: #F65A5B; text-decoration: none; } a:hover { text-decoration: underline; } canvas { display: block; } body { word-wrap: break-word; } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80vw; max-width: 100%; height: 30vh; max-height: 100%; background-color: rgba(255,255,255,1); border-radius: 10px; display: flex; justify-content: center; align-items: center; text-align: center; z-index: 1010; font-size: calc(1rem + 1vw); padding: 3rem 4rem; } .modal-overlay { z-index: 1000; background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .modal button { background-color: #34B3A0; border: none; display: block; width: 100%; margin-top: 2rem; padding: 1.5rem 2.5rem; color: white; font-size: calc(0.9rem + 1vw); font-weight: 300; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05rem; animation-name: lantern; animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-play-state: running; } .text { font: 16px/300px 'Lato', sans-serif; width: 300px; height: 300px; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; text-align: center; user-select: none; } .click-explosion { width: 50px; height: 50px; animation: click-explode 1s ease-out forwards; position: absolute; z-index: 400; } .click-explosion-right { width: 50px; height: 50px; border-radius: 50px; background: #f00; animation: click-explode 1s ease-out forwards; position: absolute; z-index: 400; } @keyframes click-explode { 100% { transform: scale(1.5); opacity: 0; } } @keyframes lantern { from { background-color: #34B3A0; } 50% { background-color: HSL(171, 55%, 30%); } to { background-color: #34B3A0; } } </style> </head> <body translate="no"> <canvas id="c"></canvas> <div class="modal-overlay" id="modal-overlay"></div> <script> $(document).ready(function() { $('.modal button').click(function() { $('div.modal').remove(); $('div.modal-overlay').remove(); }); }); </script> <script> const a = document.getElementById('c'); var c = a.getContext('2d'); const chains = []; const chainCount = 30; const entityCount = 20; let w = a.width; let h = a.height; let cx = w / 2; let cy = h / 2; let mx = cx; let my = cy; let md = 0; const maxa = 2; const maxv = 1; const avoidTick = 20; const avoidThresh = 50; function rand(min, max) { return Math.random() * (max - min) + min; } function Impulse() { this.x = cx; this.y = cy; this.ax = 0; this.ay = 0; this.vx = 0; this.vy = 0; this.r = 1; } Impulse.prototype.step = function step() { this.x += this.vx; this.y += this.vy; if (this.x + this.r >= w || this.x <= this.r) { this.vx = 0; this.ax = 0; } if (this.y + this.r >= h || this.y <= this.r) { this.vy = 0; this.ay = 0; } if (this.x + this.r >= w) { this.x = w - this.r; } if (this.x <= this.r) { this.x = this.r; } if (this.y + this.r >= h) { this.y = h - this.r; } if (this.y <= this.r) { this.y = this.r; } if (md) { this.vx += (this.x - mx) * 0.03; this.vy += (this.y - my) * 0.03; } this.ax += rand(-0.4, 0.4); this.ay += rand(-0.4, 0.4); this.vx += this.ax; this.vy += this.ay; this.ax *= Math.abs(this.ax) > maxa ? 0.75: 1; this.ay *= Math.abs(this.ay) > maxa ? 0.75: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0