p5.js 相关问题

包含卡牌轮换和传送门代码的部分： //音效 $(文档).ready(函数() { var FlipSound = document.getElementById("flipSound")...</desc> <question vote="-6"> <div> </div> <p><strong>包含卡牌轮换和传送门代码的部分：</strong></p> <pre><code></script> <script> //sound effect $(document).ready(function() { var flipSound = document.getElementById("flipSound"); $(".card").click(function() { var card = $(this); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass('flipping')) { card.addClass('flipping'); // Check if the front side is facing the viewer if (!card.hasClass("flipped")) { flipSound.currentTime = 0; // Reset the audio to the start flipSound.play(); startAnimation(); console.log("started") card.addClass("flipped"); } else { stopAnimation(); console.log("stopped") card.removeClass("flipped"); } setTimeout(function() { card.removeClass('flipping'); }, 1000); // Adjust the timeout to match your animation duration } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); </script> <script> // Body hoover effect document.getElementById("gameCardLink").addEventListener("mouseover", function() { document.body.classList.add("hoverEffect"); }); document.getElementById("gameCardLink").addEventListener("mouseout", function() { document.body.classList.remove("hoverEffect"); }); </script> <script> // portal effect var p5Instance; function startAnimation() { const sketch = (p) => { const createParticleSystem = (location) => { const origin = location.copy(); const particles = []; const addParticle = velocity => { const rand = p.random(0, 1); if (rand <= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force => { particles.forEach(particle => { particle.applyForce(force); }); }; const run = () => { particles.forEach((particle, index) => { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) => { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () => { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () => { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) => { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () => { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () => { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force => { acc.add(force); }; const isDead = () => { if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () => { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle => { const radius = p.map(angleVelocity, 0, 0.3, 0, 55); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () => { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem => { particleSystem.run(); }); }; const renderParticleSystem = () => { particleSystems.forEach(particleSystem => { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () => { angleAcc = 0.005; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(240, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; p5Instance = new p5(sketch); } // stop animation function stopAnimation() { if (p5Instance) { p5Instance.remove(); p5Instance = null; } } </script> </code></pre> <p>朋友们大家好，我有6张可以逆转的牌。当其中一张卡片转动时，我希望 Portal 动画出现在卡片背面彩色圆圈的最外层框架中。我怎样才能在我的代码中实现这一目标？</p> <h2><em><strong>6 张卡片分别做什么</strong></em></h2> <p><a href="https://i.stack.imgur.com/o1N8P.jpg" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL28xTjhQLmpwZw==" alt=""/></a></p> <ul> <li><strong>主文件（含传送门动画）：</strong></li> </ul> <p><a href="https://drive.google.com/file/d/1famaPF_Rz-CIjbiBCOlIFZH-LWKjlpv_/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/1famaPF_Rz-CIjbiBCOlIFZH-LWKjlpv_/view?usp=sharing</a></p> <ul> <li><strong>应用程序与门户的演示链接（无法正常工作）：</strong></li> </ul> <p><a href="https://tm-game-cards-portal.netlify.app/" rel="nofollow noreferrer">https://tm-game-cards-portal.netlify.app/</a></p> <hr/> <ul> <li><strong>无门户的应用程序演示链接：</strong></li> </ul> <p><a href="https://tm-game-cards-v02.netlify.app/" rel="nofollow noreferrer">https://tm-game-cards-v02.netlify.app/</a></p> <ul> <li><strong>主文件（不包括传送门动画）：</strong> <a href="https://drive.google.com/file/d/1fKABYycS1cfBZ7GWYHueSXkH_XnLZZpa/view" rel="nofollow noreferrer">https://drive.google.com/file/d/1fKABYycS1cfBZ7GWYHueSXkH_XnLZZpa/view</a></li> </ul> </question> <answer tick="false" vote="1"> <p>您的问题似乎与定位更相关，可以通过正确的 CSS 定位来简单解决。我只是用你的代码和下面的 CSS 进行实验，它会起作用</p> <pre><code>canvas { position: absolute; z-index: 100; left: 46.7%; top: 43%; } </code></pre> <p>您可以根据您的需求调整左侧和顶部的位置</p> </answer> <answer tick="false" vote="0"> <p>多么棒的概念啊！您可以通过将画布附加为“card__back”div 的子项并为其指定 <pre><code>position: absolute</code></pre> CSS，将画布显示在卡片背面。像这样的东西：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var div = document.querySelector('.flipped .card__flipper.active .card__back'); var canvas = document.getElementsByClassName('p5Canvas')[0]; div.appendChild(canvas); canvas.style.position = 'absolute';</code></pre> </div> </div> <p></p> <p>（如果您在提供的演示的控制台中运行，则附加的代码片段实际上可以工作<a href="https://tm-game-cards-portal.netlify.app/" rel="nofollow noreferrer">https://tm-game-cards-portal.netlify.app/</a>。尝试一下:)）</p> </answer> <answer tick="false" vote="-1"> <p>实现此目的的一种方法是创建一个标志变量来跟踪卡片是否翻转。当卡片向后翻转时，您开始动画，当它们翻转到前面时，您停止动画。</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card Flip Animation</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"> </script>  <style> /* Your CSS styles for cards and animations here */ </style> </head> <body> <audio id="flipSound" src="flip_sound.mp3"></audio>  <div class="card">Card Content</div> <script> // Add a global variable to track the card flip state let cardFlipped = false; let p5Instance; $(document).ready(function() { var flipSound = document.getElementById("flipSound"); $(".card").click(function() { var card = $(this); if (!card.hasClass('flipping')) { card.addClass('flipping'); if (!card.hasClass("flipped")) { // Start animation and set the cardFlipped variable to true startAnimation(); cardFlipped = true; } else { // Stop animation and set the cardFlipped variable to false stopAnimation(); cardFlipped = false; } setTimeout(function() { card.removeClass('flipping'); }, 1000); } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); // portal effect function startAnimation() { const sketch = (p) => { // Your p5.js animation code here // ... }; p5Instance = new p5(sketch); } // stop animation function stopAnimation() { if (p5Instance) { p5Instance.remove(); p5Instance = null; } } </script> </body> </html> </code></pre> <p>现在，您有一个 cardFlipped 变量来跟踪卡片的翻转状态。当卡片向后翻转时（cardFlipped 为 true），启动动画，当卡片翻转到正面时（cardFlipped 为 false），停止动画。</p> </answer> <answer tick="false" vote="-1"> <pre><code> `// ... } else { stopAnimation(); console.log("durduruldu"); card.removeClass("flipped"); } // ... card.on("animationend", function() { stopAnimation(); console.log("durduruldu"); });` </code></pre> </answer> </body></html>

