Spin Wheel Game using HTML and JavaScript (Source Code)

Hello Coder, Welcome to today’s tutorial on Codewithrandom. We’ll learn how to make a Spin Wheel Game Using Html, Css, and JavaScript Code. This Spin Wheel Game feature is mostly used in mobile games where the player has to rotate it for getting more coins.
In the Spin wheel we have a spin wheel have circle and circle divided into 6,7 or 8 part and every part give a coin, any discount percentage, or anything related to website content we click on spin and the wheel start spinning and stop at an arrow so we get what our luck is, that it spins the wheel.

The HTML(Hypertext Markup Language) part will design the structure of the spin wheel game with some appropriate labels in it.
Then the CSS(Cascading Stylesheet) will help to style the app with some colors and we’ll provide an alignment and a position to it.
Then lastly the JS(JavaScript) code will help the app to make responsive as per the need of the user.
Code by Coder__rishi
Project Download Link Available Below
Language used HTML, CSS and JavaScript
External link / Dependencies No
Responsive Yes
Spin Wheel App Table
A spin wheel is a circle created with the help of CSS, along with different block-level elements for adding the color and number scheme inside the wheel, and then using the javascript function to move the circle for a particular time period, the wheel stops at a random number, and then using the javascript function to check the details and reward according to the number.
Before we start with our project, let’s understand some of the basic concepts related to it that will help us better understand the project.

How do we make a spin wheel?
To create a spin wheel, we will be using a block-level element like a div, adding a class to the element, and then using the class inside the CSS file. Using the border property, we will set the border to 50% to give a circle-like look to the element.
Can we customize the spin wheel?
Yes, you can customize the spin wheel as per the requirements; you can add sound movement as the user spins the wheel; and you can also add a 3D look to the spin and wheel by adding new designs.

I hope you have got an idea about the project.

Spin Wheel Game Html Code:-

<html lang="en">

  <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Spin Wheel App</title>

    <!-- Google Font -->

    <link

      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap"

      rel="stylesheet"

/>

    <!-- Stylesheet -->

    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <div class="wrapper">

      <div class="container">

        <canvas id="wheel"></canvas>

        <button id="spin-btn">Spin</button>

        <img src="https://cutewallpaper.org/24/yellow-arrow-png/155564497.jpg" alt="spinner arrow" />

      </div>

      <div id="final-value">

        <p>Click On The Spin Button To Start</p>

      </div>

    </div>

    <!-- Chart JS -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

    <!-- Chart JS Plugin for displaying text over chart -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js"></script>

    <!-- Script -->

    <script src="script.js"></script>

  </body>

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Spin Wheel App</title>
    <!-- Google Font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="container">
        <canvas id="wheel"></canvas>
        <button id="spin-btn">Spin</button>
        <img src="https://cutewallpaper.org/24/yellow-arrow-png/155564497.jpg" alt="spinner arrow" />
      </div>
      <div id="final-value">
        <p>Click On The Spin Button To Start</p>
      </div>
    </div>
    <!-- Chart JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <!-- Chart JS Plugin for displaying text over chart -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js"></script>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Spin Wheel App</title>
    <!-- Google Font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="container">
        <canvas id="wheel"></canvas>
        <button id="spin-btn">Spin</button>
        <img src="https://cutewallpaper.org/24/yellow-arrow-png/155564497.jpg" alt="spinner arrow" />
      </div>
      <div id="final-value">
        <p>Click On The Spin Button To Start</p>
      </div>
    </div>
    <!-- Chart JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <!-- Chart JS Plugin for displaying text over chart -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js"></script>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

This HTML Code has fully defined the structure for our spin wheel app. In this code, basically user get confuse in understanding meta tags but don’t worry.
Now lets get back to the code. Here we have defined a container in which we have made a canvas which contains our wheel. We have defined a button to spin and then we have linked a image of wheel. Now lets us style and align the structure using CSS.

CSS Code for Spin Wheel Game:-

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background: linear-gradient(135deg, #c3a3f1, #6414e9);
}
.wrapper {
width: 90%;
max-width: 34.37em;
max-height: 90vh;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3em;
border-radius: 1em;
box-shadow: 0 4em 5em rgba(27, 8, 53, 0.2);
}
.container {
position: relative;
width: 100%;
height: 100%;
}
#wheel {
max-height: inherit;
width: inherit;
top: 0;
padding: 0;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#spin-btn {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
height: 26%;
width: 26%;
border-radius: 50%;
cursor: pointer;
border: 0;
background: radial-gradient(#fdcf3b 50%, #d88a40 85%);
color: #c66e16;
text-transform: uppercase;
font-size: 1.8em;
letter-spacing: 0.1em;
font-weight: 600;
}
img {
position: absolute;
width: 4em;
top: 45%;
right: -8%;
}
#final-value {
font-size: 1.5em;
text-align: center;
margin-top: 1.5em;
color: #202020;
font-weight: 500;
}
@media screen and (max-width: 768px) {
.wrapper {
font-size: 12px;
}
img {
right: -5%;
}
}

