collision mechanics.

Torniquet · Post by **Torniquet** » Thu Sep 30, 2010 8:43 pm

I know a while ago, someone (think it was halls) was working on a JS map where the user can move a sprite around with the keyboard.

they also had collision detection in there for objects on the map.

could someone/who ever was working on this please tell me how this was done... roughly. lol. i have the movement and edge of board collision sorted, but i cant for the life of me work out how to do the objects on map collision

bare in mind, i am using jquery. so a decent description on how to work it should be enough :p i wont be able to understand fulll JS code :p:p lol

ta muchly xxx

Post by **hallsofvallhalla** » Thu Sep 30, 2010 8:57 pm

have you watch these yet?

http://indie-resource.com/forums/viewto ... =26&t=2283

how are you building your map? With pixels?

If with pixels then it is tougher. How I did it using pixels originally was by placing the collision in the DB and they built with the map. They were simple pixel ranges that if new location equaled in the range then the function to move would not run.

I can give you the old code.

Post by **hallsofvallhalla** » Thu Sep 30, 2010 9:00 pm

here you go!

Code: Select all

<?php
include_once 'connect.php';
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Quests Of Crocania</title>
</head>
<?php if (isset($_SESSION['player'])) 
  {
    $player=$_SESSION['player'];
    $playerinfo="SELECT * from players where name='$player'";
    $playerinfo2=mysql_query($playerinfo) or die("Could not get user stats");
    $playerinfo3=mysql_fetch_array($playerinfo2);
    
	
	 }
	else
	{
	print "Sorry, not logged in  please <A href='login.php'>Login</a><br>";
 exit;}

 ?>
<body>

<div id="wrapper" align="center">
<table border="1">
<tr><td><img src="images/logo.png" /></td></tr>
</table>
<table border="1"  background="images/panelback.jpg">
<tr>
<td>
<div id="panelarea">
<?php include_once 'statpanel.php';?>
</div>
</td>
<td>
<div id="maparea">
<?php


$mapinfo="SELECT * from locations where area='$playerinfo3[area]' ";
      $mapinfo2=mysql_query($mapinfo) or die("could not map");
   $mapinfo3=mysql_fetch_array($mapinfo2);

$prow = $playerinfo3[row] - 2;
if($prow < 1)
{
echo "<div id='tag1'style='background-color:#000000'></div><div id='tag2'style='background-color:#000000'></div><div id='tag3'style='background-color:#000000'></div><div id='tag4'style='background-color:#000000'></div><div id='tag5'style='background-color:#000000'></div>";
}
else
{
$prow = "row" . $prow;
$j = $playerinfo3[colmn] - 2;
$div=1;
$row1 = $mapinfo3[$prow];
for($i=1;$i<6;$i++)
{
$maptype = substr($row1,$j,1);
$j=$j+1;
maplabel($maptype,$div);
$div = $div+1;
}}

$prow = $playerinfo3[row] - 1;
if($prow < 1)
{
echo "<div id='tag6'style='background-color:#000000'></div><div id='tag7'style='background-color:#000000'></div><div id='tag8'style='background-color:#000000'></div><div id='tag9'style='background-color:#000000'></div><div id='tag10'style='background-color:#000000'></div>";
}
else
{
$prow = "row" . $prow;
$prow = $playerinfo3[row];
$j = $playerinfo3[colmn] - 2;
$div=6;
$row1 = $mapinfo3[$prow];
for($i=1;$i<6;$i++)
{
$maptype = substr($row1,$j,1);
$j=$j+1;
maplabel($maptype,$div);
$div = $div+1;
}}
/////////////////////////////////////////center
$prow = $playerinfo3[row] - 0;
$prow = "row" . $prow;
$j = $playerinfo3[colmn] - 2;
$div=11;
$row1 = $mapinfo3[$prow];
for($i=1;$i<6;$i++)
{
$maptype = substr($row1,$j,1);
$j=$j+1;
$checkplayerrow = $playerinfo3['colmn'] + 1;
if ($j == $checkplayerrow){$playersquare = $maptype;}
maplabel($maptype,$div);
$div = $div+1;
}
//////////////////////////////////////////////

