我的世界手机版1.2烟花代码是什么 烟花火箭实体ID,
时间:2023-10-07 16:12:07
来源:
浏览:
庆祝中国共产党成立100周年,用代码给你们搞个烟花
庆祝建党100周年 祖国 长沙
感恩当下,祝福未来
长沙橘子洲的烟花真好看
视频加载中...
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
那给你们也搞个代码做的烟花吧!
在网上转载大神写的, 用谷歌浏览最好
代码里调用 run() 可实现带线的烟花,
点击canvas生成一朵烟花
右击canvas清空一次画布
双击canvans生成一朵带线的随机烟花
代码里我将clear()方法隐藏掉了, 所以不会每一帧都清空画布
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>点击放烟花, 右击清空</title><style>*{margin:0;padding:0;background-color:black;} canvas{border:1px solid;}</style> <!-- 烟花类 和烟花碎屑类 --><script>// 烟花function Firework(sx, sy, ex, ey, hue){ this.sx = sx; // 开始x轴 this.sy = sy; // 开始y轴 this.ex = ex; // 结束x轴 this.ey = ey; // 结束y轴 this.x = sx; // 实时x轴 this.y = sy; // 实时y轴 this.old = new Array(); // 之前的旧角度 this.speed = random(50, 100); this.angle = Math.atan2(ey - sy, ex - sx); // 角度 this.actualDistance = 0; // 实际路径 this.distance = countDistance(sx, sy, ex, ey); // 计算总距离 this.acceleration = 1.05; // 加速 this.friction = 0.95 //摩擦力 this.gravity = 1; //重力 this.hue = hue; // 色调 this.brightness = random(50, 80); //随机明度 this.alpha = 1; //初始透明度 this.decay = random(0.015, 0.03); //碎屑小时的时间 this.color = "black"; // 现将old存储两个xy, 防止画出的时候下标溢出 this.old.push({x:this.x, y:this.y}); this.old.push({x:this.x, y:this.y});}// 烟花路径更新Firework.prototype.update = function(){ this.old.push({x:this.x, y:this.y}); // 储存废旧路径 var x = Math.cos(this.angle) * this.speed; var y = Math.sin(this.angle) * this.speed; this.actualDistance = countDistance(this.sx, this.sy, this.x + x, this.y + y); this.x += x; this.y += y; this.old.push({x:this.x, y:this.y}); if(this.distance < this.actualDistance) // 行走路径大于实际路径 return false; // 烟花到目标燃放点 else return true; // 烟花未到目标燃放点}// 爆炸颗粒function Particle(x, y, hue){ this.x = x; this.y = y; this.old = new Array(); // 记录步数 this.angle = random(0, 2 * Math.PI); // 任意角度 this.speed = random(1, 10); //随机速度 this.friction = 0.95 //摩擦力 this.gravity = 1; //重力 this.hue = random(hue - 20, hue + 20); //生成与烟花色彩相近的碎屑 this.brightness = random(50, 80); //随机明度 this.alpha = 1; //初始透明度 this.decay = random(0.015, 0.03); //碎屑存在时间}// 爆炸颗粒更新Particle.prototype.update = function(){ this.old.push({x:this.x, y:this.y}); this.speed *= this.friction; // 添加重力 this.x += Math.cos(this.angle) * this.speed; // 计算下一步x轴 this.y += Math.sin(this.angle) * this.speed + this.gravity; // 计算下一步y轴 + 重力 this.old.push({x:this.x, y:this.y}); this.alpha -= this.decay; // 每走一步消除碎屑透明度 if(this.alpha < this.decay){ // 碎屑透明度轻于碎屑存在时间 return false; // 烟花要消失 }else{ return true; // 烟花在燃放 }}// 爆炸颗粒工厂function ParticleFactory(sx, sy, hue){ var array = new Array(); var size = random(50, 500); // 烟花数量 var scope = random(50, 500); // 烟花范围 for(var i = 0 ; i < size ; i++){ array.push(new Particle(sx, sy, hue)); } return array;}</script> <!-- 工具类 --><script>// 随机数function random(min, max) { return Math.random() * (max - min) + min;}// 随机颜色function randomRgba(min, max) { var r = random(0, 255); var g = random(0, 255); var b = random(0, 255); var opacity = random(0.1, 1); var color = "rgba(" + r + ", " + g + ", " + b + ", " + opacity + ")"; return color;}// 计算角度function countDistance(x, y, xx, yy) { var a = x - xx; var b = y - yy; return Math.sqrt(a * a + b * b);}// 清空画布function clear(){// ctx.clearRect(0, 0, width, height); ctx.globalCompositeOperation = 'destination-out'; ctx.fillStyle = 'rgba(0, 0, 0, 0.9)'; ctx.fillRect(0, 0, width, height); ctx.globalCompositeOperation = 'lighter';}// 画线function draw(obj){ ctx.beginPath(); ctx.moveTo(obj.old.x, obj.old.y); ctx.lineTo(obj.x, obj.y); var color = 'hsla(' + obj.hue + ',100%,' + obj.brightness + '%,' + obj.alpha + ')'; ctx.strokeStyle = color; ctx.stroke();}</script></head> <body> <canvas style="background-color:black;" id="canvas"></canvas> </body><script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var width = window.innerWidth - 10, height = window.innerHeight - 10; var widthBorder = width * 0.1; var heightBorder = height * 0.1; var hue = 20; canvas.width = width; canvas.height = height; canvas.onclick = function(){ moveParticle(ParticleFactory(event.x, event.y, hue+=10)) } canvas.oncontextmenu = function(e){ e.preventDefault(); clear(); } // 组合 function run(){ var x = width / 2; var y = height; var xx = random(widthBorder, width - widthBorder); var yy = random(heightBorder, height - heightBorder); var firework = new Firework(x, y, xx, yy, hue); hue += 10; moveFirework(firework); } // 烟花线 function moveFirework(f){ var id = setInterval(function(){ // 设置不画线 draw(f); if(!f.update()){ draw(f); clearInterval(id); moveParticle(ParticleFactory(f.x, f.y, f.hue)); } }, 100); } // 爆炸屑 function moveParticle(arr){ var id = setInterval(function(){ var i = arr.length; var o = null; if(i){ // clear(); }else{ clearInterval(id); } while(i--){ o = arr; if(o.update()){ draw(o); }else{ arr.splice(i, 1); } } }, 70); } </script></html>
喜欢的一键三连哦!
果果为大家带来了
C/C++的学习基础教程及相关资源
(仅仅是部分截图哦)
资料领取方式:
- 关注本号
- 私信“111”即可获取领取方式哦
标题:我的世界手机版1.2烟花代码是什么 烟花火箭实体ID,
链接:https://www.miaoshengapp.cn/yxgl/180474.html
版权:文章转载自网络,如有侵权,请联系删除!
资讯推荐
热门手游
更多
热门攻略
-
我的世界手机版1.2烟花代码是什么 烟花火箭实体ID, 2023-10-07
-
我的世界怪物大乱斗什么时候出 公测上线时间预告,我的世界怪物大乱斗是哪个版本的 2023-10-07
-
我的世界怎么获得唱片 唱片获取方法, 2023-10-07
-
我的世界怎么给权限,我的世界怎么给盔甲染色 2023-10-07
-
我的世界怎么快速找到村庄,我的世界快速找到村庄的指令 2023-10-07
-
我的世界怎么制作模组 我的世界制作模组方法介绍, 2023-10-07
-
我的世界忠诚附魔书作用是什么,我的世界中的忠诚附魔书有什么用 2023-10-07
-
我的世界忍者生存和通灵兽签订契约图文教程, 2023-10-07
-
我的世界幸运方块怎么合成 分享幸运方块玩法攻略, 2023-10-07
-
我的世界平滑石头最佳合成攻略 平滑石头怎么合成,我的世界平滑石头怎么获得 2023-10-07
热游排行榜