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.
25 FREE HTML Games (Source Code)
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 | CodingArtist |
| Project Download | Link Available Below |
| Language used | HTML, CSS and JavaScript |
| External link / Dependencies | No |
| Responsive | Yes |
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.
50+ HTML, CSS & JavaScript Projects With Source Code
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>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.
ADVERTISEMENT
Gym Website Using HTML and CSS With Source Code
ADVERTISEMENT
ADVERTISEMENT
Tip: You call simply use (!) an exclamation mark to define it if you are using VS Code.
ADVERTISEMENT
ADVERTISEMENT
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.
Weather App Using Html,Css And JavaScript
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.
Restaurant Website Using HTML And CSS With Source Code
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 – Harsh Sawant
Code By – @harshh9
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.
