I've never worked with the new <canvas> element of HTML5 so I played with it and created a really really simple game at the weekend. Normally, I don't share such experiments, but maybe you can find something useful in it.
Let's start with the basic rules of the game. You control a red circle with your mouse on a yellow court and have to catch a red rectangle. This is quite simple, but you must not hit one of the gray circles. The number of gray balls increases with every new catch. By a simple click you can inverse the direction of all balls - which is sometimes helpful if you urged in the top left corner for example.
If you're just interested in playing the game and use already one of the modern browsers like Firefox 3.6, Opera 10.6 or Chrome click to play the game.
This is quite simple by using the Pythagoras to determine the distance. But the problem with Pythagoras is, that we need 2 powers and one square root in the equation, which will slow down the whole thing if there are 100 flying balls and 50 calculations per second.
A much better idea would be to approximate it for the first step. So I sketched a hair cross in my mind over the scene like this:
Okay, let's dig a little deeper. I decided to make the flying balls half size of the big ball attached to the mouse, which allows us to safe one addition, because we can use the coordinate directly instead of using the right border offset (as the small ball fits in the first half of the big circle):
Now we can describe the matching condition with
(m.x <= b.x-5 <= m.x+10 OR m.x-10 <= b.x+5 <= m.x+10)
which can be better expressed by
(m.x+5 <= b.x <= m.x+15 OR m.x-15 <= b.x <= m.x+5)
Now it's possible to simplify the expression to
(b.x <= m.x+15 AND m.x <= b.x+15)
which is our final check if we hit a point at the x-axis. If the condition is true for any point, we can use the slow distance formula to make a more precise decision:
(m.x-b.x)*(m.x-b.x)+(m.y-b.y)*(m.y-b.y) == (m.radius+b.radius)*(m.radius+b.radius)
Update of 06.03.2008:
- New scoring model: the faster you play, the more point's you'll get
- Fixed bug that you loose immediately. It's only possible to loose if you move against a new created barrier which is also directed to you. But this is your fault.
- Fixed bug that you can cheat by pausing movements
BTW: My record is a score of 145; beat this ;-)
You might also be interested in the following
- Calculate the intersection points of two Circles
- Creating an Advent Calendar with HTML5 and CSS3
- How to map a Square to a Circle
- People near you with MySQL
Sorry, comments are closed for this article. Contact me if you want to leave a note.