smooth movement using SHIFT and ARROW keys

sylver · Aug 1, 2007

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.

David Mark · Aug 1, 2007

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.

sylver · Aug 1, 2007

Thanks for your fast reply

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

It's not bad.

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.

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.

This will never fire.

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

So you went back to the old method here.

I don't see that.

See above.

Thanks

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

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

No. See previous two comments.

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"

Thanks.

David Mark · Aug 1, 2007

[snip]

[snip]

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

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

sylver · Aug 2, 2007

[snip]

[snip]

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

Click to expand...

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

Click to expand...

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

User input - get keystrokes (arrow keys + shift)	1	May 22, 2011
Problem with android and scrolling with <input textarea	5	May 18, 2022
How to paint an element in screen using javascript?	1	Jan 11, 2023
Fading effect between play and play-over and pause and pause-over	0	Oct 16, 2021
Replace Up Arrow with Shift+Tab	0	Jun 29, 2003
Help with my responsive home page	2	Dec 14, 2022
Error 'this.$event[...].keys' is	5	Nov 10, 2007
My movement of banner is not working in IE6, works in IE7 and Firefox, and Safari	1	Oct 20, 2007

smooth movement using SHIFT and ARROW keys

sylver

David Mark

sylver

David Mark

sylver

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads