2012-03-28 12 views
1

Ich lerne einige Web-Programmierung Programmierung jetzt und ich bin ein wenig fest.Verschieben eines Charakters innerhalb eines Arrays auf einer HTML-Seite mit PHP, Jquery und Onkeydown-Ereignissen

Ich versuche, einen Charakter um ein Array (wie ein einfaches Rogue-ähnliches Spiel) mit den WASD-Tasten zu bewegen, aber ich kann es nicht herausfinden.

Also fragte ich mich, ob mir jemand genau erklären könnte, was ich falsch mache?

heres der Code:

<html> 
<body style="font-family: Courier" onkeydown="move(event)"> 
<p id="game" > 
<?php 

// php functions regarding movement 

    $map = array(
    "XXXXXXXXXX", 
    "X........X", 
    "X...XX...X", 
    "X...XX...X", 
    "X........X", 
    "XXXX..XXXX", 
    "X........X", 
    "X..X..X..X", 
    "X........X", 
    "XXXXXXXXXX", 

    ); 

    $player = new Player(2,2,"T"); 
    initMap($map); 
    makePlayer($player); 
    displayMap($map); 
?> 
</p> 
<script type="text/javascript" src="jquery.js"> 

function move(ev){ 
    var key = (ev) ? ev.which : event.keyCode; 
    var c = String.fromCharCode(key); 
    $("#game").html('function move is working') 

    switch(c){ 
    case "w": 
     <?php 
      moveUp(); 
     ?> 
     $("#game").empty(); 

     break; 

    // keys ASD all share same code 

    default: 
     break; 

} 
} 
</script> 
</body> 
</html> 


/* output, no changes when key is pressed: 

XXXXXXXXXX 
X........X 
X.T.XX...X 
X...XX...X 
X........X 
XXXX..XXXX 
X........X 
X..X..X..X 
X........X 
XXXXXXXXXX 
*/ 

eine der Tasten drücken, sollte die HTML vom #game div klar, aber es funktioniert nicht. Irgendwelche Vorschläge?

+0

'$ ("# game") html ('')' warum sind Sie mit PHP hier.? –

+0

haha ​​sah das nicht, reparierte es – Native

+0

Ich glaube auch nicht, dass Sie verstehen, wie PHP funktioniert. PHP-Code wird ** einmal ** beim Laden Ihrer Seite ausgeführt. Sie können PHP-Funktionen nicht von JavaScript aus subsequenziell aufrufen. –

Antwort

0

Ich denke, ich kann Ihnen bei Ihrem Problem helfen. über Bewegungen nur versuchen, mein Beispiel unten:

1. HTML 
     <div id="map"></div> 
    2. CSS 
     #map {position:relative; width:600px; height:300px; border:1px solid gray;} 
     .ball {position:absolute; width:50px; height:50px; 
     -moz-border-radius:35px; border:1px solid red;} 

    3. JS 
     <script type="text/javascript"> 
     $(function(){ 
    var ball = $("<div class='ball'></div>"); 
      $("#map").append(ball); 
      $(document).keydown(function(e){ 
        //alert(e.keyCode); 
       var position = $(".ball").position(); 

        switch(e.keyCode){ 

                case 37: //left 
                $(".ball").css("left", position.left - 50 + "px");       
            break; 
            case 38: //up 
              $(".ball").css("top", position.top - 50 + "px"); 
            break; 
            case 39: //right 
              $(".ball").css("left", position.left + 50 +"px"); 
            break; 
            case 40: //down 
              $(".ball").css("top", position.top + 50 +"px"); 
            break; 
          } 
       }); 



}); 
</script> 



    Hope this will help.tnx 
Verwandte Themen