烟花代码|html(猿如意AI源码-参数微调)

这篇具有很好参考价值的文章主要介绍了烟花代码|html(猿如意AI源码-参数微调)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

每到 新年的时候捏,就要放烟花啦!但是放烟花太多会危害环境,所以互联网时代的电子烟花平替就代替实体烟花帮我们除旧迎新啦!今天就po一个找到滴猿如意烟花网页代码,开源滴,然后改了一些背景参数,记录一下,新年时给大家送祝福(●'◡'●)

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>烟花代码</title>

<style>

html,

body {

height: 100%;

margin: 0;

padding: 0;

}

ul,

li {

text-indent: 0;

text-decoration: none;

margin: 0;

padding: 0;

}

img {

border: 0;

}

body {

background-color: #000;

}

canvas {

cursor: crosshair;

display: block;

left: 0;

position: absolute;

top: 0;

z-index: 20;

}

</style>

</head>

<body>

<script

type="text/javascript"

src="https://cdn-static-devbit.csdn.net/devbit-static/js/jquery-3.3.1.min.js"

></script>

<script type="text/javascript">

$(function () {

var Fireworks = function () {

var self = this;

var rand = function (rMi, rMa) {

return ~~(Math.random() * (rMa - rMi + 1) + rMi);

};

var hitTest = function (x1, y1, w1, h1, x2, y2, w2, h2) {

return !(

x1 + w1 < x2 ||

x2 + w2 < x1 ||

y1 + h1 < y2 ||

y2 + h2 < y1

);

};

window.requestAnimFrame = (function () {

return (

window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function (a) {

window.setTimeout(a, 1e3 / 60);

}

);

})();

self.init = function () {

self.canvas = document.createElement("canvas");

self.canvas.width = self.cw = $(window).innerWidth();

self.canvas.height = self.ch = $(window).innerHeight();

self.particles = [];

self.partCount = 150;

self.fireworks = [];

self.mx = self.cw / 2;

self.my = self.ch / 2;

self.currentHue = 30;

self.partSpeed = 5;

self.partSpeedVariance = 10;

self.partWind = 50;

self.partFriction = 5;

self.partGravity = 1;

self.hueMin = 0;

self.hueMax = 360;

self.fworkSpeed = 4;

self.fworkAccel = 10;

self.hueVariance = 30;

self.flickerDensity = 25;

self.showShockwave = true;

self.showTarget = false;

self.clearAlpha = 25;

$(document.body).append(self.canvas);

self.ctx = self.canvas.getContext("2d");

self.ctx.lineCap = "round";

self.ctx.lineJoin = "round";

self.lineWidth = 1;

self.bindEvents();

self.canvasLoop();

self.canvas.onselectstart = function () {

return false;

};

};

self.createParticles = function (x, y, hue) {

var countdown = self.partCount;

while (countdown--) {

var newParticle = {

x: x,

y: y,

coordLast: [

{ x: x, y: y },

{ x: x, y: y },

{ x: x, y: y }

],

angle: rand(0, 360),

speed: rand(

self.partSpeed - self.partSpeedVariance <= 0

? 1

: self.partSpeed - self.partSpeedVariance,

self.partSpeed + self.partSpeedVariance

),

friction: 1 - self.partFriction / 100,

gravity: self.partGravity / 2,

hue: rand(hue - self.hueVariance, hue + self.hueVariance),

brightness: rand(50, 80),

alpha: rand(40, 100) / 100,

decay: rand(10, 50) / 1000,

wind: (rand(0, self.partWind) - self.partWind / 2) / 25,

lineWidth: self.lineWidth

};

self.particles.push(newParticle);

}

};

self.updateParticles = function () {

var i = self.particles.length;

while (i--) {

var p = self.particles[i];

var radians = (p.angle * Math.PI) / 180;

var vx = Math.cos(radians) * p.speed;

var vy = Math.sin(radians) * p.speed;

p.speed *= p.friction;

p.coordLast[2].x = p.coordLast[1].x;

p.coordLast[2].y = p.coordLast[1].y;

p.coordLast[1].x = p.coordLast[0].x;

p.coordLast[1].y = p.coordLast[0].y;

p.coordLast[0].x = p.x;

p.coordLast[0].y = p.y;

p.x += vx;

p.y += vy;

p.y += p.gravity;

p.angle += p.wind;

p.alpha -= p.decay;

if (

!hitTest(

0,

0,

self.cw,

self.ch,

p.x - p.radius,

p.y - p.radius,

p.radius * 2,

p.radius * 2

) ||

p.alpha < 0.05

) {

self.particles.splice(i, 1);

}

}

};

self.drawParticles = function () {

var i = self.particles.length;

while (i--) {

var p = self.particles[i];

var coordRand = rand(1, 3) - 1;

self.ctx.beginPath();

self.ctx.moveTo(

Math.round(p.coordLast[coordRand].x),

Math.round(p.coordLast[coordRand].y)

);

self.ctx.lineTo(Math.round(p.x), Math.round(p.y));

self.ctx.closePath();

self.ctx.strokeStyle =

"hsla(" +

p.hue +

", 100%, " +

p.brightness +

"%, " +

p.alpha +

")";

self.ctx.stroke();

if (self.flickerDensity > 0) {

var inverseDensity = 50 - self.flickerDensity;

if (rand(0, inverseDensity) === inverseDensity) {

self.ctx.beginPath();

self.ctx.arc(

Math.round(p.x),

Math.round(p.y),

rand(p.lineWidth, p.lineWidth + 3) / 2,

0,

Math.PI * 2,

false

);

self.ctx.closePath();

var randAlpha = rand(50, 100) / 100;

self.ctx.fillStyle =

"hsla(" +

p.hue +

", 100%, " +

p.brightness +

"%, " +

randAlpha +

")";

self.ctx.fill();

}

}

}

};

self.createFireworks = function (startX, startY, targetX, targetY) {

var newFirework = {

x: startX,

y: startY,

startX: startX,

startY: startY,

hitX: false,

hitY: false,

coordLast: [

{ x: startX, y: startY },

{ x: startX, y: startY },

{ x: startX, y: startY }

],

targetX: targetX,

targetY: targetY,

speed: self.fworkSpeed,

angle: Math.atan2(targetY - startY, targetX - startX),

shockwaveAngle:

Math.atan2(targetY - startY, targetX - startX) +

90 * (Math.PI / 180),

acceleration: self.fworkAccel / 100,

hue: self.currentHue,

brightness: rand(50, 80),

alpha: rand(50, 100) / 100,

lineWidth: self.lineWidth

};

self.fireworks.push(newFirework);

};

self.updateFireworks = function () {

var i = self.fireworks.length;

while (i--) {

var f = self.fireworks[i];

self.ctx.lineWidth = f.lineWidth;

(vx = Math.cos(f.angle) * f.speed),

(vy = Math.sin(f.angle) * f.speed);

f.speed *= 1 + f.acceleration;

f.coordLast[2].x = f.coordLast[1].x;

f.coordLast[2].y = f.coordLast[1].y;

f.coordLast[1].x = f.coordLast[0].x;

f.coordLast[1].y = f.coordLast[0].y;

f.coordLast[0].x = f.x;

f.coordLast[0].y = f.y;

if (f.startX >= f.targetX) {

if (f.x + vx <= f.targetX) {

f.x = f.targetX;

f.hitX = true;

} else {

f.x += vx;

}

} else {

if (f.x + vx >= f.targetX) {

f.x = f.targetX;

f.hitX = true;

} else {

f.x += vx;

}

}

if (f.startY >= f.targetY) {

if (f.y + vy <= f.targetY) {

f.y = f.targetY;

f.hitY = true;

} else {

f.y += vy;

}

} else {

if (f.y + vy >= f.targetY) {

f.y = f.targetY;

f.hitY = true;

} else {

f.y += vy;

}

}

if (f.hitX && f.hitY) {

self.createParticles(f.targetX, f.targetY, f.hue);

self.fireworks.splice(i, 1);

}

}

};

self.drawFireworks = function () {

var i = self.fireworks.length;

self.ctx.globalCompositeOperation = "lighter";

while (i--) {

var f = self.fireworks[i];

self.ctx.lineWidth = f.lineWidth;

var coordRand = rand(1, 3) - 1;

self.ctx.beginPath();

self.ctx.moveTo(

Math.round(f.coordLast[coordRand].x),

Math.round(f.coordLast[coordRand].y)

);

self.ctx.lineTo(Math.round(f.x), Math.round(f.y));

self.ctx.closePath();

self.ctx.strokeStyle =

"hsla(" +

f.hue +

", 100%, " +

f.brightness +

"%, " +

f.alpha +

")";

self.ctx.stroke();

if (self.showTarget) {

self.ctx.save();

self.ctx.beginPath();

self.ctx.arc(

Math.round(f.targetX),

Math.round(f.targetY),

rand(1, 8),

0,

Math.PI * 2,

false

);

self.ctx.closePath();

self.ctx.lineWidth = 1;

self.ctx.stroke();

self.ctx.restore();

}

if (self.showShockwave) {

self.ctx.save();

self.ctx.translate(Math.round(f.x), Math.round(f.y));

self.ctx.rotate(f.shockwaveAngle);

self.ctx.beginPath();

self.ctx.arc(0, 0, 1 * (f.speed / 5), 0, Math.PI, true);

self.ctx.strokeStyle =

"hsla(" +

f.hue +

", 100%, " +

f.brightness +

"%, " +

rand(25, 60) / 100 +

")";

self.ctx.lineWidth = f.lineWidth;

self.ctx.stroke();

self.ctx.restore();

}

}

};

self.bindEvents = function () {

$(window).on("resize", function () {

clearTimeout(self.timeout);

self.timeout = setTimeout(function () {

self.canvas.width = self.cw = $(window).innerWidth();

self.canvas.height = self.ch = $(window).innerHeight();

self.ctx.lineCap = "round";

self.ctx.lineJoin = "round";

}, 100);

});

$(self.canvas).on("mousedown", function (e) {

self.mx = e.pageX - self.canvas.offsetLeft;

self.my = e.pageY - self.canvas.offsetTop;

self.currentHue = rand(self.hueMin, self.hueMax);

self.createFireworks(self.cw / 2, self.ch, self.mx, self.my);

$(self.canvas).on("mousemove.fireworks", function (e) {

self.mx = e.pageX - self.canvas.offsetLeft;

self.my = e.pageY - self.canvas.offsetTop;

self.currentHue = rand(self.hueMin, self.hueMax);

self.createFireworks(self.cw / 2, self.ch, self.mx, self.my);

});

});

$(self.canvas).on("mouseup", function (e) {

$(self.canvas).off("mousemove.fireworks");

});

};

self.clear = function () {

self.particles = [];

self.fireworks = [];

self.ctx.clearRect(0, 0, self.cw, self.ch);

};

self.canvasLoop = function () {

requestAnimFrame(self.canvasLoop, self.canvas);

self.ctx.globalCompositeOperation = "destination-out";

self.ctx.fillStyle = "rgba(0,0,0," + self.clearAlpha / 100 + ")";

self.ctx.fillRect(0, 0, self.cw, self.ch);

self.updateFireworks();

self.updateParticles();

self.drawFireworks();

self.drawParticles();

};

self.init();

};

var fworks = new Fireworks();

});

