НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
Графіка. Уроки W3Schools українською для початківців

En

Гра Гравітація


У деяких іграх діє сила, яка тягне ігровий компонент в одному напрямку, як гравітація тягне об’єкти на землю.




Гравітація

Щоб додати цю функцію до нашого конструктора компонентів, спочатку додайте властивість 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;
  }
Спробуйте самі »

Потрапити вниз

Щоб червоний квадрат не впав назавжди, зупиніть падіння, коли він торкнеться нижньої частини ігрової зони:

Приклад

  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;
    }
  }
Спробуйте самі »

Прискорення вгору

У грі, коли у вас є сила, яка тягне вас вниз, ви повинні мати спосіб змусити компонент прискорюватися.

Запускайте функцію, коли хтось натискає кнопку, і змусьте червоний квадрат злетіти в повітря:

Приклад

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

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

Гра

Створіть гру на основі того, що ви навчилися: