Sto realizzando un gioco usando canvas e javascript.

Quando la pagina è più lunga dello schermo (commenti, ecc.), Premendo la freccia in basso si scorre la pagina verso il basso e si rende impossibile giocare al gioco.

Cosa posso fare per evitare che la finestra scorra quando il giocatore vuole solo spostarsi verso il basso?

Immagino che con i giochi Java e simili, questo non sia un problema, a condizione che l'utente faccia clic sul gioco.

Ho provato la soluzione da: Come disabilitare lo scorrimento della pagina in FF con i tasti freccia , ma non sono riuscito a farlo funzionare.

Sommario

Impedisci semplicemente l' azione del browser predefinito :

window.addEventListener("keydown", function(e) {
    // space and arrow keys
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

Risposta originale

Ho usato la seguente funzione nel mio gioco:

var keys = {};
window.addEventListener("keydown",
    function(e){
        keys[e.keyCode] = true;
        switch(e.keyCode){
            case 37: case 39: case 38:  case 40: // Arrow keys
            case 32: e.preventDefault(); break; // Space
            default: break; // do not block other keys
        }
    },
false);
window.addEventListener('keyup',
    function(e){
        keys[e.keyCode] = false;
    },
false);

La magia accade dentro e.preventDefault();. Questo bloccherà l'azione predefinita dell'evento, in questo caso spostando il punto di vista del browser.

Se non hai bisogno degli stati del pulsante corrente, puoi semplicemente rilasciare keyse scartare l'azione predefinita sui tasti freccia:

var arrow_keys_handler = function(e) {
    switch(e.keyCode){
        case 37: case 39: case 38:  case 40: // Arrow keys
        case 32: e.preventDefault(); break; // Space
        default: break; // do not block other keys
    }
};
window.addEventListener("keydown", arrow_keys_handler, false);

Tieni presente che questo approccio ti consente anche di rimuovere il gestore eventi in un secondo momento se devi riattivare lo scorrimento con i tasti freccia:

window.removeEventListener("keydown", arrow_keys_handler, false);

Riferimenti

• MDN: window.addEventListener
• MDN: window.removeEventListener

Per la manutenibilità, collegherei il gestore di "blocco" all'elemento stesso (nel tuo caso, la tela).

theCanvas.onkeydown = function (e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
        e.view.event.preventDefault();
    }
}

Perché non farlo semplicemente window.event.preventDefault()? MDN afferma:

window.eventè una proprietà proprietaria di Microsoft Internet Explorer disponibile solo durante la chiamata di un gestore di eventi DOM. Il suo valore è l'oggetto Event attualmente gestito.

Ulteriori letture:

• https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view
• https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Ho provato diversi modi per bloccare lo scorrimento quando vengono premuti i tasti freccia, sia jQuery che Javascript nativo: funzionano tutti bene in Firefox, ma non funzionano nelle versioni recenti di Chrome.
Anche la {passive: false}proprietà esplicita per window.addEventListener, che è consigliata come unica soluzione funzionante, ad esempio qui .

Alla fine, dopo molti tentativi, ho trovato un modo che funziona per me sia in Firefox che in Chrome:

window.addEventListener('keydown', (e) => {
    if (e.target.localName != 'input') {   // if you need to filter <input> elements
        switch (e.keyCode) {
            case 37: // left
            case 39: // right
                e.preventDefault();
                break;
            case 38: // up
            case 40: // down
                e.preventDefault();
                break;
            default:
                break;
        }
    }
}, {
    capture: true,   // this disables arrow key scrolling in modern Chrome
    passive: false   // this is optional, my code works without it
});

Citazione per EventTarget.addEventListener()da MDN

opzioni Facoltativo
   Un oggetto opzioni specifica le caratteristiche del listener di eventi. Le opzioni disponibili sono:

cattura
   A Booleanche indica che gli eventi di questo tipo verranno inviati al registrato listenerprima di essere inviati a qualsiasi EventTargetsotto di esso nell'albero DOM.
once
   ...
passivo
   A Booleanche, se vero, indica che la funzione specificata da listenernon chiamerà mai preventDefault(). Se un ascoltatore passivo chiama preventDefault(), l'agente utente non farà altro che generare un avviso della console. ...