P’New (Copy 1439) (Branch 1491) (Copy 1505) (Branch 1510) (Copy 1553) (Copy 1558) (Branch 1567)

P’New (Copy 1439) (Branch 1491) (Copy 1505) ..

✨ นายสรรค์ธกรณ์ วงศ์ศิริภา

<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;
}

/*#tree {
    position: absolute;
    display: block;
    width: 200px;
    bottom: 80px;
    left: 100px;
    z-index:1;
  
}*/

.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% 80%;
      color:white;
     border-radius:10px;
       font-size:25px;
      top:2%;
      left:3%;
      z-index:20;
    }
    #ground {
  
  	margin-left:1200px;
    position: absolute;
    display: block;
    width: 500px;
  height:600px;
    bottom: -70px;
    z-index:0;

}

.spider {
    position: absolute;
    top: 225px;
    left: 120px;
    width: 150px;
    height: auto;
    transition: top .5s ease;
  	 animation : move 10s infinite;
  z-index:1;
}
    @keyframes move{
      20% {transform:translatey(50px)}
      50% {transform:translatey(100px)}

}
    .webbg{
		position:absolute;
      top:0%;
      left:0%;
      height:300px;
      width:300px;
      z-index:0;
      
    }
    #scoreboard {
    width: 500px;
    margin: 1px auto;
    margin-right: 100px;
      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;

}

span {
    font-weight: bold;
    color: white;
}
  </style>
    <title>Spider Slayer</title>
</head>

<body>
  <h1 class="name">Spider Slayer</h1>
  <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>
  <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:20%;
      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>

<img id="ground" src="https://i.imgur.com/pqVQDR6.png" />
        
        <img style="top: -200px ;left: 1200px;" onclick="fallDown(this)" class="spider" src="https://i.imgur.com/RSDfoU8.png" />
        <img style="top: -400px ;left: 850px;" onclick="fallDown(this)" class="spider" src="https://i.imgur.com/RSDfoU8.png" />
        <img style="top: -500px ;left: 600px;" onclick="fallDown(this)" class="spider" src="https://i.imgur.com/RSDfoU8.png" />
        <img style="top: -350px ;left: 400px;" onclick="fallDown(this)" class="spider" src="https://i.imgur.com/RSDfoU8.png" />
        <img style="top: -465px ;left: 200px;" onclick="fallDown(this)" class="spider" src="https://i.imgur.com/RSDfoU8.png" />
        <img style="top: -450px ;left: 1000px;" onclick="fallDown(this)" class="spider" src="https://i.imgur.com/RSDfoU8.png" />
  		<img style="top: -290px ;left: 100px;" onclick="fallDown(this)" class="spider" src="https://i.imgur.com/RSDfoU8.png" />
	
  
    <p style="padding:3px;right:0px;text-align:center;background-color:#c02126;border-radius:30px;color:white;border:5px double;width:200px">HIGHSCORE: <span id="high">0</span></p>
    <script>/**
 * If you have completely understood whats going on here in the code then
 * your next challenge is to recreate this game in Object Oriented Style.
 * Also you can add some more effects like moving clouds, birds, sounds to game.
 */

//these are global variables because they need to be accessed by multiple functions.
var score = 0,
    highScore = 0,
    time = 30,
    timer;
var IsPlaying = false;
var timeBoard = document.getElementById('time'),
    scoreBoard = document.getElementById('score'),
    btnStart = document.getElementById('btn');

/**
 * Makes the provided element fall down by changing the top property.
 * @param {HTMLElement} spider 
 */
function fallDown(spider) {
    if (!(IsPlaying && spider instanceof HTMLElement)) {
        return;
    }
    //store the current top position for future refrence.
    spider.setAttribute('data-top', spider.style.top);
    //change the top position, this is animated using transition property in CSS
    spider.style.top = "0px";
    //increase score
    score = score + 5;
    //show the score by calling this function
    renderScore();
    //hide the spider after it reaches the ground by calling this function
    hideFallenspider(spider);
}

/**
 * Hides the provided element by changing the display property.
 * @param {HTMLElement} spider 
 */
function hideFallenspider(spider) {
    //we need to wait until the spider has fallen down
    //so we will use this setTimeout function to wait and the hide the spider
    setTimeout(function () {
        spider.style.display = 'none';
        //call the function that will move the spider to top
        //and display it again
        restoreFallenspider(spider);
    }, 200);
}

/**
 * Shows the provided element by changing the display property and restores top position.
 * @param {HTMLElement} spider 
 */
function restoreFallenspider(spider) {
    //as in hideFallenspider we need to wait and the make the html element visible
    //restore the top value
    spider.style.top = spider.getAttribute('data-top');
    spider.style.left = Math.floor((Math.random() * 1200)+1);
    setTimeout(function () {
        spider.style.display = 'inline-block';
    }, 500);
}

/**
 * Shows the score in the HTMLElement and checks for High Score.
 * 
 */
function renderScore() {
    scoreBoard.innerText = score;
    if (score > highScore) {
        highScore = score;
        document.getElementById('high').innerText = highScore;
    }
}

/**
 * Makes the game playable by setting IsPlaying flag to true.
 * 
 */
function startGame() {
    //disable the button to make it unclickable
    btnStart.disabled = "disabled";
    IsPlaying = true;
    renderScore();
    //start countDown function and call it every second
    //1000 is in millisecond = 1 second
    //timer variable stores refrence to the current setInterval
    //which will be used to clearInterval later.
    timer = setInterval(countDown, 1000);
}

/**
 * Performs countDown and the displays the time left.
 * if the time has end it will end the game
 * 
 */
function countDown() {
    time = time - 1;
    timeBoard.innerText = time;
    if (time == 0) {
        //clear the interval by using the timer refrence
        clearInterval(timer);
        //call end game
        endGame();
    }
}

/**
 * Ends the game by setting IsPlaying to false,
 * finally resets the score, time and enables btnStart.
 */
function endGame() {
    IsPlaying = false;
    alert("Your score is " + score);
    //reset score and time for next game.
    score = 0;
    time = 30;
    //enable the button to make it clickable
    btnStart.removeAttribute('disabled');
}</script>

</body>

</html>