Computer Science & Software Engineering
Course Progress
0/0
Code Runner - Examples
Objectives in Technical Learning
Code Runner - JavaScript
Lesson Planning
Variables
Strings
Classes and Methods
Mathematical Expressions
Booleans
JSON and JavaScript Objects
Nested Conditionals
Iterations
Data Abstraction!
Arrays
Conditionals
Functions
Teaching Weeks Issue
Likert Review
Sprint 4 - CSSE Objectives
OCS GameEngine Guide
Variables and HTML DOM
GameEngine Essentials Guide
Characters
Backgrounds
Enemy Death
Enemy Collision
DOM Updates
Objects, Instance Data
Game API
Randomized Dialogues
Local Storage in JS
Gravity
Blocks
Transitions Screens
Single Responsibility Principle (SRP)
Finite State Programming
GameEngine Essentials Summative Assessment
Sprint 5 - CSSE Objectives
OCS Game Engine Clicker Mechanics
Game-in-game
Implementing Enemies
Web APIs and Local Storage Documentation
API's and how they are used
Game Over | Transitions | Leaderboard
Local Storage
Player | Animation | Collision
Backgrounds | Theme | Messages
Enemies | Collision
Platform | Elevated
Game Help - Platformer
OOP, Multiplayer
OCS Game Engine Clicker Mechanics
1 min read
•
Assignment
- Game Time!
- How to Play
- Hack IT Goals
- How the Game Engine Rumbles!
- Interaction Flow Diagram
- Related Code Snippets:
Game Time!
This is a code-first activity with less talking and more interacting, building, testing, and improving.
How to Play
- Click Start to begin the game loop.
- Click the cookie sprite to score points.
- Tune values in code directly like
SCALE_FACTOR,speed, andhitbox. - Run again and compare how gameplay changes.
Game Status:
Not Started
Hack IT Goals
- This version makes the cookie harder to click.
- Adjust movement speed and wiggle behavior.
- Tune hitbox percentages for difficulty.
Game Status:
Not Started
Key files involved:
GameControl.js: singleton that captures canvas click events and dispatches interaction flowGameObject.js: validates hit detection (isPointInside()andhandleClick())Clicker.js: updates click count and forwards status changes to the runner metricGAME_RUNNER: code cell defines theinteractcallback updates status metric
Review Commit for specifics.
How the Game Engine Rumbles!
Interaction Flow Diagram
flowchart TD
A[Canvas click] --> B[GameControl.js captures click]
B --> C[GameObject.js hit check]
C --> D[Clicker.js increments count]
D --> E[GAME_RUNNER interact: callback updates Status Bar]
Source path: assets/js/GameEnginev1.1/essentials
Related Code Snippets:
GameControl.js (canvas click wiring)
this.gameContainer.addEventListener('click', this._boundClick);
const obj = this.gameEnv.gameObjects.find(o => o.canvas && o.canvas.id === clickedCanvas.id);
if (obj && typeof obj.handleClick === 'function') {
obj.handleClick(event);
}GameObject.js (hitbox test + click hook)
isPointInside(x, y) {
const px = this.position?.x ?? this.INIT_POSITION?.x ?? 0;
const py = this.position?.y ?? this.INIT_POSITION?.y ?? 0;
return (x >= px && x <= px + width && y >= py && y <= py + height);
}
handleClick() {
// Default: do nothing. Subclasses can override for interactivity.
}Clicker.js (counter + callback)
handleClick(event) {
if (this.interact) {
this.clcks++;
this.interact(this.clcks);
}
}Source path: /assets/js/GameEnginev1.1/essentials