← All projects
GAMESEDUCATIONAL

techonc Games.

Two educational games teaching kids about food waste and recycling — one a 4-player online multiplayer arcade, the other an instant browser reflex game played with the keyboard.

2 GAMES · 3 PLATFORMSA GAME ENGINE BUILT FROM SCRATCH60 HZ SERVER SIMULATIONA 19-PANEL COMIC STORY15+ PROCEDURAL SOUND EFFECTS
01

Gıda Muhafızları

Fruit-and-vegetable heroes rescue food in a kitchen arena from an ever-growing Waste Monster; 1-4 player local co-op on one keyboard/gamepads, or online multiplayer with room codes. Built on a from-scratch Canvas engine with a server-authoritative multiplayer architecture.

02

Geri Kazanım Kahramanı

Guide falling waste into the right recycling bin: 5 difficulty levels, flying-bird obstacles, bonus lives and a 'did you know?' eco-fact after every game. Zero dependencies — three files: HTML, CSS and JavaScript.

03

Why games?

Both were built for an organisation's environmental-awareness events; the message lands as play, not as a lecture. When a match ends, the score screen also shows how much food the Waste Monster spoiled.

Screenshots

Gıda Muhafızları: character select and online multiplayer entry
Gameplay: timer, score and collectible food in the kitchen arena
The opening story introduces the four characters — the game tells its story before it starts
Educational narrative: food waste's share of greenhouse emissions, told in a child's language
Geri Kazanım Kahramanı: falling waste is sorted into paper, plastic, glass, metal and organic bins
Difficulty select and rules — lives, points and level progression are explained upfront

Key capabilities

Gıda Muhafızları — online multiplayer

Up to 4 players via 4-digit room codes; all game logic runs on the server, clients only send input and render — architecturally cheat-proof.

Gıda Muhafızları — rich gameplay

4 power-ups (speed, shield, magnet, freeze), a combo system, golden food and 3 late-match arena events: Food Rain, Frenzied Monster, Last Chance.

Gıda Muhafızları — an AI opponent

The Waste Monster plays a wander→chase→eat→attack state machine; it levels up as it eats, growing, speeding up and leaving poison clouds.

Gıda Muhafızları — up to 4 gamepads

Analog + D-pad, gamepad menu navigation and platform-specific controller fixes; 4 separate key clusters on one keyboard.

Gıda Muhafızları — procedural audio

No audio files for the sound effects: all 12 are 8-bit tones synthesised live with the Web Audio API. Menu, story and gameplay music play from separate files.

Gıda Muhafızları — one codebase, three platforms

Web (Docker), Windows/macOS (Electron) and Android (Capacitor) all ship from the same code.

Geri Kazanım Kahramanı — 5 levels, 25 waste sprites

5 waste types × 5 sprites; speed rises and backgrounds change per level; 10 different eco-fact cards.

Geri Kazanım Kahramanı — persistent scores

Serverless, yet the top 5 scores and last 20 games persist locally.

ADAPTATION

How it changes in another organisation

The gamification approach is subject-independent: internal training such as occupational safety, onboarding or quality awareness can be turned into a game with the same structure. Score and participation data can be fed into the organisation's own systems.

TECHNICAL DEEP DIVE

STACK

TypeScript + Canvas 2D (özel motor)Next.js 16Socket.IO (server-authoritative)Web Audio API (prosedürel ses)Electron (Windows/macOS)Capacitor (Android)Vanilla JS (Geri Kazanım Kahramanı)

ENGINEERING NOTES

An isomorphic game engine

Player, enemy, physics and spawner classes are shared by the browser engine and the headless server engine; the server runs the same simulation at a fixed 60 Hz without rendering.

60 Hz sim / 30 fps broadcast / 33 ms interpolation

The server simulates at 60 Hz and broadcasts compressed snapshots ~30 times a second; clients interpolate between the last two snapshots for smooth rendering.

Next.js + Socket.IO on one port

A custom Node server merges the web app and WebSocket traffic on a single port — ideal behind a reverse proxy on one subdomain.

Object pools + dual-layer canvas

A 200-object particle pool and fixed-timestep physics; the static arena and the dynamic game layer draw on separate canvases to cut cost.

Smart spawn placement

Food and power-ups spawn via rejection sampling at safe distances from players, the monster and each other.