0

Hello, i'm making a "Bubble Breaker" game in php and i have a problem modifying my dinamically created components...First of all my php code:

<?php

   $balls = array( "blue", "green", "lightBlue", "purple", "red", "yellow");
      $pos = count($balls)-1;

      if( isset ($_POST["new"])) {

         if( is_numeric ($_POST["rows"]) && is_numeric ($_POST["cols"])) {

            echo "<table>";
          
                for($i=0; $i<$_POST["rows"]; $i++) {

                   echo "<tr>";

                   for($j=0; $j<$_POST["cols"]; $j++) {

                         $random = rand(0,$pos);

                         echo "<td id='ballBlock' > <img class='ball' title='".$i.",".$j."' name='".$balls[$random]."' id='".$i.",".$j."' src='media/".$balls[$random].".png' width='50' height='50' alt='ball' onmousemove='highLight(this,".$_POST["rows"].",".$_POST["cols"].")' onmouseout='unhighLight(this,".$_POST["rows"].",".$_POST["cols"].")'/> </td>" ;

                   }

                   echo "</tr>";
                }

             echo "</table>";
          }

          else {
             echo "You must use numbers";
          }

      }
		
?>

As you can see, i'm creating a dynamic table for the balls with two events, 'onclick' and 'onmouseout', the code of this events is:

/**
 * @author Daniel
 */

function clearField(field){
	field.value = "";
}

function highLight(ball, rows, cols) {
	
	var i, j, string, pos;
	
	string = ball.id;
	pos = new Array();
	pos = string.split(',');
	
	document.getElementById(pos[0]+","+pos[1]).src = "media/"+ball.name+"1.png";
		
	recur(ball,pos[0], pos[1], rows, cols);
}

function unnhighLight(ball, rows, cols) { // two 'n's, i want to deactivate this right now
	
	var i, j, string, pos;
	
	string = ball.id;
	pos = new Array();
	pos = string.split(',');
	
	document.getElementById(pos[0]+","+pos[1]).src = "media/"+ball.name+".png";
	
	recur(ball, pos[0], pos[1], rows, cols);
}

function recur(ball, posi, posj, rows, cols) {
	
	if( posi-1 >=0 ){
	document.getElementById((posi-1)+","+(posj)).src = "media/"+ball.name+"1.png";
	}
	if( posj-1 >=0 ) {
		document.getElementById((posi)+","+(posj-1)).src = "media/"+ball.name+"1.png";
	}
	if( posi+1 < rows ) {
		document.getElementById((posi+1)+","+(posj)).src = "media/"+ball.name+"1.png";
	}
	if( posj+1 < cols ) {
		document.getElementById((posi)+","+(posj+1)).src = "media/"+ball.name+"1.png";
	}
	
}

As you can see, the function highLight change the actual image to a highLighted one, the same function calls 'recur' a test function that hightLights all surrounding balls. Here's the problem, recur hightLights the up-side and left-side balls but no the others (down-side and right-side), i think that is a problem related to the dynamic table and the reference to each position, how can i solve this?

Greetings.

1
Contributor
1
Reply
2
Views
6 Years
Discussion Span
Last Post by AurosGamma
0

Sorry for the grammar error in the title, maybe an administrator can fix it?
Thanks

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.