$prow = $playerinfo3[row] + 1;
if($prow > 10)
{
echo "<div id='tag16'style='background-color:#000000'></div><div id='tag17'style='background-color:#000000'></div><div id='tag18'style='background-color:#000000'></div><div id='tag19'style='background-color:#000000'></div><div id='tag20'style='background-color:#000000'></div>";
}
else
{
$prow = "row" . $prow;
$j = $playerinfo3[colmn] - 2;
$div=16;
$row1 = $mapinfo3[$prow];
for($i=1;$i<6;$i++)
{
$maptype = substr($row1,$j,1);
$j=$j+1;
maplabel($maptype,$div);
$div = $div+1;
}}

$prow = $playerinfo3[row] + 2;
if($prow > 10)
{
echo "<div id='tag21'style='background-color:#000000'></div><div id='tag22'style='background-color:#000000'></div><div id='tag23'style='background-color:#000000'></div><div id='tag24'style='background-color:#000000'></div><div id='tag25'style='background-color:#000000'></div>";
}
else
{
$prow = "row" . $prow;
$j = $playerinfo3[colmn] - 2;
$div=21;
$row1 = $mapinfo3[$prow];
for($i=1;$i<6;$i++)
{
$maptype = substr($row1,$j,1);
$j=$j+1;
maplabel($maptype,$div);
$div = $div+1;
}}


function maplabel($a,$div)
{
	if ($a == "a")
	{
	echo "<div id='tag" . $div . "'style='background-color:#000000'> </div>";
	
	}
	if ($a == "b")
	{
	echo "<div id='tag" . $div . "'> </div>";
	
	}
	
	if ($a == "c")
	{
	echo "<div id='tag" . $div . "'style='background-color:#FFFF00'> </div>";
	
	}

}


///////////////////////travel links

$northrow = "row" . ($playerinfo3[row] - 1);
$temprow = $mapinfo3[$northrow];
$northcolumn = $playerinfo3[colmn];
$northsquare = substr($temprow,$northcolumn,1);

$eastrow = "row" . ($playerinfo3[row]);
$temprow = $mapinfo3[$eastrow];
$eastcolumn = $playerinfo3[colmn] + 1;
$eastsquare = substr($temprow,$eastcolumn,1);

$southrow = "row" . ($playerinfo3[row] + 1);
$temprow = $mapinfo3[$southrow];
$southcolumn = $playerinfo3[colmn];
$southsquare = substr($temprow,$southcolumn,1);

$westrow = "row" . ($playerinfo3[row]);
$temprow = $mapinfo3[$westrow];
$westcolumn = $playerinfo3[colmn] - 1;
$westsquare = substr($temprow,$westcolumn,1);

echo "        <big><b><u>" . $mapinfo3['area'] . "</u></big></b>";
echo "       <img src='images/key.png' />";


echo "<br><br><br><center><big>";
if ($northsquare != 'a'){echo "<A href='javascript:traveled(1)'>Travel North</a><br>";}
if ($eastsquare != 'a'){echo "<A href='javascript:traveled(2)'>Travel East</a><br>";}
if ($southsquare != 'a'){echo "<A href='javascript:traveled(3)'>Travel South</a><br>";}
if ($westsquare != 'a'){echo "<A href='javascript:traveled(4)'>Travel West</a><br>";}

//////////////////////////////////encounter//////////////
if ($playersquare == 'c')
{
  $bossinfo="SELECT * from mapcreatures where row='$playerinfo3[row]' AND colmn='$playerinfo3[colmn]' AND area='$playerinfo3[area]'";
    $bossinfo2=mysql_query($bossinfo) or die("Could not get user stats");
    $bossinfo3=mysql_fetch_array($bossinfo2);
	
	
	echo  "<br><br><center>You have encountered a " . $bossinfo3[name] . ". <br>" . $bossinfo3[description] . "<br><br>";
	
	 echo "<form method='POST' action='battle.php'>
	     <input type='submit' value='Attack' name='submit' />
       <input type='hidden' name='creature' value='$bossinfo3[name]'>
	   </form>";
    
}

