Перемещение символа в массиве на html-странице с использованием событий php, jquery и onkeydown - PullRequest
Новая
       0

Перемещение символа в массиве на html-странице с использованием событий php, jquery и onkeydown

1 голос
/ 28 марта 2012

Я изучаю программирование веб-программирования прямо сейчас, и я немного застрял.

Я пытаюсь перемещать персонажа по массиву (как простая игра, похожая на жулика), используя WASDключи, но я не могу понять это.

Так что мне было интересно, если кто-нибудь может объяснить мне, что именно я делаю неправильно?

вот код: 

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

Нажатие любой из клавиш должно очиститьHTML из #game div, но это не так.Есть предложения?

1 Ответ

0 голосов
/ 13 июня 2012

Я думаю, что могу помочь вам с вашей проблемой. Просто попробуйте мой пример ниже о движениях: 

   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
...