Menghitung Ceri

Gamelab
2024
Menghitung Ceri view 1

01. The Overview

'Menghitung Ceri' (Counting Cherries) is an educational browser game designed to teach basic arithmetic (counting and subtraction) to children in an engaging and interactive way. The game features friendly monsters, colorful visuals, and cheerful sound effects to create a fun learning environment.

02. The Challenge

The main technical challenge was to build a dynamic and state-rich game within a single Phaser scene, without a formal UI framework. Key challenges included:

  • Creating a cohesive and reusable UI system (buttons, dialogs, interactive elements) from scratch using only Phaser's primitive graphics and text objects. This required managing the state, appearance, and interactivity of each component manually.
  • The game relies heavily on complex, chained animations (tweens) to guide the narrative and provide feedback. The challenge was to precisely time and sequence these animations, ensuring that game logic and player interactions would only trigger after certain animations were complete.
  • Managing the game's state in a single, large script. This involved tracking the current question, the number of cherries, which monster was active, player score, and, most importantly, controlling when the player could or could not interact with the game to prevent conflicts with ongoing animations.
  • With all the logic residing in a single 2000+ line file, the challenge was to keep the code organized, avoid spaghetti code, and make different parts of the game logic (like handling sum questions vs. subtraction questions) distinct and manageable.

03. The Approach

The project was approached as a self-contained, single-scene application. The solutions to the challenges were implemented directly within Phaser 3 using the following patterns:

  • A simple class hierarchy was implemented to act as a rudimentary UI framework. This approach encapsulated the logic for drawing, interacting with, and managing the state of UI elements, making their creation and use more declarative.
  • The game's progression is primarily controlled by an asynchronous, event-driven flow using Phaser's Tween and Timer systems. Game events are triggered in the onComplete callbacks of animations, creating a cinematic sequence of events (e.g., monster appears -> speech bubble animates in -> question box slides onto screen -> player interaction is enabled).
  • A large suite of helper functions was created within the scene to abstract repetitive tasks. This modularized the code and made the main logic easier to read.
  • Simple boolean flags are used extensively to manage the game state and enable/disable player input. This provides a straightforward, if manual, way to prevent race conditions between player actions and animations.

04. Key Features

  • Interactive Counting
  • Engaging Characters
  • Two-Stage Problem Solving
  • Rich Animations and Effects
  • Audio Feedback
  • Scoring System
  • Hint System

Technologies Used

Phaser3JavascriptHTML5