Edytor zadań - ruch w canvas cz. 5

Opis

Gra arcanoid w `canvas cz.5`

Kliknij na przycisk "Pokaż".

Stworzymy cykliczne rysowanie kulki (+odbicia od krawędzi) i paletki (ruchy w zależności od myszki) w zależności od zmiennych. Połączymy w jednej funkcji rysowanie płótna (usuwamy tym poprzednie rysunki), rysowanie koła i paletki i zmienimy położenie następnego ich rysowania. Wykrywać będziemy ruch myszy i ustawiać tak środek paletki. Odbicie będzie teraz tylko 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
Funkcje rysowania koła i paletki
Funkcja rysowania całości - połączenie czynności: czyszczenie, rysowanie, zmiany.
+ Jeśli kulka osiągnie dolną krawędź i w tym miejscu nie ma paletki to gra zostanie zakończona: alert, zakończenie animacji i przeładowanie strony
Detektor zdarzeń ruchów myszy
Funkcja obsługi ruchów myszą - ruch 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 = 75; //szerokość paletki
var paletkaX = (canvas.width-paletkaW) / 2;

//---2--- RYSOWANIE KOŁA w zależności od x, y --
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();
}

//--3-- CZYSZCZENIE, RYSOWANIE, ZMIANY----
function draw() {
 ctx.fillStyle = "hsl(0, 0%, 0%, 0.1)";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 drawBall();
 drawPaletka(); 
    
 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 zdarzeń - mysz
document.addEventListener("mousemove", mysz, false);

//-5- FUNKCJA obsługi ruchów myszki - paletki--
function mysz(e) {
    var relativeX = e.clientX - canvas.offsetLeft;
    if(relativeX > 0 && relativeX < canvas.width) {
        paletkaX = relativeX - paletkaW/2;
    }
}

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

Podgląd:

📂

Gra arcanoid w canvas cz.5

Gra arcanoid w `canvas cz.5`