烟花爆炸

本文介绍了一个使用Java Applet创建烟花效果的示例程序。该程序通过监听鼠标点击事件来触发烟花动画,并利用线程控制烟花上升和爆炸的过程,实现了简单的烟花视觉效果。
package zuoye;
import java.awt.*;
import java.applet.*;
import java.awt.event.*;


import javax.swing.*;


public class Fireworks extends Applet implements MouseListener,Runnable
{


private static final long serialVersionUID = -7006042467213323331L;
int x,y;
 int top,point;
 
 public void init() 
 {
 x = 0;
 y = 0;
 //设置背景色为黑色
 setBackground(Color.black);
 addMouseListener(this);
 }


 public void paint(Graphics g) 
 { 
 
 }
 
 public static void main(String args[]) {
 Fireworks applet = new Fireworks();
 JFrame frame = new JFrame("TextAreaNew");
 frame.addWindowListener(new WindowAdapter() {
 public void windowClosing(WindowEvent e){
 System.exit(0);
 }
 });
 frame.getContentPane().add(
 applet, BorderLayout.CENTER);
 frame.setSize(800,400);
 applet.init();
 applet.start();
 frame.setVisible(true);
 }
 
 public void run()
 {
 //变量初始化
 Graphics g1;
 g1 = getGraphics();
 int y_move,y_click,x_click;
 int v;
 x_click = x;
 y_click = y;
 y_move = 400;
 v = 3;
 int r,g,b;


 while(y_move > y_click)
 { 
 g1.setColor(Color.black);
 g1.fillOval(x_click,y_move,5,5);
 y_move -= 5;
 r = (((int)Math.round(Math.random()*4321))%200)+55;
 g = (((int)Math.round(Math.random()*4321))%200)+55;
 b = (((int)Math.round(Math.random()*4321))%200)+55;
 g1.setColor(new Color(r,g,b));
 g1.fillOval(x_click,y_move,5,5);
 for(int j = 0 ;j<=10;j++)
 { 
 if(r>55) r -= 20;
 if(g>55) g -= 20;
 if(b>55) b -=20;
 g1.setColor(new Color(r,g,b));
 g1.fillOval(x_click,y_move+j*5,5,5);
 }
 g1.setColor(Color.black);
 g1.fillOval(x_click,y_move+5*10,5,5);


 try 
 {
 Thread.currentThread();
Thread.sleep(v++);
 } catch (InterruptedException e) {}
 }
 
 for(int j=12;j>=0;j--)
 {
 g1.setColor(Color.black);
 g1.fillOval(x_click,y_move+(j*5),5,5);
 try 
 {
 Thread.currentThread();
Thread.sleep((v++)/3);
 } catch (InterruptedException e) {}
 }
 
 y_move = 400;
 g1.setColor(Color.black);
 while(y_move > y_click)
 { 
 g1.fillOval(x_click-2,y_move,9,5);
 y_move -= 5;
 }
 
 v = 15;
 for(int i=0;i<=25;i++)
 {
 r = (((int)Math.round(Math.random()*4321))%200)+55;
 g = (((int)Math.round(Math.random()*4321))%200)+55;
 b = (((int)Math.round(Math.random()*4321))%200)+55;
 g1.setColor(new Color(r,g,b));
 g1.drawOval(x_click-3*i,y_click-3*i,6*i,6*i);
 if(i<23) 
 {
 g1.drawOval(x_click-3*(i+1),y_click-3*(i+1),6*(i+1),6*(i+1));
 g1.drawOval(x_click-3*(i+2),y_click-3*(i+2),6*(i+2),6*(i+2));
 }
 try 
 {
 Thread.currentThread();
Thread.sleep(v++);
 } catch (InterruptedException e) {}
 g1.setColor(Color.black);
 g1.drawOval(x_click-3*i,y_click-3*i,6*i,6*i);
 
 }


}
 
 public void mousePressed(MouseEvent e)
 {
 x = e.getX();
 y = e.getY();
 Thread one;
 one = new Thread(this);
 one.start();
 one = null;
 }


 public void mouseReleased(MouseEvent e)
 { 
 }
 
 public void mouseEntered(MouseEvent e)
 {
 }
 
 public void mouseExited(MouseEvent e)
 {
 }


 public void mouseClicked(MouseEvent e)
 {
 }
 
}
### 三级标题:实现烟花爆炸特效的表白网页 要实现一个带有烟花爆炸特效的表白网页,可以结合HTML、CSS和JavaScript技术,尤其是使用Canvas元素来绘制动态的烟花效果。以下是一个完整的实现方案,包括基本的HTML结构、CSS样式和JavaScript逻辑。 #### HTML结构 HTML部分定义了页面的基本结构,包含一个Canvas元素用于绘制烟花效果,以及一些文本内容用于表白。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>浪漫表白 - 烟花特效</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="canvas"></canvas> <div class="message"> <h1>亲爱的,我喜欢你!</h1> <p>这是我为你写的专属表白网页❤</p> </div> <script src="script.js"></script> </body> </html> ``` #### CSS样式 CSS部分定义了页面的整体样式,包括背景颜色、文字对齐方式以及Canvas的定位。 ```css body { margin: 0; padding: 0; overflow: hidden; font-family: "Microsoft Yahei", sans-serif; background-color: #000; color: #fff; } canvas { position: fixed; top: 0; left: 0; z-index: -1; } .message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } h1 { font-size: 2em; color: #ff3366; } p { font-size: 1.5em; color: #ffccdd; } ``` #### JavaScript逻辑 JavaScript部分使用Canvas绘制烟花效果,通过粒子系统模拟烟花爆炸和运动。 ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; class Particle { constructor(x, y, color) { this.x = x; this.y = y; this.color = color; this.angle = Math.random() * Math.PI * 2; this.radius = Math.random() * 2 + 1; this.speed = Math.random() * 5 + 2; this.alpha = 1; } update() { this.x += Math.cos(this.angle) * this.speed; this.y += Math.sin(this.angle) * this.speed; this.alpha -= 0.01; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = `rgba(${this.color},${this.alpha})`; ctx.fill(); } } let particles = []; function createParticles(x, y, color) { for (let i = 0; i < 100; i++) { particles.push(new Particle(x, y, color)); } } function animate() { ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.fillRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); if (particles[i].alpha <= 0) { particles.splice(i, 1); i--; } } requestAnimationFrame(animate); } canvas.addEventListener('click', function (e) { const color = `255, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}`; createParticles(e.clientX, e.clientY, color); }); animate(); ``` #### 功能说明 - **Canvas绘制**:使用Canvas元素绘制动态的烟花效果,通过粒子系统模拟烟花爆炸和运动。 - **点击触发**:用户点击页面时,会在点击位置生成烟花效果,颜色随机变化。 - **样式设计**:页面背景为黑色,文字颜色柔和,增强烟花效果的视觉冲击力。 #### 扩展功能 - **背景音乐**:可以通过添加`<audio>`标签并自动播放背景音乐,增加浪漫氛围。 - **文字动画**:使用CSS动画或JavaScript实现文字的渐变或闪烁效果。 - **响应式设计**:确保页面在不同设备上都能正常显示,使用媒体查询或动态调整Canvas大小。 #### 注意事项 - **性能优化**:烟花粒子数量较多时,可能会影响性能,建议根据设备性能调整粒子数量或优化动画逻辑。 - **兼容性**:确保代码在主流浏览器中都能正常运行,特别是Canvas和动画相关的特性。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值