Divyastra

## **Arrow Fight : ** ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92r56tt59qlp966kll46.png) ## **For checking Website [click here...](https://divyaastra.netlify.app/) ** **Code : ** ## HTML (index.html) ``` `

Divyastra

` ``` ## 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 ** ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xl70m3fsgvddcmxdewpe.png) **2: arrow2** ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1xrc4cj1y1l05r487be.png) **3: Background** ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tisxgpqez9wt0uxt0nv1.png) ** > ADD sounds hit.mp3 and arrow-moving.mp3 of your choice **

codecraftsbysid

Arrow fight

Join Our Newsletter. No Spam, Only the good stuff.