3B INFO

Javascript e Canvas - La pallina rimbalza anche qui!

Eccoci alla prima parte del gioco della pallina in javascript, facciamola rimbalzare!

Innanzi due parole su come si creano le struct in javascript (che si chiamano oggetti!). Il seguente codice in c++

struct Punto {
	int x; // La posizione x sullo schermo
	int y; // La posizione y sullo schermo
	int velX; // La velocità sull'asse x a cui sta viaggiando
	int velY; // La velocità sull'asse y a cui sta viaggiando
	
	Punto() { // imposto i valori inziali
		x = 1; // posizione iniziale x
		y = 1; // posizione iniziale y
		velX = 1; // è fermo all'inizio, velocità X = 0
		velY = 1; // è fermo all'inizio, velocità Y = 0
	}
};

diventa:

var dot = {
	x:250, 
	y:250,
	velX:3,
	velY:4
};

Il costruttore base si può sostituire imponendo direttamente il valore delle variabili.

Così, il codice di partenza della pallina sarà:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var dot = {
	x:250, 
	y:250,
	velX:3,
	velY:4
};

function clearDot() {
 	ctx.clearRect(0,0,500,500);	
}

function paintDot() {
	ctx.strokeStyle = "black";
	ctx.fillStyle="black";
	ctx.beginPath();
	ctx.arc(dot.x,dot.y,5,0, 2*Math.PI);
	ctx.fill();
	ctx.stroke();
}

function move() {
	// update position
	clearDot();
	dot.x = dot.x + dot.velX;
	dot.y = dot.y + dot.velY;
	paintDot();
}

paintDot(); // disegna il pallino all'inizio
setInterval(move, 100); // lancia la funzione move ogni 100ms

</script>

</body>
</html>

Prendendo spunto da quanto fatto in c++ realizza in javascript le stesse funzionalità:

Fai in modo che la pallina rimbalzi sulle pareti
Fai in modo che la pallina cambi colore e raggio
Fai in modo che la pallina dopo dieci rimbalzi acquisti velocità
Aggiungi una seconda pallina con velocità diversa
*** Fai rimbalzare le palline tra di loro

Buon lavoro!

Benvenuti in 3B Informatica!

Javascript e Canvas - La pallina rimbalza anche qui!

Varie