In this CSS code we have style the background with three using hex value from lighter to brighter diagonally. Then we have styled our container, canvas, button. Padded and aligned the image of the wheel. The text that will display the value after the rotation it has been aligned and provided a suitable font color. Let us code the JavaScript part to make it user responsive.

Spin Wheel Javascript Code:-

const wheel = document.getElementById("wheel");

const spinBtn = document.getElementById("spin-btn");

const finalValue = document.getElementById("final-value");

//Object that stores values of minimum and maximum angle for a value

const rotationValues = [

  { minDegree: 0, maxDegree: 30, value: 2 },

  { minDegree: 31, maxDegree: 90, value: 1 },

  { minDegree: 91, maxDegree: 150, value: 6 },

  { minDegree: 151, maxDegree: 210, value: 5 },

  { minDegree: 211, maxDegree: 270, value: 4 },

  { minDegree: 271, maxDegree: 330, value: 3 },

  { minDegree: 331, maxDegree: 360, value: 2 },

];

//Size of each piece

const data = [16, 16, 16, 16, 16, 16];

//background color for each piece

var pieColors = [

  "#8b35bc",

  "#b163da",

  "#8b35bc",

  "#b163da",

  "#8b35bc",

  "#b163da",

];

//Create chart

let myChart = new Chart(wheel, {

  //Plugin for displaying text on pie chart

  plugins: [ChartDataLabels],

  //Chart Type Pie

  type: "pie",

  data: {

    //Labels(values which are to be displayed on chart)

    labels: [1, 2, 3, 4, 5, 6],

    //Settings for dataset/pie

    datasets: [

{

        backgroundColor: pieColors,

        data: data,

},

],

},

  options: {

    //Responsive chart

    responsive: true,

    animation: { duration: 0 },

    plugins: {

      //hide tooltip and legend

      tooltip: false,

      legend: {

        display: false,

},

      //display labels inside pie chart

      datalabels: {

        color: "#ffffff",

        formatter: (_, context) => context.chart.data.labels[context.dataIndex],

        font: { size: 24 },

},

},

},

});

//display value based on the randomAngle

const valueGenerator = (angleValue) => {

  for (let i of rotationValues) {

    //if the angleValue is between min and max then display it

    if (angleValue >= i.minDegree && angleValue <= i.maxDegree) {

      finalValue.innerHTML = `<p>Value: ${i.value}</p>`;

      spinBtn.disabled = false;

      break;

}

}

};

//Spinner count

let count = 0;

//100 rotations for animation and last rotation for result

let resultValue = 101;

//Start spinning

spinBtn.addEventListener("click", () => {

  spinBtn.disabled = true;

  //Empty final value

  finalValue.innerHTML = `<p>Good Luck!</p>`;

  //Generate random degrees to stop at

  let randomDegree = Math.floor(Math.random() * (355 - 0 + 1) + 0);

  //Interval for rotation animation

  let rotationInterval = window.setInterval(() => {

    //Set rotation for piechart

/*

    Initially to make the piechart rotate faster we set resultValue to 101 so it rotates 101 degrees at a time and this reduces by 1 with every count. Eventually on last rotation we rotate by 1 degree at a time.

*/

    myChart.options.rotation = myChart.options.rotation + resultValue;

    //Update chart with new value;

    myChart.update();

    //If rotation>360 reset it back to 0

    if (myChart.options.rotation >= 360) {

      count += 1;

      resultValue -= 5;

      myChart.options.rotation = 0;

    } else if (count > 15 && myChart.options.rotation == randomDegree) {

      valueGenerator(randomDegree);

      clearInterval(rotationInterval);

      count = 0;

      resultValue = 101;

}

  }, 10);

});

In this JavaScript we have we have defined the buttons, wheels & values in the starting. Then under var section we have given each pie a color using the hex code. Then we have defined the logical part to make the wheel rotate and give the value to the user. Let us see the final output of the project Spin Wheel App using HTML, CSS & JS.

Final Output Of Spin Wheel Game using HTML and JavaScript

We have successfully created our Creating a Spin Wheel Game using HTML, CSS, and JavaScript with Source Code. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – RISHI

Code By – @coder__rishi

Which code editor do you use for this Spin Wheel App Design coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

What is Spin Wheel Game?

In the Spin wheel we have a spin wheel have circle and circle divided into 6,7 or 8 part and every part give a coin, any discount percentage, or anything related to website content we click on spin and the wheel start spinning and stop at an arrow so we get what our luck is, that it spins the wheel.

How do we make a spin wheel?

To create a spin wheel, we will be using a block-level element like a div, adding a class to the element, and then using the class inside the CSS file. Using the border property, we will set the border to 50% to give a circle-like look to the element.

Can we customize the spin wheel?

Yes, you can customize the spin wheel as per the requirements; you can add sound movement as the user spins the wheel; and you can also add a 3D look to the spin and wheel by adding new designs.

Search This Blog

Spin Wheel Game using HTML and JavaScript (Source Code)