Edytor zadań - arcanoid cz. 7

Opis

Arcanoid w `canvas cz.7`- kolizje cegieł

Kliknij na przycisk "Pokaż".

Stworzymy cykliczne rysowanie kulki, paletki oraz murku z cegiełek. Połączymy w jednej funkcji rysowanie płótna rysowanie kulki, paletki i murku oraz zmienimy położenie następnego rysowania paletki (jeśli będzie ruch myszką) i kulki. Cegła będzie rysowana jeśli jej status == 1. Piłka na dolnej krawędzi gdzie nie ma paletki oznacza KONIEC GRY

Ustawienie płótna do rysowania canvas na pełnym oknie, zmienne
+dokładamy status cegły (==1 to rysujemy)
Funkcje rysowania koła, paletki i murku z cegieł
+ rysujemy już tylko istniejące cegły (status == 1), na początku będą wszystkie
Funkcja rysowania całości - połączenie czynności: czyszczenie, rysowanie, zmiany.
+ dokładamy wywołanie funkcji kolizji
Detektor zdarzeń i funkcja obsługi ruchów myszy/paletki
+ dopisaliśmy funkcję wykrywania i obsługi kolizji piłka/murek, przy 'zderzeniu' cegła otrzyma status ==0 a piłka zmieni kierunek
Cykliczne wywoływanie funkcji rysowania co 10ms (0.01s) w zmiennej, która pozwoli zakończyć animację

Kod

👀

//--------------- zmienne ---------------
ballRadius = 10;
var x = ballRadius;
var y = canvas.height-ballRadius;
var dx = 1;
var dy = -1;

var paletkaH = 10; //wysokość paletki
var paletkaW = canvas.width/8; //szerokość paletki
var paletkaX = (canvas.width-paletkaW) / 2;

//------zmienne cegiełek -------
var brickRowCount = 3; //rzędy
var brickColumnCount = 8; //kolumny
var brickHeight = 20;  //wysokość
var brickPadding = 5;  //odstępy między
var brickOffsetTop = 30; //odstęp od góry
var brickWidth = Math.round((canvas.width-brickColumnCount*brickPadding)/9);
var brickOffsetLeft = Math.round((canvas.width - (brickWidth+brickPadding)*brickColumnCount+brickPadding)/2);

//---2---- RYSOWANIE KOŁA -------
function drawBall() {
   ctx.beginPath();
   ctx.arc(x, y, ballRadius, 0, Math.PI*2);
   ctx.fillStyle = "#0095DD";
   ctx.fill();
   ctx.closePath();
}
//---2.1---- RYSOWANIE PALETKI -------
function drawPaletka() {
    ctx.beginPath();
    ctx.rect(paletkaX, canvas.height-paletkaH-2, paletkaW, paletkaH);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.closePath();
}
//---2.2---- RYSOWANIE MURKU -------
function drawBricks() {
  for(var c=0; c<brickColumnCount; c++) {
   for(var r=0; r<brickRowCount; r++) {
    // rysujemy tylko istniejące cegły
    if (bricks[c][r].status == 1) {
     var brickX = (c*(brickWidth+brickPadding)) +brickOffsetLeft;
     var brickY = (r*(brickHeight+brickPadding)) +brickOffsetTop;
     bricks[c][r].x = brickX;
     bricks[c][r].y = brickY;
     ctx.beginPath();
     ctx.rect(brickX, brickY, brickWidth, brickHeight);
     ctx.fillStyle = "lightgreen";
     ctx.fill();
     ctx.closePath();
	}
  }
 }
}

//--3-- CZYSZCZENIE, RYSOWANIE, ZMIANY----
function draw() {
 ctx.fillStyle = "hsl(0, 0%, 0%, 0.1)";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 drawBall();
 drawPaletka(); 
 drawBricks();      // +rysujemy murek
 collisionDetection(); // piłka+murek
 if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
 }
 //sprawdzamy na dolnej krawędzi:
 if (y + dy < ballRadius) {
 dy = -dy;
 } else if (y + dy > canvas.height-ballRadius) {
  if(x > paletkaX && x < paletkaX + paletkaW) {
        dy = -dy;
  }
  else {
        alert("GAME OVER");
        document.location.reload();
        clearInterval(interval);
  }
}
    x += dx;
    y += dy;
}

//--4-- DETEKTOR + funkcja zdarzeń
document.addEventListener("mousemove", mysz, false);

Podgląd:

📂

Arcanoid w canvas cz.7- kolizje cegieł

Arcanoid w `canvas cz.7`- kolizje cegieł