Detect multiple keys pressed to move a "character/player"
<p>I have an example of what I have got so far <a href="http://jsfiddle.net/HelloJoe/8NW2K/" rel="nofollow">here (example 1)</a>, you'll need to click on the 'result' window so the keys will move the character (w, a, s and d keys move the character), also bear in mind that this has not been browser tested and only works in a select few modern browsers.</p>

<p>I can now get the image to move up/down/left/right as wanted and depending on the 'health' it moves a particular speed, and using a good <a href="http://metatroid.com/articles/CSS3%20transforms%20-%20rotate%20image%20with%20mouse" rel="nofollow">example I found</a> it rotates along with the mouse too, so it works in a birds eye view styled game.</p>

<p>Now, I'm a little confused about how I can get the image to move diagonally, I've tried using multiple <code>if</code> statements linking the possible combinations of keys, but it always takes the last key pressed.</p>

<p>I don't really know how to tackle the problem, do I need to put them in some sort of <code>while</code> loop to say while a certain key is pressed move it in that direction? Would that eliminate the need for the diagonal/multiple key press?</p>

<pre><code>    if ((key == key_W &amp;&amp; key == key_D) || (key == key_w &amp;&amp; key == key_d) || (key == key_W &amp;&amp; key == key_d) || (key == key_w &amp;&amp; key == key_D)) {

        // Player Up/Right

    }
</code></pre>

<p>Or do I need to set some sort of array to generate a list of keys pressed?</p>

<p>I understand and I'm fully aware making games in Javascript/jQuery isn't the best method to make games, it's an experiment more than anything.</p>

<p><strong>EDIT</strong></p>

<p>There is now have a more workable, moving character <a href="http://jsfiddle.net/HelloJoe/8NW2K/5/" rel="nofollow">here (example 2)</a>, but there is a delay in the movement, so to expand on my question, is there anyway to reduce this?</p>
