Gioco Gravità
Alcuni giochi hanno forze che trascinano il componente del gioco in una direzione, come la gravità attira gli oggetti a terra.
Gravità
Per aggiungere questa funzionalità al nostro costruttore di componenti, prima aggiungi una gravityproprietà, che imposta la gravità attuale. Quindi aggiungi una gravitySpeedproprietà, che aumenta ogni volta che aggiorniamo il frame:
Esempio
function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.speedX = 0;
this.speedY = 0;
this.gravity = 0.05;
this.gravitySpeed = 0;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
}
}
Tocca il fondo
Per evitare che il quadrato rosso cada per sempre, ferma la caduta quando colpisce il fondo dell'area di gioco:
Esempio
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height;
if (this.y > rockbottom) {
this.y = rockbottom;
}
}
Accelera
In un gioco, quando hai una forza che ti spinge verso il basso, dovresti avere un metodo per forzare il componente ad accelerare.
Attiva una funzione quando qualcuno fa clic su un pulsante e fai volare il quadrato rosso in aria:
Esempio
<script>function accelerate(n) {
myGamePiece.gravity = n;
}</script>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.1)">ACCELERATE</button>
Un gioco
Crea un gioco basato su ciò che abbiamo imparato finora: