包含卡片轮换和门户代码的部分：
</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>你好朋友，我有6张可以转身的牌。当其中一张牌转过身来时，我希望传送门动画出现在牌背面彩色圆圈的最外一帧。如何在代码中实现这一点？
* 6张卡各做什么 *
*主文件（含门户动画）：
https://drive.google.com/file/d/1famaPF_Rz-CIjbiBCOlIFZH-LWKjlpv_/view?usp=sharing
*应用与门户的演示链接（无法正常工作）：
https://tm-game-cards-portal.netlify.app/
*应用的demo链接不带portal：
https://tm-game-cards-v02.netlify.app/
*主文件（不含门户动画）：https://drive.google.com/file/d/1fKABYycS1cfBZ7GWYHueSXkH_XnLZZpa/view
5条答案
按热度按时间2ic8powd1#
你的问题似乎与定位有关，这可以通过适当的CSS定位来简单地解决。我只是用你的代码和下面的CSS进行实验，它会工作的
您可以根据您的要求调整左侧和顶部的位置
ht4b089n2#
多棒的概念啊！你可以将画布作为'card__back' div的子元素添加到卡片的背面，并赋予它
position: absoluteCSS。类似于：(The如果你在提供的演示https://tm-game-cards-portal.netlify.app/的控制台中运行，附加的代码片段实际上会工作。试试看：））
g52tjvyc3#
总而言之，在卡片以外的区域没有创建门户，页面完全加载。添加了一个标志，以防止动画反复开始。
hgc7kmma4#
实现这一点的一种方法是通过创建一个标志变量来跟踪卡片是否被翻转。当卡片被向后翻转时，您开始动画，当它们被翻转到前面时，您停止动画。
现在，您有了一个cardFlipped变量，用于跟踪卡片的翻转状态。当卡片向后翻转时（cardFlipped为true），它开始动画，当卡片向前翻转时（cardFlipped为false），它停止动画。
zbq4xfa05#