Highway 404: a JS13KGAMES 2020 post-mortem

Top-down view of a lone car on the tarmac, passing a sign stating ‘Highway 404’ and listing Toronto as the next destination.
Highway 404 reminded players of classic arcade games Spy Hunter (Bally Midway, 1983) and Bump’n’Jump (Data East, 1982)

Foreword

1. Game ideation

Highways 401, 404 and 407.
The conversation that started it all
The feeling I tried to capture in Highway 404

2. Core mechanics

  • 103 Early Hints → dispenses in-game instructions. I initially planned to use 100 Continue as a way to encourage the player throughout the game, but that HTTP status code itself doesn’t do much. I found 103 Early Hints more appropriately named to warn the player of dangers ahead.
  • 200 Road OK → cancels the adverse effects of 404 Road Not Found. Having a falling road is nice and all, but left rampant it would quickly cause problems with the following challenges. What better way to counter it than using the universal HTTP status code for “All is well in the world (wide web) because I found the page you requested”?
  • 301 Road Moved & 302 Temporary Road Redirect → moves the player to a different lane (to the left for the former, and the right for the later, by a number specified in the level configuration). Okay, okay, I know that 302’s real status is “Found” while “Temporary Redirect” belongs to 307, that 301 is permanent, and yada yada, but after much reflexion I concluded that people might be more familiar with the historical 301/302 codes than their newer counterpart 307/308 and the subtle difference between the 2 pairs, so I took some creative liberties with the HTTP standard!
  • 404 Road Not Found → breaks the road behind the player. The star of all HTTP status codes and theme of this year’s JS13KGAMES competition had to be the most memorable and dramatic, so that’s the first one I implemented. Racing against a falling road that’s inexorably catching up on the player ought to fill them with dread!
  • 418 I Am A Teapot → collects these for extra points. They are the side quest of Highway 404, the ones that will trick players into taking unreasonable risks to increase their score.
  • 501 Road Not Implemented & 503 Road Unavailable → blocks the road ahead of you. These status codes were natural fits to reduce the number of drivable lanes and vary the highway landscape.

3. Web Monetization

  • 429 Speed Limiting → slows down time for 5 seconds. I placed these signs near some of the hardest teapots to collect to help Coil subscribers improve their high score. I used linear-interpolation to progressively slow down the player’s car when triggering speed limiting , and then speed it up once the effect wears out.

4. Puzzle design

Designing some challenges with pen and paper

5. Ending

Some of the quips along the way to the game end.

6. High score

7. Game juice

A fun and unexpected bug

8. Konami code

9. Mobile first gameplay

Since this video was taken, I‘ve made swipes even smoother with linear-interpolation (or lerp)

10. Art & graphics

Sprites from Highway 404, depicting the cars, sections of highway lanes, and various road signs
The complete Highway 404 spritesheet. The animated arrow signs on the last row aren’t used in the game.

11. Parallax & Infinite scrolling

I ended up reducing the highway scrolling speed by half by the time I submitted the entry.

12. Level format

13. Sound & music

14. localStorage

Cross communication between games via localStorage

15. Speech synthesis

At least Speech Synthesis was memorable ;p

16. Twitter & URL Shortener

Make it easy for people to discover and share your game
  • the score and name of your game (obviously)
  • your Twitter handle (so you get notified when someone posts their score)
  • the #js13k hashtag (so the JS13KGAMES Twitter account can retweet it to its followers)
  • the link to your game on js13kgames.com
I was particularly on-theme this year ;p
https://js13kgames.com/entries/<game-name-in-slug-format>

17. Dev journal & CCapture.js

Twitter as psychological warfare
<script src="CCapture.all.min.js"></script>
var capturer = new CCapture( { format: 'webm' } );// start the recording
capturer.start();
...
// capture the latest canvas frame at the end of your render loop
capturer.capture(canvas);
...
// optional if you won't capture multiple videos
capturer.stop();
// download automatically a file called {name}.webm
capturer.save();

18. Highway 404 in numbers

All the game code in 1 image, broken down by purpose
  • 70,646 bytes of Javascript in multiple files (including comments & utility functions that may not be used)
  • 3325 bytes of images
  • 400 bytes of HTML
  • 10,992 bytes of optimized Zip containing a single index.html file with all resources inlined.

Conclusion

Appendix: 13 other JS13KGAMES 2020 games

--

--

--

Software engineer turned manager and father of four, I create pixel art, video games and visual experiments on the Web.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

WHAT IS RABBIT MQ?

Python Environment Setup for Machine Learning and Deep Learning on a Remote Linux Server

WASM IN PYTHON

MVVM VS MVP DESIGN PATTERNS

Lessons learned at CraftConf—the new face of software architecture and making the right decisions

Why We Did SOC 2 a Month After Our Seed Round

How To Make Software Design Discussions More Productive

People working

While using this method, developers wrap the model in API services and host it using web-based…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store

Jerome Lecomte

Software engineer turned manager and father of four, I create pixel art, video games and visual experiments on the Web.

More from Medium

My First Experience with Anime.js

//Here for each span we will define translate property with 1 second duration btn .add({ targets: ‘span:nth-child(1)’, translateX: ‘110%’, width: ‘100%’, duration: 1000, }) .add({ targets: ‘span:nth-child(2)’, translateY: ‘110%’, height: ‘100%’, duration: 1000 }) .add({ targets: ‘span:nth-child(3)’, translateX: ‘-110%’, width: ‘100%’, duration: 1000 }) .add({ targets:’span:nth-child(4)’, translateY: ‘110%’, height: ‘-110%’, d

Bezier curves and time functions to smooth your movements

Responsive React Table With Mui-datatables With Footer

npm mui-datatables

JSWorld Conference 2022 Summary — 1 June 2022 — Part III