< Pete Goodman Web developer >

Labs - Browser Breakout

Sunday 24th October 2010, 23:04

This is a little experiment using JavaScript and canvas to create a bookmarklet that could turn any web page into a game. Games like this are fun examples of how to detect specific elements in a web page and interact with them. I've tried creating something similar called Browser Breakout:



Drag the link above to your bookmarks toolbar or to a tab to start browser breakout on other websites.

The concept of the game is simple, it detects any images (of a reasonable size) on the page and turns them into breakout blocks.

The game itself isn't really finished, more a proof of concept. There is plenty of room for improvement - the collision detection is temperamental, and the physics logic needs improving. Also, it's quite inefficient as it redraws the canvas element every frame. I experimented with only redrawing the ball, the paddles and any images that are interacted with, but it caused more problems than it initially solved.

This great tutorial was very helpful for creating the original breakout logic. Source code for Browser Breakout is available on github.

Comments

Be the first person to comment on this lab...

Please feel free to add a comment

Add a comment

Prove you are human*

* denotes a required field.

Email addresses are for verification only, and will not be published

The RECAPTCHA spam protection enables me to differentiate between genuine human comments and computer-generated spam.