The making of Killer Jewels
March 2010 (index)
This is the story of how I wrote the game "Killer Jewels" in 48 hours as my entry for Reddit Game Jam 06 on the theme of "energy".
There are links to 20+ interim versions along the way.
FRIDAY
22:00 Started pondering the contest's theme - "energy".
22:05 Idea - planets, gravity. Launch an object and get it to go a long way. Balance between launch velocity and placement of planets to slingshot it. Start by getting a basic physics simulation working and worry about the gameplay later.
22:10 Getting basic canvas set up and drawing a circle.
22:20 Can draw a circle.
version a1
22:30 Set up game loop. Update state and redraw every 1/30th of a second. Update is just ship going in a straight line.
22:35 Added acceleration. Just Euler updating for now.
22:40 Added in rough gravity. Ship orbits around a planet.
version a2
22:45 Previously planet was stationary and only ship moved. Now both can move, but planet is more massive than the ship. Strating to look interesting.
version a3
22:50 Changed from one html file to separate html/js/css files. Quick check that it works in Firefox as well as Chrome. Might try Explorer later, but not a priority.
22:55 Refactoring from hard-coded variables (shipdx, planetd2y) to objects. Also getting a little distracted by playing with it and varyiong parameters - must be a good sign.
version a4
23:10 Extending from hard-coded two objects (ship, planet) to two planets
23:35 Playing around with parameters for initial positions. Interesting to play with different starting positions/velocities. Not sure how to make a game out of it yet... Chaotic motion once we have three bodies. Maybe need to make the planets static? Unrealistic, but more playable.
version a5
23:40 Option for planets to be static. Size of planets depends on their mass. Assuming constant density for all objects for now.
23:55 Static planets makes things more interesting. Nice to look at, but not a game yet. No interaction or decision-making at all. More like a screensaver.
version a6
SATURDAY
00:00 Copied to website. Nicola says "pretty patterns" but not much of a game.
00:05 Thoughts at this stage:
* A reasonably productive couple of hours. There's something nice about the combination of deadline and a specific subject. Better than a blank sheet of paper.
* Detect collision between objects. Either satellite hitting something, or two planets colliding (if not static)
* Change coordinate system so it's relative to "centre of universe" rather than being in terms of screen pixels
* Once coordinate change is done it will be easier to zoom the screen in or out as necessary when satellite goes off the current screen
* Maybe do updating better than just Euler? There's a difference between doing "two dt updates" and "one 2*dt" update. Or maybe it doesn't matter.
* Nicer graphics - Black or starry background. Shading/image? for planets/satellite. Keep track of past trajectory to redraw and cope with zooming?
* GAMEPLAY - What's the idea? Maybe choose position (and mass/motion?) of planets from a limited budget to get satellite to a target position?
* Maybe make it more solar system like. One massive sun, planets/moons around it
* Play with speed - both frames per second and speed of satellite
* Stick with this or try another idea?
00:20 Increased speed of updating and number of FPS.
version a7
00:25 Heading to bed
07:05 Been pondering overnight and thought about another game. A puzzle game. Your character has limited energy and needs to get to a target position. Moving costs energy. But he can gain extra energy by collecting food along the way. Also some routes will lose energy - eg by going through (hmm: mud?/wall?/fighting?). Also stuck on some bad kilojoules/killer-jewels pun.
07:30 Set up basic game board. Square grid with a piece for the player
version b1
08:00 Moving around using keys. Keep track of energy, and lose a point for each step.
version b2
08:15 Variable grid size. Game over when reach target square or hit zero energy. Marked goal square.
version b3
08:35 Added blobs to gain/lose energy. Refactored drawing code to reuse it for different blobs. Basic game working. Need to see if we can make some interesting/challenging levels.
version b4
08:40 Thoughts at this stage:
* Have two proto-games. Need to decide which to pursue. Puzzle one looks more promising in terms of gameplay so stick with that for now.
* Name for the game? Still vaguely liking the kilojoules/killer-jewels idea.
* Focus on level generation first. Only bother about graphics/sound etc if the game itself works. Gem-like graphics for the killer-jewels pun?
* Theme - boring/abstract as now; or "straight", explorer, jewels; or wackier?
* Blobs - do you have to collect all of them? Or only the ones you want?
* Maybe add some barriers to the game field. Either forbidden squares; or maze-like walls between some squares.
* How to generate levels? Maybe work on an algorithm to do this. If collecting all the blobs then look at all possible orders of collecting them. eg if have 8 blobs then there are 40,320 possible routes to take. Adjust values so only one of them is any good?
* A couple of basic tutorial levels first?
08:45 Taking a short break.
09:20 Now able to load specific levels and advance between them. Made simple first three levels to ease people into it. (1) with no jewels; (2) a single green one to collect; (3) one red and one green - need to get the green first;
version b5
09:30 Added Google analytics and put on website for comments. Feedback so far: "That's fun!" and the "killer jewels" name gets a "Haha!".
09:40 Decided to stick with this (Killer jewels) rather than the gravity game. Thrown away a couple of hours effort on the gravity thing but not sure it was going anywhere.
09:45 Story/rules if I go for the wackier route. Panda stuck on alien planet needs to teleport back home. Teleporter requires him to collect all the killer jewels (the bad red blobs). He can also collect bamboo (the good green blobs) to help. Needs all the red blobs to open the teleporter; green blobs optional.
10:00 Thinking about level generation. This feels like the hardest part. First trying to make a solver for the existing levels.
Basic approach is to conside all possible "journeys" where a journey consists of a series of "legs" between blobs and goal. eg for level 3 could do start->jewel->bamboo->goal or start->bamboo->jewel->goal. For each leg calculate shortest distance that avoids remaining obstacles (maybe use A*?)
Then run through the journey. It's valid if and only if we have energy>0 at the end of each leg. (or energy=0 at the end).
10:15 Taking a break. Chores in town, then A* when I get back.
10:40 Going to try without A*. Grids should be fairly small. Instead just iteratively build squares that can be reached in 0,1,2,... N moves and break when the goal is reached.
11:50 Have some Python code which can solve the three levels so far. Basic approach. Try to reach goal if it's open and reachable. Otherwise use recursion - look at all the jewels/bamboos we can reach and try and solve from those.
12:20 Able to generate puzzles automatically. Add random jewels/bamboo to a grid, then try to solve using low energy. Keep going, increasing the energy by one each time until there's a solution. They aren't necessarily interesting/challenging/nice so far. Think I may need to generate quite a few and keep the good ones.
version b6
12:30 Break for lunch. Next I want to look at a sensible format for getting puzzle descriptions out of Python into Javascript. Maybe JSON?
13:00 Rewrote level descriptions in the JS file to be in JSON format, and moved them to a separate file. Also getting Python code to output the puzzles it makes in JSON (although still copying and pasting for now).
version b7
13:30 Fiddling around with while puzzle generation code was taking so long to run. Turned out squares could be duplicated among the random blobs. Fixed.
13:50 Getting bogged down in puzzle generation code. Taking a break.
version b8
14:40 Drew a panda figure (our hero) using Canvas. Scalable and moveable so should be able to do some animations with him.
version b9
15:10 Added a zooming panda animation when you win a level. A bit fiddly setting events to trigger, and slightly concerned about cross-browser stuff.
version b10
15:25 More graphics stuff. Attempting to do it all in canvas rather than using any images. We'll see.
15:30 Feedback from a redditor that I should allow use of the mouse as well. Added to "to do" list.
15:50 Faffed about drawing bamboo. Looks OK for now. Might be nice to try some randomness in it later, but not a priority.
version b11
16:15 Added more canvas 'art' for the teleporter. Fixed a bug which made the size of the gridlines depend on what had been drawn before.
16:30 A bit more playing with styling the page and tidying up the uglier parts of the code. Taking a break for a while.
version b12
17:45 Added support for moving using the mouse. (Could consider re-start, next level with mouse also?) Adjourned for the day.
version b13
SUNDAY
12:30 Showed it to Sam and talked a bit about ideas for levels. Bigger boards. Density of items. Bamboo surrounded by jewels. Put the exit in the middle. Start close to the exit and be forced to move away. Barriers. Multiplier-bamboo (eg doubles energy rather than adding to it - adds strategy to when to eat it).
12:45 Probably only have about four hours of time I can spend on this. Priorities:
a. Screen layout. Avoid overlapping text. Name of game, logo etc.
b. More/better levels. Hand-designed or computer generated?
c. Quick look at getting it working in Explorer
d. Sound/graphics. Maybe more animation - losing game, beating all levels?
e. Maybe a startup/splash screen
13:30 Screen layout improved. Name of game, logo, text doesn't overlap.
version b14
13:35 Sam suggests a button for next level and reset so it works on his iPad (or anyone else's for that matter...) No button added but clicking anywhere will restart or proceed to the next level at the appropriate time (when you've lost or won the level).
version b15
13:45 Uploaded to website and renamed main.html to index.html so I can have a cleaner URL for external hosting. http://ibbly.com/killerjewels/
Off to get some lunch.
15:50 Spent a while getting bogged down in generating levels. Took a quick break to add some shading to the graphics a little.
version b16
16:45 Cracked a really annoying bug in the level generation stuff. In the function to calculate the distance between two squares, avoiding other objects in the way, it fell into an infinite loop if it couldn't get to the target. Now breaks out nicely if a square is unreachable.
17:05 Woohoo! Level generator is working, and has come up with a cute level that I doubt I'd have thought of myself. Plan is to run off lots of random levels and pick the good ones manually.
17:30 Going out for the evening
22:00 Finishing off. Adding more levels. Some from my friend Sam. Some generated by the level generator and then thinned out by me.
22:55 Uploading final version to my website.
version b17
MONDAY
09:40 Posted details of the game to the Reddit thread. Thinking that falling asleep last night before doing this was probably a bad idea as the game will get buried at the bottom of the page and not get voted on. Oh well. Really enjoyed this. Having a deadline and a theme rather than a blank sheet of paper really helps with productivity.
09:45 Thoughts on things I could do to improve it now the contest is over:
* Some sound
* Get it working in Explorer
* More on the levels - work on level of difficulty, either adapting the level generator (unique solution, changes of direction in the solution) or playing manually.
* Extensions to the game-play:
* Have a "multiplier" that doubles energy rather than adding to it
* Barriers between squares, or blocked squares. Add a maze element to it.
10:00 Added a quick fix (explorercanvas) so it works (albeit sluggishly) in IE8. If I'd been targetting IE8 I should have really have thought about this sooner.
ibbly.com contact