Edytor zadań - arcanoid cz. 6

Opis

Arcanoid w `canvas cz.6`- murek

Kliknij na przycisk "Pokaż".

Stworzymy cykliczne rysowanie kulki (+odbicia od krawędzi), paletki w zależności od zmiennych oraz dodatkowo murku z cegiełek. Połączymy w jednej funkcji rysowanie płótna (usuwamy tym poprzednie rysunki), rysowanie kulki, paletki i murku oraz zmienimy położenie następnego rysowania paletki (jeśli będzie ruch myszką) i kulki. Odbicie będzie od paletki, piłka na dolnej krawędzi gdzie nie ma paletki oznacza KONIEC GRY

Ustawienie płótna do rysowania canvas na pełnym oknie, zmienne
+zmienne i stworzenie tablicy cegiełek
Funkcje rysowania koła, paletki i murku z cegieł
Funkcja rysowania całości - połączenie czynności: czyszczenie, rysowanie, zmiany.
Detektor zdarzeń i funkcja obsługi ruchów myszy/paletki
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
//obliczenie szerokości cegiełek by się zmieściły
var brickWidth = Math.round((canvas.width-brickColumnCount*brickPadding)/9);
//obliczenie wolnego miejsca na odstęp
var brickOffsetLeft = Math.round((canvas.width - (brickWidth+brickPadding)*brickColumnCount+brickPadding)/2);

var bricks = [];   //stworzenie tablicy cegiełek
for(var c=0; c<brickColumnCount; c++) {
    bricks[c] = [];
    for(var r=0; r<brickRowCount; r++) {
        bricks[c][r] = { x: 0, y: 0 };
    }
}

//---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++) {
    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
 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);

function mysz(e) {
    var relativeX = e.clientX - canvas.offsetLeft;
    if(relativeX > 0 && relativeX < canvas.width) {
        paletkaX = relativeX - paletkaW/2;
    }
}

//----5--- ODŚWIEŻANIE RYSOWANIA ---------
//---zmienna pomoże zakończyć animację----
var interval = setInterval(draw, 10);
</script>
</body>

Podgląd:

📂

Arcanoid w canvas cz.6- murek

Arcanoid w `canvas cz.6`- murek