Arrow fight

Arrow Fight :

**For checking Website click here...

*Code : *

HTML (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">
    <audio id="audio" src="arrow-moving.mp3"></audio>
    <audio id="audio1" src="hit.mp3"></audio>
    <title>Divyastra</title>
</head>

<body>
    <div class="container">
        <div class="arrow1" id="ar-1">
            <img class="img" src="arrow.png" alt="arrow">
            <div id="sk-1"></div>
        </div>
        <div class="arrow2" id="ar-2">
            <img class="img" src="arrow2.png" alt="arrow">
            <div id="sk-2"></div>
        </div>
    </div>
    </div>
    <div class="button">
        <button id="btn" onclick="myFunction()">Shoot</button>
    </div>
    <script src="script.js"></script>
</body>
</html>`

CSS (style.css) :

* {
    margin: 0;
    padding: 0;
}
body{
    background: url("bg.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.container {
    display: flex;
    height: 90vh;
    align-items: center;
    justify-content: space-between;
}

.container img {
    width: 20vw;
    height: 10vh;
    /* box-shadow: 10px 10px 10px red;
     */
     filter: drop-shadow(10px 10px 10px grey);
}

.arrow1 {
    position: relative;
    left: 0;
}

.arrow2 {
    position: relative;
    right: 0;
}

.animate_1 {
    animation: attack1 5s linear infinite forwards;
}

.animate_2 {
    animation: attack2 5s linear infinite forwards;
}

@keyframes attack1 {
    0% {
        left: 0;
    }

    30% {
        left: 30%;
    }
    70% {
        left: 30%;
    }

    100% {
        left: 0;
    }
}

@keyframes attack2 {
    0% {
        right: 0;
    }

    30% {
        right: 30%;
    }
    70% {
        right: 30%;
    }

    100% {
        right: 0;
    }
}

.shakti_1 {
    /* background-color: red; */
    border-radius: 50%;
    position: absolute;
    width: 15%;
    height: 60%;
    right: -1%;
    top: 16%;
    opacity: 0.9;
    z-index: -1;
    animation: GFG 0.8s infinite linear;
}

.shakti_1::after,
.shakti_1:before{
    content: "";
    background-color:inherit;
    border-radius: 50%;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    z-index: -1;
}

.shakti_1::after {
    animation: bumble 2s ease-out infinite;
}

.shakti_1:before {
    animation: bumble 2s 1s ease-out infinite;
}

@keyframes bumble {
    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}

.shakti_2 {
    background-color: inherit;
    border-radius: 50%;
    position: absolute;
    width: 15%;
    height: 60%;
    left: -1%;
    top: 16%;
    opacity: 0.9;
    z-index: -1;
    animation: GFG 0.8s infinite linear;
}
@keyframes GFG {
    0% {
        transform: rotate(0deg) 
              translateY(5px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) 
              translateY(5px) rotate(-360deg);
    }
}

.shakti_2::after,
.shakti_2:before{
    content: "";
    background-color: green;
    border-radius: 50%;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    z-index: -1;
}

.shakti_2::after {
    animation: bumble 2s ease-out infinite;
}

.shakti_2:before {
    animation: bumble 2s 1s ease-out infinite;
}

@keyframes bumble {
    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}

.button{
    display: flex;
    width: 100vw;
    height: 10vh;
    align-items: center;
    justify-content: center;
}

button{
    width: 250px;
    height: 40px;
    font-size: 22px;
    border: none;
    font-weight: 500;
    letter-spacing: 1px;
    border-radius: 5px;
}
button:hover{
    background-color:rgb(92, 18, 18);
    color: aliceblue;
    box-shadow: 10px 10px 10px black;
}

JavaScript (script.js)

function myFunction() {
    const arrow1 = document.querySelector('.arrow1');
    const arrow2 = document.querySelector('.arrow2');
    const sk1 = document.getElementById('sk-1');
    const sk2 = document.getElementById('sk-2');
    const audio = document.querySelector('#audio');
    const audio1 = document.querySelector('#audio1');
    const arrows = [arrow1, arrow2];
    const shaktis = [sk1, sk2];
    const arrowIds = ['ar-1', 'ar-2'];
    const button = document.getElementById("btn");

    //Disable Shoot button
    button.disabled = true;

    // Add animation classes to arrows so they start moving
    arrows.forEach((arrow, index) => {
        arrow.classList.add(`animate_${index + 1}`);
    });

    // Add shakti classes to sk1 and sk2
    shaktis.forEach((shakti, index) => {
        shakti.classList.add(`shakti_${index + 1}`);
    });

    // Generate random background colors for shaktis
    shaktis.forEach(shakti => {
        const randomColor = Math.floor(Math.random() * 16777215).toString(16);
        shakti.style.backgroundColor = `#${randomColor}`;
    });

    audio.play();                 // Play arrow moving audio
    setTimeout(() => {           // Play arrow hiting sound
        audio1.play();
    }, 1500);

    // Hide defeated arrow
    const nonVisibleId = arrowIds[Math.floor(Math.random() * arrowIds.length)];
    const nonVisibleArrow = document.getElementById(nonVisibleId);
    setTimeout(() => {
        nonVisibleArrow.style.visibility = 'hidden';
        shaktis.forEach(shakti => shakti.classList.remove('shakti_1', 'shakti_2'));
    }, 3000);

    // Reset arrows
    setTimeout(() => {
        nonVisibleArrow.style.visibility = 'visible';
        arrows.forEach(arrow => arrow.classList.remove('animate_1', 'animate_2'));

        //Enable Shoot button
        button.disabled = false;
    }, 4965);
}

*images : *

*1: arrow1 *