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.