Scripts

Gamekaart voor Browser Games

Door Dennis Smink -26-01-2012 13:07 -17.522 views

Hallo iedereen. Dit is mijn eerste script hier op phphulp.nl, en ben erg benieuwd wat jullie ervan vinden. Ben er al een tijdje mee bezig geweest, en ik ga de eerste simpele release hier uitgeven. Doe nog niet zolang iets met classes in PHP, dus als er opmerkingen zijn over mijn geschreven class hoor ik dat graag, zodat ik dat altijd nog kan verbeteren. Dit gehele script is gemaakt uit PHP, MySQL, Javascript met AJAX requests. Ook mijn javascript is niet om naar huis te schrijven, dus mocht je vinden dat er iets sneller, beter kan let me know! Instaleren van het script is relatief simpel, dump het SQL bestand in je phpmyadmin, en stel de configopties in in het bestand: config/config.php Het gebruik van de verouderde HTML tags ben ik van bewust ( zoals div align center ). Tis alleen ter voorbeeld. Een voorbeeld van hoe dit script werkt is hier te vinden: http://www.roller-park.nl/map/ Functie's die vanuit de class te gebruiken zijn: createMap( $userid ) [ Hierin krijg je de complete map, de variabel $userid kun je dus koppelen aan jouw eigen inlog systeem! Werk je met sessie's, doe je daar dus $_SESSION['userid'] of wat je sessienaam ook is. ] createObjectList() [ Hierin krijg je de complete objectlijst die in de mysql table is opgeslagen, je kunt dus heel simpel nieuwe objecten toevoegen! Gewoon een nieuw plaatje uploaden, nieuwe insert in de objectlist tabel doen en je kunt het nieuwe object gelijk gebruiken ] connectMySQL() [ Lijkt me vrij duidelijk, verbinden met de mysql server. Dit doe je voordat je de map opvraagt, maar er zit een voorbeeld in het bestand index.php createObjectEditField() [ Hierin krijg je de bewerk velden voor het object wat je selecteerd, nu komt er alleen nog maar de naam te staan, verder kan je er nog niets mee ] Ik weet dat het nog weinig is, maar je kunt objecten simpelweg plaatsen door ergens te klikken, en op een knop onderin te drukken. Je kunt objecten nog niet verwijderen, dit zal ook zeer snel volgen natuurlijk.. Ik ben nog lekker aan het stoeien met javascript, vind dat het systeem opzich wel lekker werkt. Maar kan altijd beter natuurlijk. Ik probeer mijn source helemaal error-free te krijgen, zelfs javascript moet gewoon helemaal schoon zijn en goed werken. Ik zal deze omschrijving verder nog bijvullen. De overige source zoals images en dergelijke bestanden kunnen worden gedownload via de volgende link: http://www.roller-park.nl/map/MapClass.zip

Download alle bestanden als ZIP

sql.sql

--
-- Tabelstructuur voor tabel `objectlist`
--

CREATE TABLE `objectlist` (
  `id` int(15) NOT NULL AUTO_INCREMENT,
  `objectname` varchar(150) NOT NULL,
  `objectimage` varchar(150) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

--
-- Gegevens worden uitgevoerd voor tabel `objectlist`
--

INSERT INTO `objectlist` (`id`, `objectname`, `objectimage`) VALUES
(1, 'Voetpad', 'images/path.png'),
(2, 'Prullenbak', 'images/delete.png'),
(3, 'Boom', 'images/tree.png'),
(4, 'Water', 'images/water.png');

-- --------------------------------------------------------

--
-- Tabelstructuur voor tabel `objects`
--

CREATE TABLE `objects` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `objectnaam` varchar(150) NOT NULL,
  `objectImage` varchar(200) NOT NULL,
  `userid` int(11) NOT NULL,
  `xPos` int(15) NOT NULL,
  `yPos` int(15) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

--
-- Gegevens worden uitgevoerd voor tabel `objects`
--

INSERT INTO `objects` (`id`, `objectnaam`, `objectImage`, `userid`, `xPos`, `yPos`) VALUES
(1, 'Voetpad', 'images/path.png', 1, 8, 6),
(2, 'Voetpad', 'images/path.png', 1, 8, 7),
(3, 'Voetpad', 'images/path.png', 1, 8, 8),
(4, 'Voetpad', 'images/path.png', 1, 8, 9),
(5, 'Voetpad', 'images/path.png', 1, 8, 10),
(6, 'Voetpad', 'images/path.png', 1, 9, 10),
(7, 'Voetpad', 'images/path.png', 1, 10, 10),
(8, 'Voetpad', 'images/path.png', 1, 11, 10),
(9, 'Prullenbak', 'images/delete.png', 1, 11, 9),
(10, 'Voetpad', 'images/path.png', 1, 12, 10),
(11, 'Voetpad', 'images/path.png', 1, 13, 10),
(12, 'Voetpad', 'images/path.png', 1, 13, 11),
(13, 'Voetpad', 'images/path.png', 1, 13, 12),
(14, 'Voetpad', 'images/path.png', 1, 7, 6),
(15, 'Voetpad', 'images/path.png', 1, 6, 6),
(16, 'Voetpad', 'images/path.png', 1, 5, 6),
(17, 'Voetpad', 'images/path.png', 1, 4, 6),
(18, 'Boom', 'images/tree.png', 1, 14, 10),
(19, 'Boom', 'images/tree.png', 1, 7, 5),
(20, 'Voetpad', 'images/path.png', 1, 3, 6),
(21, 'Voetpad', 'images/path.png', 1, 2, 6),
(22, 'Voetpad', 'images/path.png', 1, 1, 6),
(23, 'Boom', 'images/tree.png', 1, 5, 7),
(24, 'Boom', 'images/tree.png', 1, 10, 11),
(25, 'Voetpad', 'images/path.png', 1, 13, 13),
(26, 'Voetpad', 'images/path.png', 1, 14, 13),
(27, 'Voetpad', 'images/path.png', 1, 15, 13),
(28, 'Boom', 'images/tree.png', 1, 15, 12),
(29, 'Voetpad', 'images/path.png', 1, 16, 13),
(30, 'Voetpad', 'images/path.png', 1, 16, 14),
(31, 'Voetpad', 'images/path.png', 1, 16, 15),
(32, 'Voetpad', 'images/path.png', 1, 16, 16),
(33, 'Voetpad', 'images/path.png', 1, 15, 16),
(34, 'Voetpad', 'images/path.png', 1, 14, 16),
(35, 'Voetpad', 'images/path.png', 1, 13, 16),
(36, 'Voetpad', 'images/path.png', 1, 12, 16),
(37, 'Voetpad', 'images/path.png', 1, 11, 16),
(38, 'Water', 'images/water.png', 1, 15, 15),
(39, 'Water', 'images/water.png', 1, 15, 14),
(40, 'Water', 'images/water.png', 1, 14, 14),
(41, 'Water', 'images/water.png', 1, 14, 15),
(42, 'Water', 'images/water.png', 1, 13, 14),
(43, 'Water', 'images/water.png', 1, 13, 15),
(44, 'Water', 'images/water.png', 1, 12, 15),
(45, 'Voetpad', 'images/path.png', 1, 10, 16),
(46, 'Voetpad', 'images/path.png', 1, 9, 16),
(47, 'Voetpad', 'images/path.png', 1, 8, 16),
(48, 'Voetpad', 'images/path.png', 1, 8, 15),
(49, 'Voetpad', 'images/path.png', 1, 8, 14),
(50, 'Voetpad', 'images/path.png', 1, 8, 13),
(51, 'Voetpad', 'images/path.png', 1, 8, 12),
(52, 'Voetpad', 'images/path.png', 1, 8, 11),
(53, 'Boom', 'images/tree.png', 1, 9, 15),
(54, 'Voetpad', 'images/path.png', 1, 17, 14),
(55, 'Voetpad', 'images/path.png', 1, 18, 14),
(56, 'Voetpad', 'images/path.png', 1, 19, 14),
(57, 'Prullenbak', 'images/delete.png', 1, 20, 14);

index.php

<!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" />
        <title>PHP Map</title>
        <script type="text/javascript" src="config/xmlData.js"></script>
    </head>
<body>

<div align="center">
<?php
ini_set("display_errors", 1);
error_reporting(E_ALL);

require_once("config/config.php");
require_once("config/classmap.php");

// ## Map module initaliseren
$getMapDetails = new mapModule( $user, $pass, $host, $db );

// ## Verbinden met de MySQL server
if($getMapDetails->connectMySQL()){
	
	// ## Hier kun je dus je eigen systeem implenteren -> De map ophalen van de user met het ID 1 in je gebruikers/users table o.i.d
	// ## Je kunt er dus van maken $userid = $_SESSION['id_user'] of iets dergelijks. ( Als je systeem met sessie's werkt )
	$userid = 1; 
	
	// ## Map openen
	echo $getMapDetails->createMap( $userid );
	echo "<br /><br />";
	echo $getMapDetails->createObjectList();
	echo "<br />";
	echo $getMapDetails->createObjectEditField();

}else{
	// ## Geen verbinding mogelijk, error laten zien
	echo $getMapDetails->connectMySQL();
}


?> 
</div>
</body>
</html>

handlemap.php

<?php
require_once("config/classmap.php");
require_once("config/config.php");

$handleModuleObjects = new mapModule( $user, $pass, $host, $db  );

if($_SERVER['REQUEST_METHOD'] === 'POST' ){
	if($handleModuleObjects->connectMySQL()){
		if( isset($_POST['placeObject']) ){
			
			$searchForObject = $handleModuleObjects->performQuery("SELECT id, objectname, objectimage FROM objectlist WHERE id='". mysql_real_escape_string( $_POST['object'])."'");
			
			if( mysql_num_rows( $searchForObject ) > 0 ){
				
				$fetchDataObject = mysql_fetch_assoc( $searchForObject );
				
				$insertObject =  $handleModuleObjects->performQuery( "INSERT INTO objects ( objectnaam, objectimage, userid, xPos, yPos )
																   VALUES
																  ( '". mysql_real_escape_string($fetchDataObject['objectname']) ."', '". mysql_real_escape_string($fetchDataObject['objectimage']) ."', '". mysql_real_escape_string($_POST['userID']) . "', '". mysql_real_escape_string($_POST['xPos']) ."', '". mysql_real_escape_string($_POST['yPos']) ."' )");
				
				echo $fetchDataObject['objectimage'];
			}
		}
	}
}

?>

classmap.php

<?php

class mapModule
{
	
	// ## Public functie's vallen hieronder

	public function mapModule($user, $pass, $host, $db)
    {	
        $this->user = $user;
		$this->pass = $pass;
		$this->host = $host;
		$this->db   = $db;
    }
	
    public function connectMySQL()
    {
        $connectMySQL = mysql_connect( $this->host, $this->user, $this->pass );
		$connectDB    = mysql_select_db( $this->db );
        $this->connection = $connectMySQL;
        if( $connectMySQL && $connectDB ){
            return true;
        }else{
            return "Kon geen verbinding met database maken.<br />Reden: ". mysql_error();
        }
    }	
	
	public function createMap( $userid )
	{
		$this->userID = $userid;
		
		$cols = 30;
		$rows = 30;
		
		$mapTable = "<table cellpadding=\"0\" cellspacing=\"0\" >";
			for( $y = 1; $y < $rows; $y ++ )
			{
				$mapTable .= "<tr>";
				
				for( $x = 1; $x < $cols; $x ++ )
				{
					// ## Park objecten binnenhalen
					$parkObjects = $this->getMapObjects( $x, $y, $this->userID );
					
					// ## Er zijn objecten gevonden in deze X+Y range
					if( $parkObjects['object'] == true ){
						  $mapTable .= "<td style=\"border-spacing: 1px;\"><img alt=\"Object\" onclick=\"getClickedPosition( ". $x .", ". $y .", ". $x . $y ." );\" style=\"background-image: url(images/grass.png);\" src=\"". $parkObjects['objectImage']."\" id=\"". $x . $y . "\" /></td>";
					
					// ## Gewoon simpel gras laten zien
					}else{
						  $mapTable .= "<td style=\"border-spacing: 1px;\">
						  				<img alt=\"Gras\" onclick=\"getClickedPosition( ". $x .", ". $y .", ". $x . $y ." );\" src=\"images/grass.png\" id=\"". $x . $y . "\"/></td>";
					}
				}
				
				$mapTable .= "</tr>";
			}        
		$mapTable .= "</table>";	
		
		return $mapTable;
	}
	
	public function createObjectList()
	{
	
		$queryGetList = $this->performQuery( "SELECT id, objectname, objectimage FROM objectlist" );
		
		if( $queryGetList ){
			
			$divList = "<div style=\"border: 1px solid; width: 500px;\">";
			
			while( $rowObjectlist = mysql_fetch_assoc( $queryGetList ) ){
				$divList .= "<input type=\"button\" value=\"". $rowObjectlist['objectname']."\" onclick=\"addObject(". $rowObjectlist['id'] .", ". $this->userID .");\" /> | ";
			}
			
			$divList .= "</div>";
			return $divList;
		}else{
			return "Kon geen verbinding met database maken.<br />Reden: ". mysql_error() ."";
		}
		
	}
	
	public function createObjectEditField()
	{
		$editField = "<div id=\"editField\" style=\"border: 1px solid; width: 500px;\">";
		$editField .= "</div>";
		return $editField;
	}

	public function performQuery( $queryString )
	{
		$executeQuery = mysql_query( $queryString, $this->connection );
		
		if( $executeQuery ){
			return $executeQuery;
		}else{
			return false;
		}
	}
	
	// ## Private functie's vallen  hieronder
	
	private function getMapObjects( $xPos, $yPos, $userid )
	{
		$queryGetObjects = $this->performQuery( "SELECT objectnaam, objectImage FROM objects WHERE userid=". mysql_real_escape_string($userid) ." AND xPos=". mysql_real_escape_string($xPos) ." AND yPos=". mysql_real_escape_string($yPos) );
		
		if( $queryGetObjects ){
			if( mysql_num_rows( $queryGetObjects ) > 0 ){
				
				$fetchObjectData = mysql_fetch_assoc( $queryGetObjects );
				
				return array( "object" 		    => true, 
							  "objectNaam" 		=> $fetchObjectData['objectnaam'],
							  "objectImage"		=> $fetchObjectData['objectImage']
							); 
			}
		}else{
			return false;
		}
	}
	
}

config.php

<?php

// ## Database gegevens hier invullen
$user = "";    						// Vul hier je username in
$pass = "";      					// En hier het wachtwoord dat erbij hoort 
$host = "";     // Hier de MySQL host
$db	  = "";							// Hier de databasenaam

?>