Skip to content

Instantly share code, notes, and snippets.

@NANDHINI7390

NANDHINI7390/fight-game.markdown

Created September 4, 2023 10:29
Show Gist options
  • Save NANDHINI7390/b5566e7dbf15b3f83848f1a4db2fe4e3 to your computer and use it in GitHub Desktop.
Save NANDHINI7390/b5566e7dbf15b3f83848f1a4db2fe4e3 to your computer and use it in GitHub Desktop.
Download ZIP
Fight game
Raw
index.html
<body style="background-color :black " >
<h1 style ="color:#04B45F " ><center>COME 👊N FIGHT</center></h1>
<h style ="color:#B18904 "><center>VISHNU &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VIRAT</center></h>
<br>
<div class="bars" >
<meter id="power1" value ="10" min="0" max="10" style="visibility:hidden;position:relative;left:80px;"></meter >
<meter id="power2" value="10" min="0" max="10" style="visibility:hidden;position:relative;left:120px;bottom :0px"></meter>
</div>
<br>
<div id="fight" >
<img id="p2" src= "https://i.gifer.com/HaCB.gif "height=100 width=100 hspace=190 ></img>
<img id="p1" src="https://i.gifer.com/ZgtM.gif "height=100 width=100 style = "position:relative; left:70px;bottom :100px;" ></img>
</div>
<button id="play" style="position :relative;left:150px;bottom:80px;background-color :black ;color:#00FFFF;border-radius:10px;padding:10px;" ><center>PLAY</center></button >
<div class="buttons">
<button id="p2k" style="position:relative;left:230px;bottom:93px; border-radius:10px;padding:10px;background-color :black ;color:#00FFFF;visibility:hidden; ">cl:Kick </button>
<br>
<br>
<button id="p2p" style="position :relative;left:220px;bottom :90px;border-radius:10px;padding:10px;background-color: black ;color:#00FFFF;visibility:hidden; ">Dbcl:Punch</button>
<button id="p1k" style="position:relative;right:19px;bottom :150px;border-radius:10px;padding:10px;background-color:black ;color:#00FFFF;visibility:hidden" >Mover:Kick</button>
<br>
<button id="p1p" style="position:relative;left:76px;bottom:130px;border-radius:10px;padding:10px;background-color: black ;color:#00FFFF;visibility:hidden;" >Mout:Punch</button >
</div>
<br
<div >
<h id="gameover" style ="color:red;position:relative;left:20px;bottom:230px;display :none" ><center ><b>GAME OVER☹️ </b><center ></h>
<br>
</div>
<div id="wins" >
</div>
<br>
<div>
<button id="reset" style="color:#00FFFF;background-color:black;border-radius:10px;padding:10px;display:none; " ><center>RESET</center ></button >
</div>
Raw
script.js
const Play=document.getElementById ("play")
let audio3=new Audio("https://www.fesliyanstudios.com/play-mp3/5269")
let audio4=new Audio("https://www.fesliyanstudios.com/play-mp3/5254 ")
let audio5=new Audio("https://www.fesliyanstudios.com/play-mp3/7006 ")
Play. addEventListener('click',function () {
audio3.play()
Play.style.display="none" ;
let pow1=document.getElementById ("power1")
let pow2=document.getElementById ("power2")
pow1.style.visibility="visible " ;
pow2.style.visibility="visible" ;
let kick2=document.getElementById ("p2k")
let punch2=document.getElementById ("p2p")
let kick1=document.getElementById ("p1k")
let punch1=document.getElementById ("p1p")
kick2.style.visibility="visible";
punch2.style.visibility="visible" ;
kick1.style.visibility="visible" ;
punch1.style.visibility="visible" ;
})
class player{
constructor (name, power) {
this.name =name ;
this.power =power;
}
kick() {
console.log("kicked") ;
}
punch() {
console.log ("punched")
}
}
const Player1=new player("Vishnu", 10);
const Player2=new player("Virat", 10);
//console.log (Player1.name)
//console.log (Player2. name)
let kick1=document.getElementById ("p1k")
let kick2=document.getElementById ("p2k")
let punch1=document.getElementById ("p1p")
let punch2=document.getElementById ("p2p")
let pow1=document.getElementById ("power1")
let pow2=document.getElementById ("power2")
let audio1=new Audio("https://www.fesliyanstudios.com/play-mp3/5668 ")
let audio2=new Audio("https://www.fesliyanstudios.com/play-mp3/1155 ") ;
kick1. addEventListener ("mouseover", function () {
pow2.value-=1.5;
audio1.play();
if(pow2.value ==0){
const gameOver=document.getElementById("gameover")
let winner=document.getElementById ("wins") ; let reset=document.getElementById ("reset") ;
kick2.style.visibility="hidden ";
punch2.style.visibility="hidden" ;
kick1.style.visibility="hidden" ;
punch1.style.visibility="hidden "
gameOver.style.display ="block " ;
audio4.play();
winner.style.display ="block";
winner.style.color =" #7FFFD4 ";
winner.style.fontWeight="bold";
winner. innerHTML=(Player1.name)+"Wins🎉"
reset.style.display ="block " ;
}
})
kick2. addEventListener ("click", function () {
pow1.value-=1.5;
audio1.play();
if(pow1.value ==0){
const gameOver=document.getElementById("gameover")
let winner=document.getElementById ("wins") ;
kick2.style.visibility="hidden";
punch2.style.visibility="hidden " ;
kick1.style.visibility="hidden " ;
punch1.style.visibility="hidden "
gameOver.style.display ="block " ;
audio4.play();
winner.style.display ="block";
winner.style.color =" #7FFFD4 ";
winner.style.fontWeight="bold";
winner. innerHTML=(Player2. name) +"Wins🎉" ;
reset.style.display ="block " ;
}
})
punch1. addEventListener ("mouseout", function () {
pow2.value-=1;
audio2.play();
if(pow2.value ==0){
const gameOver=document.getElementById("gameover") ;
let winner=document.getElementById ("wins") ;
kick2.style.visibility="hidden ";
punch2.style.visibility="hidden " ;
kick1.style.visibility="hidden " ;
punch1.style.visibility="hidden "
gameOver.style.display ="block " ;
audio4.play() ;
winner.style.display ="block";
winner.style.color =" #7FFFD4 ";
winner.style.fontWeight="bold";
let win="Wins🎉" ;
winner.innerHTML =(Player1.name)+ win;
reset.style.display ="block " ;
}
})
punch2. addEventListener ("dblclick", function () {
pow1.value-=1;
audio2.play();
if(pow1.value==0){
const gameOver=document.getElementById("gameover") ;
let winner=document.getElementById ("wins") ;
kick2.style.visibility="hidden ";
punch2.style.visibility="hidden " ;
kick1.style.visibility="hidden " ;
punch1.style.visibility="hidden "
gameOver.style.display ="block " ;
audio4.play () ;
winner.style.display ="block";
winner.style.color =" #7FFFD4 ";
winner.style.fontWeight="bold";
let win="Wins🎉" ;
winner. innerHTML =(Player2.name) +win;
reset.style.display ="block " ;
}
})
reset. addEventListener ("click", function () {
audio5.play()
const gameOver=document.getElementById("gameover")
gameOver.style.display ="none" ;
let winner=document.getElementById ("wins") ;
winner.style.display="none" ;
let pow1=document.getElementById ("power1")
pow1.style.visibility="hidden " ;
let pow2=document.getElementById ("power2")
pow2.style.visibility="hidden " ;
const Play=document.getElementById ("play")
Play.style.display="block" ;
pow1.value =10;
pow2.value =10;
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment