Need help starting on a browser-based game

Well, only because I am sitting here typing to another member, LOL… Will get Skype up soon…

I have a lot of free time today, so if you want just throw me a skype/YIM/MSN contact add and I can start helping with stuff ^.^

Well Gears, ShieldHeart is the boss… It’s his game, I am just helping too, like you.

If you have any ideas for him, post away and I am sure he will respond when he is free.

Look at his last post, there is a link to a picture of his current game page. You can look at it and then let him/us know what you think would improve it. I am sure any good idea will help!

@ErnieAlex
Not sure if you can or a mod needs to but the topic “Old script trying to make current” needs to be marked as solved.
________________-----

well after some time what you would do in the map data in the database is

auto_id, x, y, other values…

and run through it like

[php]$stop = 1;
while ($stop != 1000){
echo “<img src’./img/forest-pixel.png’ alt=‘forest’ />”;
$stop++;
}

//use CSS to format is all into a grid.
//OR
//set it into a grid by php like…

$stop = 1;
$row = 1;
while ($stop != 1000){
if($row = 100){
echo “<img src’./img/forest-pixel.png’ alt=‘forest’ />
”;
$row= 0;
}
$row++;
$stop++;
}[/php]

this can be expanded by adding more ifs for the type of pixel needed but the basic idea is their. Next post will show you how to save system resource and from having to call the database again on each call of the map.

here is how to make is fast

[php]<?php session_start();

if(!isset($_SESSION[‘time_now’])){
$_SESSION[‘time_now’] = time() + (0 * 1 * 60 * 60);
} else {
$time_check = time();
if($time_check > $_SESSION[‘time_now’]){
$stop = 1;
$row = 1;
unset($_SESSION[‘map’]);
$_SESSION[‘map’] = array();
while ($stop != 1000){
if($row = 100){
$data = “<img src’./img/forest-pixel.png’ alt=‘forest’ />
”;
} else {
$data = “<img src’./img/forest-pixel.png’ alt=‘forest’ />”;
}
echo $data;
$_SESSION[‘map’][] = $data;
$row= 0;
}
$row++;
$stop++;
}
} else {
foreach ($pos as $_SESSION[‘map’]){
echo $pos;
}
}

}
?>[/php]

tada!

Gears, I marked that topic solved for you!

And, we will wait for ShieldHeart to respond on your notes… Later…

Thanks Gears, I will definitely try out your code. Like Ernie said any good idea helps!

Unfortunately I’m gonna be busy with other things for the next day or two so I won’t be able to implement your code for a while, but I’ll let you know how it goes once I try it out.

btw i kinda messed up, the last bit should be

[php]foreach ($_SESSION[‘map’] as $pos){
echo $pos;
}[/php]

Alright so, Updates!

I’ve been able to get some coding done today and I’m happy to say that players can now scroll through the entire map. Like you said Ernie I used the _GET variable to transfer the X and Y values. Thanks for that. Now every tile on the map is clickable and clicking on one tile will reload the page centered on that tile. I didn’t have to use the iframe like you suggested, here’s the MapDraw function if you would like to take a look, it seems to load the page without any lag, but maybe you have some suggestions to make is faster.

[php]<?php

// This function takes in new X and Y values for the map to be centered on and displays the new map links and graphics.
function MapDraw($XC, $YC) {

for ($y=1; $y<=9; $y++) {
	for ($x=1; $x<=9; $x++) {
							
		$X = ($XC - 5) + $x;
		$Y = ($YC - 5) + $y;	
							
		// Display "end of map" graphic if edge of the world is reached
		if ($X < 1 || $X > 1000 || $Y < 1 || $Y > 1000) {
			echo '<img src="images/Terrain/MapEnd.png" alt="Tile" />';
			continue;
		}
		
		// Get the tileID for query
		$TID = (($X * 1000) - 1000) + $Y;					
		
		// Perform database query
		$result = mysql_query("SELECT * FROM tiledata WHERE TileID=$TID");
		if (!$result) {
			die("Database query failed: " . mysql_error());
		}

		$row = mysql_fetch_array($result);
		
		$Graphic = $row["Graphic"];								
			
		// Display the right tile graphic according to database
		if ($Graphic == 1) {  
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/Forest1.png" alt="Tile" /></a>';							
		} elseif ($Graphic == 2) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/Forest2.png" alt="Tile" /></a>';	
		} elseif ($Graphic == 3) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/Forest3.png" alt="Tile" /></a>';
		} elseif ($Graphic == 4) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/Forest4.png" alt="Tile" /></a>';
		} elseif ($Graphic == 5) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/Forest5.png" alt="Tile" /></a>';
		} elseif ($Graphic == 6) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/Forest6.png" alt="Tile" /></a>';
		} elseif ($Graphic == 7) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/Forest7.png" alt="Tile" /></a>';
		} elseif ($Graphic == 8) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/Forest8.png" alt="Tile" /></a>';
		} elseif ($Graphic == 9) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/Mountain1.png" alt="Tile" /></a>';
		} elseif ($Graphic == 10) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/Mountain2.png" alt="Tile" /></a>';
		} elseif ($Graphic == 11) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/Castle.png" alt="Tile" /></a>';
		} elseif ($Graphic == 12) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/Smith.png" alt="Tile" /></a>';
		} elseif ($Graphic == 13) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/Farm.png" alt="Tile" /></a>';
		} elseif ($Graphic == 14) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/LumberMill.png" alt="Tile" /></a>';
		} elseif ($Graphic == 15) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/StoneCutter.png" alt="Tile" /></a>';
		} elseif ($Graphic == 16) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/IronMine.png" alt="Tile" /></a>';
		} elseif ($Graphic == 17) {
			echo '<a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/GoldMine.png" alt="Tile" /></a>';
		}																								
	}
}	

}[/php]

Oh and thanks gears for your code, I referred to it for my MapDraw function, it was pretty helpful. I also uploaded my new graphics and wrote the functions for the navigation bars, so the new map page looks quite a bit better now:

As of now I have two things I might need help with. One is displaying borders on the map, here’s the situation:

Each tile on the map is a 50x50 pixel image. The 1 pixel thick perimeter of each of these tiles is white, this is why you can see white lines going between the tiles on the map. When a user claims a tile I need to be able to change the 1 pixel perimeter of the claimed tile to his/her color (the user’s color is determined randomly after registration). So I’m not sure how I can accomplish this but I feel like php’s draw functions will be key. Let me know if you guys have any ideas about how to go about doing this.

My second issue is about passing user information between the different pages of the website after login. After a user logs in to my website, how do I pass their userId to the other files of the site? I could put their userID into the URL and pass it around with the _GET variable, but I doubt that’s secure since another player could simply enter another user’s ID into the URL and play as that player. So how do I pass user information from page to page securely without forms? I’m sure there’s a perfectly good way of doing this, I’m just a php noob that’s all :slight_smile:

Thanks again in advance, I always appreciate any input you guys have.

Looking good, I’d suggest rounding some corners somewhere to smooth out the look a bit. For passing user information around the backend you would use sessions:
http://us3.php.net/manual/en/book.session.php

As for the color I’m not too familiar with the draw functions but it could be done with css

Well, I have lots of ways to speed up that mapping routine. First, you do a TON of calculations inside the FOR loops that slows down the loop. I am leaving for an hour, but, will post some ideas later on…

Also, there is an easy way to add border colors. Actually several… But, that depends on how many different colors you are using and how many different tiles/images you have. There is a way to draw on top of an image. Easy to do. You could check to see if the tile is taken and paint it around the edges. BUT, I think that would slow it up. A good idea is to place the tiles into a table. The table would be one pixel larger than the tiles. So, remove the border on each tile and leave at 50x50 with no border. Set each cell in the table to be 51x51. Then, assign cell’s background color in the

tag. So, nearly no computations involved. Just have to keep tract of the cell’s owner’s color and change the tag’s for that cell correctly. Start with white, etc… Actually not hard to do as you already have 90% of it in place in the mapdraw functions! What do you think?

I can streamline your mapping code… Lots there, but, I will do it when I get back…

Sounds good Ernie I will try to implement your table idea tommorow if not tonight. I’m looking forward to hearing how I can make my mapping function better, Thanks.

And thanks also Sabmin I will look into sessions and learn what I can.

Okay, took a peek at your map code…

I suggest that you add a display of the clocks millisecond counter before and after the mapping routines.
This would show if any of these ideas actually speed up your mapping. I think some will. Display the time
it actually takes on your server and subtract the ending from the start and you will see how fast both are.


