Game Concept(Miniatures)

Talk about game designs and what goes behind designing games.
Post Reply
User avatar
hallsofvallhalla
Site Admin
Posts: 12026
Joined: Wed Apr 22, 2009 11:29 pm

Game Concept(Miniatures)

Post by hallsofvallhalla »

Thought I would put together a quick concept on a idea I am thinking about.

If you have ever played Warhammer, Warhammer 40k, BattleTech, Hero Quest, or any of the other Miniature based games you know how much fun they can be. Building a army of individual characters that are each represented by a plastic or metal figure. Their movement is either done in 1" squares or with a ruler in 1" segments. Battle ranges are done much the same.
Most I have played are played in two ways. PVP or Quest. PVP just consists of two or more players settling on a Army total and battling it out. Quest is where one player designs a quest gives a max army total and the players attempt to beat it. Each figure has a Battle total, how much it costs to use him the game. The Army total is a amount of points you can build your army with. So if you have 1000 points each player has 1000 points, 10 100 point figures, or 20 50 point figures. Thing is the 100 pointers are more powerful that the 50 pointers.

Bringing this into a web browser will be challenging. The feeling of collectibility and small scale war will have to remain. The players will have to feel like they own the Miniature like it is sitting in a foam filled box in the closet. Making players buy their army and use them to level them will be the first way to tackle it. Losing Miniatures on the battlefield with consequences is the second.

The Map will be grid based. Squares that represent distance and movement. Below is an example.

Image

The teams are red and blue, each lit up by a square. Each character will have move points. Each square is 1 movement. They can move as far as they have move points. Weapons will work much the same. The attack distance is based on total range points of the weapon. So if it is 5 they can shoot 5 squares.
Turns will consist of figures activating. When will be based on initiative. When a figure activates they get action points. To move will cost a set number of action points, then they get their set number of move points. Attack works the same way. As a general rule every figure can move and attack in one turn. Some however can attack twice instead because of no movement like turrets. Others may use some to activate a item, with the remaining points they can buy half or quarter movement. Instead of attacking they can afford extra movement. This will all give the game much more strategy.

PVP is very possible but would not be a feature for some time. The game would start in early phases with a few quests or an arena for players to play with their figures. The second phase would consist of players building quests so that others can play through it. The Army max total, loot, and exp gain would be auto summed based on what all the quest had in it. This would keep the game balanced.

Each player would start with nothing more than a simulated small box to hold figures but would eventually get larger boxes, trophy cases, tools, ect... as they progress.

One decision would be to either leave it as figures or instead make it armies. Each what would be figures would be a person in your army and instead of gaining boxes it would be houses and keeps.

Just looking for thoughts on all this. This would all be done through the browser using Javascript.
User avatar
Jackolantern
Posts: 10891
Joined: Wed Jul 01, 2009 11:00 pm

Re: Game Concept(Miniatures)

Post by Jackolantern »

I actually tried something like this a bit over a month ago in the form of an online Final Fantasy Tactics-style game (not quite like miniatures, but from a programming perspective, close enough), and eventually scrapped it after hitting a couple of issues with Javascript events I could not solve. However, I am no JS/jQuery whizkid.

