p5实现星星跟随鼠标喷射粒子动画效果代码-html代码-BFW代码库

p5实现星星跟随鼠标喷射粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：p5实现星星跟随鼠标喷射粒子动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">





    <style>
        body {
        	background-color: #333;
        }
        
        .container {
        	display: flex;
        	justify-content: center;
        	align-items: center;
        	height: 100vh;
        	
        }
        
        .card {
        	width: 500px;
        	height: 500px;
        	background-color: #333;
        	border-radius: 10px;
        	display: flex;
        	align-items: center;
        	justify-content: center;
        	cursor: pointer;
        	position: relative;
        	overflow: hidden;
        	cursor:none;
        }
    </style>




</head>

<body>
    <div class="container">
        <div class="card" id="star-card">
        </div>

    </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.6.0.js"></script>
    <script>
        let stars = [];
        
        function setup() {
          let canvas = createCanvas(500, 500);
          canvas.parent('star-card');
        }
        
        function draw() {
          clear();
        
          for (let i = 0; i < stars.length; i++) {
            let star = stars[i];
            star.update();
            star.display();
          }
        }
        
        function mouseMoved() {
          if (mouseX >= 0 && mouseY >= 0 && mouseX <= width && mouseY <= height) .........完整代码请登录后点击上方下载按钮下载查看