Build a HTML5 Apple Catcher or Picking Game From Tree in Browser Using Javascript Full Project For Beginners






<!doctype html>

    <meta charset="utf-8" />
    <link rel="stylesheet" href="../assets/css/apple_game.css" />
    <title>Apple Collector</title>


    <ol id="scoreboard">
        <li>Time Left: <span id="time">30</span></li>
        <li><button onclick="startGame();" id="btn">Play</button></li>
        <li>Score: <span id="score">0</span></li>

    <div id="scene">
        <img id="ground" src="../assets/Images/AppleGame/ground.png" />
        <img id="tree" src="../assets/Images/AppleGame/tree.png" />
        <img style="top: 200px ;left: 110px;" onclick="fallDown(this)" class="apple" src="../assets/Images/AppleGame/apple.png" />
        <img style="top: 205px ;left: 145px;" onclick="fallDown(this)" class="apple" src="../assets/Images/AppleGame/apple.png" />
        <img style="top: 170px ;left: 185px;" onclick="fallDown(this)" class="apple" src="../assets/Images/AppleGame/apple.png" />
        <img style="top: 215px ;left: 220px;" onclick="fallDown(this)" class="apple" src="../assets/Images/AppleGame/apple.png" />
        <img style="top: 170px ;left: 255px;" onclick="fallDown(this)" class="apple" src="../assets/Images/AppleGame/apple.png" />
    <p style="width: 400px; margin: 0 auto;">Hi: <span id="high">0</span></p>
    <script type="text/javascript" src="../assets/js/AppleGameController.js"></script>








body {
    font-family: 'Segoe UI';
    text-transform: uppercase;

#scene {
    width: 400px;
    height: 400px;
    background-color: #aaf;
    overflow: hidden;
    margin: 16px auto;
    position: relative;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .1), -2px 2px 4px rgba(0, 0, 0, .1);

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

#ground {
    position: absolute;
    display: block;
    width: 400px;
    bottom: 0;

.apple {
    position: absolute;
    top: 225px;
    left: 120px;
    width: 16px;
    height: auto;
    transition: top .5s ease;

#scoreboard {
    width: 400px;
    margin: 4px auto;
    padding: 0;
    background-color: #eaeaea;

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

span {
    font-weight: bold;
    color: #55f;


See also  Node.js Google Cloud Text to Speech API Converter and Downloads it as MP3 File Using Javascript on Command Line Full Project For Beginners





 * 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,
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)) {
    //store the current top position for future refrence.
    //change the top position, this is animated using transition property in CSS = "380px";
    //increase score
    score = score + 5;
    //show the score by calling this function
    //hide the apple after it reaches the ground by calling this function

 * 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 () { = 'none';
        //call the function that will move the apple to top
        //and display it again
    }, 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.getAttribute('data-top');
    setTimeout(function () { = '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;
    //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
        //call end game

 * 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

Leave a Reply