- Joined
- Jan 22, 2023
- Messages
- 2
- Reaction score
- 0
I'm having a problem with animating my tic tac toe game. This is just for fun.
When the player wins, I want the winners icon image(X or O), to spin the winning combo
of winning tiles.
If I could get the X image to spin
using this test page, with just an image and a button, that would help initially.
And I want it to spin, not super fast, and keep spinning until I press the button again.
This code that I have here is just the last thing I was trying, I added the toggle button function
My issue really is, how to get the image to keep spinning
and not stop until the button is pressed again.
If there is a better way please do share.
When the player wins, I want the winners icon image(X or O), to spin the winning combo
of winning tiles.
If I could get the X image to spin
using this test page, with just an image and a button, that would help initially.
And I want it to spin, not super fast, and keep spinning until I press the button again.
This code that I have here is just the last thing I was trying, I added the toggle button function
My issue really is, how to get the image to keep spinning
and not stop until the button is pressed again.
If there is a better way please do share.
Code:
<!DOCTYPE html>
<html lang="en">
<!--TEST PAGE FOR TESTING ONLY-->
<!--TEST PAGE FOR TESTING ONLY-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST PAGE</title>
<!--link rel="stylesheet" href="./css/main.css"-->
<style>
.x-graphic {
height: 200px;
width: 200x;
transition: transform 0.5s ease-in;
}
.btn {
width: 90px;
height: 30px;
font-size: large;
}
</style>
</head>
<body>
<img class='x-graphic' src="/img/x-graphic.png" alt="TEST IMAGE WAS NOT FOUND" />
<p></p>
<button class="btn" onclick='toggleAnimation()'>Spin X</button>
<h1 id="gameTitle">Spin X!!!</h1>
<script>
// Get the image element
var start;
var progress;
var stopId;
const image = document.getElementsByClassName('x-graphic');
var toggle = false;
var rotation = 0;
const speed = 1;
for (let i = 0; i < image.length; i++) {
function updateRotation(timestamp) {
if (!start || progress > 400) start = timestamp;
progress = (timestamp - start);
rotation += speed;
image[i].style.transform = `rotateY(${rotation}deg)`;
stopId = window.requestAnimationFrame(updateRotation());
}
}
function toggleAnimation() {
if (!toggle) {
toggle = true;
window.requestAnimationFrame(updateRotation());
} else {
toggle = false;
cancelAnimationFrame(stopId);
}
}
// Start the animation
</script>
</body>
</html>