In today's post i will tell about the racing game i am creating. The game is almost complete. I will now explain what are the features i added and how it came out.
Objects everywhere !
If you wanna learn Object oriented programming, start developing a game. It comes naturally. Its always easy to identify objects in game. For example in my game, car,obstacles,trees,road dividers are objects. It's easy to implement this way instead of having global variables for every thing(its almost impossible to do it that way!). So most of the time my refactoring process would include making the code more object oriented and reusable. Main advantage of doing that is the flexibility you gain. In games many times you need to scale up and down variables. Unless you go for a modular , object oriented approach you would certainly fail.
Event Handling --> look out for cross browser compatibility
In any game human computer interaction is done using some event handling mechanisms. In Javascript you can perform event handling in lot of ways. Most of the times it will not work in all browsers in the same way you expected.
-->One simple solution is to use jquery library to handle events. The compatibility issues are taken care by jquery function itself.
-->Next solution is make your event handlers work somehow. For me adding event listeners in the following way worked like a charm in all browsers,
window.addEventListener('keydown',doKeyDown,true);
then you write doKeyDown function as,
function doKeyDown(event)
{}
To find the key which has been pressed down you do,
event.which
it gives the keycode of the key pressed.
For example,
if(event.which==32)
{
alert("you pressed spacebar");
}
Processing events
Handling events is just the beginning of a very important job called processing events. After a key is pressed you may wish to do something. For example, after pressing left arrow you may wish to turn your car left.
What beginners mostly do is( i say this because that's what i did quite a few times before knowing the right way to do it) do all the processing inside the event handle function itself. Games doesn't work that way at all !!
The correct way to process events is to,
Objects everywhere !
If you wanna learn Object oriented programming, start developing a game. It comes naturally. Its always easy to identify objects in game. For example in my game, car,obstacles,trees,road dividers are objects. It's easy to implement this way instead of having global variables for every thing(its almost impossible to do it that way!). So most of the time my refactoring process would include making the code more object oriented and reusable. Main advantage of doing that is the flexibility you gain. In games many times you need to scale up and down variables. Unless you go for a modular , object oriented approach you would certainly fail.
Event Handling --> look out for cross browser compatibility
In any game human computer interaction is done using some event handling mechanisms. In Javascript you can perform event handling in lot of ways. Most of the times it will not work in all browsers in the same way you expected.
-->One simple solution is to use jquery library to handle events. The compatibility issues are taken care by jquery function itself.
-->Next solution is make your event handlers work somehow. For me adding event listeners in the following way worked like a charm in all browsers,
window.addEventListener('keydown',doKeyDown,true);
then you write doKeyDown function as,
function doKeyDown(event)
{}
To find the key which has been pressed down you do,
event.which
it gives the keycode of the key pressed.
For example,
if(event.which==32)
{
alert("you pressed spacebar");
}
Processing events
Handling events is just the beginning of a very important job called processing events. After a key is pressed you may wish to do something. For example, after pressing left arrow you may wish to turn your car left.
What beginners mostly do is( i say this because that's what i did quite a few times before knowing the right way to do it) do all the processing inside the event handle function itself. Games doesn't work that way at all !!
The correct way to process events is to,
- add events to an event queue
- in every instance of gameloop remove an event from the event queue and process it
Unless you do this kind of implementation, some events wont be caught and it may ultimately affect the performance of the game.
The canvas
Canvas is the place where you will show your game. That's where you can draw stuffs , put images etc... While developing the game i developed it using constant height of 500px. I used 500 in my calculations everywhere. But after the game came out well, it looked small.
The way to proceed is to expand the canvas in CSS. You give more height to the canvas in CSS it automatically expands the canvas to that size. However number of pixels still remain the same.
In this way you can save processing power too :P
Some browsers do anti-aliasing themselves when we expand canvas like this.
More concepts in posts to come ! see you in next post.
No comments:
Post a Comment