javascript html jquery css p5.js

回答 0 投票 0

JS / 奇异博士的传送门动画如果只将卡片翻到后面，则无法定位在卡片后面圆圈的外框上

javascript html jquery css p5.js

回答 0 投票 0

p5.js 中的向量数组出现问题

我正在尝试使用 p5.js 创建一个二维向量数组我使用嵌套 For 循环在 setup() 中生成 2D 向量数组，并在同一嵌套内将向量值打印到控制台...

javascript arrays vector p5.js

回答 1 投票 0

JS，奇异博士的传送门动画如果只将卡片翻到后面，是无法定位在卡片后面圆圈的外框上的

包含卡牌轮换和传送门代码的部分： //音效 $(文档).ready(函数() { var FlipSound = document.getElementById("flipSound")...</desc> <question vote="-4"> <div> </div> <p><strong>包含卡牌轮换和传送门代码的部分：</strong></p> <pre><code></script> <script> //sound effect $(document).ready(function() { var flipSound = document.getElementById("flipSound"); $(".card").click(function() { var card = $(this); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass('flipping')) { card.addClass('flipping'); // Check if the front side is facing the viewer if (!card.hasClass("flipped")) { flipSound.currentTime = 0; // Reset the audio to the start flipSound.play(); startAnimation(); console.log("started") card.addClass("flipped"); } else { stopAnimation(); console.log("stopped") card.removeClass("flipped"); } setTimeout(function() { card.removeClass('flipping'); }, 1000); // Adjust the timeout to match your animation duration } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); </script> <script> // Body hoover effect document.getElementById("gameCardLink").addEventListener("mouseover", function() { document.body.classList.add("hoverEffect"); }); document.getElementById("gameCardLink").addEventListener("mouseout", function() { document.body.classList.remove("hoverEffect"); }); </script> <script> // portal effect var p5Instance; function startAnimation() { const sketch = (p) => { const createParticleSystem = (location) => { const origin = location.copy(); const particles = []; const addParticle = velocity => { const rand = p.random(0, 1); if (rand <= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force => { particles.forEach(particle => { particle.applyForce(force); }); }; const run = () => { particles.forEach((particle, index) => { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) => { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () => { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () => { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) => { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () => { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () => { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force => { acc.add(force); }; const isDead = () => { if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () => { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle => { const radius = p.map(angleVelocity, 0, 0.3, 0, 55); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () => { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem => { particleSystem.run(); }); }; const renderParticleSystem = () => { particleSystems.forEach(particleSystem => { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () => { angleAcc = 0.005; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(240, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; p5Instance = new p5(sketch); } // stop animation function stopAnimation() { if (p5Instance) { p5Instance.remove(); p5Instance = null; } } </script> </code></pre> <p>朋友们大家好，我有6张可以逆转的牌。当其中一张卡片转动时，我希望 Portal 动画出现在卡片背面彩色圆圈的最外面的框架中。我怎样才能在我的代码中实现这一目标？</p> <h2><em><strong>6 张卡片分别做什么</strong></em></h2> <p><a href="https://i.stack.imgur.com/o1N8P.jpg" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL28xTjhQLmpwZw==" alt=""/></a></p> <ul> <li><strong>主文件（含传送门动画）：</strong></li> </ul> <p><a href="https://drive.google.com/file/d/1famaPF_Rz-CIjbiBCOlIFZH-LWKjlpv_/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/1famaPF_Rz-CIjbiBCOlIFZH-LWKjlpv_/view?usp=sharing</a></p> <ul> <li><strong>应用程序与门户的演示链接（无法正常工作）：</strong></li> </ul> <p><a href="https://tm-game-cards-portal.netlify.app/" rel="nofollow noreferrer">https://tm-game-cards-portal.netlify.app/</a></p> <hr/> <ul> <li><strong>不带门户的应用程序演示链接：</strong></li> </ul> <p><a href="https://tm-game-cards-v02.netlify.app/" rel="nofollow noreferrer">https://tm-game-cards-v02.netlify.app/</a></p> <ul> <li><strong>主文件（不包括传送门动画）：</strong> <a href="https://drive.google.com/file/d/1fKABYycS1cfBZ7GWYHueSXkH_XnLZZpa/view" rel="nofollow noreferrer">https://drive.google.com/file/d/1fKABYycS1cfBZ7GWYHueSXkH_XnLZZpa/view</a></li> </ul> </question> <answer tick="false" vote="1"> <p>您的问题似乎与定位更相关，可以通过正确的 CSS 定位来简单解决。我只是用你的代码和下面的 CSS 进行实验，它会起作用</p> <pre><code>canvas { position: absolute; z-index: 100; left: 46.7%; top: 43%; } </code></pre> <p>您可以根据您的需求调整左侧和顶部的位置</p> </answer> <answer tick="false" vote="-1"> <p>实现此目的的一种方法是创建一个标志变量来跟踪卡片是否翻转。当卡片向后翻转时，您开始动画，当它们翻转到前面时，您停止动画。</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card Flip Animation</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"> </script>  <style> /* Your CSS styles for cards and animations here */ </style> </head> <body> <audio id="flipSound" src="flip_sound.mp3"></audio>  <div class="card">Card Content</div> <script> // Add a global variable to track the card flip state let cardFlipped = false; let p5Instance; $(document).ready(function() { var flipSound = document.getElementById("flipSound"); $(".card").click(function() { var card = $(this); if (!card.hasClass('flipping')) { card.addClass('flipping'); if (!card.hasClass("flipped")) { // Start animation and set the cardFlipped variable to true startAnimation(); cardFlipped = true; } else { // Stop animation and set the cardFlipped variable to false stopAnimation(); cardFlipped = false; } setTimeout(function() { card.removeClass('flipping'); }, 1000); } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); // portal effect function startAnimation() { const sketch = (p) => { // Your p5.js animation code here // ... }; p5Instance = new p5(sketch); } // stop animation function stopAnimation() { if (p5Instance) { p5Instance.remove(); p5Instance = null; } } </script> </body> </html> </code></pre> <p>现在，您有一个 cardFlipped 变量来跟踪卡片的翻转状态。当卡片向后翻转时（cardFlipped为true），启动动画，当卡片翻转到正面时（cardFlipped为false），停止动画。</p> </answer> <answer tick="false" vote="-1"> <pre><code> `// ... } else { stopAnimation(); console.log("durduruldu"); card.removeClass("flipped"); } // ... card.on("animationend", function() { stopAnimation(); console.log("durduruldu"); });` </code></pre> </answer> </body></html>

