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.
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.
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.
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.
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:
With the easier to use:
{object=TYPE,XPOS,YPOS}
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}