Home/ Questions/Q 8072943
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T14:10:52+00:00

I’m learning some web programming programming right now and I’m a little stuck. I’m

  • 0

I’m learning some web programming programming right now and I’m a little stuck.

I’m trying to move a character around an array (like a simple rogue-like game) using the WASD keys but I can’t seem to figure it out.

So I was wondering if someone could explain to me what I’m doing wrong exactly?

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

Pressing any of the keys should clear the html from the #game div, but it does not. Any suggestions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think i can help you with your problem. Just try my example below about movements:

       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
    • 0