Wheel of Fortune with image (no Canvas)

Question

So, for our project, we have to make a Wheel of Fortune game (based on the game show), and I made everything (like checking if the word was correct and everything) but I still don't know how to do the animations. What I have to animate is similar to what is in the attached picture. Our teacher told us that we can't use canvas, so I can't use .rotate(). So, does anyone have any ideas as to how this can be accomplished? Remember, I don't even need the wheel to actually rotate; it would work even if just the pictures were to change positions.

Here is the picture of a sample wheel (pretend the numbers are all pictures). I have stored all of the pictures in a single array that contains all of the pictures: https://en.m.wikipedia.org/wiki/Wheel_of_Fortune_(U.S._game_show)#/media/File%3AWheel_of_Fortune_Round_1_template_Season_31.png

PS: For academic honesty purposes, I will not be able to post my code here.

Thank you for your time, everyone!

Answer 1

This is a very basic way of doing it: http://codepen.io/AaronGeorge/pen/zoOWag^{Dead link}

What you utilise is the CSS transform property and use the rotate value.

You'll need to do some math to work out how much you need to rotate the image, but transform: rotate(amount); will do the trick without using canvas.

Answer 2

The following example is a slight remake of How to Draw a Wheel of Fortune - without using HTML Canvas

• Create an array of the sectors values, starting from right - clockwise.
• Generate a random ang (in radians)
• Animate CSS's rotate property using JS's Animations API at a random duration
• Create a function getIndex() to get the prize sector index
• Assign a "finish" Event listener to get the landed prize sector

const sectors = [
  "500", "700", "BMB", "600", "550", "500", "600",   "B",
  "650",  "FP", "700", "LAT", "800", "500", "650", "500",
  "900",   "B", "2500",  "W", "600", "700", "600", "650",
];

// Generate random float in range min-max:
const rand = (m, M) => Math.random() * (M - m) + m;
const tot = sectors.length;
const elWheel = document.querySelector("#wheel");
const elAng = document.querySelector("#ang");

const PI = Math.PI;
const TAU = 2 * PI;
let arc = TAU / tot;
let ang = 0; // Angle rotation in radians
let isSpinning = false;
const imageAngOffset = -arc / 2;

// Get index of current sector
const getIndex = () => Math.floor(tot - (ang % TAU) / TAU * tot) % tot;

const spin = () => {
  
  if (isSpinning) return; // Do nothing
  isSpinning = true;
  ang += rand(20, 30); // Generate random angle

  const anim = elWheel.animate([{rotate: `${ang}rad`}], {
    duration: rand(4000, 5000),
    easing: "cubic-bezier(0.23, -0.16, 0.2, 1)",
    fill: "both"
  });

  anim.addEventListener("finish", (event) => {
    isSpinning = false;
    ang += imageAngOffset; // Fix for image rotation offset (half arc)
    const index = getIndex();
    const value = sectors[index];
    console.clear();
    console.log(value);
  });
};

elWheel.addEventListener("pointerdown", spin);

* {margin: 0;}

#wheel-wrapper {
  overflow: hidden;
  position: relative;
  margin: auto;
  width: 90vmin;
  aspect-ratio: 1;
  display: flex;
  /* rotate: -0.25turn; */
}

#wheel {
  position: relative;
  margin: auto;
  width: 90%;
  aspect-ratio: 1;
  background-image: url(https://i.stack.imgur.com/mcuwP.png);
  background-size: cover;
  border-radius: 50%;
}

#wheel-wrapper::after {
  content: "";
  position: absolute;
  right: 0;
  width: 10%;
  background: red;
  height: 1%;
  transform: translateY(-50%);
  top: 50%;
}

<div id="wheel-wrapper">
  <div id="wheel"></div>
</div>

Since the rightmost starting sector is not at a perfect 0 degree in the image, don't forget to fix for this by subtracting half arc to the end degree radians ang (see in example above the use of imageAngleOffset).

To rotate the entire wheel wrapper by negative quarter turn (so that the needle stays at the top), uncomment this line in CSS: rotate: -0.25turn;