Neon Air Hockey
3D arcade air hockey against the computer — HTML5
Overview
Fast arcade air hockey on a bright 3D table: real puck physics, three computer levels, goal celebrations, music and sound. Pure HTML5, no libraries, no server.
- Real-time 3D air table in a bright arcade hall, with a 2D fallback
- Puck physics with sub-stepping, wall bounce, friction and a speed cap
- Computer opponent with three levels (Easy, Normal, Hard)
- First to 7 goals, goal replays of the score, cheering and sound effects
- Touch (drag), mouse and keyboard controls
- Music and arcade ambience included, with a sound on/off button
- Portrait and landscape layouts, high-DPI rendering
- 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/air-hockey/. - Open
https://your-site.com/games/air-hockey/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
Move your paddle with your finger or the mouse (or W A S D / arrow keys) and hit the puck into the goal at the far end. First to 7 goals wins.
| Move your paddle | Drag with a finger · move the mouse · W A S D or arrow keys |
|---|---|
| Goal | Hit the puck into the goal at the far end |
| 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/air-hockey/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/air-hockey/assets/ | Models, textures and sound (16 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 | Two-player mode is not available for this game (keep false). |
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/air-hockey/game.js. Search for these names:
WIN | Goals needed to win (7). |
|---|---|
PR / MR / GOAL | Puck radius, paddle radius and goal width. |
E_WALL / E_HIT / FRIC / VMAX | Bounce off walls and paddles, friction and top puck speed. |
AI_LEVEL | Speed, reaction time and aim of each computer level. |
COLOR | Colours of the two sides. |
Art and sound
Replace files in game/games/air-hockey/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/air-hockey/index.html" title="Neon Air Hockey"
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. 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.