How I made a 3D game in only 2KB of JavaScript
March 10, 2020 12:21 PM Subscribe
My entry, Hue Jumper, is an homage to 80’s racing game rendering technology. The 3D graphics and physics engine was implemented from scratch in pure JavaScript. I also spent ungodly hours tweaking the gameplay and visuals. Frank Force's 4400-word description (plus code!) for a driving game.
This post is going to be a bit long because it contains the JavaScript code for my game in it’s entirety. The code is already well commented so I’m not going to explain every line of it nor are you expected to read through all the code now. Instead my goal is to explain how it works, why I made it this way, and walk you through the overall structure. This same code is on CodePen for you to play around with live. So please continue reading, buckle up, and hold onto your butts!
This post is going to be a bit long because it contains the JavaScript code for my game in it’s entirety. The code is already well commented so I’m not going to explain every line of it nor are you expected to read through all the code now. Instead my goal is to explain how it works, why I made it this way, and walk you through the overall structure. This same code is on CodePen for you to play around with live. So please continue reading, buckle up, and hold onto your butts!
That is a good smol game. It'll do until I can face Box Jump again.
posted by scruss at 12:41 PM on March 10, 2020 [3 favorites]
posted by scruss at 12:41 PM on March 10, 2020 [3 favorites]
You can play the game from the Codepen link in the post. Click to start, turn with the mouse, and double-click to jump.
posted by waxpancake at 2:18 PM on March 10, 2020 [3 favorites]
posted by waxpancake at 2:18 PM on March 10, 2020 [3 favorites]
Doesn't seem to run at all in Safari. and much faster in Chrome than in Firefox.
posted by ardgedee at 3:12 PM on March 10, 2020 [1 favorite]
posted by ardgedee at 3:12 PM on March 10, 2020 [1 favorite]
Damn, you, scruss, for linking to Box Jump.
posted by It's Never Lurgi at 4:47 PM on March 10, 2020 [2 favorites]
posted by It's Never Lurgi at 4:47 PM on March 10, 2020 [2 favorites]
Doesn't seem to run at all in Safari.
It's because the author of this code is apparently addicted to sugar and uses experimental syntax, and while Safari is often frustratingly slow to adopt useful new JS features, this is plainly not one of those cases, since it hasn't officially made it into the next JS specification.
posted by invitapriore at 5:05 PM on March 10, 2020 [2 favorites]
It's because the author of this code is apparently addicted to sugar and uses experimental syntax, and while Safari is often frustratingly slow to adopt useful new JS features, this is plainly not one of those cases, since it hasn't officially made it into the next JS specification.
posted by invitapriore at 5:05 PM on March 10, 2020 [2 favorites]
If you like this kind of thing: Raytracer in 35 lines of Javascript. It's fun to tinker with the values and run it to see how the image changes.
posted by L.P. Hatecraft at 5:12 PM on March 10, 2020
posted by L.P. Hatecraft at 5:12 PM on March 10, 2020
Lou's Pseudo 3d Page goes into all the shortcuts that were used to render 3D roads, back when division wasn't taken for granted.
posted by RobotVoodooPower at 7:38 PM on March 10, 2020
posted by RobotVoodooPower at 7:38 PM on March 10, 2020
This is great! I think I will never get sick of constrained programming stunts.
Lou's Pseudo 3d Page
That's where my mind went too. Pretty sure I learned about that from a MetaFilter post or thread at some point a few years back.
posted by cortex at 10:22 PM on March 10, 2020
Lou's Pseudo 3d Page
That's where my mind went too. Pretty sure I learned about that from a MetaFilter post or thread at some point a few years back.
posted by cortex at 10:22 PM on March 10, 2020
Huh, and the code is even commented and otherwise perfectly readable? That's a rarity in these kind of coding challenges.
posted by Harald74 at 1:56 AM on March 11, 2020
posted by Harald74 at 1:56 AM on March 11, 2020
If you thought it was bad in Firefox, you should see it in Edge (nothing) or Firefox-ESR on a Raspberry Pi 4 (one frame every couple of weeks). It's pretty speedy in Chromium on the same Raspberry Pi.
posted by scruss at 5:57 AM on March 11, 2020
posted by scruss at 5:57 AM on March 11, 2020
« Older Those who die unsaved go to "unending punishment". | Reprintable selections from Irving Geis' work Newer »
This thread has been archived and is closed to new comments
posted by gwint at 12:34 PM on March 10, 2020 [9 favorites]