?>
</td>
<td>
<div id="rpanelarea">
<?php
include_once 'rstatpanel.php';
?>
</div>
</td>
</tr>
</table>
</div>
<script language="javascript">


	function traveled(direction)
		{
		 var pid = "<?php echo $playerinfo3[name];?>";
		var ajaxRequest;  // The variable that makes Ajax possible!
		
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			//var test = ajaxRequest.responseText;
			//document.getElementById('title').innerHTML=ajaxRequest.responseText;
			//window.location.href = "test.php";
		}}
		var queryString = "?pid=" + pid + "&direction=" + direction + "&code=2112545";
	ajaxRequest.open("GET", "travelmap.php" + queryString, true);
		ajaxRequest.send(null); 
		window.setTimeout("finalizetravel();",700); 
		}
	
	function finalizetravel()
	{
	window.location.href = "adventure.php";
	}
	


</script>

</body>
</html>

yes i can write complicated code

Torniquet · Post by **Torniquet** » Thu Sep 30, 2010 10:32 pm

hmm yeah that seems ALOT easier the way you done it in the vids

i will look into building something like that i think.

not sure whether i want to hav the map system just in battle instances or throughout the whole game yet.

i might have that map for the outside, and maybe a FF tactics style system for battles

ta halls your a superstar xxx

Post by **hallsofvallhalla** » Fri Oct 01, 2010 2:04 pm

Yeah the way i did in the vids has a vast area to be built on. There is soooo much that can be done with it. The possibilities are endless.

Berserk011 · Post by **Berserk011** » Fri Oct 01, 2010 10:52 pm

I know........... O.o *epic gaze*

Torniquet · Post by **Torniquet** » Fri Oct 01, 2010 11:27 pm

ok been working on it a lil... got it down to coords based on the div top & left position (Y)

so rather than storing everything in a grid of divs, its run with coords ^^

i jus need to get it all working with other players now ¬¬ lol

i know how to do it... its just having the energy to do it XD

http://torni.netii.net/test.php

^-- that is running off no grid and no DB (yet)

bound by the width and height of the surrounding div

oh btw, arrow heys to move the black box :p

Post by **hallsofvallhalla** » Sat Oct 02, 2010 4:09 am

looks great, only thing is what happens when you add items from DB? Will it move the cords?

Torniquet · Post by **Torniquet** » Sat Oct 02, 2010 10:39 am

If i understand what your saying correctly. then no.

they are just absolute positioned divs referencing from the relative 'map' div.

i did start working on using objects and placing more boxes in there last night. currently in its basic form i have a table like this.

Code: Select all

USER        X_POS        Y_POS
    1             5                13
    2             10               7

etc.

then when it draws the map out.

it grabs the coords of the objects / players, does a little math on them to turn them into the top & left position before drawing them in.

so eventually. you have somehting a little like this,

Code: Select all

<div style="position:relative; width:200; height:200> // this is the map
    <div style="position:absolute; left:40px; top: 120px; width:10px; height:10px" id="user_1"><div>// user 1
    <div style="position:absolute; left:90px; top: 160px; width:10px; height:10px" id="user_2"><div>// user 2
</div>

when i get around to it and start manipulating the databse when you move, it will check to see if that the coords you move into, is already occupied by an item (maybe another player, im not sure yet... could cause problems if there is a high amount of players) before moving the player and setting the database.

i will update the current map with the one working from the database later today once i have messed about with it more, and hopfully give you a better idea on how it runs

Post by **hallsofvallhalla** » Sat Oct 02, 2010 10:21 pm

so how are you handling different monitor sizes with absolute positioning?

Are you going to just leave the map on the left hand side? A good fix, you will just never be able to center the web page. Not always a bad thing though.

collision mechanics.

collision mechanics.

Re: collision mechanics.

Re: collision mechanics.

Re: collision mechanics.

Re: collision mechanics.

Re: collision mechanics.

Re: collision mechanics.

Re: collision mechanics.

Re: collision mechanics.

Re: collision mechanics.