battleground mobile india Html Css Javascript project

battle ground mobile india and PUBG Html CSS and Javascript project

in this blog post i shared a post battlegrounds mobile india  and pubg gun fun with using html css and javascript project

here is the code:-

HTML code

<div id="main">

        <audio src="Snipershot.mp3" id="song"></audio>

    </div>

CSS code

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

#main{

    position: relative;

    width: 100%;

    height: 100vh;

    background-image: url(bgmi.png);

    background-repeat: no-repeat;

    background-size: 100% 100%;

    background-position: center;

    cursor: url(target.png),pointer;

}

#main:active{

    cursor: url(target_click.png),pointer;

}

span{

    position: absolute;

    height: 30px;

    width: 34px;

    background-image:url(bulletHole.png);

    transform: translate(30px,34px);

}

Javascript code

  document.addEventListener("click",function(e){

            var main=document.querySelector("#main");

            var bullets=document.createElement("span");

            var x=e.offsetX;

            var y=e.offsetY;

            bullets.style.left=x + "px";

            bullets.style.top=y + "px";

            main.appendChild(bullets);

            var song=document.querySelector("#song");

            song.play();

        })

DOWNLOAD SOURCE CODE