For what its worth, here is the code I had written up to. Maybe if you get stuck you can pull a piece out here or there that could help. However, it looks like maybe you could be as far as I got already:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Tactics</title>
<meta name="" content="">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tools.min.js"></script>
<script type="text/javascript" src="js/js/jquery-ui-1.8.6.custom.min.js"></script>
<style type="text/css" href="jquery-ui-1.8.6.custom.css"></style>
<?php
	//Version 0.0.3.9 3:01pm 11/17/10
	/*
	To-Do: get creatures moving around on the map. Highlights vanish if another square clicked or another creature. Set up with an AJAX call even if it does nothing, so adding in web server integration later will be easier. Look into allowing the highlights to pulse when first added. UPDATE: Not detecting clicks on highlighted cells. Either figure out what is wrong, or use the callback of the cell highlighting effect to remove the cell highlight images and calculate which background images they covered. Then add a data attribute to those cells to allow the player to then click those cells and move to that cell. Would need to create a readout on the side of the field anyway to display the speed, creature name, and any other info.
	*
	New: Highlight effects now working to highlight the squares where the creature can move. Clicking another creature or another cell (including those with props in them) will cancel the current highlight.
	*
	Note: Removing code that was ready for removal as of this update. Changed over to full cell pulsating instead of pulsing a border image. 
	*
	*/

	include_once "connect.php";	
	
	//TESTING **************************
	$repositions = 0;
	
	//TESTING (for performance checks)*****************************
	$startTime = microtime(true);
	
	//insert logic for pulling a random region here. TO-DO: **Remove this and make start-session logic record which stage
	//... the game is being played on. Leaving random chooser here for testing.
	$region = rand(1, 5);
		
	//pull up the names only of the files, minus file extensions
	$regionData = mysqli_fetch_assoc(mysqli_query($db, "SELECT * FROM environmentimages WHERE regionid='$region'"));
	
	//make sure data was found
	if (!$regionData) {
		echo "Could not fetch region data";
		exit();
	}
	
	//create array to hold the names of all environmental resource names
	$enviroImages = array($regionData['0'], $regionData['1'], $regionData['2'], $regionData['3'], $regionData['4'], $regionData['5'], $regionData['6'], $regionData['7'], $regionData['8'], $regionData['9']);	
	
	//stage background texture file
	$terrainTexture = $regionData['terrain'];
	
	//May have to take off the stage randomization later to keep it synced within an online battle.	
	
		
	//create "top" values
	$posTopValues = "";	
	for ($y = 0; $y < 10; $y++) {					
		$rndSeed = rand(0, 4);
		$topPos = $rndSeed * 96;
		$posTopValues[$y] = $topPos;		
	}
	
	//create "left" values
	$posLeftValues = "";
	for ($x = 0; $x < 10; $x++) {
		//Using DO loop to ensure that object doesn't end up on creature starting point.
		do {
			$rndSeed = rand(0, 9);
			$leftPos = $rndSeed * 96;
			$posLeftValues[$x] = $leftPos;
		} while ((($posLeftValues[$x] == 0) && ($posTopValues[$x] == 96)) || (($posLeftValues[$x] == 192) && ($posTopValues[$x] == 96)) || (($posLeftValues[$x] == 0) && ($posTopValues[$x] == 288)) || (($posLeftValues[$x] == 192) && ($posTopValues[$x] == 288)) || (($posLeftValues[$x] == 96) && ($posTopValues[$x] == 192)));
	}
	
			
	//Utility function to help in determining if a newly changed position is the same as any other existing position.
	//$posCheck is the index of the newly re-initialized position.
	function checkNewPosition($posCheck, $leftArray, $topArray) {
		//Must loop through every value to check for overlaps in other objects.
		for ($g = 0; $g < 10; $g++) {
			//Must make sure do not get a false positive overlap by comparing the object against itself.
			//Continue to next iteration if the values are the same.
			if ($posCheck == $g) {
				continue;
			}
			//Check to see if the $posCheck index (the newly initialized index) is the same as any other index ($g).
			if (($leftArray[$posCheck] == $leftArray[$g]) && ($topArray[$posCheck] == $topArray[$g])) {
				//Return true to keep do-while loop trying new values.
				return true;
			}		
			
		}		
		return false;
	}	
	
	//Make sure no duplicate positions. $d is the set to check against. It will run through all sets, but it 
	//...does not need to run the final set, since it will have already been checked in earlier iterations.	
	for ($d = 0; $d < 9; $d++) {
		//We don't need to check a value against itself, so we will always start at the next index.
		//...And we don't need to compare the "check against" value against any earlier indexes, since
		//...they will have been covered in earlier checks.
		$toStart = $d + 1;
		//This value must go from 1 to 9. It does not need 0 since that it the first "check against" value.
		for ($f = $toStart; $f < 10; $f++) {
			//If the values are identical...
			if (($posLeftValues[$d] == $posLeftValues[$f]) && ($posTopValues[$d] == $posTopValues[$f])) {
				//Loop through the re-initilization process, and call the checkNewPosition() function at the
				//...end of each re-try of the value. If its new location matches any other location, the function
				//...will return TRUE to loop back through the inilization and try again. When it finally reaches
				//...a unique position, it will return FALSE so the next comparison can start.
				do {				
					do {
						//Re-initialize the position values. Have to use inner-DO to prevent background object
						//...from ending up on creature starting point.
						$rndSeed = rand(0, 4);
						$topPos = $rndSeed * 96;
						$posTopValues[$d] = $topPos;
						$rndSeed = rand(0, 9);
						$leftPos = $rndSeed * 96;
						$posLeftValues[$d] = $leftPos;
						$repositions++;		
					} while ((($posLeftValues[$d] == 0) && ($posTopValues[$d] == 96)) || (($posLeftValues[$d] == 192) && ($posTopValues[$d] == 96)) || (($posLeftValues[$d] == 0) && ($posTopValues[$d] == 288)) || (($posLeftValues[$d] == 192) && ($posTopValues[$d] == 288)) || (($posLeftValues[$d] == 96) && ($posTopValues[$d] == 192)));	
				} while (checkNewPosition($d, $posLeftValues, $posTopValues));
			}			
		}		
	}
	
	
	//This set of code will pull 5 creatures from the database. In production code this will likely be passed 
	//...from the previous login processing page.
	$creatures = array();
	$creatureNames = array();
	for ($c = 0; $c < 5; $c++) {
		$cValue = rand(1, 52);
		$creatureData = mysqli_fetch_assoc(mysqli_query($db, "SELECT * FROM units WHERE unitid='".$cValue."'"));
		$creatures[$c] = $creatureData['imagebase'];
		$creatureNames[$c] = $creatureData['name'];
	}
	
		
	/*
	*Insert all PHP-generated Javascript blocks below.
	*/
	
	echo "<script type=\"text/javascript\">
	$(function() {
	
		var mobSpeed1 = 0;
		var mobSpeed2 = 0;
		var mobSpeed3 = 0;
		var mobSpeed4 = 0;
		var mobSpeed5 = 0;
		
		var currentSelection = '';
		
		
		//The event handler of all the background tiles. Used for movement 
		$(\"img.backgroundTile, img.backgroundProp\").click(function (evnt) {
			//alert(\"You clicked \" + $(evnt.target).attr(\"id\") + \" and mobspeed 2 is \" + mobSpeed2);
			
			//Remove the existing highlight if one already exists
			if ($('.highlightedCell')) {
				$('.highlightedCell').remove();
			}						
		});
		
		//The event handler for clicking a highlighted movement cell after selecting a creature
		$('.highlightedCell').click(function() {
			//alert('Clicked highlighted cell');
			$('#consoleOutput').html('It was hit!');
		});	
				
		
		//Create the characters on the map.
		$('#field')
		.append('<img id=\"creature1\" class=\"creatureClass\" title=\"".$creatureNames[0]."\" data-image=\"".$creatures[0]."\" style=\"position: absolute; top: 96px; left: 0px;\" src=\"images/characters/".$creatures[0]."/".$creatures[0]."FacingSouth.png\" />')
		.append('<img id=\"creature2\" class=\"creatureClass\" title=\"".$creatureNames[1]."\" data-image=\"".$creatures[1]."\" style=\"position: absolute; top: 96px; left: 192px;\" src=\"images/characters/".$creatures[1]."/".$creatures[1]."FacingSouth.png\" />')
		.append('<img id=\"creature3\" class=\"creatureClass\" title=\"".$creatureNames[2]."\" data-image=\"".$creatures[2]."\" style=\"position: absolute; top: 288px; left: 0px;\" src=\"images/characters/".$creatures[2]."/".$creatures[2]."FacingSouth.png\" />')
		.append('<img id=\"creature4\" class=\"creatureClass\" title=\"".$creatureNames[3]."\" data-image=\"".$creatures[3]."\" style=\"position: absolute; top: 288px; left: 192px;\" src=\"images/characters/".$creatures[3]."/".$creatures[3]."FacingSouth.png\" />')
		.append('<img id=\"creature5\" class=\"creatureClass\" title=\"".$creatureNames[4]."\" data-image=\"".$creatures[4]."\" style=\"position: absolute; top: 192px; left: 96px;\" src=\"images/characters/".$creatures[4]."/".$creatures[4]."FacingSouth.png\" />');
		$('.creatureClass').tooltip({ effect: 'slide'});
		
		//TESTING***********************************
		$('#testButton').click(function() {
			//$('.highlightedCell').remove();
			alert('Current creature number: ' + currentSelection);
		});
		
		//TESTING***********************************
		$('#testButton2').click(function() {
			//   'data-highlight', 'true'
			$('[data-highlight=\"true\"]').effect('pulsate', 300);	
		});
		
					
		//TESTING***************************************
		$(document).keydown(function(evnt) {
			alert('The ' + evnt.keyCode + ' key was pressed!');
		});
		
		/*
		//TESTING***********************************************************
		$('*').click(function(evnt) {
			alert('You clicked the ' + $(evnt.target).attr('data-highlight'));
		});
		*/
		
		$('.creatureClass').click(function(evnt) {
			
			//Remove the old highlight if there is already one there.
			$('[data-highlight=\"true\"]').removeAttr('data-highlight');
			
			//alert(\"You clicked: \" + $(evnt.target).attr(\"data-image\"));
			
			//get the creature number from the clicked element's ID
			var creatureNum = $(evnt.target).attr(\"id\");
			creatureNum = creatureNum.charAt(creatureNum.length - 1);
			
			//alert('Creature number is ' + creatureNum);
			var bImage = $(evnt.target).attr(\"data-image\");
			
			
			//Record which creature is being moved
			currentSelection = creatureNum;			
			
			//Call the cell highlighting function if already have the speed stored.
			if (creatureNum == 1) {
				if (mobSpeed1 != 0) {
					addCellHighlight(mobSpeed1, bImage, creatureNum);
					return;
				}
			} else if (creatureNum == 2) {
				if (mobSpeed2 != 0) {
					addCellHighlight(mobSpeed2, bImage, creatureNum);
					return;
				}
			} else if (creatureNum == 3) {
				if (mobSpeed3 != 0) {
					addCellHighlight(mobSpeed3, bImage, creatureNum);
					return;
				}
			} else if (creatureNum == 4) {
				if (mobSpeed4 != 0) {
					addCellHighlight(mobSpeed4, bImage, creatureNum);
					return;
				}
			} else if (creatureNum == 5) {
				if (mobSpeed5 != 0) {
					addCellHighlight(mobSpeed5, bImage, creatureNum);
					return;
				}
			}
			
			$.getJSON('ajaxgets/getspeed.php?baseimage=' + bImage + '&creature=' + creatureNum, function(data) {
				//alert('The speed is ' + data.speed + ' for creature ' + data.crNum + ' which is mob image: ' + data.mobImage );
				//store the speed to prevent unneeded AJAX calls
				if (data.crNum == 1) {
					mobSpeed1 = data.speed;
				} else if (data.crNum == 2) {
					mobSpeed2 = data.speed;
				} else if (data.crNum == 3) {
					mobSpeed3 = data.speed;
				} else if (data.crNum == 4) {
					mobSpeed4 = data.speed;
				} else if (data.crNum == 5) {
					mobSpeed5 = data.speed;
				}
				addCellHighlight(data.speed, data.mobImage, data.crNum);
			});
		});
	});
	
	
	
		
</script>";
?>

<script type="text/javascript">
 //Editing bed for javascript
 function addCellHighlight(inSpeed, inMob, crNumber) {
 	//inSpeed is the number of cells the player can move this creature.
	//inMob is the imageBase string to pinpoint the creature initially.
	
	var posData = $('#creature' + crNumber).position();
	
	//var posData = $('img[data-image="' + inMob + '"]').position();
	//alert('X value: ' + posData.left + '  Y value: ' + posData.top);
	
	//:::::::::::LEFT HIGHLIGHT ROUTINE::::::::::::::
	//  Create the array to hold the x and y values of the highlights to the left of the creature
	var leftMovementXValues = [];
	var leftMovementYValues = [];
	//get the max highlight
	var leftHighlight = posData.left - (inSpeed * 96)
	//check bounds
	if (leftHighlight < 0) {
		leftHighlight = 0;
	}
	//fill in values between max highlight cell and the character
	var lCounter = 0;
	while (leftHighlight < posData.left) {
		//fill the arrays with matching values to represent the location of a highlight
		leftMovementXValues[lCounter] = leftHighlight;
		leftMovementYValues[lCounter] = posData.top;
		lCounter++;
		leftHighlight = leftHighlight + 96;
	}
	
	/*
	//Add the highlight
	for (var x = 0; x < leftMovementXValues.length; x++) {
		$('#field').append('<img class="highlightedCell" style="position: absolute; left: ' + leftMovementXValues[x] + 'px; top: ' + leftMovementYValues[x] + 'px;" src="images/highlightCell.png" />');
	}
	*/
	
	//NEW CODE %%%%%%%%%%%%%%%%%%
	
	//Add data-highlight="true" to the left highlight cells 
	for (var k = 0; k < leftMovementXValues.length; k++) {
		//collect the x and y values from this cell highlighting
		var xIDValueLeft = leftMovementXValues[k];
		var yIDValueLeft = leftMovementYValues[k];
		
		//get the cell numbers by dividing the values by 96
		xIDValueLeft = xIDValueLeft / 96;
		yIDValueLeft = yIDValueLeft / 96;
		
		//create the full ID and set it up as a selector
		var fullID = '#bgX' + xIDValueLeft + 'Y' + yIDValueLeft;
		$(fullID).attr('data-highlight', 'true');
		
	}
	
	//END OF NEW CODE %%%%%%%%%%%%%%%%%%%%%%%
	
	
	//:::::::::::RIGHT HIGHLIGHT ROUTINE::::::::::::::
	//  Create the array to hold the x and y values of the highlights to the right of the creature
	var rightMovementXValues = [];
	var rightMovementYValues = [];
	//get the max highlight
	var rightHighlight = posData.left + (inSpeed * 96)
	//check bounds
	if (rightHighlight > 864) {
		rightHighlight = 864;
	}
	//fill in values between max highlight cell and the character
	var rCounter = 0;
	while (rightHighlight > posData.left) {
		//fill the arrays with matching values to represent the location of a highlight
		rightMovementXValues[rCounter] = rightHighlight;
		rightMovementYValues[rCounter] = posData.top;
		rCounter++;
		rightHighlight = rightHighlight - 96;
	}	
	
	/*
	//Add the highlight
	for (var x = 0; x < rightMovementXValues.length; x++) {
		$('#field').append('<img class="highlightedCell" style="position: absolute; left: ' + rightMovementXValues[x] + 'px; top: ' + rightMovementYValues[x] + 'px;" src="images/highlightCell.png" />');
	}
	*/
	
	//NEW CODE %%%%%%%%%%%%%%%%%%%%%%%%%%%
	//Add data-highlight="true" to the right highlight cells 
	for (var k = 0; k < rightMovementXValues.length; k++) {
		//collect the x and y values from this cell highlighting
		var xIDValueRight = rightMovementXValues[k];
		var yIDValueRight = rightMovementYValues[k];
		
		//get the cell numbers by dividing the values by 96
		xIDValueRight = xIDValueRight / 96;
		yIDValueRight = yIDValueRight / 96;
		
		//create the full ID and set it up as a selector
		var fullID = '#bgX' + xIDValueRight + 'Y' + yIDValueRight;
		$(fullID).attr('data-highlight', 'true');
	}
	
	//END OF NEW CODE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	
	
	
	//:::::::::::UP HIGHLIGHT ROUTINE::::::::::::::
	//  Create the array to hold the x and y values of the highlights to the up of the creature
	var upMovementXValues = [];
	var upMovementYValues = [];
	//get the max highlight
	var upHighlight = posData.top - (inSpeed * 96)
	//check bounds
	if (upHighlight < 0) {
		upHighlight = 0;
	}
	//fill in values between max highlight cell and the character
	var uCounter = 0;
	while (upHighlight < posData.top) {
		//fill the arrays with matching values to represent the location of a highlight
		upMovementXValues[uCounter] = posData.left;
		upMovementYValues[uCounter] = upHighlight;
		uCounter++;
		upHighlight = upHighlight + 96;
	}
	
	/*
	//Add the highlight
	for (var x = 0; x < upMovementXValues.length; x++) {
		$('#field').append('<img class="highlightedCell" style="position: absolute; left: ' + upMovementXValues[x] + 'px; top: ' + upMovementYValues[x] + 'px;" src="images/highlightCell.png" />');
	}
	*/
	
	//NEW CODE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	//Add data-highlight="true" to the up highlight cells 
	for (var k = 0; k < upMovementXValues.length; k++) {
		//collect the x and y values from this cell highlighting
		var xIDValueUp = upMovementXValues[k];
		var yIDValueUp = upMovementYValues[k];
		
		//get the cell numbers by dividing the values by 96
		xIDValueUp = xIDValueUp / 96;
		yIDValueUp = yIDValueUp / 96;
		
		//create the full ID and set it up as a selector
		var fullID = '#bgX' + xIDValueUp + 'Y' + yIDValueUp;
		$(fullID).attr('data-highlight', 'true');
	}
	//END OF NEW CODE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	
	//:::::::::::DOWN HIGHLIGHT ROUTINE::::::::::::::
	//  Create the array to hold the x and y values of the highlights to the down of the creature
	var downMovementXValues = [];
	var downMovementYValues = [];
	//get the max highlight
	var downHighlight = posData.top + (inSpeed * 96)
	//check bounds
	if (downHighlight > 384) {
		downHighlight = 384;
	}
	
	//fill in values between max highlight cell and the character
	var dCounter = 0;
	while (downHighlight > posData.top) {
		//fill the arrays with matching values to represent the location of a highlight
		downMovementXValues[dCounter] = posData.left;
		downMovementYValues[dCounter] = downHighlight;
		dCounter++;
		downHighlight = downHighlight - 96;
	}
	
	/*
	//Add the highlight
	for (var x = 0; x < downMovementXValues.length; x++) {
		$('#field').append('<img class="highlightedCell" style="position: absolute; left: ' + downMovementXValues[x] + 'px; top: ' + downMovementYValues[x] + 'px;" src="images/highlightCell.png" />');
	}
	*/
	
	//NEW CODE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	//Add data-highlight="true" to the down highlight cells 
	for (var k = 0; k < downMovementXValues.length; k++) {
		//collect the x and y values from this cell highlighting
		var xIDValueDown = downMovementXValues[k];
		var yIDValueDown = downMovementYValues[k];
		
		//get the cell numbers by dividing the values by 96
		xIDValueDown = xIDValueDown / 96;
		yIDValueDown = yIDValueDown / 96;
		
		//create the full ID and set it up as a selector
		var fullID = '#bgX' + xIDValueDown + 'Y' + yIDValueDown;
		$(fullID).attr('data-highlight', 'true');
	}
	//END OF NEW CODE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	
	/*
	$('.highlightedCell').effect('pulsate', 300, function() {
		$('.highlightedCell').remove();
	});
	*/
	
	//NEW CODE %%%%%%%%%%%%%%%%%%
	$('[data-highlight=\"true\"]').effect('pulsate', 300);
		
 } 
	
</script>


<style rel="stylesheet" type="text/css">
	#field {
		position: relative;
		height: 480px;
		width: 960px;
		background-color: #23489d;
	}	
	.tooltip {
		display:none;
		background:transparent url(images/tooltip/black_arrow_smalltall.png);
		font-size:10px;
		height:70px;
		width:80px;
		padding:10px;
		color:#fff;	
		z-index: 50;
	}
	.highlightedCell {
		z-index: 20;
	}
	#enviro0 {
		position: absolute;
		top: <?php echo $posTopValues[0]."px"; ?>;
		left: <?php echo $posLeftValues[0]."px"; ?>;
		z-index: 5;
	}
	#enviro1 {
		position: absolute;
		top: <?php echo $posTopValues[1]."px"; ?>;
		left: <?php echo $posLeftValues[1]."px"; ?>;
	}
	#enviro2 {
		position: absolute;
		top: <?php echo $posTopValues[2]."px"; ?>;
		left: <?php echo $posLeftValues[2]."px"; ?>;
	}
	#enviro3 {
		position: absolute;
		top: <?php echo $posTopValues[3]."px"; ?>;
		left: <?php echo $posLeftValues[3]."px"; ?>;
	}
	#enviro4 {
		position: absolute;
		top: <?php echo $posTopValues[4]."px"; ?>;
		left: <?php echo $posLeftValues[4]."px"; ?>;
	}
	#enviro5 {
		position: absolute;
		top: <?php echo $posTopValues[5]."px"; ?>;
		left: <?php echo $posLeftValues[5]."px"; ?>;
	}
	#enviro6 {
		position: absolute;
		top: <?php echo $posTopValues[6]."px"; ?>;
		left: <?php echo $posLeftValues[6]."px"; ?>;
	}
	#enviro7 {
		position: absolute;
		top: <?php echo $posTopValues[7]."px"; ?>;
		left: <?php echo $posLeftValues[7]."px"; ?>;
	}
	#enviro8 {
		position: absolute;
		top: <?php echo $posTopValues[8]."px"; ?>;
		left: <?php echo $posLeftValues[8]."px"; ?>;
	}
	#enviro9 {
		position: absolute;
		top: <?php echo $posTopValues[9]."px"; ?>;
		left: <?php echo $posLeftValues[9]."px"; ?>;
	}
	
