3B INFO

Javascript e Canvas - Paint for Canvas

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 del mouse</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="mouse.js"></script>
	</body>
</html>

con il suo relativo file javascript mouse.js:

var canvas, ctx, // Variabili canvas e contesto
    width = 500, // dimensioni area
    height = 400,
    posX = 10,
    posY = 10,
    incremento = 30;
	
/**
	Funzioni che "rispondono" agli eventi del mouse
*/
function click(e) {
    console.log("Premuto un tasto");
    console.log(e);
}

function wheel(e) {
    console.log("Girata la rotella");
    console.log(e);
}

function move(e) {
    console.log("Mosso il mouse");
    console.log(e);
}

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 "risponde" all'evento click
    canvas.addEventListener('click', click, false);
    // prova a decommentare il seguente comando
    // canvas.addEventListener('mousemove', move, false);

    // L'evento rotella è diverso a seconda del browser
    var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
    // canvas.addEventListener(mousewheelevt, function(e) {wheel(e);}, false); 	
}

init(); // Lancia la funzione che inizializza tutto

L'evento della rotella, chiamato wheel, è diverso a seconda del browser per cui è necessario l'if nella penultima riga del javascript. E' un if "rapido" realizzato con il punto di domanda.

Prendendo spunto dall'esempio:

Prova l'esempio sopra decommentando le due righe commentate. Osserva in particolare le informazioni contenute nell'oggetto evento.
Al click dell'utente disegna un cerchio posizionato nelle coordinate in cui clicca
Metti al lato del canvas una tendina. In base al valore della tendina cliccando si disegnerà un cerchio o un quadrato
Aggiungi al lato del canvas una casella di testo. Indicherà la dimensione del lato o il raggio del cerchio

Buon lavoro!

Benvenuti in 3B Informatica!

Javascript e Canvas - Paint for Canvas

Varie