Gta V Weapon Wheel Using Html Css Javascript:
.png)
In this interesting tutorial, we'll explore the world of game development by recreating the iconic GTA V weapon wheel using HTML, CSS, and JavaScript. If you're an aspiring game developer or just a fan of GTA V, this step-by-step guide will walk you through the process of designing and implementing your very own interactive weapon wheel in the game. From sleek interfaces to smooth transitions, we'll cover it all! Get ready to hone your web development skills and unleash your creativity. Join us now and learn how to build an awesome GTA V weapon wheel from scratch.
.png)
The source code for the given topic is:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Gta V</title>
</head>
<body>
<div id="app-info">
<img src="https://logonoid.com/images/grand-theft-auto-v-logo.png" height="300"/>
</div>
<div id="current-weapon">
<h3>Current Weapon:</h3>
<div id="current-weapon-info">
<h1 id="current-weapon-name">SMG</h1>
<img id="current-weapon-image" src="https://vignette.wikia.nocookie.net/gtawiki/images/5/5e/SMG-GTAVPC-HUD.png/revision/latest/scale-to-width-down/185?cb=20150419121752">
</div>
<button id="weapon-selector-button">Change</button>
</div>
<div id="weapon-selector-wrapper">
<div id="weapon-properties">
<h4>Damage</h4>
<div class="bar">
<div id="damage" class="value-bar"></div>
</div>
<h4>Fire Rate</h4>
<div class="bar">
<div id="fire-rate" class="value-bar"></div>
</div>
<h4>Accuracy</h4>
<div class="bar">
<div id="accuracy" class="value-bar"></div>
</div>
<h4>Range</h4>
<div class="bar">
<div id="range" class="value-bar"></div>
</div>
</div>
<svg height="620px" width="620px">
<text text-anchor="middle" id="hovered-weapon-name" x="175" y="400" font-size="18" stroke="none">Select Weapon</text>
<g onclick="changeCurrentWeaponWith(this)"
onmouseover="mouseoverWeapon(this)"
onmouseout="onmouseoutWeapon()"
data-weapon="Marksman Rifle"
data-image="https://vignette.wikia.nocookie.net/gtawiki/images/c/c8/MarksmanRifle-GTAVPC-HUD.png/revision/latest/scale-to-width-down/185?cb=20150419122123"
data-damage="90%"
data-fire-rate="80%"
data-accuracy="40%"
data-range="30%">
<path d="M 610 310 A 300 300 0 0 1 522.1320343559643 522.1320343559643 L 451.4213562373095 451.4213562373095 A 200 200 0 0 0 510 310 z" fill="rgba(255,255,255,0.3)"/>
<image xlink:href="https://vignette.wikia.nocookie.net/gtawiki/images/c/c8/MarksmanRifle-GTAVPC-HUD.png/revision/latest/scale-to-width-down/185?cb=20150419122123" x="240" y="460" height="200px" width="200px"/>
<text x="300" y="620" font-size="18" fill="white">6 / 6</text>
</g>
<g onclick="changeCurrentWeaponWith(this)"
onmouseover="mouseoverWeapon(this)"
onmouseout="onmouseoutWeapon()"
data-weapon="Fist"
data-image="https://vignette.wikia.nocookie.net/gtawiki/images/e/e0/Fist-GTAVPC-HUD.png/revision/latest?cb=20150425182638"
data-damage="50%"
data-fire-rate="60%"
data-accuracy="70%"
data-range="10%">
<path d="M 522.1320343559643 522.1320343559643 A 300 300 0 0 1 310 610 L 310 510 A 200 200 0 0 0 451.4213562373095 451.4213562373095 z" fill="rgba(255,255,255,0.3)"/>
<image xlink:href="https://vignette.wikia.nocookie.net/gtawiki/images/e/e0/Fist-GTAVPC-HUD.png/revision/latest?cb=20150425182638" x="140" y="620" height="60px" width="60px"/>
</g>
<g onclick="changeCurrentWeaponWith(this)"
onmouseover="mouseoverWeapon(this)"
onmouseout="onmouseoutWeapon()"
data-weapon="Sawed-Off Shotgun"
data-image="https://vignette.wikia.nocookie.net/gtawiki/images/b/b4/SawedoffShotgun-GTAVPC-HUD.png/revision/latest/scale-to-width-down/185?cb=20150419121516"
data-damage="90%"
data-fire-rate="80%"
data-accuracy="40%"
data-range="30%">
<path d="M 310 610 A 300 300 0 0 1 97.86796564403576 522.1320343559643 L 168.57864376269052 451.4213562373095 A 200 200 0 0 0 310 510 z" fill="rgba(255,255,255,0.3)"/>
<image xlink:href="https://vignette.wikia.nocookie.net/gtawiki/images/b/b4/SawedoffShotgun-GTAVPC-HUD.png/revision/latest/scale-to-width-down/185?cb=20150419121516" x="-50" y="510" height="120px" width="120px"/>
<text x="0" y="620" font-size="18" fill="white">1 / 2</text>
</g>
<g onclick="changeCurrentWeaponWith(this)"
onmouseover="mouseoverWeapon(this)"
onmouseout="onmouseoutWeapon()"
data-weapon="Minigun"
data-image="https://vignette.wikia.nocookie.net/gtawiki/images/2/27/Minigun-GTAVPC-HUD.png/revision/latest/scale-to-width-down/185?cb=20150419122509"
data-damage="90%"
data-fire-rate="80%"
data-accuracy="40%"
data-range="30%">
<path d="M 97.86796564403576 522.1320343559643 A 300 300 0 0 1 10 310.00000000000006 L 110 310 A 200 200 0 0 0 168.57864376269052 451.4213562373095 z" fill="rgba(255,255,255,0.3)"/>
<image xlink:href="https://vignette.wikia.nocookie.net/gtawiki/images/2/27/Minigun-GTAVPC-HUD.png/revision/latest/scale-to-width-down/185?cb=20150419122509" x="-150" y="330" height="150px" width="150px"/>
<text x="-100" y="460" font-size="18" fill="white">77 / 100</text>
</g>
<g onclick="changeCurrentWeaponWith(this)"
onmouseover="mouseoverWeapon(this)"
onmouseout="onmouseoutWeapon()"
data-weapon="Jerry Can"
data-image="https://vignette.wikia.nocookie.net/gtawiki/images/7/73/JerryCan-GTAVPC-HUD.png/revision/latest?cb=20150425183426"
data-damage="20%"
data-fire-rate="80%"
data-accuracy="40%"
data-range="45%">
<path d="M 10 310.00000000000006 A 300 300 0 0 1 97.8679656440357 97.86796564403576 L 168.57864376269046 168.57864376269052 A 200 200 0 0 0 110 310 z" fill="rgba(255,255,255,0.3)"/>
<image xlink:href="https://vignette.wikia.nocookie.net/gtawiki/images/7/73/JerryCan-GTAVPC-HUD.png/revision/latest?cb=20150425183426" x="-45" y="180" height="70px" width="70px"/>
<text x="-20" y="280" font-size="18" fill="white">6</text>
</g>
<g onclick="changeCurrentWeaponWith(this)"
onmouseover="mouseoverWeapon(this)"
onmouseout="onmouseoutWeapon()"
data-weapon="Pistol"
data-image="https://vignette.wikia.nocookie.net/gtawiki/images/8/8f/Pistol-GTAVPC-HUD.png/revision/latest?cb=20150419121059"
data-damage="30%"
data-fire-rate="60%"
data-accuracy="80%"
data-range="60%">
<path d="M 97.8679656440357 97.86796564403576 A 300 300 0 0 1 309.99999999999994 10 L 309.99999999999994 110 A 200 200 0 0 0 168.57864376269046 168.57864376269052 z" fill="rgba(255,255,255,0.3)"/>
<image xlink:href="https://vignette.wikia.nocookie.net/gtawiki/images/8/8f/Pistol-GTAVPC-HUD.png/revision/latest?cb=20150419121059" x="130" y="90" height="100px" width="90px"/>
<text x="150" y="190" font-size="18" fill="white">6 / 12</text>
</g>
<g onclick="changeCurrentWeaponWith(this)"
onmouseover="mouseoverWeapon(this)"
onmouseout="onmouseoutWeapon()"
data-weapon="SMG"
data-image="https://vignette.wikia.nocookie.net/gtawiki/images/5/5e/SMG-GTAVPC-HUD.png/revision/latest/scale-to-width-down/185?cb=20150419121752"
data-damage="70%"
data-fire-rate="10%"
data-accuracy="50%"
data-range="80%"
class="active-weapon">
<path d="M 309.99999999999994 10 A 300 300 0 0 1 522.1320343559642 97.8679656440357 L 451.4213562373095 168.57864376269046 A 200 200 0 0 0 309.99999999999994 110 z" fill="rgba(255,255,255,0.3)"/>
<image xlink:href="https://vignette.wikia.nocookie.net/gtawiki/images/5/5e/SMG-GTAVPC-HUD.png/revision/latest/scale-to-width-down/185?cb=20150419121752" x="290" y="160" height="130px" width="130px"/>
<text x="330" y="280" font-size="18" fill="white">12 / 30</text>
</g>
<g onclick="changeCurrentWeaponWith(this)"
onmouseover="mouseoverWeapon(this)"
onmouseout="onmouseoutWeapon()"
data-weapon="Carbine Rifle"
data-image="https://vignette.wikia.nocookie.net/gtawiki/images/7/7a/CarbineRifle-GTAVPC-HUD.png/revision/latest/scale-to-width-down/185?cb=20150419121949"
data-damage="90%"
data-fire-rate="20%"
data-accuracy="60%"
data-range="70%">
<path d="M 522.1320343559642 97.8679656440357 A 300 300 0 0 1 610 309.99999999999994 L 510 309.99999999999994 A 200 200 0 0 0 451.4213562373095 168.57864376269046 z" fill="rgba(255,255,255,0.3)"/>
<image xlink:href="https://vignette.wikia.nocookie.net/gtawiki/images/7/7a/CarbineRifle-GTAVPC-HUD.png/revision/latest/scale-to-width-down/185?cb=20150419121949" x="360" y="340" height="130px" width="130px"/>
<text x="390" y="460" font-size="18" fill="white">30 / 30</text>
</g>
</svg>
</div>
</body>
<script src="script.js"></script>
</html>
Style.css
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;
}
Script.js
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";
}
