Последние учебники веб-разработки
 

HTML Игра Гравитация


Некоторые игры имеют силы, которая тянет компонент игры в одном направлении, как сила тяжести тянет предметы на землю.




Сила тяжести

Чтобы добавить эту функциональность для нашего компонента конструктора, сначала добавьте gravity свойство, которое устанавливает текущую силу тяжести. Затем добавьте gravitySpeed свойство, которое увеличивает каждый раз, когда мы обновляем кадр:

пример

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 ;
    }
}
Попробуй сам "

Хит Bottom

Для того, чтобы предотвратить красный квадрат от падения навсегда, остановить падение, когда она попадает в нижней части игрового поля:

пример

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

Попробуй сам "

разгоняться

В игре, когда у вас есть сила, которая тянет вас вниз, вы должны иметь метод, чтобы заставить компонент для ускорения до.

Trigger функцию, когда кто-то нажимает на кнопку, и сделать красный квадрат летать в воздухе:

пример

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

<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.1)">ACCELERATE</button>
Попробуй сам "

Игра

Сделать игру, основанную на том, что мы узнали до сих пор: