Apple Collector Project Tutorial With Using HTML CSS & JAVASCRIPT

Apple Collector Project Tutorial With Using HTML CSS & JAVASCRIPT

In this article, we will explore the concept of an Apple Collector project developed using HTML, CSS, and JavaScript. This project aims to create a fun and interactive game where players collect apples by moving a basket across the screen. We will delve into the step-by-step process of building this project, starting from the design phase to the implementation of functionality using the mentioned web technologies.

Designing the User Interface

Before diving into the coding aspect, it’s crucial to design the user interface (UI) for our Apple Collector project. A visually appealing and intuitive UI enhances the overall user experience. Let’s outline the necessary design steps:

Choosing a Color Scheme

Selecting an appropriate color scheme is essential for creating an engaging interface. Considering the nature of the game, vibrant and cheerful colors would work well. Incorporating shades of green, red, and brown can provide a natural and playful ambiance.

Creating the Basket Element

The basket serves as the player’s tool for collecting apples. It should be visually distinct from the background and other elements. Adding realistic details, such as a woven texture, can enhance its appearance and make it more visually appealing.

Positioning the Apples

Strategically placing the apples on the screen will challenge the players to move the basket effectively. Randomizing the positions of the apples adds an element of surprise and increases replay value. Ensure that the apples are easily distinguishable from the background and basket.

Implementing HTML Structure

With the design phase complete, we can move on to implementing the HTML structure for our Apple Collector project. This step involves setting up the necessary HTML elements and styling them using CSS:

Setting up the Document Structure

Begin by creating the basic structure of the HTML document. Use appropriate HTML tags such as <html>, <head>, and <body>. Consider using a <div> element to contain the game elements.

Adding CSS Styling

Apply CSS styling to the HTML elements to achieve the desired visual effects. Use classes and IDs to target specific elements and define their appearance. Remember to keep the code organized and use proper indentation for readability.

Including JavaScript Dependencies

To enable interactivity and implement game logic, we need to include JavaScript dependencies. Utilize the <script> tag to link the JavaScript file to the HTML document. Make sure to load the dependencies in the correct order.

Handling Interactivity with JavaScript

JavaScript plays a vital role in adding interactivity to our Apple Collector project. We will implement various functionalities using JavaScript to enhance the gameplay experience:

Capturing User Input

Capture user input, such as mouse movements or arrow key presses, to control the movement of the basket. Utilize event listeners to detect these interactions and trigger the appropriate actions.

Moving the Basket

Implement the logic for moving the basket based on user input. Update the position of the basket element according to the detected input, ensuring it stays within the game boundaries.

Collecting Apples

Detect collisions between the basket and the apples. When a collision occurs, update the score and remove the collected apple from the screen. Keep track of the number of apples collected to provide feedback to the player.

Enhancing the Gameplay Experience

To make our Apple Collector project more engaging, we can incorporate additional features that enhance the overall gameplay experience:

Adding Sound Effects

Implement sound effects for actions such as collecting apples or reaching a specific score milestone. These audio cues provide auditory feedback and contribute to the immersive experience.

Implementing Score Tracking

Track the player’s score throughout the game. Display the current score on the screen and update it whenever an apple is collected. Consider adding visual indicators for score milestones or high scores.

Setting Time Limits

Introduce a time limit to add a sense of urgency to the gameplay. Display a countdown timer and end the game when the time runs out. Provide feedback on the final score achieved within the given time.

Conclusion

In conclusion, building an Apple Collector project using HTML, CSS, and JavaScript allows us to create an interactive and enjoyable game where players collect apples using a moving basket. By following the steps outlined in this article, you can develop a unique and engaging project that showcases your web development skills.

FAQs

  1. Q: Can I customize the appearance of the basket and apples?

    • A: Yes, you can customize the visual aspects of the basket and apples to suit your preferences or project requirements.
  2. Q: Is it possible to add more levels or challenges to the game?

    • A: Absolutely! You can extend the Apple Collector project by introducing multiple levels, power-ups, or obstacles to increase the complexity and excitement.
  3. Q: Can I deploy the game on a website or share it with others?

    • A: Yes, once you have completed the project, you can deploy it on a website or share it with others by hosting it online.
  4. Q: Do I need prior coding experience to create the Apple Collector project?

    • A: While some familiarity with HTML, CSS, and JavaScript would be beneficial, this project is suitable for both beginners and those with coding experience.
  5. Q: Are there any additional resources or tutorials available for further learning?

    • A: Yes, there are numerous online resources and tutorials that can help you explore more advanced concepts and techniques related to web development.

By following this guide, you will be able to develop an engaging Apple Collector project using HTML, CSS, and JavaScript. Enjoy the process of creating a fun and interactive game while honing your web development skills. Happy coding!

Index.html

				
					<!doctype html>
<html>

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

<body>

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

    <div id="scene">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" id="ground" data-src="assets/sprites/ground.png" />
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" id="tree" data-src="assets/sprites/tree.png" />
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" style="top: 200px ;left: 110px;" onclick="fallDown(this)" class="apple" data-src="assets/sprites/apple.png" />
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" style="top: 205px ;left: 145px;" onclick="fallDown(this)" class="apple" data-src="assets/sprites/apple.png" />
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" style="top: 170px ;left: 185px;" onclick="fallDown(this)" class="apple" data-src="assets/sprites/apple.png" />
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" style="top: 215px ;left: 220px;" onclick="fallDown(this)" class="apple" data-src="assets/sprites/apple.png" />
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" style="top: 170px ;left: 255px;" onclick="fallDown(this)" class="apple" data-src="assets/sprites/apple.png" />
    </div>
    <p style="width: 400px; margin: 0 auto;">Hi: <span id="high">0</span></p> <script type="litespeed/javascript" data-src="assets/js/GameController.js"></script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://dailywebdesigns.com/wp-content/litespeed/js/ff29a0a4fba699963bbcc0f3bbf70a32.js?ver=0b80d"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>

</html>
				
			

style.css

				
					html,

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100vh;
    /* background: linear-gradient(45deg, rgb(255, 165, 47), rgb(191, 30, 255)); */
    /* background-color: #aaf; */
    background: linear-gradient(45deg, rgb(255, 141, 47), dodgerblue);
    font-family: "Sansita Swashed", cursive;
  }
  
  

#scene {
    width: 500px;
    height: 500px;
    /* background-color: #aaf; */
    background: linear-gradient(45deg, rgb(255, 165, 47), rgb(191, 30, 255));
    overflow: hidden;
    margin: 16px auto;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

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

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

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

#scoreboard {
    width: 500px;
    margin: 4px auto;
    padding: 0;
    background: linear-gradient(45deg, rgb(255, 165, 47), rgb(191, 30, 255));
    font-family: "Sansita Swashed", cursive;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

#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: rgb(96, 85, 255);
}
				
			

main.js

				
					
/**
 * 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');
    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');
}

				
			
Apple Collector Project Tutorial
Apple Collector Project Tutorial
Apple Collector Project Tutorial

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top