9 Replies - 25040 Views - Last Post: 26 December 2017 - 07:16 PM Rate Topic: -----

#1 brandon99337   User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 167
  • Joined: 14-February 08

Best way to make map for browser game?

Posted 10 December 2008 - 09:39 PM

I'm making a browser game and the map is currently being saved in a db and shown as a table. How do maps such as the map off Travian work? I know the village overview and village center are image maps but how is the main map dynamic?

If you've never played it, here's a picture of the map I'm talking about
Posted Image

If you click on the arrows it will go toward that direction, the entire map is laid out like a graph...

All the source code I have right now is pretty much irrelevant to the question, I just want to see what's the best way to make my map.

If you have any other ideas those are great too!

This post has been edited by brandon99337: 10 December 2008 - 09:41 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Best way to make map for browser game?

#2 Martyr2   User is online

  • Programming Theoretician
  • member icon

Reputation: 5239
  • View blog
  • Posts: 14,034
  • Joined: 18-April 07

Re: Best way to make map for browser game?

Posted 10 December 2008 - 11:37 PM

Well you pretty much nailed it on the head when you said graphic. In the database they have various records that say cell x = 81, y = 30 contains _____ object. Then in PHP you can have the code dynamically draw graphics using the gd library (which comes with PHP, you just have to enable it).

When you hit the arrows you are probably sending parameters that tell the page which cells you want to see as part of a range. The page can then fetch data from the database based on that range and draw the individual items in the cells.

The concept is not too hard really. Try starting something small, say 3 x 3 or 9 cells and see if you can draw a tree in cell 1, 3. Then when they hit north have it pass the values 4 through 6 for y and still cells 1 through 3 for x.

Hope I am making sense to you here. :)
Was This Post Helpful? 1
  • +
  • -

#3 brandon99337   User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 167
  • Joined: 14-February 08

Re: Best way to make map for browser game?

Posted 11 December 2008 - 12:10 AM

Perfect Sense! I'll take a look into the gd library, pretty sure that's what I was looking for! Thanks and thanked.
Was This Post Helpful? 0
  • +
  • -

#4 ellisgl   User is offline

  • D.I.C Head
  • member icon

Reputation: 9
  • View blog
  • Posts: 161
  • Joined: 10-November 07

Re: Best way to make map for browser game?

Posted 19 December 2008 - 12:31 PM

View PostMartyr2, on 10 Dec, 2008 - 10:37 PM, said:

Then in PHP you can have the code dynamically draw graphics using the gd library (which comes with PHP, you just have to enable it).


Why not just have pre-drawn images and use CSS? GD seems like over kill.

This post has been edited by ellisgl: 19 December 2008 - 12:38 PM

Was This Post Helpful? 0
  • +
  • -

#5 mocker   User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 466
  • Joined: 14-October 07

Re: Best way to make map for browser game?

Posted 19 December 2008 - 12:37 PM

Depends entirely on how your game is setup. If your map consists of the same set of images tiled and placed in different positions, you could have the server return the html with images just linked to the correct ones on your server. If you want a smooth map you'd have to have a javascript engine sending ajax requests for the map images and coordinates and updating the css with every request.

For programming, using GD to draw one image would be simpler, but it would be harder to integrate that with mouse events (clicking on areas of the map), and it places more work on the server to generate a new image with each request.
Was This Post Helpful? 0
  • +
  • -

#6 zeldaze   User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 14
  • Joined: 19-December 08

Re: Best way to make map for browser game?

Posted 19 December 2008 - 02:08 PM

View Postellisgl, on 19 Dec, 2008 - 11:31 AM, said:

View PostMartyr2, on 10 Dec, 2008 - 10:37 PM, said:

Then in PHP you can have the code dynamically draw graphics using the gd library (which comes with PHP, you just have to enable it).


Why not just have pre-drawn images and use CSS? GD seems like over kill.

That's what I was thinking...

You may also want into having all the visual effects done in Flash and loading the data from a database which would work pretty well...
You would be able to have pre-drawn graphics which could be used more than once to save server load and linking a Flash creation to a MySQL database is no problem at all...
Was This Post Helpful? 0
  • +
  • -

#7 RudeDog1   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 20-November 08

Re: Best way to make map for browser game?

Posted 22 February 2009 - 10:04 AM

I'm curious if anyone has anyone map creation examples of code I can look it.

Thanks! -RudeDog
Was This Post Helpful? 0
  • +
  • -

#8 SergiuGothic   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 1
  • Joined: 08-June 09

Re: Best way to make map for browser game?

Posted 08 June 2009 - 07:11 AM

View PostRudeDog1, on 22 Feb, 2009 - 09:04 AM, said:

I'm curious if anyone has anyone map creation examples of code I can look it.

Thanks! -RudeDog



I have a map like that!
There is only one difference. The "valleys" are squares, I mean, the small map, like the map from your print screen, is a square.

