Javascript e Canvas - Usiamo la tastiera

Un gioco per essere divertente deve essere interattivo! Come posso catturare la pressione dei tasti in javascript?

Non esiste in javascript un cin o scanf. Esiste il comando prompt che fa comparire una finestra e blocca tutto ma in genere nei giochi si vuole che il programma continui a funzionare mentre aspetta la pressione di un tasto.

Javascript utilizza gli eventi per catturare i tasti della tastiera! Un evento รจ qualcosa che succede nel computer che potrebbe cambiare il funzionamento del programma come la pressione di un tasto, il click del mouse, ecc... Quando in html usate onclick dite al browser: Quando qualcuno preme il tasto del mouse allora fai succedere qualcosa. Prova questo codice esempio:

<!DOCTYPE html>
<html lang="en">
	<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title>Esempio dell'uso della tastiera</title>
		<style>
			canvas {
			  display:block;  margin:20px auto 0; border:1px dashed #ccc;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="500" height="400"></canvas>
		<script src="keyboard.js"></script>
	</body>
</html>

con il suo relativo file javascript keyboard.js:

var canvas, ctx, // Variabile canvas, area 2d
    width = 500, // dimensioni area
    height = 400,
    posX = 10, // posizione dove scrivere la lettera
    posY = 10,
    incremento = 30;
	
/**
	Funzione che "risponde" alla pressione di un tasto della tastiera
*/
function keyDown(e) {
    console.log("Ho premuto il tasto " + e.keyCode);
    if (posX % 20 == 0) { // Alterno il carattere al codice
        ctx.fillText(e.keyCode, posX, posY);
    } else {
        ctx.fillText(String.fromCharCode(e.keyCode), posX, posY);
    }
    // Aumento la posizione per la prossima lettera
    if (posX + incremento < width) {
        posX += incremento;
    } else {
        posX = 10;
        posY += incremento;
    }
}

/**
	Funzione che "risponde" al rilascio di un tasto della tastiera
*/
function keyUp(e) {
    console.log("Ho rilasciato il tasto " + e.keyCode);
}

function init() {
    // Solite istruzioni per recupare il canvas e in contesto 2d
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    // registra nella pagina le funzioni che "rispondono" agli eventi di tastiera
    document.addEventListener('keydown', keyDown, false);
    document.addEventListener('keyup', keyUp, false);
}

init(); // Lancia la funzione che inizializza tutto. Si poteva anche mettere tutto qui.

La riga document.addEventListener('keydown', keyDown, false); indica a javascript: ogni volta che qualcuno preme un tasto (evento keydown) richiama la funzione keyDown che nel nostro caso stampa nel canvas il codice del carattere.

Prendendo spunto dall'esempio:

  1. Stampa le lettere con un colore diverso ad ogni pressione
  2. Fai in modo che premendo i tasti A,S,D e W si muova un pallino nel canvas
  3. Fai in modo che premendo le freccette si muova un pallino sopra il canvas

Buon lavoro!