https://github.com/xiaoketx/fireworks
import pygame
import random
import os
import math
# 初始化信息
WIDTH = 1152
HEIGHT = 720
FPS = 60
img_path = os.path.join(os.path.dirname(__file__), "img")
audio_path = os.path.join(os.path.dirname(__file__), "audio")
def randv(): # 生成随机初速度
v = random.random() * 22
while (v < 15):
v = random.random() * 22
return v
def rand_color(): # 随机生成烟花颜色
color_list = [(244, 214, 215), (55, 20, 88), (151, 68, 114), (230, 190, 146), (244, 252, 255), (230, 197, 246), (181, 180, 222), (191, 85, 177), (255, 199, 209), (200, 50, 66), (223, 219, 216), (158, 167, 164), (173, 254, 255), (185, 219, 149), (72, 141, 235), (252, 117, 249), (232, 169, 180), (155, 157, 170), (182, 98, 130)]
return color_list[random.randint(0, len(color_list) - 1)]
def add_fireworks(list): # 添加新的烟花
if (random.random() < 3 / 60):
list.append(Fireworks())
class Item(pygame.sprite.Sprite): # 烟花颗粒
def __init__(self, vy, x, color):
pygame.sprite.Sprite.__init__(self)
self.image = pygame.Surface((15, 15))
self.image.fill((0, 0, 0))
self.image.set_colorkey((0, 0, 0))
if color == (-1, -1, -1): # 纯色烟花或者混色烟花
color = rand_color()
self.color = color
self.radius = randv() / 5 # 烟花颗粒的半径
pygame.draw.circle(self.image, self.color, (8, 8), self.radius) # 形成圆形烟花颗粒
self.rect = self.image.get_rect()
self.rect.center = (x, HEIGHT - 10) # 初始位置
self.vx = 0
self.vy = vy
self.is_explode = False # 记录是否已经爆炸过
self.count = 0
def update(self, radius):
self.move()
if self.rect.y > HEIGHT - 20 and self.is_explode:
self.kill()
if self.vy < 2 and not self.is_explode:
self.explode(radius)
if self.is_explode: # 爆炸后一段时间删除颗粒
self.count += 1
if self.count > 40:
self.kill()
def move(self): # vx为水平方向速度,vy为竖直方向速度
t = 1 / 60
g = 9.8
self.rect.x += self.vx * t * 25
self.rect.y -= (2 * self.vy - g * t) * t / 2 * 25
self.vy = self.vy - g * t
def explode(self, radius):
self.is_explode = True
angle = random.randint(0, 359) * math.pi / 180
self.vx += math.cos(angle) * radius
self.vy -= math.sin(angle) * radius
class Fireworks(): # 烟花列表
def __init__(self):
self.list = pygame.sprite.Group()
self.vy = randv()
self.x = WIDTH * random.random()
self.num = random.randint(30, 40) # 单个烟花随机烟花颗粒数量
color = rand_color()
if random.randint(1, 2) == 1: # 纯色烟花或者混色烟花
color = (-1, -1, -1)
self.list.add(Item(self.vy, self.x, color) for i in range(self.num))
def draw(self, screen):
self.list.draw(screen)
def update(self):
radius = random.random() * 10
while (radius < 8):
radius = random.random() * 10
self.list.update(radius)
def main():
pygame.init()
pygame.mixer.init()
screen = pygame.display.set_mode((WIDTH, HEIGHT)) # 主画布大小
pygame.display.set_caption("Fireworks --made by xketx")
pygame.display.set_icon(pygame.image.load(os.path.join((img_path), "fireworks.png")).convert()) # 设置图标
bgm = pygame.mixer.music.load(os.path.join(audio_path, "bgm.mp3")) # 背景音乐
pygame.mixer.music.play(-1) # 循环播放背景音乐
clock = pygame.time.Clock()
fireworks_list = [Fireworks() for i in range(5)] # 初始烟花数目
running = True # 是否循环
count = 2
while running: # 循环主程序
clock.tick(FPS)
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
if count == 2:
screen.blit(pygame.image.load(os.path.join(img_path, "bgp.jpg")), (0, 0)) # 设置背景图片
count = 0
add_fireworks(fireworks_list)
for item in fireworks_list:
item.update()
item.draw(screen)
pygame.display.flip()
count += 1
pygame.QUIT
exit()
if __name__ == "__main__":
main()import pygame
import random
import os
import math
import time
# 初始化信息
WIDTH = 1152
HEIGHT = 720
FPS = 60
img_path = os.path.join(os.path.dirname(__file__), "img")
audio_path = os.path.join(os.path.dirname(__file__), "audio")
def randv(): # 生成随机初速度
v = random.random() * 22
while (v < 15):
v = random.random() * 22
return v
def rand_color(): # 随机生成烟花颜色
color_list = [(244, 214, 215), (55, 20, 88), (151, 68, 114), (230, 190, 146), (244, 252, 255), (230, 197, 246), (181, 180, 222), (191, 85, 177), (255, 199, 209), (200, 50, 66), (223, 219, 216), (158, 167, 164), (173, 254, 255), (185, 219, 149), (72, 141, 235), (252, 117, 249), (232, 169, 180), (155, 157, 170), (182, 98, 130), (248, 215, 20), (136, 214, 253), (221, 0, 27)]
return color_list[random.randint(0, len(color_list) - 1)]
def add_fireworks(list): # 添加新的烟花
if (random.random() < 3 / 60):
list.append(Fireworks())
class Item(pygame.sprite.Sprite): # 烟花颗粒
def __init__(self, vy, x, color):
pygame.sprite.Sprite.__init__(self)
self.image = pygame.Surface((15, 15))
self.image.fill((0, 0, 0))
self.image.set_colorkey((0, 0, 0))
if color == (-1, -1, -1): # 纯色烟花或者混色烟花
color = rand_color()
self.color = color
self.radius = randv() / 5 # 烟花颗粒的半径
pygame.draw.circle(self.image, self.color, (8, 8), self.radius) # 形成圆形烟花颗粒
self.rect = self.image.get_rect()
self.rect.center = (x, HEIGHT - 10) # 初始位置
self.vx = 0
self.vy = vy
self.is_explode = False # 记录是否已经爆炸过
self.count = 0
def update(self, radius):
self.move()
if self.rect.y > HEIGHT - 20 and self.is_explode:
self.kill()
if self.vy < 1 and not self.is_explode:
self.explode(radius)
if self.is_explode: # 爆炸后一段时间删除颗粒
self.count += 1
if self.count > 55:
self.kill()
def move(self): # vx为水平方向速度,vy为竖直方向速度
t = 1 / 60
g = 9.8
self.rect.x += self.vx * t * 25
self.rect.y -= (2 * self.vy - g * t) * t / 2 * 25
self.vy = self.vy - g * t
def explode(self, radius): # 爆炸函数，改变速度大小和方向
self.is_explode = True
angle = random.randint(0, 359) * math.pi / 180
self.vx += math.cos(angle) * radius
self.vy -= math.sin(angle) * radius
class Fireworks(): # 烟花列表
def __init__(self):
self.list = pygame.sprite.Group()
self.vy = randv()
self.x = WIDTH * random.random()
self.num = random.randint(30, 40) # 单个烟花随机烟花颗粒数量
color = rand_color()
if random.randint(1, 2) == 1: # 纯色烟花或者混色烟花
color = (-1, -1, -1)
self.list.add(Item(self.vy, self.x, color) for i in range(self.num))
self.start_time = time.time() # 记录开始时间，一定时间后删除
def draw(self, screen):
self.list.draw(screen)
def update(self): # 更新后返回是否删除烟花
radius = random.random() * 10
while (radius < 8):
radius = random.random() * 10
self.list.update(radius)
if (time.time() - self.start_time > 5): # 定时删除
return True
else:
return False
def main():
pygame.init()
pygame.mixer.init()
screen = pygame.display.set_mode((WIDTH, HEIGHT)) # 主画布大小
pygame.display.set_caption("Fireworks --made by xketx")
pygame.display.set_icon(pygame.image.load(os.path.join((img_path), "fireworks.png")).convert()) # 设置图标
bgm = pygame.mixer.music.load(os.path.join(audio_path, "bgm.mp3")) # 背景音乐
pygame.mixer.music.play(-1) # 循环播放背景音乐
clock = pygame.time.Clock()
fireworks_list = [Fireworks() for i in range(5)] # 初始烟花数目
running = True # 是否循环
count = 2
while running: # 循环主程序
clock.tick(FPS)
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
if count == 2:
screen.blit(pygame.image.load(os.path.join(img_path, "bgp.jpg")), (0, 0)) # 设置背景图片
count = 0
count += 1
add_fireworks(fireworks_list)
dels = [] # 需要删除的烟花的索引
for index, item in enumerate(fireworks_list):
if item.update():
dels.append(index)
item.draw(screen)
pygame.display.flip()
for i in dels: # 删除烟花
del fireworks_list[i]
pygame.QUIT
exit()
if __name__ == "__main__":
main()<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>HTML5 Canvas烟花特效 场景十分华丽在线演示</title>
<style>
/* basic styles for black background and crosshair cursor */
body {
background: #000;
margin: 0;
}
canvas {
cursor: crosshair;
display: block;
}
</style>
</head>
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
<script>
// when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval
// not supported in all browsers though and sometimes needs a prefix, so we need a shim
window.requestAnimFrame = ( function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ) {
window.setTimeout( callback, 1000 / 60 );
};
})();
// now we will setup our basic variables for the demo
var canvas = document.getElementById( 'canvas' ),
ctx = canvas.getContext( '2d' ),
// full screen dimensions
cw = window.innerWidth,
ch = window.innerHeight,
// firework collection
fireworks = [],
// particle collection
particles = [],
// starting hue
hue = 120,
// when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
limiterTotal = 5,
limiterTick = 0,
// this will time the auto launches of fireworks, one launch per 80 loop ticks
timerTotal = 80,
timerTick = 0,
mousedown = false,
// mouse x coordinate,
mx,
// mouse y coordinate
my;
// set canvas dimensions
canvas.width = cw;
canvas.height = ch;
// now we are going to setup our function placeholders for the entire demo
// get a random number within a range
function random( min, max ) {
return Math.random() * ( max - min ) + min;
}
// calculate the distance between two points
function calculateDistance( p1x, p1y, p2x, p2y ) {
var xDistance = p1x - p2x,
yDistance = p1y - p2y;
return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}
// create firework
function Firework( sx, sy, tx, ty ) {
// actual coordinates
this.x = sx;
this.y = sy;
// starting coordinates
this.sx = sx;
this.sy = sy;
// target coordinates
this.tx = tx;
this.ty = ty;
// distance from starting point to target
this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
this.distanceTraveled = 0;
// track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails
this.coordinates = [];
this.coordinateCount = 3;
// populate initial coordinate collection with the current coordinates
while( this.coordinateCount-- ) {
this.coordinates.push( [ this.x, this.y ] );
}
this.angle = Math.atan2( ty - sy, tx - sx );
this.speed = 2;
this.acceleration = 1.05;
this.brightness = random( 50, 70 );
// circle target indicator radius
this.targetRadius = 1;
}
// update firework
Firework.prototype.update = function( index ) {
// remove last item in coordinates array
this.coordinates.pop();
// add current coordinates to the start of the array
this.coordinates.unshift( [ this.x, this.y ] );
// cycle the circle target indicator radius
if( this.targetRadius < 8 ) {
this.targetRadius += 0.3;
} else {
this.targetRadius = 1;
}
// speed up the firework
this.speed *= this.acceleration;
// get the current velocities based on angle and speed
var vx = Math.cos( this.angle ) * this.speed,
vy = Math.sin( this.angle ) * this.speed;
// how far will the firework have traveled with velocities applied?
this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
// if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached
if( this.distanceTraveled >= this.distanceToTarget ) {
createParticles( this.tx, this.ty );
// remove the firework, use the index passed into the update function to determine which to remove
fireworks.splice( index, 1 );
} else {
// target not reached, keep traveling
this.x += vx;
this.y += vy;
}
}
// draw firework
Firework.prototype.draw = function() {
ctx.beginPath();
// move to the last tracked coordinate in the set, then draw a line to the current x and y
ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
ctx.lineTo( this.x, this.y );
ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
ctx.stroke();
ctx.beginPath();
// draw the target for this firework with a pulsing circle
ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
ctx.stroke();
}
// create particle
function Particle( x, y ) {
this.x = x;
this.y = y;
// track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
this.coordinates = [];
this.coordinateCount = 5;
while( this.coordinateCount-- ) {
this.coordinates.push( [ this.x, this.y ] );
}
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 10 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 1;
// set the hue to a random number +-20 of the overall hue variable
this.hue = random( hue - 20, hue + 20 );
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}
// update particle
Particle.prototype.update = function( index ) {
// remove last item in coordinates array
this.coordinates.pop();
// add current coordinates to the start of the array
this.coordinates.unshift( [ this.x, this.y ] );
// slow down the particle
this.speed *= this.friction;
// apply velocity
this.x += Math.cos( this.angle ) * this.speed;
this.y += Math.sin( this.angle ) * this.speed + this.gravity;
// fade out the particle
this.alpha -= this.decay;
// remove the particle once the alpha is low enough, based on the passed in index
if( this.alpha <= this.decay ) {
particles.splice( index, 1 );
}
}
// draw particle
Particle.prototype.draw = function() {
ctx. beginPath();
// move to the last tracked coordinates in the set, then draw a line to the current x and y
ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
ctx.lineTo( this.x, this.y );
ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
ctx.stroke();
}
// create particle group/explosion
function createParticles( x, y ) {
// increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though
var particleCount = 30;
while( particleCount-- ) {
particles.push( new Particle( x, y ) );
}
}
// main demo loop
function loop() {
// this function will run endlessly with requestAnimationFrame
requestAnimFrame( loop );
// increase the hue to get different colored fireworks over time
hue += 0.5;
// normally, clearRect() would be used to clear the canvas
// we want to create a trailing effect though
// setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely
ctx.globalCompositeOperation = 'destination-out';
// decrease the alpha property to create more prominent trails
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect( 0, 0, cw, ch );
// change the composite operation back to our main mode
// lighter creates bright highlight points as the fireworks and particles overlap each other
ctx.globalCompositeOperation = 'lighter';
// loop over each firework, draw it, update it
var i = fireworks.length;
while( i-- ) {
fireworks[ i ].draw();
fireworks[ i ].update( i );
}
// loop over each particle, draw it, update it
var i = particles.length;
while( i-- ) {
particles[ i ].draw();
particles[ i ].update( i );
}
// launch fireworks automatically to random coordinates, when the mouse isn't down
if( timerTick >= timerTotal ) {
if( !mousedown ) {
// start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen
fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
timerTick = 0;
}
} else {
timerTick++;
}
// limit the rate at which fireworks get launched when mouse is down
if( limiterTick >= limiterTotal ) {
if( mousedown ) {
// start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
fireworks.push( new Firework( cw / 2, ch, mx, my ) );
limiterTick = 0;
}
} else {
limiterTick++;
}
}
// mouse event bindings
// update the mouse coordinates on mousemove
canvas.addEventListener( 'mousemove', function( e ) {
mx = e.pageX - canvas.offsetLeft;
my = e.pageY - canvas.offsetTop;
});
// toggle mousedown state and prevent canvas from being selected
canvas.addEventListener( 'mousedown', function( e ) {
e.preventDefault();
mousedown = true;
});
canvas.addEventListener( 'mouseup', function( e ) {
e.preventDefault();
mousedown = false;
});
// once the window loads, we are ready for some fireworks!
window.onload = loop;
</script>
4967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
