An important
part of any game is how it is presented. Creating games is part of the
entertainment industry and consumers want to have a great experience playing
your games. A good game can lack success if its presentation doesn't convince
the players to try it or doesn't motivate them to play more. Now keep in mind
that presentation doesn't necessarily mean high-end graphics. There are some
things that we can do using CSS.
The Browser as
a Gaming Console
One thing I
like to imagine when creating HTML5 games is the browser as a gaming console.
When using this approach there are two things that immediately come to mind: a
frame and a centered screen. With the help of a little CSS we can give our
canvas a border and center it in the middle of the browser window. Moreover, if
we would set a dark background color for the white space around the canvas we
could have a nice looking game screen that will make a new visitor start
playing.
Giving the
Canvas a Border
The first thing
we want to do is give our canvas a dashed border. You could also use a solid or
dotted border, of course. However, I prefer a dashed one especially while
developing the game. When you add the canvas tag to your webpage set the id to
canvas, too. Now we can give it a border by writing the following CSS code: 1px
dashed black. If you refresh your webpage now, you will see the canvas as a
small rectangle in the top-left corner of your browser window.
Centering the
Canvas
As you can
imagine, even a great game isn't appealing if you have to play it in the
top-left corner of your browser window. That's why we want to move the canvas
to the center of our browser window. Again, we can do this using CSS code. The
first thing we need to do is add a div tag around the canvas tag. We will give
this div tag an id of "wrapper". Wrapper is a generic id name that is
used a lot in web design to properly arrange elements on the website. Inside
the wrapper is the main content which - in our case - is the canvas for our
HTML5 game. Now we can center the wrapper and the game canvas inside of it. We
do this by setting the width of the wrapper to 800 pixels and setting its
margins to auto. It's important to give the wrapper a width else the auto
margins won't center it.
There is only
so much we can achieve using CSS. To program a HTML5 browser game and make it
look even more professional we will need to work in JavaScript. The next step
would be to resize the canvas and define its context as 2D.
Article Source: http://EzineArticles.com/8522408