Neon Connect Four
3D Connect Four with a smart computer opponent — HTML5
Overview
A glossy 3D Connect Four in a sunny playroom: three computer levels, two players on one device, bouncing disc drops and real sound. Pure HTML5, no libraries, no server.
- Real-time 3D board with see-through holes, glossy discs and a bounce on every drop
- Computer opponent with three levels (Easy, Normal, Hard) — it blocks threats and plans ahead
- Two players on one device (hot-seat) mode
- Glowing winning line, turn indicator, draw detection
- Touch, mouse and keyboard (← → Enter, keys 1–7) controls
- Music and sound effects included, with a sound on/off button
- Automatic 2D board when WebGL is not available — same rules, same input
- No libraries, no build step, works on any static host
Requirements
- Any modern browser (Chrome, Edge, Firefox, Safari 15+, iOS and Android)
- Any static web host — no server code, no database
Technology: HTML5 · WebGL (own renderer) · Web Audio · JavaScript.
Quick start
- Unzip the package.
- Upload the
game/folder to your web host, for example as/games/connect-four/. - Open
https://your-site.com/games/connect-four/index.html. No install, no database, no server code.
To try it on your computer first, start any local web server inside game/:
cd game
python3 -m http.server 8080
# then open http://localhost:8080/index.htmlBrowsers block some features (workers, 3D model files) for pages opened straight from disk, so always test through a web server.
How to play & controls
Tap or click a column to drop a disc. Four in a row — across, down or diagonal — wins. Keyboard: ← → and Enter, or keys 1–7.
| Drop a disc | Tap or click a column · keys 1–7 |
|---|---|
| Move the cursor | ← / → (or A / D), then Enter, Space or ↓ |
| Menu / sound | Buttons in the bottom-left corner |
File structure
game/index.html | The page: start menu markup and the GAME_CONFIG settings (texts, difficulty levels, colours). |
|---|---|
game/host.js · game/host.css | The host: start menu, loading, countdown, pause on tab switch, result card. |
game/games/connect-four/game.js | The game itself: rules, computer opponent, rendering, input, sound. |
game/games/_shared/juice.js | Sound pools, particles and screen shake. |
game/games/_shared/neon3d.js | Small WebGL renderer used for the 3D view (no library needed). |
game/games/connect-four/assets/ | Models, textures and sound (13 files). |
game/fonts/ | Inter and Unbounded fonts, self-hosted (OFL). |
documentation/index.html | This documentation. |
LICENSE.txt · THIRD-PARTY.txt · CHANGELOG.md | Licence terms, bundled components, version history. |
Configuration
The start menu is driven by window.GAME_CONFIG in game/index.html:
name, titleHtml, kicker, lead, howTo | Texts of the start menu (titleHtml may use <em> for the coloured word). |
|---|---|
levels | Difficulty buttons: [key, label, hint]. The keys are the computer levels the game knows: easy, normal, hard. |
defaultLevel | Level selected on the first visit (the player's last choice is remembered). |
hotseat | true = show the "2 Players · same device" button. |
players | Names used for the two players in two-player mode. |
backUrl (optional) | Adds a "← All games" link to the start menu, e.g. back to your games page. |
Colours: --acc and --acc2 in the <style> line of index.html; --menu-bg is the menu background picture.
Customise & rebrand
Gameplay settings live near the top of game/games/connect-four/game.js. Search for these names:
COLS / ROWS | Board size (7 × 6). |
|---|---|
COLOR / NAME | Disc colours and colour names of the two players. |
LEVELS | Computer levels and the order the difficulty chip cycles through. |
chooseMove | The computer opponent (search depth per level). |
Art and sound
Replace files in game/games/connect-four/assets/ with your own, keeping the same file names and formats (WebP images, MP3 sound).
Name and credit
Change the <title>, the meta description and the menu texts in index.html. The small "Made by Vortaxis Studio" credit may be kept or removed.
Embed in a page
<iframe src="/games/connect-four/index.html" title="Neon Connect Four"
width="100%" height="680" allow="fullscreen; autoplay"
style="border:0;border-radius:16px"></iframe>Game portals (CrazyGames, Poki, itch.io and similar) accept the game/ folder as an HTML5 upload; add their SDK calls in host.js (start, result, pause).
FAQ
Does it need a server or database?
No. It is static HTML, CSS and JavaScript. Any web host works; it plays fully offline once loaded.
Is there online multiplayer?
Not out of the box: you play against the computer or with a friend on the same device. The game code accepts a multiplayer adapter (ctx.multiplayer: sendMove / onMove), so online play can be added with your own real-time server — we can quote it as custom work.
Can I change the art, colours and texts?
Yes. Texts and colours are in index.html, gameplay values near the top of game.js, and all pictures, models and sounds are plain files you can replace.
Does it work on phones?
Yes — touch, mouse and keyboard controls, portrait and landscape, high-DPI screens.
What is the difference between Licence and Full source?
Licence = one end product (yours or one client's). Full source = one production domain for you and your clients, including white-label, paid games and SaaS. Neither allows reselling the game or its source on its own.
Can I put it on game portals and show ads?
Yes, in your own end product. Add the portal or ad SDK calls in host.js.
Support & updates
Updates are free. Questions are answered for 6 months after purchase (12 months with Full source) — write to hello@vortaxis.com or use vortaxis.com/store. Need a custom version (your art, online play, leaderboards, a portal SDK)? Ask for a quote.