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

En

Гра Підстрибування


Цей червоний квадрат підстрибує, коли вдаряється об підлогу:




Стрибання

Ще одна функція, яку ми хочемо додати, це властивість bounce.

Властивість bounce вказує, чи компонент відскочить назад, коли сила тяжіння змусить його впасти на землю.

Значення властивості bounce має бути числом. 0 взагалі не означає відскоку, а 1 змусить компонент відскочити назад туди, де він почав падати.

Приклад

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.1;
  this.gravitySpeed = 0;
  this.bounce = 0.6;
 
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.hitBottom();
  }
  this.hitBottom = function() {
    var rockbottom = this.gamearea.canvas.height - this.height;
    if (this.y > rockbottom) {
      this.y = rockbottom;
      this.gravitySpeed = -(this.gravitySpeed * this.bounce);
    }
  }
}
Спробуйте самі »