A fighting platformer, in HTML5
Back in October, Google hosted a two-day HTML5 game jam at their San Francisco office. Chris Killpack and I both attended and paired up to make a game. This is a playable log of our progress.
Brief note on the demos: They work in Safari, Chrome, and Firefox. They don't work in Internet Explorer 8. I haven't looked into why (this is game jam code after all).
Day 1, 2:45 pm
We got started a bit late and don't have much of a plan. The intial idea is to make a simple 8-bit fighting game, two player hot-seat. Chris sets up a repository on his subversion server while I start a simple game loop rendering to a <canvas> element.
Day 1, 4:00 pm
Basic keyboard controls started. A and D move, R punches (we're expecting the player to use two hands for this, by the way). Chris is working on sprites. We found a collection of adorable 8-bit versions of Street Fighter characters, and they're animated. We'll use these as stand-in art until we either can get permission to redistribute them or until we replace them. [In the end getting permission got complicated so we drew new art from scratch.] Chris is converting the animated gifs into sprite sheets and writing a class to manage them.
Day 1, 7:00 pm
Sprites are working. Now there are keyboard controls for both players (player one still uses A, D, and R. Player two uses left/right arrow to move and comma to punch). Moving away makes you block punches. Player health is shown at the top of the screen, and the game resets when one player runs out of health.
Added debug mode (press P), which draws the exact locations of the players, collision boxes and shows keycodes as you press keys.
We have enough working to start tweaking gameplay. Made it so players can't move while punching. Fiddled with the punching range a lot until it felt right. Made getting hit push the player back a bit (which makes the punch seem a lot more powerful).
Day 1, 9:15 pm
Worried that a straight fighting game will be boring. Decide it should also be a platformer with pits that the players can fall into. This requires a bunch of new features:
- Scrolling view
- Left edge of window pushes players along
- Gravity and collision dection with the terrain
- Jumping (to make it over the ledges)
- Random level generator (we don't want to build levels by hand)
Still tweaking the gameplay in a lot of ways:
- Added a pain animation to make it obvious when you get hit.
- Added horizontal acceleration/deceleration which makes the controls feel a lot more "juicy."
- The level generator was putting holes at the start of the level which turns out to be a bad idea (especially if a player starts in a hole). Tweaked it to only put holes in after a certain distance.
- Made movement faster
- Players now face the direction they are moving
Done for the day.
Day 2, 8:45 am
Chris can't make it today. I start off slowly by cleaning up code from yesterday.
Day 2, 1:00 pm
Added throws. You can't block throws, so if someone is blocking all your punches, throw them. Throws also take a long time, though, so if you miss you'll be vulnerable.
Made scrolling stop if O is pressed (scrolling is annoying when developing)
Lots of tweaks to the feel of the game:
- Player movement stops when punching and when getting hit.
- Players could punch too frequently, so I made the punch action take a little longer (but kept the animation the same speed so it looks like a good, fast punch. There's just a delay at the end where you can't do anything).
- Always face the other player. Getting in a fight while facing away from the opponent is just weird.
- Made holes deep enough that you can't see the player standing at the bottom
Day 2, 2:00 pm
A few more tweaks to gameplay: Players start farther apart, there are more holes, and players actually die in the holes now.
The official game jam will be over soon so I added some instructions, an intial "Fight!" screen and a "Game Over" screen. It is surprising how much more finished this makes the game feel.
Day 2, 6:00 pm
After I got home I worked on the game a little more. Tweaked damage values. Only start killing players after they fall a long ways into a pit. Made the game loop exit if you press ESC.
I also added some noise to the sky and ground. This is a trick I learned from Amit Patel and it does wonders for pulling things together visually.
This is the final verison of the game. You can get the code to this game on code.google.com
In addition to the keys documented in the instructions, there are a couple other keys useful for debugging:
- P: debug mode
- O: stop scrolling
- ESC: quit game loop
(Note: I've modified the code slightly in these snapshots. To make it easier to post, I've jammed everything into a single .html file instead of splitting out separate .js files. Also, as mentioned above, these aren't the character sprites we started with because we didn't have permission to redistribute those.)