Los últimos tutoriales de desarrollo web
 

HTML juego de la gravedad


Algunos juegos tienen fuerzas que arrastra el componente de juego en una dirección, como la gravedad atrae los objetos al suelo.




Gravedad

Para agregar esta funcionalidad a nuestro constructor de componente, primero agregar una gravity propiedad, que establece la gravedad actual. A continuación, añadir un gravitySpeed propiedad, lo que aumenta cada vez que la actualización del marco:

Ejemplo

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 ;
    }
}
Inténtalo tú mismo "

Tocado fondo

Para evitar el cuadrado rojo de caer para siempre, detener la caída cuando llega a la parte inferior del área de juego:

Ejemplo

    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;
        }
    }

Inténtalo tú mismo "

Subir rápido

En un juego, cuando se tiene una fuerza que tira hacia abajo, usted debe tener un método para forzar el componente de acelerar hacia arriba.

Desencadenar una función cuando alguien hace clic en un botón, y hacer que el cuadrado rojo vuela en el aire:

Ejemplo

<script>
function accelerate(n) {
    myGamePiece.gravity = n;
}
</script>

<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.1)">ACCELERATE</button>
Inténtalo tú mismo "

Un juego

Hacer un juego basado en lo que hemos aprendido hasta ahora: