SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need SERIOUS help with key binding/mapping

    Im working on a php rpg with some others, but I want to be able to use the arrow keys to navigate the character using the up arrow/down arrow/left arrow/right arrow, and you move your character through links
    PHP Code:
     var left="<? echo $url.$west;?>";
     var up="<? echo $url.$north;?>";
     var right="<? echo $url.$east;?>";
     var down="<? echo $url.$south;?>";
    can ANYONE give me a example for doing this, all i want is when you press the up down left or right it, produces the same result as if you pressed a link. to move left or right etc..

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this?
    Code:
    function handleKeyDown = function( e )
    {
    	var kc = ( e ) ? e.which : event.keyCode;
    	switch( kc )
    	{
    		case 37 :
    			// left arrow
    			break;
    		case 38 :
    			// up arrow
    			break;
    		case 39 :
    			// right arrow
    			break;
    		case 40 :
    			// down arrow
    			break;		
    	}
    }
     
    ...
     
    <body onkeydown="handleKeyDown()">
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dang beetle, you beat me to it!

    Oh well, here's another example. Try it out. The dhtml library does all the work - so we can just have fun.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>X ArrowKeys Demo</title>
    <meta name='author' content='Mike Foster, Cross-Browser.com'>
    <style type='text/css'><!--
    body {
      color:#000; background:#ccc; margin:0; padding:10px;
      font-family:verdana,arial,sans-serif; font-size:12px;
    }
    a {
      color:#fff; background:#009; text-decoration:none;
      padding:2px; font-weight:bold; font-size:16px;
    }
    a:hover {
      color:#009; background:#fff; text-decoration:none;
      padding:2px; font-weight:bold; font-size:16px;
    }
    .clsX {
      position:absolute; margin:0; padding:0;
    }
    --></style>
    <script type='text/javascript' src='../x.js'></script>
    <script type='text/javascript'><!--
    var delta = 10;
    window.onload = function() {
      xResizeTo('id1', 200, 50);
      xMoveTo('id1', (xClientWidth()-200)/2, (xClientHeight()-50)/2);
      xShow('id1');
      xAddEventListener(document, 'keydown', onKeyDown, false);
    }
    function onKeyDown(evt) {
      var e = new xEvent(evt);
      switch (e.keyCode) {
        case 37:    // IE and Moz
        case 57387: // Opera 7
          xLeft('id1', xLeft('id1')-delta); // Left
          break;
        case 38:
        case 57385:
          xTop('id1', xTop('id1')-delta);   // Up
          break;
        case 39:
        case 57388:
          xLeft('id1', xLeft('id1')+delta); // Right
          break;
        case 40:
        case 57386:
          xTop('id1', xTop('id1')+delta);   // Down
          break;
      }
    }
    //--></script>
    </head>
    <body>
    <h3>X ArrowKeys Demo</h3>
    <p>Use the Arrow Keys to move the element</p>
    <p>Tested with Opera 7, IE 6, and Mozilla 1.
    Does not work with NN4. All tests on Win98.</p>
    <div id='id1' class='clsX'>
    <a href='http://cross-browser.com/'>Cross-Browser.com</a>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •