Make 'Image X' spin 360deg on y-Axis until reset button clicked


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.


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>
 
Ad

Advertisements

Joined
Jan 30, 2023
Messages
71
Reaction score
2
To keep the image spinning until the button is pressed again, you can add a condition to check if the toggle flag is set to true or false. If it's true, call the updateRotation function within the requestAnimationFrame method, and if it's false, use cancelAnimationFrame to stop the animation. Here's the updated code:

PHP:
<script>
  var toggle = false;
  var rotation = 0;
  const speed = 1;
  const image = document.getElementsByClassName("x-graphic")[0];
  let stopId;

  function updateRotation(timestamp) {
    if (!start || progress > 400) start = timestamp;
    progress = timestamp - start;
    rotation += speed;

    image.style.transform = `rotateY(${rotation}deg)`;

    if (toggle) {
      stopId = window.requestAnimationFrame(updateRotation);
    }
  }

  function toggleAnimation() {
    toggle = !toggle;

    if (toggle) {
      window.requestAnimationFrame(updateRotation);
    } else {
      cancelAnimationFrame(stopId);
    }
  }
</script>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top