In 2018, me and and another student decided that it would be a fun idea to make an arcade machine, the exterior as well as the code (interior as well but we did not design a computer if you were wondering). Over the course of about a year, we made an arcade.

In the last year of high school, we had to think about our so called 'profielwerkstuk'. This was meant as a way to prepare you for the paper-writing we were about to do if we chose to study, as well as broadening your view. For us, it looked like we could use the arcade as the subject, and so the project got tied to school.

At the time, computers at school were not able to run many programs, so javascript was the only option. In hindsight, just the luxury of using TypeScript would have made the project a lot easier, as we could define interfaces and types more easily. As a consequence, the most important aspect of the whole project became structured interfaces, which needed backwards compatibility as well: some games were already made, and we wanted to be able to use them in the new system.

Concept

We wanted to create games that seemed fun, as well as the old time classics. When my friend was making the first game, Asteroids, he used the original black and white look. We liked this style and agreed on making every game use it, so it felt more as a whole instead of seperated games.

We did make an exception, when including an easter-egg somewhere. I recommend Lunar Lander, Midnight Motorist, Asteroids and Pacman.
The interfaces

The original black and white Asteroids game

It would also allow the player to save highscores, and compare them to others, making them more than just recreations.

The game hub

A new highscore

Overview of your highscore, together with others

While building the games we created some api for the arcade. They were necessary for creating a more integrated experience, as well as resolving canvasses not being removed or updating when that interface or game was no longer active. The api are: move, Interval, HighScoresInterface, MenuInterface, HubInterface.

However by the time these interfaces were completely finished and polished, the project was finished, as the deadline for school was reached.

Example

// Singleplayer
if (move.up)
    return dostuff();

// Multiplayer => player[0] has "aswd" and player[1] has "arrows" by default
move.multiplayer = true;
if (move.player[0].up && move.player[1].up)
    dostuff();

In-depth