Question

I am using .animate to try and create a tile based game. I am mixing jQuery with another ajax script to try and make this work. I keep clicking an arrow to move but get no result. Maybe someone else would understand why?

Buttons:

$data .= "<center><table><tr><td></td><td><button onclick=\"transition(\'up\')\">&uarr;</button></td> <td></td></tr><tr><td><button onclick=\"transition(\'left\')\">&larr;</button></td> <td></td> <td><button onclick=\"transition(\'right\')\">&rarr;</button></td></tr><tr><td></td> <td><button  onclick=\"transition(\'down\')\">&darr;</button></td> <td></td></tr></table></center>";

Map:

$data .= "<div style=\'width:480px;height:480px;background-color:#000000;background-image:url(".$map['background'].");padding:".$map['locationpadding'].";\' id=\'locationMap\'>";


$data .= "<div id=\'specialLocations\'></div>";


$data .= "<div style=\'position:absolute;left:".$charrel[0]."px;bottom:".$charrel[1]."px;width:32px;height:32px;background-image:url(".$char['charimage'].");\' id=\'charLocation\'></div>";


$data .= "</div>";

Finally, getting the animation. I have made sure the if statements are all working. So everything is working fine up to this point.

if($_POST['direction'] == "up"){

        print("$('#charLocation').animate({'bottom': '+=50px'}, 'slow');");

    }elseif($_POST['direction'] == "left"){

        print("$('#charLocation').animate({'left': '-=50px'}, 'slow');");

    }elseif($_POST['direction'] == "right"){

    print("$('#charLocation').animate({'left': '+=50px'}, 'slow');");

    }elseif($_POST['direction'] == "down"){

    print("$('#charLocation').animate({'bottom': '-=50px'}, 'slow');");

    }else{
        die('alert("Invalid movement.");');
    }

And the reasoning for printing the jQuery/JavaScript code through PHP is that everything is loaded via Ajax code so I am never printing.

Sorry for any confusion ahead of time and thanks for looking over this for me.

Answer 1

I think the problem is your approach to making a game with these languages. If you want to move a character in a web based tile game you should control all game logic in the front end client side – in javascript in this case – and only use ajax to push critical game info to the server. Like, if you move a chess piece for example, you only post the new piece coordinates when the animation completes, not calling ajax and executing whatever comes back from the server.

I don’t think an example can be provided in this case since it is an issue with the foundation of your approach.

I could answer specific questions if you have them. To answer your current question – printing a line of javascript as an ajax request won’t automatically execute the response as javascript, nor should it. Don’t try to get it to work this way. Instead restructure your approach to not require this kind of behavior to operate.