About Me Programming Scripts / Tutorials My Musical Instruments My Audio Archive

12:23:04 AM

Thursday

Sep 09

Su	M	Tu	W	Th	F	Sa
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	1	2
3	4	5	6	7	8	9

Play My Typing Game

View Some of My Artwork

Determining Keypresses

There are three javascript event handlers to consider when dealing with keyboard input. onkeypress, onkeydown, onkeyup.

<script type="text/javascript">
document.onkeypress = listener;
function listener(e)
{
 var evtobj=window.event ? event : e;
 var unicode=evtobj.charCode ? evtobj.charCode : evtobj.keyCode;
 var actualkey=String.fromCharCode(unicode);
 alert('Unicode: '+unicode+'\nActual Key: '+actualkey);
}
</script>

This knowledge should get you started towards your own experimentation/implementation of what to do with keypresses. With game development in mind, I needed to know if multiple keys were being pressed simultaneously. Like up and right pressed together should be calmly recognized and direct you diagonally. Here's an example of dealing with multiple keypresses, only listening for 4 specific keys.

<script type="text/javascript">
var key_up = 0;
var key_down = 0;
var key_left = 0;
var key_right = 0;

// listen for keyboard input
document.onkeydown = keydown_listener;
document.onkeyup = keyup_listener;
var t = setInterval("timed_listener()", 50);

// key was pressed
function keydown_listener(e)
{
 var evtobj=window.event ? event : e;
 var unicode=evtobj.charCode ? evtobj.charCode : evtobj.keyCode;
 var actualkey=String.fromCharCode(unicode);
 if(unicode==38){ key_up = 1; }
 if(unicode==40){ key_down = 1; }
 if(unicode==37){ key_left = 1; }
 if(unicode==39){ key_right = 1; }
}

// key was depressed
function keyup_listener(e)
{
 var evtobj=window.event ? event : e;
 var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode;
 var actualkey=String.fromCharCode(unicode);
 if(unicode==38){ key_up = 0; }
 if(unicode==40){ key_down = 0; }
 if(unicode==37){ key_left = 0; }
 if(unicode==39){ key_right = 0; }
}

function timed_listener()
{
 if(key_up==1){ /* move sprite up */ }
 if(key_down==1){ /*move sprite down */ }
 if(key_right==1){ /*move sprite right */ }
 if(key_left==1){ /*move sprite left */ }
}

</script>

Read Previous:
A function to read the value of a radio input