JS1024: A post-mortem for Space Hopper

This content originally appeared on DEV Community and was authored by Michael Primo

JS1024 is one of that rare competitions where you need something really special even to start partecipating. The premise is this: "Create a javascript/shader program that has 1024 bytes or less and make it do something great".

Is this possible to do one useful script in under 1024 bytes?

I only made with minimal compression a framework in less than 1k, Crono.js , a framework which helps people who make animations and games managing inputs and loops delays, so...since I had minimal knowledge of Canvas I thought it was a good idea to start learning by doing this. So...

Let's talk about Code Golfing.

No, you don't play golf and code the same time.

In golf, you need to throw the little ball on the hole of the camp. Less throws you do, the better. Same with programming, when you do a software in less bytes as possible for a task, you do better than one who done the same thing, but with more bytes for giving the software more readability.
You need to throw away all the best practice of program and optimization for both humans and machines and that's what I did for Space Hopper, a game in 1024 bytes of Javascript.

Yes, this boy here.

How JS1024 work?

1) There are four categories: HTML5 Project (submit something in 1024 bytes HTML included), Canvas Project, Shader and P5.js project;
2) Except for the HTML project category, you need to download a shim (file html preconfigured and not editable) and then add your script inside;
3) When it will be the time on July, submit from one to twenty project for partecipating!

Since I wanted to learn making games in Canvas after done DOM games before, I decided that category and starting this journey to scratch.

Pacman, a good example of what a game is.

What is Canvas and why using it?

Canvas is a HTML5 element that makes possible visualizing interactive or not animations on browser, games too! You are free to the structure of a website and making grid-based games or anyway slow ones and thinking about every button broke because someone use a different browser, you can use a responsive element and make a good "what you want" cross-platform game? Deal.

Deal accepted!

The Making of Space Hopper

I started from a blank canvas with two moving circles and then I passed to use Unicode emoji (you can have characters with 2/4 bytes? Another deal again. But we will talk later about this) on a black purple screen, then I added stars in an array and update movement every frame. Without knowing, I "invented" spawns (and knew this when I made the frogs in Wonder Wanderer, but that is an another story).

This project is created with this on mind:

1) I had to learn Canvas well (for that I ditched p5.js, for self learning);
2) Since it's part of my job, it must be a game;
3) It must be good, as a game I normally do without limitations, so I have to put quality on this;
4) It must have sound effects (if possible, music, but I asked too much, also I tried putting something, but it sounded terrible, so I left only SFXs);
5) It must be responsive and playable on both tablets, desktops and even mobile;
6) The background must be animated and dynamic (for example, the increasing speed of the stars is one of that features);
7) The game must be a challenge to code golfing about (so no "clean code in 1024 bytes and forget the rest);
8) I should add visual effects while hopping and crashing and while having extra lives.

Since I want to make web and mobile games on my website (here: michaelprimo.it) that was my thing to do. After the background setting, I needed to play with x and y of both the sprites (player and enemy) and make them collide. The collision is one of the weirdest thing of the game, since I made something like "if the enemy is on the same line as the player and in a certain range, then you lose a life", without being 100% accurate. But the game was done.

The first version of the game.

Sure! Just put some wrapping stars in an array, randomic position of the enemy asteroid, click for avoiding it and you are done,
right?

But I wasn't right.

There was room for improvement.
I discovered RegPack and found I had still 200 bytes more to use, so I added more depth to the stars, sound effects and powerups to make the creature more likable and giving more variety to the game.
And then I made the game.
I see there is again room of improvement for it. Next year we'll see if I'll make a Space Hopper 2 for celebrating this creature born on this contest and see how I am improved on time.

Results and future projects for Space Hopper.

The results for Space Hopper were 21th/27, so pretty low. For Space Hopper 2 I think to improve code golfing skills and make more stuff as possible inside the game, also make powerups more clear and changing a bit the game making it more fun and try to make something different, also since Safari doesn't visualize well some Unicode characters I'll have to draw something using Canvas.

JS1024 was a good contest, a good try to continue what JS1k made before and I hope to see contests like this again.

This content originally appeared on DEV Community and was authored by Michael Primo