Skip to content
Submission for the Js13kGames competition 2019
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
min
README.md
game.css
game.html
game.js
icons.svg

README.md

The Martians are Back!

Submission for the Js13kGames competition 2019

I always wanted to write a bubble shooter in the 99-balls-style, so I did that, and made it fit with the theme "back" afterwards.

There are several versions of the game:

Instead of a proper post-mortem, some Q and A:

Q: Why doesn't this use modern JS and includes prefixed stuff that hasn't been necessary for years?
A: Because in my everyday programming I have to be compatible with these old browsers. I also might want to turn the game into a Firefox OS app (which is no longer developped, so requires compatibility with Firefox 32, though this sounds worse than it actually is). And due to this, my linter configuration enforces ES 5. There is also no real need to use modern JS. Why should I deliberately break old browsers when I simply can support them?

Q: Why is the code one big chunk with lots of global variables?
A: I tried to write it with more structure, but this just didn't work. Almost all functions need to know about almost all variables. E.g. almost every function needs to draw the game (either directly or inderectly), and to draw the game we need almost everything from items to the flag whether sound is on or off.

Q: Why is there no automated build system?
A: I built the ZIP more or less by hand. I just did this a few times at the end before releasing it, and this was faster than automating it. While I wrote the game, I just minified the JS (it is handy to have a shell script wrapper to do so), concatenated all files and zip the result. That gives a pretty good estimate of the size of the final game.

Q: Where comes the idea for this game from?
A: The game is heavily inspired by "99 balls", though I don't know whether that game is the original or inspired by other games based on the same idea. I added the different layouts (all other games I know of use a square grid only), the special items, and many details around the game.

Q: How did the theme "back" come in?
A: Unlike the previous years, this year the game idea came first, and I put in the theme afterwards. Those spaceships could actually have been anything else. But the theme inspired the "back" item, and the story about the Martians had an influence on the form of the "destroy ball" and "random direction" item.

Q: How are the collisions calculated?
A: For every small ball additional to its position and velocity some extra data is stored, especially the time until the velocity might change. Initiately this is the time until the ball is ejected, later it is the time until it will hit an item or a wall. Now the animation is easy: Get the smallest of these times. Move the small balls undisturbed according to their velocity for that time, subtract it from all times. Handle the collision (or whatever happens with the ball that had that smallest time). Calculate the next collision for that ball. Repeat until the total time equals the time since the game was last drawn to screen. Draw it. This means that only a few collisions have to be calculated for every animation frame, most of the time the balls are justed moved on straight lines.

Q: Will there be a second version after the contest?
A: Probably yes. Since the story was only added for the theme, I might remove it again and make it just an abstract game. I also have to do something else with the stars. For a short game it's okay to use them to unlock more levels, but once you unlocked all, they are currently just useless.

Q: Which libraries etc. did you use?
A: The sound is generated by https://github.com/foumart/JS.13kGames/blob/master/lib/SoundFX.js (with some minor modifications), which has a nice editor on http://www.foumartgames.com/dev/js13kGames/js_libraries/SoundFXGenerator/. Most of the icons are from Google's Material Design Icons (I had to modify the note icon, because for some reason the two icons didn't match in the rounded form), which is a nice collection for minimalistic icons. Everything else I wrote myself, and I like the fact that the contest gives me a good reason to program without relying on libraries.

Q: What did you learn?
A: HSL colors are great, they are much easier to choose than RGB.

Q: What are your records?
A: Ah, the only real interesting question:

  • 1: 150
  • 2: 116
  • 3: 142
  • 4: 147
  • 5: 133
You can’t perform that action at this time.