2012-03-28 13 views
1

私は今、いくつかのWebプログラミングプログラミングを学んでいます。php、jquery、onkeydownイベントを使用してhtmlページの配列内の文字を移動する

私はWASDキーを使って(単純な不正なゲームのような)配列の周りのキャラクターを動こうとしていますが、私はそれを理解できないようです。

誰かが私が間違っていることを私に説明できるかどうか疑問に思っていましたか?

相続コード:#game divのHTMLをクリアしなければならないのいずれかのキーを押すと

<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 
*/ 

ですが、それはできません。助言がありますか?

+0

'$( "#game")html(' <?php echo "function moveは動作していますか?> ')'なぜここでPHPを使用していますか? –

+0

haha​​はそれを確認していませんでした。 – Native

+0

PHPの仕組みを理解しているとは思いません。 PHPコードはページロード時に**一度**実行されます。 JavaScriptからPHP関数を下位順に呼び出すことはできません。 –

答えて

0

私はあなたの問題をお手伝いできると思います。

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 
関連する問題