Canvas HTML5: Spostare Quadrato Con Frecce
Ecco un esempio di codice HTML5 Canvas che muove un quadrato utilizzando i tasti direzionali sulla tastiera:
<!DOCTYPE html>
<html>
<head>
<title>Land of World</title>
<meta charset="utf-8" />
</head>
<body>
<canvas id="canvas" width="1000" height="1000"></canvas>
<script>
// Recupera il riferimento al canvas e il contesto 2D
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// Posizione iniziale del quadrato
var x = 50;
var y = 50;
// Dimensioni del quadrato
var size = 50;
// Disegna il quadrato iniziale
drawSquare();
// Ascolta gli eventi delle frecce direzionali
window.addEventListener("keydown", function (event) {
switch (event.key) {
case "ArrowUp":
y -= 10;
break;
case "ArrowDown":
y += 10;
break;
case "ArrowLeft":
x -= 10;
break;
case "ArrowRight":
x += 10;
break;
}
// Disegna il quadrato nella nuova posizione
drawSquare();
});
// Funzione per disegnare il quadrato
function drawSquare() {
// Pulisce il canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Disegna il quadrato nella nuova posizione
ctx.fillStyle = "#FF0000";
ctx.fillRect(x, y, size, size);
}
</script>
</body>
</html>
Questo codice HTML5 Canvas crea un quadrato di dimensioni 50×50 pixel, che viene disegnato in una posizione iniziale di x=50 e y=50. Quando l’utente preme una delle frecce direzionali sulla tastiera, la posizione del quadrato viene aggiornata di 10 pixel nella direzione corrispondente (ad esempio, se si preme la freccia destra, la posizione x viene incrementata di 10). Ogni volta che la posizione del quadrato viene modificata, viene chiamata la funzione drawSquare() per disegnare il quadrato nella nuova posizione.
