Welcome Guest ( Log In | Register )

[ Big| Medium| Small] -



Post new topic Reply to topic  [ 2 posts ] 
    Amy
  Fri Jun 10, 2011 2:52 pm
User avatar
Staff

Big Dumb Guy
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}

:)


Top Top
Profile      
 

    Amy
  Sat Jun 11, 2011 4:39 pm
User avatar
Staff

Big Dumb Guy
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.


Top Top
Profile      
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 


Who is online

Users browsing this forum: No users and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

We are an independent, not-for-profit game making community.
Homepage
Board Index
About Us
Downloadable Games
Free Browser Games
Games in Development
RPG Maker Support
Game Maker Support
Construct 2 Support
HBGames the eZine
Advanced RPG Maker
Site Announcements
Powered by phpBB © phpBB Group