Tutorial: A basic HTML/CSS game screen

Ellie · Jun 10, 2011

Hi, I'm just sharing some things I've learnt through making a game in HTML, CSS, Javascript and PHP. This is almost certainly the wrong way to go about it, but it works for me and has made a Good Game.

The main problem I had at first was the notion of a game screen where things could be positioned using coordinates. The first place I used it was a world map, but it led to actual mapping based on the placement of objects using a coordinate system (x,y).

First let's create a wrapper for our scene, for now I'll just shove some basic stuff.

<html>

  <head>

    <title>Game</title>

  </head>

</html>

This is our basic web page. It creates a blank page with "Game" as the page title.

The first thing is to define a square and an origin where the (x,y) will start from.

<body style="width: 640px; height: 480px; margin-left: auto; margin-right: auto; border: 1px solid white;">

  content

</body>

This is our basic box, our scene, where everything will be drawn.

Our game objects will be images linked to say, a PHP file, which will do some processing based on what you click.

<div style="position: absolute; left: 3px; top: 4px; width: 1px; overflow: visible;"></div>

This div creates a container for our object, positioned at (3,4) from the top left corner of the scene we created.

We can place anything in it.

Let's create a scene with four trees in it. They will lead to tree.php when clicked.

<html>

  <head>

    <title>Game</title>

  </head>



  <body style="width: 640px; height: 480px; margin-left: auto; margin-right: auto; border: 1px solid white;">

  

    <!-- TREE 1 -->

    <div style="position: absolute; left: 100px; top: 200px; width: 1px; overflow: visible;"><a href="tree.php"><img src="tree.png" /></a></div>



    <!-- TREE 2 -->

    <div style="position: absolute; left: 140px; top: 250px; width: 1px; overflow: visible;"><a href="tree.php"><img src="tree2.png" /></a></div>



    <!-- TREE 3 -->

    <div style="position: absolute; left: 260px; top: 80px; width: 1px; overflow: visible;"><a href="tree.php"><img src="tree3.png" /></a></div>



    <!-- TREE 4 -->

    <div style="position: absolute; left: 290px; top: 130px; width: 1px; overflow: visible;"><a href="tree.php"><img src="tree4.png" /></a></div>



  </body>

</html>

I dunno, this is just basic stuff that I would have found useful when I was starting out.

It may not be smart or clever, but it works, and provides a good basis for then creating something more interactive, and definitely prettier than text on a page.

The next steps I took were to use PHP to turn this into a BBCode like system, replacing:

<div style="position: absolute; left: XPOSpx; top: YPOSpx; width: 1px; overflow: visible;"><a href="action"><img src="source image" /></a></div>

With the easier to use:

{object=TYPE,XPOS,YPOS}

Ellie · Jun 11, 2011

BBCode

My game practically runs on bbcode. But I call it aCode because I'm pretentious.

Imagine the above concept:

<div style="position: absolute; left: XPOSpx; top: YPOSpx; width: 1px; overflow: visible;"><a href="action.php?obj=OBJ"><img src="INT.png" /></a></div>

This might create, say, a tree that you can click to perform an action via PHP.

We don't want to have to type that every time - for one thing, slight updates to the formula require a LOT of working out.

So, we create something we can shove in to replace it that takes the same arguments, like a function, but in our html string.

In php, imagine our html is stored in $message before posting it as just "echo $message;".

First we need to cycle through every time the code is mentioned.

while (strstr($message, "{obj"));

// NB: Make sure to protect against broken code tags with this otherwise it will cycle forever

This loops the code every time {obj is mentioned.

preg_match($regexp, $message, $matches);

This drags out some variables into the $matches[] array, based on regular expression $regexp.

I won't try and teach regexp because I don't understand it myself.

However, for example for {obj=1,2,3,4} to draw out four integers, we can do:

$regexp = "/\{obj=(\d+),(\d+),(-?\d+),(-?\d+)}/i";

Our final code, with replacements, becomes something alike:

while (strstr($message, "{obj"))

{

    // see what's thurr

    preg_match('/\{obj=(\d+),(\d+),(-?\d+),(-?\d+)}/i', $message, $matches);



    $obj_id = $matches[1];   // number of obj on map

    $obj_type = $matches[2]; // type of obj

    $obj_x = $matches[3];    // x position

    $obj_y = $matches[4];    // y position



// note that $matches[0] returns the original string



   $obj_string = "";



    $message = preg_replace('/\{obj='.$obj_id.','.$obj_type.','.$obj_x.','.$obj_y.'\}/i', $obj_string, $message);

}

The final thing to do is to format the $obj_string to return an image that we can print.

$obj_string = "<div style=\"position: absolute; width: 1px; top: ".$obj_y."px; left: ".$obj_x."px;\"><a href=\"action.php?obj=".$obj_type."\"><img src=\"".$obj_type.".png"\" /></a></div>";

The final result is an image linked to a php file with parameters, with an X and Y position and an object type.

I have also added an object ID to this code, which is something used in my game.

Envision, Create, Share

Tutorial: A basic HTML/CSS game screen

Ellie

Ellie

Share this page

Thank you for viewing

Discord

RPG Maker

Content