Friday, April 08, 2011

Pirates!! A multi-player browser game with Yesod and Canvas

I can finally open to the public a little game I've made! You can now go to http://pirates.dyndns-free.com and play!
The game is simple: you're sailing a pirate ship, and you have to sink your opponent. You can use cannons, ram the other ship, board it with your blood-thirsty crew. Your speed depends of course on the direction and strength of the wind. You can play alone versus a very dumb AI (mainly to get the hang of the controls), against a friend in a private game, or against any dog on the internet. 
The technology stack is as follows:

  • Hosting is on a free Amazon EC2 instance. Performance is probably not going to be great, but should be sufficient I hope for the traffic I'll be getting!
  • Server side is Yesod 0.7. Coming from the Java/JSP/Struts world it was such a pleasure to work in Haskell, with type safe templates. I have no web server, just warp, since there are very few static files (a few sprites and the tile image).
  • Client side uses Canvas with a sprinkling of JQuery.

As you can see, no database. Information about current games is purely in memory, and I don't keep any long term information about players. I suppose that allowing players to log in with their Google or Facebook id, and keep statistics on their battles would be good, but I'm not sure this little game will get enough traction to warrant it, really... 
The AI also is not great shake, there are only two bots: The Sitting Duck turns to face the wind and stays there. The Drunken Sailor just goes randomly through all possible actions. But hey, it's a multi-player game!
I'm not too sure if I chose the best route for concurrency. I use MVars and modifyMVar.
In fact the more difficult bit was to design the control. I didn't want to a do a full 3D environment, and opted for a top view, but the velocity of the ships was essential, and so providing just direction keys as in more static games wouldn't have worked. Hopefully the way the control works, being disposed on a copy of the boat icon at the top of screen, that turns when you boat turns, will work well. The icons are probably a bit small, it's fine for a mouse but I don't think it could work on a touch screen, unless you have tiny fingers.


A little bit of personal info: inspiration from this game comes from the French magazine "Jeux et Stratégies", that my dad used to get when I was young, and that got me into games. We have still kept all the issues, and issue 22 from August 1983 describes a simple ship battle game, rules written by Michel Brassinne (French warning!). Thanks!


Still it was fun to do!! Hope you enjoy playing it a little!

5 comments:

Unknown said...

Fun! Although I struggle with the controls, clicking on tiny arrows that move around as the ship turns, while trying to keep an eye on the tactical situation is difficult. How about some keyboard shortcuts?

Unknown said...

Oh, and cannon should take some time to reload. And how about a chat option? :-)

Unknown said...

DEFINITELY needs keyboard controls ;)
Each time I look at the board my mouse has moved just a tiny bit and I'm clicking on the wrong part of the ship.

JP Moresmau said...

Thanks for the comment!! I have just uploaded a new version:
- keyboard controls
- 2 sec delay between cannon firings

I'm not too sure about chat, probably not that hard to implement but it will be probably outside of the canvas area (on the right hand side?).

Wayward Hatch said...

Very fun little game. I love ship games anyway, so I'm a little biased. :) I play Axis and Allies: War at Sea with my 5 year old son a lot.

I'm working on a browser based space game myself right now. It's not nearly as graphical as yours, but is basically a 4x game with real time elements. I blog about it at http://projectlibertine.blogspot.com

Hatch