Fruit Stacking Game with HTML, CSS, JavaScript

Introduction

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

Set Up the Project Structure

In this step, you will set up the project by opening the provided files in the editor.

1. Open the editor and you should see the following files: index.html, style.css, jquery.min.js, and the image files.
2. Click on Go Live button in the bottom right corner of WebIDE, to run the project.
3. 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.

1. In the index.html file, locate the TODO section in the <script> tag.
2. 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
});

3. 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.

1. 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:

2. 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.