DK · Senior Software Engineer

Slidy Guy

Personal project

A browser game in the Snake family, drawn in 3D with Three.js, with a pathfinder you can switch out for your own script.

I designed and built it. Live. Playable at lekker.dev/slidy-guy.

Open the live project

Slidy Guy on Even Calmer, a moment after the run starts. A short blue snake leaves a fading trail toward a pink apple in a dark 3D arena. — Even Calmer, just after the run starts.

Slidy Guy from the top-down camera. The snake and its trail sit on a square grid, with an apple to the left. — The same difficulty with the top-down camera on.

The Slidy Guy start screen, with difficulty choices from Even Calmer to Impossible and a Begin run button. — The start screen on the live build.

Overview

Slidy Guy is a 3D snake game that runs in the browser. You can play it by hand, or hand the snake to AUTO mode. AUTO uses a built-in pathfinder (A*) until you paste a script of your own. The live game also has a performance mode that drops lighting, shadows, and reflections when you want the run to stay light.

The problem

I wanted a small game that was still a real piece of engineering: a rendered world, a simulation, and a way to experiment with the decision the snake makes each tick.

Architecture

The live build is an ES module app. Three.js is loaded at 0.155.0. Rendering, entities, AUTO mode, the leaderboard, and the help copy are split across modules. The snake, apples, obstacles, power-ups, trail, and projectiles are separate pieces of state. AUTO mode receives a snapshot of that state each move and must return a cardinal direction. The default solver is the built-in pathfinder. A script you save replaces it. High scores stay in the browser.

Decisions

Three.js for the arena, with an explicit 2D performance profile instead of hoping every phone can afford the full lighting.
A documented state object for AUTO mode, so a strategy is data in and a direction out, not a fork of the renderer.
Difficulty changes the grid, the obstacles, the speed curve, and the score, rather than being a single speed slider with a new name.
Touch zones on the left and right for play without a keyboard.

Trade-offs

A 3D snake is more expensive than a canvas grid. The performance mode exists because that cost is real.
Letting AUTO run arbitrary script is powerful on a local toy and would be a bad idea on a shared server. The game runs entirely in the player's browser.
The public source repository is not linked from the live game. This site does not invent one.

Where it stands

The game is live and includes five difficulties (Even Calmer through Impossible), a long list of power-ups, borderless wrap, a top-down camera, and AUTO runs that can record themselves on the local leaderboard. The in-game help is the spec for the script API.

It runs entirely in the browser. There is no hosted backend and no public source repository linked from here.

Stack

Three.js
JavaScript
A* pathfinding
HTML
CSS

Back to lekker.dev