Sobreposição de eventos importantes

Question

Estou trabalhando em um pequeno projeto HTML/JavaScript/CSS3 para me divertir.Basicamente, estou tentando fazer uma roda que gira na janela do navegador.Para controlar a roda, estou usando eventos keyup e keydown para as teclas do cursor (gire a roda para a esquerda e para a direita e role-a para cima e para baixo para frente ou para trás).

Estou funcionando muito bem até agora, mas há duas falhas principais.Digamos que eu queira rolar a roda para frente e, sem parar, quero girá-la um pouco para a direita, então manteria a tecla para cima pressionada e pressionaria a tecla do cursor para a direita.Quando faço isso, há uma pausa no movimento antes de registrar os dois eventos e continuar rolando.

Esse é um dos problemas, o principal problema é que, depois de realizar a ação anterior e a roda estar em um ângulo desejável, se eu soltar a tecla direita do cursor o navegador registra ambas as teclas como liberadas e a roda vem para uma parada.Aqui está um jsFiddle de sua aparência: http://jsfiddle.net/UKqwu/1/.Eu sei que o código está uma bagunça, mas é um trabalho em andamento/experiência de aprendizado e estou programando há apenas um mês ou mais.

De qualquer forma, obrigado por qualquer ajuda.Até onde eu sei, ele só funciona no Chrome no momento.Não me preocupei em corrigir problemas de compatibilidade neste estágio.

Answer 1

Portanto, o que está acontecendo é essencialmente uma limitação incorporada ao seu sistema operacional, mas há uma solução simples.Primeiro explicarei a limitação e depois a solução alternativa.

Se você (em uma caixa de texto) mantivesse pressionado o botão "j", primeiro um "j" apareceria e, depois de um pequeno atraso, muitos "j" apareceriam "jjjjjjjjjjjjjjjjjjjj"

Este é o mesmo problema que você está enfrentando.O evento é acionado uma vez, aguarda um momento e depois é acionado muitas outras vezes.

A solução, porém, é simples.Em vez de fazer sua roda se mover quando os eventos são disparados...faça com que ele seja atualizado constantemente e acompanhe separadamente quais teclas estão ativadas ou desativadas.

O Key Handler seria algo assim...

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;
    }
    ...
  }
}

(você anexaria o manipulador de chaves ao corpo ou a qualquer elemento que desejar)

Seu volante teria uma função de atualização que parecia...

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

e então o jogo teria algo assim...

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

Dessa forma sua roda estará sempre atualizando com base no estado atual das chaves, e você não terá que depender das limitações dos eventos que estão disparando.:)

Answer 2

Aqui está um trecho de um jogo simples que escrevi uma vez

//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];
}

Isso mantém o controle de todos os principais estados atuais.Então o "tick" do seu jogo está em setTimeout() em vez de passar pelos principais eventos e verificar as chaves apropriadas.

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

if (keys[KEY_RIGHT])
    {
        // move right
    }
}

Aquié o jogo;

Answer 3

o problema que você está enfrentando é porque seu código foi projetado para detectar o pressionamento de uma única tecla, enquanto o jogo precisa da detecção de 2 pressionamentos de tecla.

coloque esta linha em loop sobre o tamanho de e.isso definirá todas as teclas pressionadas como 1.atualmente, ele detecta apenas um pressionamento de tecla e processa uma de cada vez.

keys[e.keyCode] = 1;

confira este tópico e você poderá conseguir o que precisa.embora seja jquery, pode ajudar conceitualmente.também estou trabalhando nisso com js ...se surgir alguma novidade vou compartilhar...

Detecte várias chaves em um único evento de pressionamento de tecla em jQuery

seu código e conceito são legais se você tem realmente um mês de programação.