</style>
</head>
<body>
<div id="field">
	<?php
		$topY = 0;
		$leftX = 0;
		
		for ($x = 0; $x < 10; $x++) {
			for ($y = 0; $y < 5; $y++) {
				echo '<img id="bgX'.$x.'Y'.$y.'" class="backgroundTile" style="position: absolute; left: '.$leftX.'; top: '.$topY.';" src="images/'.$terrainTexture.'.png" />';
				$topY = $topY + 96;
			}
			$leftX = $leftX + 96;
			$topY = 0;
		}	
		
	?>
		
	<img id="enviro0" class="backgroundProp" src='<?php echo "images/".$enviroImages[0].".png"; ?>' />
	<img id="enviro1" class="backgroundProp" src='<?php echo "images/".$enviroImages[1].".png"; ?>' />
	<img id="enviro2" class="backgroundProp" src='<?php echo "images/".$enviroImages[2].".png"; ?>' />
	<img id="enviro3" class="backgroundProp" src='<?php echo "images/".$enviroImages[3].".png"; ?>' />
	<img id="enviro4" class="backgroundProp" src='<?php echo "images/".$enviroImages[4].".png"; ?>' />
	<img id="enviro5" class="backgroundProp" src='<?php echo "images/".$enviroImages[5].".png"; ?>' />
	<img id="enviro6" class="backgroundProp" src='<?php echo "images/".$enviroImages[6].".png"; ?>' />
	<img id="enviro7" class="backgroundProp" src='<?php echo "images/".$enviroImages[7].".png"; ?>' />
	<img id="enviro8" class="backgroundProp" src='<?php echo "images/".$enviroImages[8].".png"; ?>' />
	<img id="enviro9" class="backgroundProp" src='<?php echo "images/".$enviroImages[9].".png"; ?>' />
