In this project, you will learn how to create a simple fruit stacking game using HTML, CSS, and JavaScript. The goal is to stack the falling fruit items at the top of the page into the box at the bottom. If there are three identical fruits in the box, they will be automatically removed.
👀 Preview
The eliminatable effect looks like this:
The non-removable effect is as follows:
🎯 Tasks
In this project, you will learn:
How to set up the project by opening the provided files in the editor
How to add a click event handler to the fruit items at the top of the page
How to implement the game logic to add, remove, and eliminate the fruit items
How to finalize the project and test the functionality
🏆 Achievements
After completing this project, you will be able to:
Use jQuery to manipulate the DOM and handle events
Implement basic game logic using JavaScript
Create a simple and interactive user interface
Test and debug your code to ensure the desired functionality
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"])
javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"])
jquery(("`jQuery`")) -.-> jquery/DOMManipulationGroup(["`DOM Manipulation`"])
javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`")
javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`")
javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`")
javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`")
javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`")
javascript/BasicConceptsGroup -.-> javascript/loops("`Loops`")
javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`")
javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`")
javascript/AdvancedConceptsGroup -.-> javascript/async_prog("`Asynchronous Programming`")
javascript/AdvancedConceptsGroup -.-> javascript/closures("`Closures`")
javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`")
javascript/AdvancedConceptsGroup -.-> javascript/template_lit("`Template Literals`")
jquery/DOMManipulationGroup -.-> jquery/element_management("`Element Creation and Removal`")
subgraph Lab Skills
javascript/variables -.-> lab-300296{{"`Fruit Stacking Game with HTML, CSS, JavaScript`"}}
javascript/data_types -.-> lab-300296{{"`Fruit Stacking Game with HTML, CSS, JavaScript`"}}
javascript/arith_ops -.-> lab-300296{{"`Fruit Stacking Game with HTML, CSS, JavaScript`"}}
javascript/comp_ops -.-> lab-300296{{"`Fruit Stacking Game with HTML, CSS, JavaScript`"}}
javascript/cond_stmts -.-> lab-300296{{"`Fruit Stacking Game with HTML, CSS, JavaScript`"}}
javascript/loops -.-> lab-300296{{"`Fruit Stacking Game with HTML, CSS, JavaScript`"}}
javascript/functions -.-> lab-300296{{"`Fruit Stacking Game with HTML, CSS, JavaScript`"}}
javascript/array_methods -.-> lab-300296{{"`Fruit Stacking Game with HTML, CSS, JavaScript`"}}
javascript/async_prog -.-> lab-300296{{"`Fruit Stacking Game with HTML, CSS, JavaScript`"}}
javascript/closures -.-> lab-300296{{"`Fruit Stacking Game with HTML, CSS, JavaScript`"}}
javascript/higher_funcs -.-> lab-300296{{"`Fruit Stacking Game with HTML, CSS, JavaScript`"}}
javascript/template_lit -.-> lab-300296{{"`Fruit Stacking Game with HTML, CSS, JavaScript`"}}
jquery/element_management -.-> lab-300296{{"`Fruit Stacking Game with HTML, CSS, JavaScript`"}}
end
Set Up the Project Structure
In this step, you will set up the project by opening the provided files in the editor.
Open the editor and you should see the following files: index.html, style.css, jquery.min.js, and the image files.
Click on Go Live button in the bottom right corner of WebIDE, to run the project.
Open "Web 8080" on the top of the VM and manually refresh it to see the page.
Add the Click Event Handler
In this step, you will add the click event handler to the fruit items at the top of the page.
In the index.html file, locate the TODO section in the <script> tag.
The <script> tag sets an empty array of ids variables inside.
let ids = [];
$("#card li").on("click", function (e) {
// TODO: Please implement the function here
});
Add the following code inside the TODO section:
$("#card li").on("click", function (e) {
// TODO: Please implement the function here
if ($("#box li").length >= 7) {
return;
}
let clone = $(this).clone();
$("#box").append(clone);
let currentId = $(this).data("id");
ids.push($(this).data("id"));
let currentIdLen = ids.filter((id) => id == currentId)?.length;
if (currentIdLen == 3) {
ids = ids.filter((id) => id !== currentId);
let three = $(`#box li[data-id=${currentId}]`);
for (let index = 0; index < three.length; index++) {
const element = three[index];
$(element).addClass("active");
setTimeout(() => {
element.remove();
}, 200);
}
}
$(this).css({
top: "600px",
left: "200px",
opacity: 0,
transition:
"left .2s linear, top .2s cubic-bezier(.08,-0.35,.99,.33),opacity .2s linear"
});
});
This code adds a click event handler to the fruit items at the top of the page. When a fruit item is clicked, it will be cloned and added to the box at the bottom of the page. If there are three identical fruits in the box, they will be removed. If the bottom rectangle (id=box) element has 7 fruits and cannot be eliminated, the clicked fruit element node is not in the added rectangle element.
Finalize the Project
In this final step, you will complete the project by adding the finishing touches.
Test the project by clicking on the fruit items at the top of the page. Verify that the fruits are added to the box and removed if there are three identical ones. The eliminatable effect looks like this:
If the box has 7 fruits and no more can be removed, clicking on the fruit item at the top should have no effect. The non-removable effect is as follows:
Congratulations! You have completed the Fruit Stacker project.
Summary
Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.
We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy