GroupE P’New

✨ RUJRAWEE MEELA

<html>

<head>
    <meta charset="utf-8" />
  <style>
    html,
body {
    font-family: 'Fredoka One';
    text-transform: uppercase;
  background:url(https://www.jps2013.com/wp-content/uploads/2020/10/S-HAL-11.jpg);
  background-position:45% 80%;
  z-index:0;
}

.name{
	position:absolute;
      padding:8px;
      background:url(https://png.pngtree.com/thumb_back/fh260/back_our/20190620/ourmid/pngtree-halloween-alternative-horror-banner-image_173182.jpg);
      background-position:50% 90%;
      color:white;
     border-radius:10px;
       font-size:25px;
      top:2%;
      left:3%;
      z-index:20;
    }
    #ground {
  
  	margin-left:450px;
    position: absolute;
    display: block;
    width: 500px;
  height:600px;
    bottom: -30px;
    z-index:0;

}
    @keyframes move{
      from{transform:translatey(30px)}
      to {transform:translatey(300px)}

}
.spider {
    position: absolute;
    top: 225px;
    left: 120px;
    width: 150px;
    height: auto;
    transition: top .5s ease;
  	  animation : move 10s infinite alternate; 
  z-index:1;
  
}
    body:hover{
    cursor: url(https://ani.cursors-4u.net/games/gam-16/gam1543.cur), auto !important;
    }
    .webbg{
position:absolute;
      top:0%;
      left:0%;
      height:300px;
      width:300px;
      z-index:0;
      
    }
    #scoreboard {
    width: 500px;
    margin: 1px auto;
      padding: 2px;
  text-align:center;
    background:url(https://png.pngtree.com/thumb_back/fh260/background/20190223/ourmid/pngtree-hand-drawn-cartoon-horror-halloween-background-backgroundholiday-backgroundancient-castlepumpkin-image_73619.jpg);
      background-position:50% 80%;
  border-radius:20px;
   border:6px double #5a4830;
  z-index:-1;
}

#scoreboard:after {
    clear: both;
    display: block;
    content: " ";
   z-index:-1;
    }

#scoreboard li {
    list-style: none;
    box-sizing: border-box;
    width: 33%;
    padding: 4px;
    text-align: center;
    float: left;
  color:whitesmoke;
   z-index:-1;
    text-align:center;
  font-size:20px;

}
button:hover{
    cursor: url(https://ani.cursors-4u.net/games/gam-16/gam1543.cur), auto !important;
    }
span {
    font-weight: bold;
    color: white;
}
  </style>
    <title>Spider Slayer</title>
</head>

<body>
  <h1 class="name">Spider Slayer</h1>
  <div class="web">
  <img src="https://cdn.pixabay.com/photo/2013/07/13/13/54/spider-161750_1280.png" class="webbg"><img>
    <img src="https://cdn.pixabay.com/photo/2013/07/13/13/54/spider-161750_1280.png" style="top:0%;
      left:75%;height:300px;width:300px;" class="webbg"><img>
    <img src="https://cdn.pixabay.com/photo/2013/07/13/13/54/spider-161750_1280.png" style="top:10%;
      left:90%;height:200px;width:200px;" class="webbg"><img>
    <img src="https://cdn.pixabay.com/photo/2013/07/13/13/54/spider-161750_1280.png" style="top:25%;
      left:47%;height:200px;width:200px;z-index:1;opacity:0.7;" class="webbg"><img>
  </div>
    <ol id="scoreboard">
        <li >Time Left: <span id="time" >30</span></li>
        <li><button style="background-color:#c47021;border-radius:30px;height:30px;width:60px;color:white;border:5px double;font-family: 'Fredoka One';" onclick="startGame();" id="btn">Play</button></li>
        <li>Score: <span id="score";>0</span></li>
    </ol>

<p style="padding:3px;margin-left:500px;margin-top:0px;text-align:center;background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDon-J3sLfOvF3_9s0frRfSiFQtgsFi3IdfA&usqp=CAU);
      background-position:25% 10%;border-radius:30px;color:white;border:5px double;width:200px;">HIGHSCORE: <span id="high">0</span></p>

<div style= "z-index : 200;">
    <button style="background:linear-gradient(to right,#006666,#00CCCC);border-radius:30px;height:35px;width:100px;color:white;font-size:17;text-align:center;border:5px double;font-family: 'Fredoka One';position:absolute;top:12%;left:60%;" onclick="window.location.href='https://youtu.be/3C13O9dr8vg'">CREDIT</button></div>

function startGame() {
    btnStart.disabled = "disabled";
    IsPlaying = true;
    renderScore();
    timer = setInterval(countDown, 1000);
}

function countDown() {
    time = time - 1;
    timeBoard.innerText = time;
    if (time == 0) {
        clearInterval(timer);
        endGame();
    }
}

function endGame() {
    IsPlaying = false;
    alert("Your score is " + score);
    score = 0;
    time = 15;
    btnStart.removeAttribute('disabled');
}</script>

</body>

</html>