</div>

<?php
	//***FOR TESTING ONLY. CHECK FOR PERFORMANCE AND OTHER DIAGNOSTICS**********************************
	echo "Number of re-positionings: ".$repositions."<br />";
	$timeEND = microtime(true);
	$testTime = $timeEND - $startTime;
	echo "<br />";
	echo "Time for execusion: ".$testTime." micro seconds. <br />";
	echo "Monster Base Image: ".$creatures[0].", ".$creatures[1].", ".$creatures[2].", ".$creatures[3].", ".$creatures[4].".";
	echo "<div id='consoleOutput'>Empty</div>";
	echo "<input id ='testButton' type='submit' value='Remove Highlight' />";
	echo "<input id ='testButton2' type='submit' value='Test Functionality' />";
	
?>

</body>
</html>
The indelible lord of tl;dr
User avatar
hallsofvallhalla
Site Admin
Posts: 12026
Joined: Wed Apr 22, 2009 11:29 pm

Re: Game Concept(Miniatures)

Post by hallsofvallhalla »

thanks! fancy stuff you got there!
User avatar
Jackolantern
Posts: 10891
Joined: Wed Jul 01, 2009 11:00 pm

Re: Game Concept(Miniatures)

Post by Jackolantern »

Thanks!

Ohh, and I forgot to say that I had I think 5 different maps that would be randomly chosen. Then "props" (single-cell background image files loaded from the db) would be randomly placed on the map without overlapping or being added to a creature starting position. There is a good chunk of logic in there for that, so if that is not a feature you want, you will need to look past that part.
The indelible lord of tl;dr
Baseball435
Posts: 548
Joined: Sun May 30, 2010 3:49 am