You will need a database.
Use this sql code to create the table that will hold the data:
CREATE TABLE IF NOT EXISTS `harta` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `x` varchar(5) DEFAULT NULL,
  `y` varchar(5) DEFAULT NULL,
  `tip` varchar(1) DEFAULT NULL,
  `subtip` varchar(1) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 MAX_ROWS=1000000000 AUTO_INCREMENT=1601;



x = x coordinate
y = y coordinate
tip = the type of the "valley" (like in travian, free valley, oasis, villages)
subtip = used for design


Now, the php code for the big map is:
<?php

set_time_limit(10800);

	for($y=40;$y>=1;$y--)
	{
		for($x=1;$x<=40;$x++)
		{
			require_once('includes/db/DbConnector.php');
			$connector = new DbConnector();
			$result = $connector->query('SELECT * FROM harta WHERE x = "'.$x.'" AND y = "'.$y.'" ');
			while($row = $connector->fetchArray($result))

			echo '<img src="images/harta/lan_'.$row['tip'].$row['subtip'].'.gif" title="('.$row['x'].'|'.$row['y'].')" style="float: left;margin: 0;padding:0;">';
		}
	}

?>



It will take every row from the mysql table, beginning with the bigest y number. Then for every y number it will echo the "valleys" by the x number.


Now, the php code for the small map:
<?php

set_time_limit(10800);

	if(!$_POST)
	{
	for($y=40;$y>=34;$y--)
	{
		for($x=1;$x<=7;$x++)
		{
			require_once('includes/db/DbConnector.php');
			$connector = new DbConnector();
			$result = $connector->query('SELECT * FROM harta WHERE x = "'.$x.'" AND y = "'.$y.'" ');
			while($row = $connector->fetchArray($result))

			echo '<img src="images/harta/lan_'.$row['tip'].$row['subtip'].'.gif" style="float: left;margin: 0;padding:0;">';
		}
	}

	echo '<div style="margin-top: 380px;">';
		echo '<form method="POST" action="hartamica.php">';
		echo 'x: <input type="text" style="width:50px;" name="x"><br>';
		echo 'y: <input type="text" style="width:50px;" name="y"><br>';
		echo '<input type="submit" name="submit" value="Cauta!"><br>';
		echo '</form>';
	echo '</div>';

	}
	else
	{
	$cx = $_POST['x'];
	$cy = $_POST['y'];

	$cy1 = $cy+3;
	$cx1 = $cx-3;

	$cy2 = $cy-3;
	$cx2 = $cx+3;

	for($y=$cy1;$y>=$cy2;$y--)
	{
		for($x=$cx1;$x<=$cx2;$x++)
		{
			require_once('includes/db/DbConnector.php');
			$connector = new DbConnector();
			$result = $connector->query('SELECT * FROM harta WHERE x = "'.$x.'" AND y = "'.$y.'" ');
			while($row = $connector->fetchArray($result))

			echo '<img src="images/harta/lan_'.$row['tip'].$row['subtip'].'.gif" title="('.$row['x'].'|'.$row['y'].')" style="float: left;margin: 0;padding:0;">';
		}
	}

	echo '<div style="margin-top: 380px;">';
		echo '<form method="POST" action="hartamica.php">';
		echo 'x: <input type="text" style="width:50px;" name="x" value="'.$_POST['x'].'"><br>';
		echo 'y: <input type="text" style="width:50px;" name="y" value="'.$_POST['y'].'"><br>';
		echo '<input type="submit" name="submit" value="Cauta!"><br>';
		echo '</form>';
	echo '</div>';
	}

?>



I wrote the code that way to be more understandable.

If you need more explication, reply! :)

PS: hope you understand my english and this is what you are looking for. :D

This post has been edited by SergiuGothic: 08 June 2009 - 07:14 AM

Was This Post Helpful? 1

#9 florin1693   User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 1
  • Joined: 26-December 17

Re: Best way to make map for browser game?

Posted 26 December 2017 - 11:42 AM

use this instead of sql loop ( bad practice )
$sql = "SELECT x,y,type FROM map WHERE x BETWEEN 5 and 12 AND y BETWEEN 1 and 8";
$result = mysqli_query($conn,$sql);
if(mysqli_num_rows($result)!=0){
	while($row = mysqli_fetch_assoc($result)){	
echo "<div class='".$row['type']."'>".$row['x']."-".$row['y']."</div>";
	}
}


Was This Post Helpful? -1
  • +
  • -

#10 CTphpnwb   User is offline

  • D.I.C Lover
  • member icon

Reputation: 3796
  • View blog
  • Posts: 13,742
  • Joined: 08-August 08

Re: Best way to make map for browser game?

Posted 26 December 2017 - 07:16 PM

Let's hope that at some point in the last 9+ years they OP got this figured out.

Closing.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1