First, the routine goes thru 81 loops. Inside that loop is a complicated IF clause that has a LOT of compares in it. So, 81 times all this is a huge hit on performance. Of course, this really depends on how many players are active. So, there are several ways to improve it.

Start with this line: if ($X < 1 || $X > 1000 || $Y < 1 || $Y > 1000) {

Four “compares” and three “ands” repeated 9x9 times… Lots!
So, this IF clause is to figure out if we are at the edge of the map. I would calculate this BEFORE creating the map and use a 11x11 map instead of 9x9. You would only display the 9x9. Just use an offset created before the map is started. In each part of the map, add the offset to the x,y to see where it is in the 1000x1000 map. If it is on the 3 row, the offset would adjust for the edge and adjust to point at the 5th square instead. The mapend pix would always be in place. In that manner, the above is no longer needed and saves a large number of calculation cycles.

Next, 0 to 8 is the same as 1 to 9 That is if you do not need to use the 1 as a start. So, what I mean about this is that two for loops 0-8,0-8 is 81 and 1-9,1-9 is 81… Same. Make sense?
So, logically, this line: $TID = (($X * 1000) - 1000) + $Y;
could be altered if you use 0-8 as: $TID = $X * 1000 + $Y; this saves a lot of subtracting…
I am guessing in this map, you actually have it set up as 1000x1000+1000 to make up for this for loop…

Now the last speed up is a big one! During the displaying of the map, you locate the map picture number in the grid. Then, you use this to decode the picture name and display it. This is a bit hit on performance. So this:
if ($Graphic == 1) {
echo ‘<a href="game.php?X=’ . $X . “&Y=” . $Y . ‘"">Tile’;
} elseif ($Graphic == 2) {
echo ‘<a href="game.php?X=’ . $X . “&Y=” . $Y . ‘"">Tile’;
} elseif ($Graphic == 3) {
All of this loop can be replaced with just one line. This section of the loop goes thru a large number of IF clauses and if the first one doesn’t match, it goes to the next. So, if the graphic number is 8 it has to go thru the first 7 IF clauses to get to the 8. Performance-wise, this is crazy! It would be so very easy to remove ALL of the IF’s with the use of just a simple array… So, here is one short example how to do this. Before starting the FOR’s and looping, you would have to create an array… Sample with just the first three tile names:
$graphics = array(“Forest1.png”, “Forest2.png”, “Forest3.png”, “etc…”); (Placed before the FOR’s.)
Now the entire IF clause can be reduced to this one single line:
echo ‘<a href="game.php?X=’ . $X . “&Y=” . $Y . ‘"">Tile’;
What this will do is remove ALL of the repeated IF clauses from 1 to 17 and cut down on about 500+ IF’s.
(during the full loop)

Well, that should speed it up a lot in the overall picture. It really doesn’t matter if you have 10 people playing as that is low volume. But, if a 1000 are playing, it might matter. I just see these things logically and I have a bit of game experience. Do not change any of these things if you have plans for using them this way. You might have plans I am not aware of. I just see logical speed ups… LOL… Hope that helps.

as with what @Sabmin said, use sessions but YOU HAVE TO BE CAREFULL!!! sessions can be easily hacked, but then again its easy to protect. this is a simple code to make sure the person who logged in is the same person accessing the page

[php]<?php

$ip =$_SESSION[‘ip’];
$current_ip = $_SERVER[‘REMOTE_ADDR’];
if ($ip != $current_ip){

$_SESSION = array();

// If it’s desired to kill the session, also delete the session cookie.
// Note: This will destroy the session, and not just the session data!
if (ini_get(“session.use_cookies”)) {
$params = session_get_cookie_params();
setcookie(session_name(), ‘’, time() - 42000,
$params[“path”], $params[“domain”],
$params[“secure”], $params[“httponly”]
);
}

// Finally, destroy the session.
session_destroy();

}[/php]

I close/delete sessions this way:

session_unset();      // Erase all session variables...
session_destroy();   // Totally destroy the actual session...

using session_unset() takes a lot more work and system resources then simply using $_SESSION = array();

and you want to delete the cookie too, it’s good security practice.

Gears, I was under the assumption that SESSION variables were secure as they are only on the server and never actually get to the browser. So, why do you say they are not secure and can be easily hacked?
I am very curious on what you are thinking on this subject as I have been telling everyone for years that they are safe and secure.

My thoughts have always been that if set up correctly, nobody using a browser can see your PHP code on your website. And, if they do not have access to your code, they can never know what variables you use in sessions. So, this makes it impossible for someone to see what is inside a variable passed between pages that can not be read. All of the variables inside of your PHP code never gets sent outside the server. They only get passed between pages and the results or outputs of the code get sent to the browser. So, how would you hack this server session? Fill us in on what you are thinking of here…

So I’ve got a bit more coding done and I’m glad to say that the overview map is complete and works like a charm:

Like you said Ernie I used a table and its background color to draw the borders. I literally construct the whole table through PHP, I also used your array idea to speed up my MapDraw function, here’s the new code:

[php]// This function takes in new X and Y values for the map to be centered on and displays the new map links and graphics.
function MapDraw($XC, $YC) {

$graphics = array("Forest1.png", "Forest2.png", "Forest3.png", "Forest4.png", "Forest5.png", "Forest6.png", "Forest7.png", "Forest8.png", "Mountain1.png", "Mountain2.png", "Castle.png", "Smith.png", "Farm.png", "LumberMill.png", "StoneCutter.png", "IronMine.png", "GoldMine.png");

for ($y=1; $y<=9; $y++) {	
	for ($x=1; $x<=9; $x++) {
							
		$X = ($XC - 5) + $x;
		$Y = ($YC - 5) + $y;	
							
		// Display "end of map" graphic if edge of the world is reached
		if ($X < 1 || $X > 1000 || $Y < 1 || $Y > 1000) {
			echo '<td><img src="images/Terrain/MapEnd.png" alt="Tile" /></td>';
			continue;
		}
		
		// Get the tileID for query
		$TID = (($X * 1000) - 1000) + $Y;					
		
		// Perform database query to find graphic information
		$result = mysql_query("SELECT * FROM tiledata WHERE TileID=$TID");
		if (!$result) {
			die("Database query failed: " . mysql_error());
		}
		
		$row = mysql_fetch_array($result);
		
		$Index = $row["Graphic"];
		$Color = $row["Color"]; 		
		
		// Draw tile on map					
		echo '<td bgcolor="' . $Color . '"><a href="game.php?X=' . $X . "&Y=" . $Y . '""><img src="images/Terrain/' . $graphics[$Index] . '" alt="Tile" /></a></td>';																				
	}
	// start a new row
	echo "</tr><tr>";
}	

}[/php]

I couldn’t implement all your ideas to speed up the routine Ernie since I have some plans for parts of it. But still it’s considerably faster and cleaner. Thank you.

I’m going to take off some time from programming the game and learn about sessions and other general PHP topics for the next while. But I do need help with another section in the mean time if you guys are up for the challenge:

I need to write the function for the minimap now, which is going to be generated similar to the world map. It’ll just be smaller. I took a look at your code on generating the world map pixel by pixel Gears, the only problem is I can’t use stored images to draw the minimap since every player will choose their own color. I’m also having some trouble understanding sessions at the moment lol.

I already tried generating the minimap similar to the main map by using a table again, but it’s painfully slow. Like I said before each tile needs to be represented as a pixel on the minimap, unlike the world map however, the minimap needs to be clickable. Clicking the minimap will center both it and the main map on that tile. So here’s my next little project I need help with, again any input is appreciated, thanks again in advance.

Well, for a minimap, I would just use a graphic. You can build the graphic version map using image functions.
These are quite easy to do. You create a new blank image and loop thru building the colored pixels. Should
be just like the regular map without the calls for the images.

The graphic can be hovered over and you can read the mouse position using Javascript. There are a lot
of function that can read the x/y position of the mouse when it is clicked. Then, you would use the data to
calculate whatever you need. That should be easy enough!

just do a quick google on session hijacking and you will know why I use ip based checking for sessions/logins,

-----------------
as for the map and color functions, just get a javascript color picker, store the hex of the color, then when you loop through it just be like

echo “user-color”;

then cache the results so it dose not work so much the next time.

Sponsor our Newsletter | Privacy Policy | Terms of Service