P’New (Copy 1439) (Branch 1491) (Copy 1505) (Branch 1510) (Copy 1519)

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

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

<html>

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

#tree {
    position: absolute;
    display: block;
    width: 200px;
    bottom: 80px;
    left: 100px;
}

#ground {
  
  	margin-left:450px;
    position: absolute;
    display: block;
    width: 500px;
  height:600px;
    bottom: -30px;

}

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

}
    
#scoreboard {
    width: 500px;
    margin: 4px auto;
    padding: 3px;
  text-align:center;
    background-color: #7d5d26;
  border-radius:20px;
   border:6px double #5a4830;
}

#scoreboard:after {
    clear: both;
    display: block;
    content: " ";
}

#scoreboard li {
    list-style: none;
    box-sizing: border-box;
    width: 33%;
    padding: 4px;
    text-align: center;
    float: left;
  color:whitesmoke;
 
}

span {
    font-weight: bold;
    color: white;
}
  </style>
    <link rel="stylesheet" href="assets/css/game.css" />
    <title>spider mann</title>
</head>

<body>

<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;" onclick="startGame();" id="btn">Play</button></li>
        <li>Score: <span id="score">0</span></li>
    </ol>

<p style="width: 130px; margin-left:500px;margin-top:0px;text-align:center;background-color:#c02126;border-radius:30px;height:25px;color:white;border:5px double;">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} apple 
 */
function fallDown(apple) {
    if (!(IsPlaying && apple instanceof HTMLElement)) {
        return;
    }
    //store the current top position for future refrence.
    apple.setAttribute('data-top', apple.style.top);
    //change the top position, this is animated using transition property in CSS
    apple.style.top = "380px";
    //increase score
    score = score + 5;
    //show the score by calling this function
    renderScore();
    //hide the apple after it reaches the ground by calling this function
    hideFallenApple(apple);
}

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

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

/**
 * 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>