3B INFO

Javascript e Canvas - Scrolling di una immagine

In molti giochini c'è uno sfondo che si muove... vediamo come si fa!

In sostanza si carica un'immagine in una variabile e si disegna ad intervalli di tempo sempre più spostata. Se ad esempio ho lo schermo 300x100 e ho un'immagine 100x100 devo disegnare l'immagine 4 volte in modo da coprire tutta l'area e coprire anche lo spazio che lasciano libere le 3 immagini 100x100 quando comincio a spostarle fuori dallo schermo. Quando arrivo a fare scomparire la prima delle tre immagine le riporto tutte alla posizione originale.

<!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>s
			canvas {
			  display:block;  margin:20px auto 0; border:1px dashed #ccc;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="500" height="400"></canvas>
		<button onclick="avvia()">Avvia</button>
		<script>
			var canvas, ctx, // Variabili canvas e contesto
    		width = 500, // dimensioni area
    		height = 400,
    		posX = 0,
    		posY = 0,
    		moving = 0,            
            incremento = 30;            

    		canvas = document.getElementById('canvas');
    		ctx = canvas.getContext('2d');

    		var img = new Image();
    		img.src = "landscape.jpg";
    		img.onload = mostra;

    		function mostra() {
                // Disegno due volte lo sfondo... potrei doverlo fare anche più volte
    			ctx.drawImage(img, posX, posY);
    			ctx.drawImage(img, posX+img.width, posY);
    		}

    		function muoviSfondo() {
    			// sposto posX di 1 px a dx
    			posX --;
    			if (posX==-img.width) {
    				posX = 0;
    			}    			
    		}

    		function muoviOggetto() {
    			// muove un oggetto con una velocità diversa
    		}

    		function loop() {
    			// aggiorna le coordinate dello sfondo e degli oggetti
    			muoviSfondo();
    			muoviOggetto();
                
				// ridisegna le immagini
    			mostra();
    		}

    		function avvia() {
				if (moving==0) {
					moving = setInterval(loop, 1000/60);
				} else {
					clearInterval(moving);
					moving = 0;
				}
    		}

		</script>
	</body>
</html>

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 scegliendo un'immagine da mettere come sfondo e da sostituire nel codice (img.src=...),
Aggiungi un nuovo elemento che si muove ad un'altra velocità sopra l'immagine,
Aggiungi un altro elemento che si muove con le frecce della tastiera, altrimenti sta fermo nello schermo.

Buon lavoro!

Benvenuti in 3B Informatica!

Javascript e Canvas - Scrolling di una immagine

Varie