Since the JS1K contest
started in 2010 (where I got second place with
) I've seen various entries
trying to be similar to a meteors game. I was pretty curious about the subject,
really was it so complicated to do something looking nice and complete? a nice
challenge to try in my free time :)
Click the game to start playing (use arrows and space bar)
I started writing it in February 23, 2012 thinking in JS1K
2012 Love contest, most of the game was coded in one week, including all
basic features: player ship, meteors, sparks, enemy ships with AI and multiple
It wasn't so easy as I thought, in fact I needed more bytes
to crunch in everything as I improved it, so I resorted to using
, this gave me more space
for the design, ironically for a game in space :).
I missed the JS1K 2012 Love contest because I was not
happy with the result, I redesigned various things for the JS1K 2012 Autumn
contest and I forgot to send it!
So one week after the start of JS1K 2013 Spring contest I
managed to fit in a score indicator and I sent the entry. It was
published as number 1312. Check the
As the contest developed I noted that the player's ship
didn't have inertia while rotating, so I managed to fit a few bytes more for
it and I resent it: improved
Still I wasn't happy, because I wanted to add a radioactive
halo feature around graphics that was present before I added score indicator.
Fortunately I found
With all the bytes saved I was able to put back in the
shadow and also some small enhancements, all this found in the
Unfortunately my game didn't made it to the final top 10
published in May 5, 2013.
Features and usage
Pilot your ship through space and remove meteors from field.
Rotate with left and right arrows, advance with up arrow, shoot with
Caveat with aliens lurking.
If you want to change the initial configuration then just refresh the page.
- 16:9 scale colorful vectorial.
- Score counting :)
- Many sparks on blasts.
- Always different games.
- 30 frames per second in most machines.
- Objects make smooth transition between borders.
- Cleaning the field gets more meteors and aliens.
- A lot of realism as there are no sounds in space.
- Aliens can shoot down meteors and other aliens by accident.
- It can serve also as an screensaver, just leave it running.
- Inertia while rotating :)
- Radioactive green halo :D
Note that the JS1K "provides" some variables loaded with important data, similar to this:
Here is my original commented source code.
// (c) 2012-2013 by Oscar Toledo G. (@nanochess)
// Creation date: Feb/23/2012.
// Last revision: Mar/29/2013.
// In this source code some expressions are repeated to get more compression
// from @aivopaas JS compressor. http://js1k.com/demo/1127
// and later http://www.iteral.com/jscrush/
// Visual objects array (in first line to evade original compressor bug)
// Keyboard array
// <canvas> width/height, save also for further use
// window.onkeydown/onkeyup, annotate key pressed/depressed
// Don't remove semicolon at end of both functions or fails after compression
// Compression of <canvas> function names
for(Z in a)a[Z+(Z||Z)]=a[Z];
// Add new object to visual list
// X,Y coordinates
// Rotation (in radians) for displaying
// Rotation (in radians) for displacement
// Score (ship) or who shot this bullet (3=ship, 0=enemy)
// Type of object
// 0 - Player's ship
// 1 - Enemy's ship
// 2 - Meteor
// 3 - Spark
// 4 - Bullet
// Call continously main loop
// Function containing main loop
// Keep canvas context in scope
// Wide lines for all objects
// Cleans canvas
// If list is empty or player's ship was removed then restart screen
// Center player's ship, put it pointing upwards
// Add Math object to scope
// Cycles through visual list in reverse to not have problems with deletion
// Include visual object in scope (now three objects in scope!)
// Save context before drawing object
// Wide shadow
// Color for score, note it reuses string
// Shadow properties, radioactive green :P makes it to look better
// Select color for object, third color character shared between objects :)
// Is this an enemy?
// ...yes, inertia, and now standing still?
// ...yes, shoot player
// ...direct bullet to player...
// ...rotate enemy to left or right randomly...
// ...choose random speed for enemy, updates displacement...
// ...bullet angle randomly between -0.2 and 0.2 radians of exact direction
// to not make it too hard...
// ...note it doesn't include last argument, this signals bullet shot by enemy
// Is it the player?
// Pressing space fires bullets, reuses time for slower shooting
// Note last argument signals bullet shot by ship.
// Visualize score, note it reuses numbers
// Pressing left/right arrows rotates player ship
// Choose meteor or enemy ship
// Add objects in random positions when there are less than six objects
// Note the objects are added far enough around player's ship.
// Pressing up arrow accelerates player ship and updates displacement
// Translate for drawing and calculate new position,
// keep inside canvas with margin so objects enter softly.
// Apply rotation
// Apply scale
// Begin draw
// Each shape contained in a single number
// 2602934 = 8,8-4,6-0,8-4,0 (ship pointing upwards)
// 26573945564232 = 0,5-2,8-4,7-7,8-8,2-7,0-4,1-1,0 (meteor)
// 39023120720 = 2,4-0,7-8,7-6,4-6,1-2,1 (kind of Apollo capsule :P)
// 207489 = 3,5-5,5-4,3 (triangle pointing upwards)
// 207489 = 3,5-5,5-4,3 (same)
// number becomes zero when drawing finishes
// Extract a pair of coordinates. Modulus 9 gets unit 0-8 (drawing space.)
// ...substract unit before division by 9 to keep as integer
// draw line
// Close shape
// Paint shape
// Restore context
// If handling alive player ship or bullet fired at least one frame ago
// Check collision against other objects
// Be sure it's not same object and it's a ship or meteor...
// ...inside bounding square
// Ok, there is a collision
// If it's player then mark as dead and prepare to disappear
// in a few seconds, other objects score if player's bullet and
// disappear in next frame
// Put collided object in scope
// (now four objects in scope!, don't do this at home)
// Add spark 1
// Add spark 2
// Add spark 3
// Add spark 4
// Add spark 5
// Add spark 6
// First meteor gets a random kick
// Needs to cut meteor in two?
// Create a second meteor with more random kick
// Both meteors accelerate and get same smaller size
// Prepare to remove object, already u=0 if 'f' points to player ship
// Time to delete object? Remove object from visual list
// End of function
// Refresh 30 times per second (1000/30 = 33 milliseconds)
Last modified: May/12/2013