</script>

</body>

</html>文章来源地址https://www.toymoban.com/news/detail-769289.html

到了这里,关于烟花代码|html(猿如意AI源码-参数微调)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 实战: 跨年烟花代码的实现(附源码)

    目录 前言 一、pandas是什么? 二、代码结构 1.介绍主html代码 2. js文件介绍 GameCanvas.js script.js 运行效果 本文章将介绍跨年烟花代码的实现以及源代码 提示:以下是本篇文章正文内容 示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。 代码如下:

    2024年01月22日
    浏览(43)
  • 【python】python新年烟花代码【附源码】

             欢迎来到英杰社区 https://bbs.csdn.net/topics/617804998          新年的钟声即将敲响,为了庆祝这个喜庆的时刻,我们可以用 Python 编写一个炫彩夺目的烟花盛典。本文将详细介绍如何使用 Pygame 库创建一个令人惊叹的烟花效果。            (1)、导入必要的模块

    2024年02月02日
    浏览(43)
  • 帮我写一个跨年html倒计时代码,达到预定时间切换为放烟花

    以下是一个简单的 HTML 倒计时代码,在跨年时会切换为放烟花的效果: 上面的

    2024年02月03日
    浏览(61)
  • 【2022最新Python跨年烟花代码,可自选背景音乐,快收藏起来吧 附完整源码】

    大家好,我是钱der,英文名chandler。 还有两天就到元旦了!!!很多小伙伴已经和朋友约好一起跨年了 但是现在很多地方都禁止烟花燃放,跨年没有烟花总感觉缺少一点味道~为了实现在家和朋友看烟花的愿望~这篇文章给大家带来2022跨年烟花代码,让大家都能在家和朋友一起

    2024年02月11日
    浏览(42)
  • Python 代码打造小 AI ,罗列博文笔记总索引列表,自动生成“我的博文笔记总索引”博文 HTML5 源码文本

    Python 代码打造小 AI ,获取笔记信息,自动阅读量降序编排索引列表,生成 HTML5 源码文本。 【学习的细节是欢悦的历程】 Python 官网 :https://www.python.org/ Free :大咖免费“ 圣经 ”教程《 python 完全自学教程 》,不仅仅是基础那么简单…… 地址:https://lqpybook.readthedocs.io/   

    2023年04月22日
    浏览(63)
  • html--烟花

    |

    2024年04月16日
    浏览(32)
  • html--烟花3

    2024年04月13日
    浏览(39)
  • 如何用html画出一个烟花?

    问题描述:如何用html画出一个烟花? 问题解答: 将下面代码复制到一个txt文件中,然后修改后缀txt→html,用浏览器打开就是烟花了。 效果如下:

    2024年01月24日
    浏览(41)
  • HTML5庆祝生日蛋糕烟花特效

    HTML5庆祝生日蛋糕烟花特效 以上代码使用HTML5的元素和JavaScript实现了一个简单的生日蛋糕烟花特效。在页面加载完成后,会自动启动动画,当鼠标点击页面时,会在鼠标位置发射一个烟花。

    2023年04月09日
    浏览(41)
  • 【HTML+CSS+JavaScript】实现鼠标点击烟花效果

    本文主要讲解三种烟花效果(爆炸型、心型、圆形),文章末尾附有完整的代码和图片获取链接。 效果图(一) - 心型 : 效果图(二) - 圆型 : 效果图(三) - 爆炸型 : (1) HTML部分代码 (2) CSS部分代码 (3) 内部的JavaScript部分代码 (1) HTML部分代码 (2) CSS部分代码 (3) 内部的JavaScript部分

    2024年02月01日
    浏览(91)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包