Перекрывающиеся ключевые события

Я работаю над небольшим проектом HTML/JavaScript/CSS3 для развлечения. Я в основном пытаюсь сделать колесо, которое катится в окне браузера. Для управления колесом я использую события keyup и keydown для клавиш курсора (влево и вправо поворачивают колесо и вверх и вниз катят его вперед или назад ).

У меня это работает довольно хорошо до сих пор, но есть два серьезных сбоя. Скажем, я хочу повернуть колесо вперед и, не останавливаясь, повернуть его немного вправо, тогда я буду держать нажатой клавишу «вверх» и нажимать клавишу курсора «вправо». Когда я это делаю, в движении возникает пауза, прежде чем оно регистрирует оба события и продолжает движение.

Это одна из проблем, основная проблема заключается в том, что после того, как я выполнил предыдущее действие, а затем колесо находится под желаемым углом, если я отпущу правую клавишу курсора, браузер зарегистрирует обе клавиши как отпущенные, и колесо вернется к стоять на месте. Вот как это выглядит на jsFiddle:http://jsfiddle.net/UKqwu/1/. Я знаю, что код беспорядок, но это незавершенная работа / опыт обучения, и я программирую всего месяц или около того.

В любом случае спасибо за любую помощь. Насколько я знаю, на данный момент он работает только в Chrome. На данном этапе я не особо беспокоился об устранении проблем совместимости.