JavaScript + canvas

Opis

JavaScript w `canvas`

Kliknij na przycisk "Pokaż".

Tworzymy szare kulki, które pożywiają się napotkanymi kulkami - rosną i nabierają koloru.

Ustawienie płótna do rysowania canvas na pełnym oknie
Tworzymy funkcję konstruktora obiektów
Dodajemy do konstruktora metody korzystając z własności propotype obiektu
Tworzymy tablicę z obiektami kulek i po stworzeniu każdej wrzucamy ją na koniec tablicy
Tworzymy metodę postępowania przy zderzeniach, mają się powiększać i zwiększąć nasycenie koloru
Pętla sprawdzania wszystkich kulek i odświeżania płótna

Kod

👀

<canvas></canvas> //płótno

//----1---- USTAWIENIE canvas ---------------
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;

//---------- funkcja - liczba losowa
function random(min, max) {
  const num = Math.floor(Math.random() * (max - min + 1)) + min;
  return num;
}

//----2--- KONSTRUKTOR obiektów (kul)---------
function Ball(x, y, velX, velY, odcien, nasycenie, size) {
  this.x = x;
  this.y = y;
  this.velX = velX;
  this.velY = velY;
  this.odcien= odcien;
  this.nasycenie = nasycenie;
  this.color = 'hsl(' + odcien + ', '+ nasycenie +', 50%)';
  this.size = size;
}

//---3--- DODANIE METOD do konstruktora ----
//-- korzystając z właściwości Object.prototype --
Ball.prototype.draw = function() {
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
  ctx.fill();
}

Ball.prototype.update = function() {
  if ((this.x + this.size) >= width) {
    this.velX = -(this.velX);
  }
  if ((this.x - this.size) <= 0) {
    this.velX = -(this.velX);
  }
  if ((this.y + this.size) >= height) {
    this.velY = -(this.velY);
  }
  if ((this.y - this.size) <= 0) {
    this.velY = -(this.velY);
  }
  this.x += this.velX;
  this.y += this.velY;
}

//----4--- Tablica kulek i ich produkcja -------
let balls = [];

while (balls.length < 80) {
 let size = random(1,2);
 let ball = new Ball(
// pozycja kulki zawsze rysowana jest co najmniej o jedną jej szerokość od krawędzi płótna, aby uniknąć błędów rysowania
 random(0 + size,width - size),
 random(0 + size,height - size),
 random(-4,2),  //szybkość x
 random(-2,4),  //szybkość y
 random(0, 360), //dowolna barwa na kole barw
    "1%", //prawie bez nasycenia na początku
 size   //wielkość losowa w zmiennej
  );

balls.push(ball);
}

//-----5---- Dodanie metody zderzeń --------
Ball.prototype.collisionDetect = function() {
  for (let j = 0; j < balls.length; j++) {
    if (!(this === balls[j])) {
      const dx = this.x - balls[j].x;
      const dy = this.y - balls[j].y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      if (distance < this.size + balls[j].size) {
        if (balls[j].size <= this.size) {
         this.size += balls[j].size;
//zwiększamy nasycenie ale ma % na końcu, musimy zamienić na liczbę i z powrotem dać %
         this.nasycenie = parseFloat(this.nasycenie)*1.6+"%";
         this.color = 'hsl(' + this.odcien +', ' + this.nasycenie + ', 50%)';
         balls.splice(j,1); //usuwamy kulkę
         if (balls.length==1) alert("Koniec");
        }
      }
    }
  }
}

//----6--- PĘTLA CAŁOŚCI + ODŚWIEŻANIE------
function loop() {
  //----- kolor canvas czarny, przezroczysty ----
 ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
 ctx.fillRect(0, 0, width, height);
  //----- zajmujemy się każdą kulką ----------
 for (let i = 0; i < balls.length; i++) {
   balls[i].draw();
   balls[i].update();
   balls[i].collisionDetect();
 }
 requestAnimationFrame(loop);
}

loop();

</script>

Podgląd:

📂

JavaScript w canvas

JavaScript w `canvas`