javascript html jquery css p5.js

回答 0 投票 0

为什么 p5.js bezierPoint() 函数在给定线性三次贝塞尔曲线时返回非线性值？

好吧，我一直在创建一个 UI 框架并向其中添加动画。我想让用户使用cubicBeziers控制动画的计时功能，所以我决定使用p5.js'

javascript p5.js bezier

回答 2 投票 0

如何在p5.js中获取换行文本的边界形状

我正在创建一个 p5 项目，在其中从字符串创建文本，使用“WORD”选项将其包装并将其添加到画布中。举个例子：让字体；函数预加载（）{ 字体 = loadFont('SomeFont....

javascript p5.js

回答 1 投票 0

在 p5.js 中实现 Tic Tac Toe 的 Minimax 算法时遇到问题 - 需要帮助调试 AI 逻辑

问题：我目前正在使用 p5.js 中的极小极大算法开发 Tic Tac Toe 游戏，并且遇到了 AI 行为的问题。尽管我很努力，但我似乎无法让人工智能...

javascript processing p5.js tic-tac-toe minimax

回答 1 投票 0

博士。当卡片翻转时，Strange的传送门动画不能出现在卡片后面的圆圈之外，JavaScript

包含卡牌轮换和传送门代码的部分： //音效 $(文档).ready(函数() { var FlipSound = document.getElementById("flipSound")...</desc> <question vote="-5"> <div> </div> <p><strong>包含卡牌轮换和传送门代码的部分：</strong></p> <pre><code></script> <script> //sound effect $(document).ready(function() { var flipSound = document.getElementById("flipSound"); $(".card").click(function() { var card = $(this); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass('flipping')) { card.addClass('flipping'); // Check if the front side is facing the viewer if (!card.hasClass("flipped")) { flipSound.currentTime = 0; // Reset the audio to the start flipSound.play(); startAnimation(); console.log("started") card.addClass("flipped"); } else { stopAnimation(); console.log("stopped") card.removeClass("flipped"); } setTimeout(function() { card.removeClass('flipping'); }, 1000); // Adjust the timeout to match your animation duration } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); </script> <script> // Body hoover effect document.getElementById("gameCardLink").addEventListener("mouseover", function() { document.body.classList.add("hoverEffect"); }); document.getElementById("gameCardLink").addEventListener("mouseout", function() { document.body.classList.remove("hoverEffect"); }); </script> <script> // portal effect var p5Instance; function startAnimation() { const sketch = (p) => { const createParticleSystem = (location) => { const origin = location.copy(); const particles = []; const addParticle = velocity => { const rand = p.random(0, 1); if (rand <= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force => { particles.forEach(particle => { particle.applyForce(force); }); }; const run = () => { particles.forEach((particle, index) => { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) => { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () => { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () => { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) => { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () => { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () => { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force => { acc.add(force); }; const isDead = () => { if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () => { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle => { const radius = p.map(angleVelocity, 0, 0.3, 0, 55); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () => { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem => { particleSystem.run(); }); }; const renderParticleSystem = () => { particleSystems.forEach(particleSystem => { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () => { angleAcc = 0.005; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(240, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; p5Instance = new p5(sketch); } // stop animation function stopAnimation() { if (p5Instance) { p5Instance.remove(); p5Instance = null; } } </script> </code></pre> <p>朋友们大家好，我有6张可以逆转的牌。当其中一张卡片转动时，我希望 Portal 动画出现在卡片背面彩色圆圈的最外层框架中。我怎样才能在我的代码中实现这一目标？</p> <h2><em><strong>6 张卡片分别做什么</strong></em></h2> <p><a href="https://i.stack.imgur.com/o1N8P.jpg" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL28xTjhQLmpwZw==" alt=""/></a></p> <ul> <li><strong>主文件（含传送门动画）：</strong></li> </ul> <p><a href="https://drive.google.com/file/d/1famaPF_Rz-CIjbiBCOlIFZH-LWKjlpv_/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/1famaPF_Rz-CIjbiBCOlIFZH-LWKjlpv_/view?usp=sharing</a></p> <ul> <li><strong>应用程序与门户的演示链接（无法正常工作）：</strong></li> </ul> <p><a href="https://tm-game-cards-portal.netlify.app/" rel="nofollow noreferrer">https://tm-game-cards-portal.netlify.app/</a></p> <hr/> <ul> <li><strong>无门户的应用程序演示链接：</strong></li> </ul> <p><a href="https://tm-game-cards-v02.netlify.app/" rel="nofollow noreferrer">https://tm-game-cards-v02.netlify.app/</a></p> <ul> <li><strong>主文件（不包括传送门动画）：</strong> <a href="https://drive.google.com/file/d/1fKABYycS1cfBZ7GWYHueSXkH_XnLZZpa/view" rel="nofollow noreferrer">https://drive.google.com/file/d/1fKABYycS1cfBZ7GWYHueSXkH_XnLZZpa/view</a></li> </ul> </question> <answer tick="false" vote="0"> <p>实现此目的的一种方法是创建一个标志变量来跟踪卡片是否翻转。当卡片向后翻转时，您开始动画，当它们翻转到前面时，您停止动画。</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card Flip Animation</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"> </script>  <style> /* Your CSS styles for cards and animations here */ </style> </head> <body> <audio id="flipSound" src="flip_sound.mp3"></audio>  <div class="card">Card Content</div> <script> // Add a global variable to track the card flip state let cardFlipped = false; let p5Instance; $(document).ready(function() { var flipSound = document.getElementById("flipSound"); $(".card").click(function() { var card = $(this); if (!card.hasClass('flipping')) { card.addClass('flipping'); if (!card.hasClass("flipped")) { // Start animation and set the cardFlipped variable to true startAnimation(); cardFlipped = true; } else { // Stop animation and set the cardFlipped variable to false stopAnimation(); cardFlipped = false; } setTimeout(function() { card.removeClass('flipping'); }, 1000); } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); // portal effect function startAnimation() { const sketch = (p) => { // Your p5.js animation code here // ... }; p5Instance = new p5(sketch); } // stop animation function stopAnimation() { if (p5Instance) { p5Instance.remove(); p5Instance = null; } } </script> </body> </html> </code></pre> <p>现在，您有一个 cardFlipped 变量来跟踪卡片的翻转状态。当卡片向后翻转时（cardFlipped 为 true），启动动画，当卡片翻转到正面时（cardFlipped 为 false），停止动画。</p> </answer> <answer tick="false" vote="0"> <pre><code> `// ... } else { stopAnimation(); console.log("durduruldu"); card.removeClass("flipped"); } // ... card.on("animationend", function() { stopAnimation(); console.log("durduruldu"); });` </code></pre> </answer> </body></html>

javascript html jquery css p5.js

回答 0 投票 0

Javascript，当卡片翻转时，传送门动画不能出现在卡片后面的圆圈之外

//音效 $(文档).ready(函数() { var FlipSound = document.getElementById("flipSound"); $(".card").click(function() { var ca...</desc> <question vote="-5"> <div> </div> <pre><code></script> <script> //sound effect $(document).ready(function() { var flipSound = document.getElementById("flipSound"); $(".card").click(function() { var card = $(this); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass('flipping')) { card.addClass('flipping'); // Check if the front side is facing the viewer if (!card.hasClass("flipped")) { flipSound.currentTime = 0; // Reset the audio to the start flipSound.play(); startAnimation(); console.log("started") card.addClass("flipped"); } else { stopAnimation(); console.log("stopped") card.removeClass("flipped"); } setTimeout(function() { card.removeClass('flipping'); }, 1000); // Adjust the timeout to match your animation duration } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); </script> <script> // Body hoover effect document.getElementById("gameCardLink").addEventListener("mouseover", function() { document.body.classList.add("hoverEffect"); }); document.getElementById("gameCardLink").addEventListener("mouseout", function() { document.body.classList.remove("hoverEffect"); }); </script> <script> // portal effect var p5Instance; function startAnimation() { const sketch = (p) => { const createParticleSystem = (location) => { const origin = location.copy(); const particles = []; const addParticle = velocity => { const rand = p.random(0, 1); if (rand <= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force => { particles.forEach(particle => { particle.applyForce(force); }); }; const run = () => { particles.forEach((particle, index) => { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) => { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () => { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () => { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) => { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () => { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () => { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force => { acc.add(force); }; const isDead = () => { if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () => { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle => { const radius = p.map(angleVelocity, 0, 0.3, 0, 55); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () => { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem => { particleSystem.run(); }); }; const renderParticleSystem = () => { particleSystems.forEach(particleSystem => { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () => { angleAcc = 0.005; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(240, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; p5Instance = new p5(sketch); } // stop animation function stopAnimation() { if (p5Instance) { p5Instance.remove(); p5Instance = null; } } </script> </code></pre> <p>朋友们您好，我希望当卡片转回时传送门动画开始（确实如此）我希望当卡片转到前面时传送门动画消失，但控制台上没有出现停止消息，动画也没有停止。我怎么解决这个问题？我正在等待您的帮助...</p> <p><strong>主文件（包括传送门动画）：</strong> <a href="https://drive.google.com/file/d/1famaPF_Rz-CIjbiBCOlIFZH-LWKjlpv_/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/1famaPF_Rz-CIjbiBColIFZH-LWKjlpv_/view?usp=sharing</a></p> <p><strong>不带门户的应用程序演示链接：</strong> <a href="https://tm-game-cards-v02.netlify.app/" rel="nofollow noreferrer">https://tm-game-cards-v02.netlify.app/</a></p> <p><strong>主文件（不包括传送门动画）：</strong> <a href="https://drive.google.com/file/d/1fKABYycS1cfBZ7GWYHueSXkH_XnLZZpa/view" rel="nofollow noreferrer">https://drive.google.com/file/d/1fKABYycS1cfBZ7GWYHueSXkH_XnLZZpa/view</a></p> </question> <answer tick="false" vote="0"> <p>实现此目的的一种方法是创建一个标志变量来跟踪卡片是否翻转。当卡片向后翻转时，您开始动画，当它们翻转到前面时，您停止动画。</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card Flip Animation</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"> </script>  <style> /* Your CSS styles for cards and animations here */ </style> </head> <body> <audio id="flipSound" src="flip_sound.mp3"></audio>  <div class="card">Card Content</div> <script> // Add a global variable to track the card flip state let cardFlipped = false; let p5Instance; $(document).ready(function() { var flipSound = document.getElementById("flipSound"); $(".card").click(function() { var card = $(this); if (!card.hasClass('flipping')) { card.addClass('flipping'); if (!card.hasClass("flipped")) { // Start animation and set the cardFlipped variable to true startAnimation(); cardFlipped = true; } else { // Stop animation and set the cardFlipped variable to false stopAnimation(); cardFlipped = false; } setTimeout(function() { card.removeClass('flipping'); }, 1000); } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); // portal effect function startAnimation() { const sketch = (p) => { // Your p5.js animation code here // ... }; p5Instance = new p5(sketch); } // stop animation function stopAnimation() { if (p5Instance) { p5Instance.remove(); p5Instance = null; } } </script> </body> </html> </code></pre> <p>现在，您有一个 cardFlipped 变量来跟踪卡片的翻转状态。当卡片向后翻转时（cardFlipped 为 true），启动动画，当卡片翻转到正面时（cardFlipped 为 false），停止动画。</p> </answer> <answer tick="false" vote="0"> <pre><code> `// ... } else { stopAnimation(); console.log("durduruldu"); card.removeClass("flipped"); } // ... card.on("animationend", function() { stopAnimation(); console.log("durduruldu"); });` </code></pre> </answer> </body></html>

javascript html jquery p5.js

回答 0 投票 0

洪水填充算法 - 仅在尝试填充的区域之外着色

我正在关注有关实现洪水填充算法的教程（https://www.youtube.com/watch?v=a7qCVxq-dWE），我认为我的代码看起来与我关注的人完全相同，但我...

javascript p5.js flood-fill

回答 1 投票 0

如何使画布完全适合p5中的窗口尺寸

我想让 p5 画布完全适合窗口大小，但是每当我使用 windowWidth 和 windowHeight 时，画布似乎更大：有什么办法可以解决这个问题吗？

window p5.js screen-size p5.play

回答 2 投票 0

javascript，卡牌翻转时传送门动画无法消失

//音效 $(文档).ready(函数() { var FlipSound = document.getElementById("flipSound"); $(".card").click(function() { var ca...</desc> <question vote="-5"> <div> </div> <pre><code></script> <script> //sound effect $(document).ready(function() { var flipSound = document.getElementById("flipSound"); $(".card").click(function() { var card = $(this); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass('flipping')) { card.addClass('flipping'); // Check if the front side is facing the viewer if (!card.hasClass("flipped")) { flipSound.currentTime = 0; // Reset the audio to the start flipSound.play(); startAnimation(); console.log("started") card.addClass("flipped"); } else { stopAnimation(); console.log("stopped") card.removeClass("flipped"); } setTimeout(function() { card.removeClass('flipping'); }, 1000); // Adjust the timeout to match your animation duration } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); </script> <script> // Body hoover effect document.getElementById("gameCardLink").addEventListener("mouseover", function() { document.body.classList.add("hoverEffect"); }); document.getElementById("gameCardLink").addEventListener("mouseout", function() { document.body.classList.remove("hoverEffect"); }); </script> <script> // portal effect var p5Instance; function startAnimation() { const sketch = (p) => { const createParticleSystem = (location) => { const origin = location.copy(); const particles = []; const addParticle = velocity => { const rand = p.random(0, 1); if (rand <= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force => { particles.forEach(particle => { particle.applyForce(force); }); }; const run = () => { particles.forEach((particle, index) => { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) => { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () => { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () => { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) => { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () => { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () => { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force => { acc.add(force); }; const isDead = () => { if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () => { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle => { const radius = p.map(angleVelocity, 0, 0.3, 0, 55); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () => { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem => { particleSystem.run(); }); }; const renderParticleSystem = () => { particleSystems.forEach(particleSystem => { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () => { angleAcc = 0.005; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(240, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; p5Instance = new p5(sketch); } // stop animation function stopAnimation() { if (p5Instance) { p5Instance.remove(); p5Instance = null; } } </script> </code></pre> <p>朋友们您好，我希望当卡片转回时传送门动画开始（确实如此）我希望当卡片转到前面时传送门动画消失，但控制台上没有出现停止消息，动画也没有停止。我怎么解决这个问题？我正在等待您的帮助...</p> <p><strong>应用程序的演示链接：</strong> <a href="https://tm-game-cards-v02.netlify.app/" rel="nofollow noreferrer">https://tm-game-cards-v02.netlify.app/</a></p> <p><strong>主文件：</strong> <a href="https://drive.google.com/file/d/1fKABYycS1cfBZ7GWYHueSXkH_XnLZZpa/view" rel="nofollow noreferrer">https://drive.google.com/file/d/1fKABYycS1cfBZ7GWYHueSXkH_XnLZZpa/view</a></p> </question> <answer tick="false" vote="0"> <p>实现此目的的一种方法是创建一个标志变量来跟踪卡片是否翻转。当卡片向后翻转时，您开始动画，当它们翻转到前面时，您停止动画。</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card Flip Animation</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"> </script>  <style> /* Your CSS styles for cards and animations here */ </style> </head> <body> <audio id="flipSound" src="flip_sound.mp3"></audio>  <div class="card">Card Content</div> <script> // Add a global variable to track the card flip state let cardFlipped = false; let p5Instance; $(document).ready(function() { var flipSound = document.getElementById("flipSound"); $(".card").click(function() { var card = $(this); if (!card.hasClass('flipping')) { card.addClass('flipping'); if (!card.hasClass("flipped")) { // Start animation and set the cardFlipped variable to true startAnimation(); cardFlipped = true; } else { // Stop animation and set the cardFlipped variable to false stopAnimation(); cardFlipped = false; } setTimeout(function() { card.removeClass('flipping'); }, 1000); } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); // portal effect function startAnimation() { const sketch = (p) => { // Your p5.js animation code here // ... }; p5Instance = new p5(sketch); } // stop animation function stopAnimation() { if (p5Instance) { p5Instance.remove(); p5Instance = null; } } </script> </body> </html> </code></pre> <p>现在，您有一个 cardFlipped 变量来跟踪卡片的翻转状态。当卡片向后翻转时（cardFlipped 为 true），启动动画，当卡片翻转到正面时（cardFlipped 为 false），停止动画。</p> </answer> </body></html>

javascript html jquery p5.js

回答 0 投票 0

用于产品草图绘制的 JS 库

我需要帮助找到一个好的 JS 库，可以创建如下产品草图：分区草图。我正在使用 Next.js，并且大多数库都遇到麻烦，因为 Next.js 使用 SSR 和大多数

javascript next.js p5.js rhino3d sketching

回答 1 投票 0

如何从菜单画面切换到实际游戏？

所以我尝试在菜单屏幕（目前只是带有一行文本的空白画布）和 p5.js 中的实际游戏屏幕之间切换。我目前尝试的是使用一个名为 's...

javascript loops class menu p5.js

回答 1 投票 0

如何从菜单画面切换到实际游戏？ p5.js

所以我尝试在菜单屏幕（目前只是带有一行文本的空白画布）和 p5.js 中的实际游戏屏幕之间切换。我目前尝试的是使用一个名为 's...