Learn how to create a fully functional Weapon Wheel for GTA 5 using HTML, CSS, and JavaScript in this step-by-step tutorial.
Table of Contents
This is a fun, beginner-friendly project that uses HTML, CSS, and JavaScript to create a wheel for the GTA V weapon wheel. You will learn how to use classes to apply a unique style to an element, and how to add functions and scripts to any web page.
This project will involve building the GTA 5 Weapon Wheel - a wheel of weapons that you can use to interact with in-game events based on what weapon you are holding.
In this tutorial, we will be building the Weapon Wheel from the popular video game, GTA 5, using HTML, CSS, and JavaScript. This project is perfect for developers who are looking to take their skills to the next level and create a fun, interactive project. By the end of this tutorial, you will have a fully functional Weapon Wheel that can be customized to your liking.
Let's start making an amazing GTA 5 Weapon Wheel using HTML, CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our weapon wheel.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our wheel. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our weapon wheel an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,700');
html {
min-height: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: url("https://i.ytimg.com/vi/9b-f_GcoXzI/maxresdefault.jpg") no-repeat center center;
background-size: cover;
color: white;
font-family: 'Poppins', sans-serif;
font-weight: 400;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
@media all and (max-width: 768px) {
body {
flex-direction: column;
}
}
#app-info {
margin: auto;
padding: 1em;
text-align: center;
}
#current-weapon {
margin: auto;
padding: 1em;
border-radius: 15px;
display: flex;
background: rgba(0, 0, 0, 0.6);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
flex-direction: column;
justify-content: center;
align-items: center;
}
#current-weapon h3 {
letter-spacing: 1px;
font-weight: 400;
}
#current-weapon-info {
text-align: center;
border: 3px solid white;
background: rgba(255, 255, 255, 0.5);
margin: 1em;
letter-spacing: 5px;
padding: 1em 1.5em;
border-radius: 15px;
}
#current-weapon-name {
color: black;
}
#current-weapon-image {
width: 200px;
margin: 15px 0;
}
#weapon-selector-button {
padding: 1em 2em;
margin: 1em;
border: none;
border-radius: 15px;
text-transform: uppercase;
font-size: 16px;
font-family: 'Poppins', sans-serif;
font-weight: 700;
background: white;
letter-spacing: 2px;
color: black;
transition: all 0.2s ease-in-out;
}
#weapon-selector-button:hover {
background: black;
color: white;
cursor: pointer;
box-shadow: 0 3px rgba(255, 255, 255, 0.5);
}
#weapon-selector-wrapper {
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: background-color 0.5s ease-in-out;
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
#weapon-selector-wrapper.active {
visibility: visible;
background-color: rgba(5, 21, 255, 0.2);
opacity: 1;
}
#weapon-properties {
position: absolute;
top: 0;
right: 0;
width: 150px;
margin: 1em;
padding: 0.5em;
background: rgba(0, 0, 0, 0.8);
}
#weapon-properties h4 {
font-weight: 400;
margin: 0;
}
.bar {
height: 10px;
width: 100%;
margin: 5px 0;
position: relative;
background: rgba(255, 255, 255, 0.3);
}
.value-bar {
background: rgba(255, 255, 255, 1);
height: 10px;
transition: all 0.5s ease-in-out;
display: block;
position: absolute;
top: 0;
left: 0;
}
#damage {
width: 0;
}
#fire-rate {
width: 0;
}
#accuracy {
width: 0;
}
#range {
width: 0;
}
svg {
transform: rotate(22deg);
}
svg > text {
font-weight: 700;
font-size: 1.5em;
stroke: black;
}
svg text,
svg g text,
svg g image {
transform: rotate(-22deg);
}
g path {
stroke: rgba(0, 0, 0, 0.3);
stroke-width: 5px;
stroke-dasharray: 235.5 440;
transform-origin: center center;
transform: scale(0.98);
transform-box: fill-box;
}
g text {
font-weight: 700;
stroke: black;
}
g.active-weapon path {
stroke: rgba(82, 149, 177, 1);
stroke-width: 10px;
stroke-dasharray: 235.5 440;
}
g:hover {
cursor: pointer;
}
g:hover path {
fill: white;
transition: all 0.2s ease-in-out;
stroke-width: 0;
}
#hovered-weapon-name {
fill: white;
} Step 3 (JavaScript Code):
Finally, we will add the necessary JavaScript code to our document to make our weapon wheel work.
The code is designed to allow users to select weapons for their character by displaying a modal window with a list of weapons to choose from.
The first section of the code sets up variables for various elements on the page, such as the button used to open the weapon selector, the modal window that contains the weapons, and the current weapon the user has selected. It also sets up variables to display information about a weapon when the user hovers over it in the weapon selector.
The second section of the code adds an "active" class to the weapon selector modal window, and applies a blur filter to the current weapon and app info elements, which are located behind the modal window. This is done to highlight the modal window and make it the focus of the user's attention.
The third section of the code listens for a click event on the selector button. If the modal window is already displayed (with a "block" display style), the "active" class is removed and the blur filter is removed from the current weapon and app info elements. If the modal window is not currently displayed, the "active" class is added to the modal window, and the blur filter is applied to the current weapon and app info elements.
The fourth section of the code sets up two functions that are called when a user hovers over or leaves a weapon in the selector. When the user hovers over a weapon, the function updates the display of the weapon name, damage, fire rate, accuracy, and range. When the user moves the cursor away from a weapon, the function resets the displayed information to its default values.
The fifth section of the code sets up a function that is called when a user selects a weapon from the selector. The function updates the current weapon name and image with the selected weapon's data, and removes the "active-weapon" class from any previously selected weapon. It then adds the "active-weapon" class to the newly selected weapon, which highlights it in the selector. Finally, the function removes the "active" class from the modal window and removes the blur filter from the current weapon and app info elements, returning the display to its default state.
Overall, this code allows users to easily select a weapon for their video game character by displaying a modal window with a list of options, highlighting the selected weapon, and displaying detailed information about each option when hovered over.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
var selectorButton = document.getElementById("weapon-selector-button");
var selectorModal = document.getElementById("weapon-selector-wrapper");
var currentWeapon = document.getElementById("current-weapon");
var appInfo = document.getElementById("app-info");
var hoveredWeaponName = document.getElementById("hovered-weapon-name");
var hoveredWeaponDamage = document.getElementById("damage");
var hoveredWeaponFireRate = document.getElementById("fire-rate");
var hoveredWeaponAccuracy = document.getElementById("accuracy");
var hoveredWeaponRange = document.getElementById("range");
selectorModal.classList.add("active");
currentWeapon.style.filter = "blur(5px)";
appInfo.style.filter = "blur(5px)";
selectorButton.addEventListener("click", function() {
if(selectorModal.style.display === "block") {
selectorModal.classList.remove("active");
currentWeapon.style.filter = "none";
appInfo.style.filter = "none";
} else {
selectorModal.classList.add("active");
currentWeapon.style.filter = "blur(5px)";
appInfo.style.filter = "blur(5px)";
}
});
function mouseoverWeapon(element){
hoveredWeaponName.textContent = element.dataset.weapon;
hoveredWeaponDamage.style.width = element.dataset.damage;
hoveredWeaponFireRate.style.width = element.dataset.fireRate;
hoveredWeaponAccuracy.style.width = element.dataset.accuracy;
hoveredWeaponRange.style.width = element.dataset.range;
}
function onmouseoutWeapon(){
hoveredWeaponName.textContent = "Select Weapon";
hoveredWeaponDamage.style.width = "0%";
hoveredWeaponFireRate.style.width = "0%";
hoveredWeaponAccuracy.style.width = "0%";
hoveredWeaponRange.style.width = "0%";
}
function changeCurrentWeaponWith(element) {
var currentWeaponName = document.getElementById('current-weapon-name');
var currentWeaponImage = document.getElementById('current-weapon-image');
var activeWeapon = document.getElementsByClassName('active-weapon')[0];
activeWeapon.classList.remove('active-weapon');
currentWeaponName.innerHTML = element.dataset.weapon;
currentWeaponImage.src = element.dataset.image;
element.classList.add("active-weapon");
selectorModal.classList.remove("active");
currentWeapon.style.filter = "none";
appInfo.style.filter = "none";
}Final Output:
Conclusion:
Congratulations on building your very own GTA 5 Weapon Wheel using HTML, CSS, and JavaScript! By following this tutorial, you have learned how to create a fun, interactive project that can be customized to your liking. You can now experiment with different designs and functionality to make your Weapon Wheel truly unique.
Remember to continue practicing your HTML, CSS, and JavaScript skills by building more projects and experimenting with new ideas. The possibilities are endless, and with each project, you will continue to improve your skills.
We hope you found this tutorial helpful and that you had fun building your Weapon Wheel. If you have any questions or feedback, please leave a comment below. Happy coding!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
