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






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