bee.games
HTML 5 AsteroidsFixed Shooter

HTML 5 Asteroids

HTML 5 Asteroids

Fixed Shooter

For some months I've been playing around with HTML 5's Canvas element because I was curious about it, especially after seeing it run Flash. I hacked at it for a while then realized I had produced an Asteroids game. The source code is up on GitHub! The Canvas element is super cool. Basically all of the sprites in the game are simple paths defined by an array of points. These points are translated, rotated and scaled based on their state at any given point in the game using the standard Canvas transformations. Plus it gives it a nice retro feel. Let me know what you think! Here’s some cool links to things that helped me out with the game: Determining Whether A Point Is Inside A Complex Polygon. Firefox does the wrong thing when it comes to isPointInPath(), the main Canvas method I used for collision detection; It doesn’t apply the current transformations before determining if there’s been a collision (and they won’t fix it for some reason). I implemented this method to get around the problem but it works fast enough it could be used on all browsers. Metanet Software, the makers of the awesome flash game N, have made a couple of extremely useful tutorials on collision detection. These describe some of the techniques I used in the game, in particular the grid based broad-phase they describe in their second tutorial. I used typeface.js ’s convert tool to convert the awesome Vector Battle font into some JSON point data that could be easily used in the canvas. Typeface.js is a neat library for easily embedding arbitrary fonts in the page. On supported browsers it creates small canvas elements and renders the font inside based on the CSS. I borrowed bits from the library to get the font rendering.

ပြုစုသူDoug McInnes (dmcinnes)
အမျိုးအစားFixed Shooter

About BeeGames social

Playground and Play together are the BeeGames social layer — so you're never just playing alone.

What is a Playground?

Your Playground is your own personal game homepage. Pin the games you love, give it a name and a short bio, then make it public to share your personal arcade with anyone.

How do I use my Playground?

On any game page, tap “Playground” to pin that game. Head to My Playground to edit its name, bio and layout, then share your public link with friends.

What is Play together?

Play together lets you co-play the same game with friends in real time. Open a game room and everyone can play side by side while chatting in the room — like crowding around one screen, online.

How do I play with friends?

Tap “Play together” on a game page, pick a public room or a private one with a password, then share the room link with friends. You can also browse and join open rooms from the Lobby.