原生js实现万圣节快乐动画效果代码
代码语言:html
所属分类:动画
代码描述:原生js实现万圣节快乐动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } html, body { overflow: hidden; } body { position: relative; background: #1a2a6c; background: -webkit-linear-gradient(to top, #fdbb2d, #b21f1f, #1a2a6c); background: linear-gradient(to top, #fdbb2d, #b21f1f, #1a2a6c); } </style> </head> <body translate="no" > <script > /* * File Name / halloween.js * Created Date / Oct 13, 2020 * Aurhor / Toshiya Marukubo * Twitter / https://twitter.com/toshiyamarukubo */ /* Common Tool. */ class Tool { // random number. static randomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } // random color rgb. static randomColorRGB() { return ( "rgb(" + this.randomNumber(0, 255) + ", " + this.randomNumber(0, 255) + ", " + this.randomNumber(0, 255) + ")"); } // random color hsl. static randomColorHSL(saturation, lightness) { return ( "hsl(" + this.randomNumber(0, 360) + ", " + saturation + "%, " + lightness + "%)"); } // gradient color. static gradientColor(ctx, cr, cg, cb, ca, x, y, r) { const col = cr + "," + cg + "," + cb; const g = ctx.createRadialGradient(x, y, 0, x, y, r); g.addColorStop(0, "rgba(" + col + ", " + ca * 1 + ")"); g.addColorStop(0.5, "rgba(" + col + ", " + ca * 0.5 + ")"); g.addColorStop(1, "rgba(" + col + ", " + ca * 0 + ")"); return g; }} /* When want to use angle. */ class Angle { constructor(angle) { this.a = angle; this.rad = this.a * Math.PI / 180; } incDec(num) { this.a += num; this.rad = this.a * Math.PI / 180; return this.rad; }} /* When want to use controller. */ class Controller { constructor(id) { this.id = document.getElementById(id); } getVal() { return this.id.value; }} /* When want to use time. */ class Time { constructor(time) { this.startTime = time; this.lastTime; this.elapsedTime; } getElapsedTime() { this.lastTime = Date.now(); this.elapsedTime = (this.startTime - this.lastTime) * -1; return this.elapsedTime; }} let canvas; class Canvas { constructor(bool) { // create canvas. this.canvas = document.createElement("canvas"); // if on screen. if (bool === true) { this.canvas.style.display = 'block'; this.canvas.style.top = 0; this.canvas.style.left = 0; document.getElementsByTagName("body")[0].appendChild(this.canvas); } this.ctx = this.canvas.getContext("2d"); this.width = this.canvas.width = window.innerWidth; this.height = this.canvas.height = window.innerHeight; this.standard = this.width > this.height ? this.width : this.height * 1.5; // mouse infomation. this.mouseX = this.width / 2; this.mouseY = this.height / 10; this.mouseZ = null; // ground this.ground; this.groundHeight = 100; // grave this.graves = []; this.graveSize = this.standard / 50; this.graveDist = 10; this.graveTime = null; this.graveBehavior = 1; // pumpkin this.pumpkin; this.pumpkinSize = this.standard / 9; this.pumpkinTime = null; this.pumpkinBehavior = 1; // text this.text; this.sentence = this.width > this.height ? 'HAPPY HALLOWEEN' : 'HALLOWEEN'; this.textSize = this.standard / 4; this.fontSize = this.standard / 25; this.textTime = null; this.textBehavior = null; // house this.houses = []; this.houseSize = this.standard / 10; this.houseNum = 3; this.houseTime = null; this.houseBehavior = null; // spider this.spiders = []; this.spiderSize = this.standard / 80; this.spiderNum = 3; this.spiderTime = null; this.spiderBehavior = null; // shooting star this.pointX = this.width + 100; this.pointY = Tool.randomNumber(0, this.height / 10); this.starNum = 300; this.stars = []; this.starBehavior = null; this.v = { x: 0, y: 0 }; } // init, render, resize init() { // ground this.ground = new Ground(this.ctx, 0, this.height - this.groundHeight); // text this.text = new Text(this.ctx, this.width / 2, this.height / 8, this.textSize, this.fontSize, this.sentence); // grave let index = 0; for (let i = 50; i < this.width; i += this.graveDist) { const gap = Tool.randomNumber(30, 80); const g = new Grave(this.ctx, i, Tool.randomNumber(0, this.height / 2), this.graveSize, index); this.graves.push(g); i += gap; index++; } // pumpkin this.pumpkin = new Pumpkin(this.ctx, 0, 0, this.pumpkinSize); // house for (let i = 0; i < this.houseNum; i++) { const h = new House(this.ctx, this.width / (10 - i * 2), this.height - this.groundHeight, this.houseSize); this.houses.push(h); } // spider for (let i = 0; i < this.spiderNum; i++) { const s = new Spider(this.ctx, Tool.randomNumber(this.width - this.width / 3, this.width), Tool.randomNumber(50, this.height / 2), this.spiderSize); this.spiders.push(s); } // star for (let i = 0; i < this.starNum; i++) { const s = new Star(this.ctx, this.pointX, this.pointY); this.stars.push(s); } } render() { this.ctx.clearRect(0, 0, this.width, this.height); // grave for (let i = 0; i < this.graves.length; i++) { this.graves[i].render(); } // house if (this.houseBehavior === 1) { for (let i = 0; i < this.houses.length; i++) { this.houses[i].render(); } } // spider if (this.spiderBehavior === 1) { for (let i = 0; i < this.spiders.length; i++) { this.spiders[i].render(); } } // pumpkin if (this.pumpkinBehavior >= 1) { this.pumpkin.render(); } // star for (let i = 0; i < this.stars.length; i++) { this.stars[i].render(); } // update points if (this.pointX < -canvas.width / 4) { this.graveBehavior = 2; } this.ground.render(); // text if (this.textBehavior === 1) { this.text.render(); } if (this.pumpkinBehavior === 5) { this.v.x += (this.mouseX - this.pointX) * 0.1; this.v.y += (this.mouseY - this.pointY) * 0.1; this.v.x *= 0.9; this.v.y *= 0.9; this.pointX += this.v.x; this.pointY += this.v.y; } else { this.pointX -= 10; this.pointY += 1; } } resize() { this.width = this.canvas.width = window.innerWidth; this.height = this.canvas.height = window.innerHeight; // ground this.ground; this.groundHeight = 100; // grave this.graves = []; this.graveSize = this.standard / 50; this.graveDist = 10; this.graveTime = null; this.graveBehavior = 1; // pumpkin this.pumpkin; this.pumpkinSize = this.standard / 9; this.pumpkinTime = null; this.pumpkinBehavior = 1; // text this.text; this.sentence = this.width > this.height ? 'HAPPY HALLOWEEN' : 'HALLOWEEN'; this.textSize = this.standard / 4; this.fontSize = this.standard / 25; this.textTime = null; this.textBehavior = null; // house this.houses = []; this.houseSize = this.standard / 10; this.houseNum = 3; this.houseTime = null; this.houseBehavior = null; // spider this.spiders = []; this.spiderSize = this.standard / 80; this.spiderNum = 3; this.spiderTime = null; this.spiderBehavior = null; // shooting star this.pointX = this.width + 100; this.pointY = Tool.randomNumber(0, this.height / 10); this.starNum = 300; this.stars = []; this.starBehavior = null; this.v = { x: 0, y: 0 }; this.init(); }} /* Ground class. */ class Ground { constructor(ctx, x, y) { this.ctx = ctx; this.init(x, y); } init(x, y) { this.x = x; this.y = y; this.c = 'black'; } draw() { const ctx = this.ctx; ctx.save(); ctx.fillStyle = this.c; ctx.fillRect(this.x, this.y, canvas.width, canvas.height - this.y); ctx.restore(); } render() { this.draw(); }} /* House */ class House { constructor(ctx, x, y, s) { this.ctx = ctx; this.init(x, y, s); } init(x, y, s) { this.a = new Angle(Tool.randomNumber(-5, 5)); this.x = x; this.y = -20; this.yi = y + 20; this.r = Tool.randomNumber(s / 3, s); this.c = { b: 'black', y: 'yellow' }; this.v = { y: 0 }; } draw() { const ctx = this.ctx; ctx.save(); ctx.fillStyle = this.c.b; ctx.translate(this.x, this.y); ctx.rotate(this.a.rad); ctx.translate(-this.x, -this.y); // bottom ctx.fillRect(this.x - this.r / 2, this.y - this.r * 2, this.r, this.r * 2); // top ctx.beginPath(); ctx.moveTo(this.x, this.y - this.r * 3); ctx.lineTo(this.x + this.r, this.y - this.r * 2); ctx.lineTo(this.x - this.r, this.y - this.r * 2); ctx.closePath(); ctx.fill(); // window ctx.lineWidth = this.r / 10; ctx.fillStyle = this.c.y; ctx.fillRect(this.x - this.r / 3, this.y - this.r * 1.8, this.r / 1.5, this.r / 1.5); ctx.strokeStyle = this.c.b; ctx.beginPath(); ctx.moveTo(this.x, this.y - this.r * 1.8); ctx.lineTo(this.x, this.y - this.r * 1.1); ctx.stroke(); ctx.restore(); } updatePosition() { this.v.y += (this.yi - this.y) * 0.3; this.v.y *= 0.8; this.y += this.v.y; } manageBehavior() { if (canvas.houseTime === null) canvas.houseTime = new Time(new Date()); if (canvas.houseTime.getElapsedTime() > 400) { canvas.spiderBehavior = 1; } } render() { this.draw(); this.updatePosition(); this.manageBehavior(); }} /* Spider */ class Spider { constructor(ctx, x, y, s) { this.ctx = ctx; this.init(x, y, s); } init(x, y, s) { this.a = new Angle(Tool.randomNumber(0, 360)); this.x = x; this.y = -20; this.yi = y; this.r = Tool.randomNumber(s / 3, s); this.lw = this.r / 5; this.c = 'black'; this.v = { y: 0 }; } drawSpider() { const ctx = this.ctx; ctx.save(); ctx.translate(this.x, 0); ctx.rotate(0.3 * Math.sin(this.a.rad)); ctx.translate(-this.x, 0); // body ctx.strokeStyle = this.c; ctx.fillStyle = this.c; ctx.lineWidth = this.lw; ctx.beginPath(); ctx.arc(this.x, this.y - this.r * 0.9, this.r, 0, Math.PI * 2, false); ctx.fill(); ctx.beginPath(); ctx.arc(this.x, this.y + this.r * 0.9, this.r, 0, Math.PI * 2, false); ctx.fill(); // web ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.lineTo(this.x, 0); ctx.stroke(); // limbs top ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.quadraticCurveTo(this.x + this.r * 2, this.y, this.x + this.r * 2, this.y - this.r * 3); ctx.stroke(); ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.quadraticCurveTo(this.x - this.r * 2, this.y, this.x - this.r * 2, this.y - this.r * 3); ctx.stroke(); // limbs middle ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.quadraticCurveTo(this.x + this.r * 2, this.y, this.x + this.r * 3, this.y - this.r); ctx.stroke(); ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.quadraticCurveTo(this.x - this.r * 2, this.y, this.x - this.r * 3, this.y - this.r); ctx.stroke(); // limbs bottom ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.quadraticCurveTo(this.x + this.r * 2, this.y, this.x + this.r * 2, this.y + this.r * 3); ctx.stroke(); ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.quadraticCurveTo(this.x - this.r * 2, this.y, this.x - this.r * 2, this.y + this.r * 3); ctx.stroke(); ctx.restore(); } updatePosition() { this.v.y += (this.yi - this.y) * 0.3; this.v.y *= 0.8; this.y += this.v.y; } manageBehavior() { if (canvas.spiderTime === null) canvas.spiderTime = new Time(new Date()); if (canvas.spiderTime.getElapsedTime() > 400) { if (canvas.pumpkinBehavior === 1) canvas.pumpkinBehavior = 2; } } render() { this.drawSpider(); this.updatePosition(); this.manageBehavior(); this.a.incDec(1); }} /* Text */ class Text { constructor(ctx, x, y, s, fs, t) { this.ctx = ctx; this.init(x, y, s, fs, t); } init(x, y, s, fs, t) { this.a = new Angle(0); this.x = x; this.y = y; this.yi = canvas.height - canvas.groundHeight / 2; this.r = 0; this.ri = s; this.c = 'black'; this.s = fs; this.fs = 0; this.t = t; this.l = this.t.length - 1; this.rad = Math.PI / 1.5 / this.l; this.v = { y: 0, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0