smooth movement using SHIFT and ARROW keys

Discussion in 'Javascript' started by sylver, Aug 1, 2007.

  1. sylver

    sylver Guest

    Hi to all,

    There's a website that remake a Super Mario Bros Game here:
    http://www.janis.or.jp/users/segabito/JavaScriptMaryo.html

    The movements of the character (left, right, jump) are very smooth. I
    tried to remake the code, but bumped into some lag issues.

    -----------------Code-----------------------
    <html>
    <head>
    <script>

    function init(){
    var x = document.getElementById('divvy');
    x.addEventListener("onkeydown", test, false);
    }

    function checkOnKeyDown(event)
    {
    var x = document.getElementById('divvy');
    if(event.keyCode == event.DOM_VK_LEFT){
    //move left when press left arrow
    x.style.left = (parseInt(x.style.left)-10)+"px";
    }

    if(event.keyCode == event.DOM_VK_RIGHT){
    //move right when press right arrow
    x.style.left = (parseInt(x.style.left)+10)+"px";
    }

    if (event.shiftKey){
    //jump when press Shift key
    x.style.top = (parseInt(x.style.top)-10)+"px";
    }
    }

    function test(){alert('test');}

    window.onkeydown = checkOnKeyDown;
    </script>
    </head>
    <body onload="init();">
    <div id="divvy" style="position:absolute; top:500px; left:
    100px;">this is divvy</div>

    </body>
    </html>
    -----------code ends--------------------------

    Issues:
    ========
    1) There's a pause (about 0.5 sec) when u press the keys to move.
    2) the test() function is never called, even after I comment
    "window.onkeydown = checkOnKeyDown;"
    3)
    When press SHIFT, div goes up.
    When press SHIFT, then arrow keys, div move diagonally.
    When press arrow keys then SHIFT, move sideways first, then move up
    (guess this relates to 'bubbling' events?)

    Please enlighten me on this matter.

    Thanks.
     
    sylver, Aug 1, 2007
    #1
    1. Advertising

  2. sylver

    David Mark Guest

    On Aug 1, 1:17 am, sylver <> wrote:
    > Hi to all,
    >
    > There's a website that remake a Super Mario Bros Game here:http://www.janis.or.jp/users/segabito/JavaScriptMaryo.html
    >


    Sure enough. I am missing some fonts, but it did work, more or less.
    No sound though?

    > The movements of the character (left, right, jump) are very smooth. I


    It's not bad.

    > tried to remake the code, but bumped into some lag issues.
    >
    > -----------------Code-----------------------
    > <html>
    > <head>
    > <script>
    >
    > function init(){
    > var x = document.getElementById('divvy');
    > x.addEventListener("onkeydown", test, false);


    This isn't right ("onkeydown" should be "keydown" and isn't cross-
    browser either. IE uses attachEvent (and does require the "on"
    prefix.)

    > }
    >
    > function checkOnKeyDown(event)
    > {
    > var x = document.getElementById('divvy');
    > if(event.keyCode == event.DOM_VK_LEFT){
    > //move left when press left arrow
    > x.style.left = (parseInt(x.style.left)-10)+"px";
    > }
    >
    > if(event.keyCode == event.DOM_VK_RIGHT){
    > //move right when press right arrow
    > x.style.left = (parseInt(x.style.left)+10)+"px";
    > }
    >
    > if (event.shiftKey){
    > //jump when press Shift key
    > x.style.top = (parseInt(x.style.top)-10)+"px";


    Tou aren't preventing the default action, which will cause problems if
    there is a horizontal scroll bar. For starters, return false from
    this function.

    > }
    > }
    >
    > function test(){alert('test');}


    This will never fire.

    >
    > window.onkeydown = checkOnKeyDown;


    So you went back to the old method here.

    > </script>
    > </head>
    > <body onload="init();">
    > <div id="divvy" style="position:absolute; top:500px; left:
    > 100px;">this is divvy</div>
    >
    > </body>
    > </html>
    > -----------code ends--------------------------
    >
    > Issues:
    > ========
    > 1) There's a pause (about 0.5 sec) when u press the keys to move.


    I don't see that.

    > 2) the test() function is never called, even after I comment
    > "window.onkeydown = checkOnKeyDown;"


    See above.

    > 3)
    > When press SHIFT, div goes up.


    I wouldn't try to use shift (or Ctrl or Alt) for this. Use a normal
    key.

    > When press SHIFT, then arrow keys, div move diagonally.


    Don't use shift. You clearly don't understand what it does.

    > When press arrow keys then SHIFT, move sideways first, then move up
    > (guess this relates to 'bubbling' events?)


    No. See previous two comments.

    >
    > Please enlighten me on this matter.


    Consider yourself partially enlightened. You've got a lot to learn if
    you want to write a video game in JavaScript.
     
    David Mark, Aug 1, 2007
    #2
    1. Advertising

  3. sylver

    sylver Guest

    Thanks for your fast reply :D

    On Aug 1, 2:06 pm, David Mark <> wrote:
    > On Aug 1, 1:17 am, sylver <> wrote:
    >
    > > Hi to all,

    >
    > > There's a website that remake a Super Mario Bros Game here:http://www.janis.or.jp/users/segabito/JavaScriptMaryo.html

    >
    > Sure enough. I am missing some fonts, but it did work, more or less.
    > No sound though?
    >
    > > The movements of the character (left, right, jump) are very smooth. I

    >
    > It's not bad.
    >
    > > tried to remake the code, but bumped into some lag issues.

    >
    > > -----------------Code-----------------------
    > > <html>
    > > <head>
    > > <script>

    >
    > > function init(){
    > > var x = document.getElementById('divvy');
    > > x.addEventListener("onkeydown", test, false);

    >
    > This isn't right ("onkeydown" should be "keydown" and isn't cross-
    > browser either. IE uses attachEvent (and does require the "on"
    > prefix.)
    >


    Sorry about that, I was merely copy-paste-ing from the
    window.onkeydown code near the end of the script.

    >
    > > }

    >
    > > function checkOnKeyDown(event)
    > > {
    > > var x = document.getElementById('divvy');
    > > if(event.keyCode == event.DOM_VK_LEFT){
    > > //move left when press left arrow
    > > x.style.left = (parseInt(x.style.left)-10)+"px";
    > > }

    >
    > > if(event.keyCode == event.DOM_VK_RIGHT){
    > > //move right when press right arrow
    > > x.style.left = (parseInt(x.style.left)+10)+"px";
    > > }

    >
    > > if (event.shiftKey){
    > > //jump when press Shift key
    > > x.style.top = (parseInt(x.style.top)-10)+"px";

    >
    > Tou aren't preventing the default action, which will cause problems if
    > there is a horizontal scroll bar. For starters, return false from
    > this function.


    When i return false here, every keyboard shortcut cant be executed,
    even CTRL+F or F5 to reload/refresh.

    > > }
    > > }

    >
    > > function test(){alert('test');}

    >
    > This will never fire.
    >


    even after i changed the calling method from 'onkeydown' to 'keydown',
    it still wont fires.

    >
    > > window.onkeydown = checkOnKeyDown;

    >
    > So you went back to the old method here.
    >
    > > </script>
    > > </head>
    > > <body onload="init();">
    > > <div id="divvy" style="position:absolute; top:500px; left:
    > > 100px;">this is divvy</div>

    >
    > > </body>
    > > </html>
    > > -----------code ends--------------------------

    >
    > > Issues:
    > > ========
    > > 1) There's a pause (about 0.5 sec) when u press the keys to move.

    >
    > I don't see that.
    >
    > > 2) the test() function is never called, even after I comment
    > > "window.onkeydown = checkOnKeyDown;"

    >
    > See above.


    Thanks :D

    > > 3)
    > > When press SHIFT, div goes up.

    >
    > I wouldn't try to use shift (or Ctrl or Alt) for this. Use a normal
    > key.
    >
    > > When press SHIFT, then arrow keys, div move diagonally.

    >
    > Don't use shift. You clearly don't understand what it does.


    I may haven't understand it fully, but I do know that the way of
    handling SHIFT key event is different from the arrow keys, and I'll
    stick to using arrows :D

    >
    > > When press arrow keys then SHIFT, move sideways first, then move up
    > > (guess this relates to 'bubbling' events?)

    >
    > No. See previous two comments.
    >
    >
    >
    > > Please enlighten me on this matter.

    >
    > Consider yourself partially enlightened. You've got a lot to learn if
    > you want to write a video game in JavaScript.


    Yups, this is my 'early' phase on developing games in js (as opposed
    to other languages) . After a few more trials, I found out using
    setTimeout and putting timers appropriately may helps achieve this
    effect as I've intended. I guess "Learning Leads to Wisdom" :D

    Thanks.
     
    sylver, Aug 1, 2007
    #3
  4. sylver

    David Mark Guest

    On Aug 1, 5:08 am, sylver <> wrote:

    [snip]

    [snip]

    > > Tou aren't preventing the default action, which will cause problems if
    > > there is a horizontal scroll bar. For starters, return false from
    > > this function.

    >
    > When i return false here, every keyboard shortcut cant be executed,
    > even CTRL+F or F5 to reload/refresh.
    >
    > > > }
    > > > }

    >
    > > > function test(){alert('test');}

    >
    > > This will never fire.

    >
    > even after i changed the calling method from 'onkeydown' to 'keydown',
    > it still wont fires.


    Only return false for the arrow keys (or whatever else you process.)
     
    David Mark, Aug 1, 2007
    #4
  5. sylver

    sylver Guest

    On Aug 2, 4:00 am, David Mark <> wrote:
    > On Aug 1, 5:08 am, sylver <> wrote:
    >
    > [snip]
    >
    > [snip]
    >
    >
    >
    > > > Tou aren't preventing the default action, which will cause problems if
    > > > there is a horizontal scroll bar. For starters, return false from
    > > > this function.

    >
    > > When i return false here, every keyboard shortcut cant be executed,
    > > even CTRL+F or F5 to reload/refresh.

    >
    > > > > }
    > > > > }

    >
    > > > > function test(){alert('test');}

    >
    > > > This will never fire.

    >
    > > even after i changed the calling method from 'onkeydown' to 'keydown',
    > > it still wont fires.

    >
    > Only return false for the arrow keys (or whatever else you process.)


    Thanks so much for this advice, If i didn't put return false, the
    movement will go hay-wire.. especially if the user presses ENTER key.

    Thanks a lot man :D
     
    sylver, Aug 2, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rob R. Ainscough
    Replies:
    0
    Views:
    716
    Rob R. Ainscough
    Jul 20, 2005
  2. Vidar Gundersen
    Replies:
    1
    Views:
    791
  3. Marc Heiler
    Replies:
    1
    Views:
    388
    Kendall Gifford
    May 23, 2011
  4. Andrus

    Replace Up Arrow with Shift+Tab

    Andrus, Jun 29, 2003, in forum: Javascript
    Replies:
    0
    Views:
    104
    Andrus
    Jun 29, 2003
  5. Replies:
    5
    Views:
    152
Loading...

Share This Page