Edytor zadań - ruch w canvas cz.4

Opis

Ruch i sterowanie klawiaturą w `canvas cz.4.1`

Kliknij na przycisk "Pokaż".

Stworzymy ruch paletki w zależności od detekcji klawiszy strzałek.

Ustawienie płótna do rysowania canvas na pełnym oknie, zmienne paletki
Funkcje rysowania paletki
Funkcja rysowania całości - połączenie czynności: czyszczenie, rysowanie, zmiany położenia paletki w zależności od wciskania klawiszy strzałek.
Jeśli paletka będzie na granicy canvas to tam zostanie mimo wciskania klawisza (warunek).
Cykliczne wywoływanie funkcji rysowania co 10ms (0.01s)
Dodano detektory zdarzeń: wciskanie i puszczanie klawisza wywołuje teraz odpowiednie funkcje: wcisnietoKlawisz i puszczonoKlawisz
Funkcje obsługi klawiszy po wciśnięciu i puszczeniu. Badanie czy to klawisz strzałki - zazwyczaj to ArrowRight i ArrowLeft ale w Edge to Right i Left. Wciśnięcie dokładnie tych klawiszy (zdarzenie przechowuje tę wartość w e.key) spowoduje zmianę wartości zmiennych rightPressed lub leftPressed z false na true. Puszczenie ich - ustawia z powrotem false

Kod

//--------------- zmienne ---------------
var paletkaH = 10; //wysokość paletki
var paletkaW = 75; //szerokość paletki
var paletkaX = (canvas.width-paletkaW) / 2;
var rightPressed = false; //klawisz nie wciśnięty
var leftPressed = false;  //klawisz nie wciśnięty

//---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);
 drawPaletka(); 
 if(rightPressed) {
    paletkaX += 5;
    if (paletkaX + paletkaW > canvas.width){
        paletkaX = canvas.width - paletkaW-2;
    }
 }
 else if(leftPressed) {
    paletkaX -= 5;
    if (paletkaX < 2){
        paletkaX = 2;
    }
 }    
}

//--5-- Detektory zdarzeń - klawisze
document.addEventListener("keydown", wcisnietoKlawisz, false);
document.addEventListener("keyup", puszczonoKlawisz, false);

//--6-- funkcje obsługi klawiszy strzałek

function wcisnietoKlawisz(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = true;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") 
   {
        leftPressed = true;
    }
}

function puszczonoKlawisz(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") 
   {
        leftPressed = false;
    }
}

//----4--- ODŚWIEŻANIE RYSOWANIA ---------
setInterval(draw, 10);
</script>

Podgląd:

📂

Ruch i sterowanie klawiaturą w canvas cz.4.1

Ruch i sterowanie klawiaturą w `canvas cz.4.1`