Overlapping key events

Question

I am working on a small HTML / JavaScript / CSS3 project for fun. I'm basically trying to make a wheel that rolls in a browser window. To control the wheel, I use the keyup and keydown keys for the cursor keys (turn the wheel left and right, and move it forward or backward up and down).

It works very well for me, but there are two serious failures. Let's say I want to turn the wheel forward and, without stopping, I want to turn it a little to the right, then I will hold down the up key and press the right cursor key. When I do this, there is a pause in motion before it registers both events and continues to roll.

In one of the problems, the main problem is that as soon as I performed the previous action and then the wheel is at the right angle, if I release the correct cursor key, the browser will register both keys as released and the wheel will stop. This is what jsFiddle looks like: http://jsfiddle.net/UKqwu/1/ . I know that the code is a mess, but this is a work in progress / learning experience and I only programmed for a month or so.

Anyway thanks for any help. At the moment, it only works in Chrome, as far as I know. At the moment, there were no problems fixing compatibility issues.

Answer 1

So what happens is essentially a restriction created by your operating system, but there is a simple approach. I will first explain the restriction, and then the workaround.

If you have been (in the text box), hold down the "j" button, first "j" will appear, and then after a short delay a lot of "j" s will appear: jjjjjjjjjjjjjjjjjjj

This is the problem you are facing. An event fires once, waits a moment, and then fires many more times.

The solution, however, is simple. Instead of your wheel moving when events were triggered, constantly update it and separately monitor which keys are up or down.

The key handler will look something like this:

function KeyHandler() { this.left = false; this.right= false; ... function onKeyDown(e) { if (e.keyCode == 37) { this.left = true; } ... } function onKeyUp(e) { if (e.keyCode == 37) { this.left = false; } ... } } 

(you attach the key handler to the body or any other element that you want)

Your wheel will have an update function that would look like ...

 wheel.update = function() { // the wheel is turning left if (wheel.keyhandler.left) { // make the appropriate adjustments } } 

and then the game will have something like this ...

 wheel = new Wheel; setInterval(function() { wheel.update(); },100); 

Thus, your wheel will always be updated depending on the current state of the keys, and you will not have to rely on the limitations of the events that fire. :)

Answer 2

Here is a snippet of a simple game I once wrote

 //key codes var KEY_LEFT = 37; var KEY_RIGHT = 39; var KEY_A = 65; var KEY_D = 68; var KEY_SPACE = 32; var keys = {}; function onKeyDown(e) { e = e || window.event; var key = window.event.keyCode || e.which; // ie keys[key] = true; } function onKeyUp(e) { var key = window.event.keyCode || e.which; // ie delete keys[key]; } 

This keeps track of all current key states. Then your game "tick" is on setTimeout (), and does not move around the key events and checks the corresponding keys.

 function gameTick() { // update paddle angles if (keys[KEY_LEFT]) { // move left } if (keys[KEY_RIGHT]) { // move right } } 

Here is the game;

Answer 3

The problem you are facing is that your code is designed to detect pressing a single key, while your game requires 2 keystrokes.

put this line in a loop of size e. which will set all the keys pressed as 1. currently, it only detects one keystroke and processes one key at a time.

 keys[e.keyCode] = 1; 

check out this topic and you can get what you need. Although its jquery, it can help conceptually. m is also working on this with js ... if something new comes along, shares ...

Detecting multiple keys in a single keypress event in jQuery

Your code and concept are awesome if you are truly one month old in programming.