Re: Game Concept(Miniatures)

Post by Baseball435 »

wow thats a lot of code. your a really good programmer. Also looks great halls! i cant really help on this :P
User avatar
Jackolantern
Posts: 10891
Joined: Wed Jul 01, 2009 11:00 pm

Re: Game Concept(Miniatures)

Post by Jackolantern »

Thanks :) It is definitely not as organized as I would like. I am primarily an OOP programmer, but I just don't like Javascript's crazy attempt at OOP ("prototype"-based programming is awful compared to real OOP), so i code procedurally mostly in JS.
The indelible lord of tl;dr
User avatar
Torniquet
Posts: 869
Joined: Sun Aug 02, 2009 6:18 am

Re: Game Concept(Miniatures)

Post by Torniquet »

I had thoughts about building a similar game based on the warhammer game Modenheim.

even emailed games workshop requesting permission to use names etc (Y) lol.

good luck with it halls :)
New Site Coming Soon! Stay tuned :D
Xaleph
Posts: 897
Joined: Mon Feb 07, 2011 2:55 am

Re: Game Concept(Miniatures)

Post by Xaleph »

Sure looks cool!

I have some questions related to this i suppose, how do you choose which tile will be x type? SO for example, you have 10 different style styles, where 1 is the most commonly used. is it something like:

if($rand < 80){ // load tile 1
elseif($rand < 82){ // load tile 2

etc etc?
User avatar
Jackolantern
Posts: 10891
Joined: Wed Jul 01, 2009 11:00 pm

Re: Game Concept(Miniatures)

Post by Jackolantern »

Just to be clear, are you referring to something from Halls' project, or the prop placement in the code I posted?
The indelible lord of tl;dr
Xaleph
Posts: 897
Joined: Mon Feb 07, 2011 2:55 am

Re: Game Concept(Miniatures)

Post by Xaleph »

More in general i suppose. My knowledge of programming is good, without a doubt, however, i`m not familiar with game logic design patterns, hence the question. However, to be clear, the question is applicable to your code, so if you could elaborate?
Post Reply

Return to “Game Design”