Błędny rycerz
Figurki
Janek uwielbia bawić się małymi figurami żołnierzy, rycerzy. Całymi godzinami ustawia je i bawi się w parady, rozgrywa starożytne bitwy, organizuje przemarsze.
Rycerze
Jego największą pasją są rycerze. Pędzący rycerze! Uwielbia obserwować jak poruszają się wzdłuż podłogi.
Remont
Niestety w domu jest remont i Janek nie może już bawić się figurkami na podłodze. Dlatego poprosił Ciebie o napisanie programu który będzie symulował pędzącego przez ekran rycerza. To nawet większy fan niż figurki na podłodze!
Twoja rola
Twoim zadaniem jest napisanie animacje w której kwadrat albo kółko (to właśnie błędny rycerz) pędzi przez ekran. Z góry na dół czy z lewej strony w prawą, czy po skosie – jak chcesz.
Chodzi o to by sprawić trochę radości młodszemu bratu!
Powodzenia!
Autor: Daniel Olkowski
#plansza {
background-color: green;
} //lightblue
Animacja
//Dowolny program w JavaScript ktory przeglarka wykona
let plansza_gry, rysowanie;
let X = -10;
plansza_gry = document.getElementById(“plansza”);
rysowanie = plansza_gry.getContext(“2d”);
function Animacja() {
rysowanie.clearRect(0, 0, 400, 200);
rysowanie.beginPath();
rysowanie.fillStyle = “purple”;
rysowanie.arc( X , 80, 10, 0, 2*Math.PI);
rysowanie.lineTo( X-10 , 90);
rysowanie.lineTo( X-10 , 110);
rysowanie.lineTo( X+10 , 110);
rysowanie.lineTo( X+10 , 90);
rysowanie.lineTo( X+20 , 90);
rysowanie.fill();
rysowanie.closePath();
//rysowanie.beginPath();
//rysowanie.fillStyle = “red”;
//rysowanie.arc( X , 90, 10, 0, 2*Math.PI);
//rysowanie.fill();
//rysowanie.closePath();
if( X >= 450) {
X = -10
}
X = X + 2
}
setInterval (Animacja, 10);
#plansza {
background-color: black;
}
Animacja
let plansza_gry, rysowanie;
let temp;
let niebieska_kulka_srodek_x = 50;
let niebieska_kulka_predkosc_x = 5;
plansza_gry = document.getElementById(“plansza”);
rysowanie = plansza_gry.getContext(“2d”);
function AnimacjaDwaKolka() {
rysowanie.clearRect(0, 0, 400, 200);
rysowanie.beginPath();
rysowanie.fillStyle = “green”;
// rysowanie.arc(niebieska_kulka_srodek_x, 100, 10, 0, 2*Math.PI);
rysowanie.fillRect(niebieska_kulka_srodek_x, 90, 30, 30);
rysowanie.fill();
rysowanie.closePath();
niebieska_kulka_srodek_x = niebieska_kulka_srodek_x + niebieska_kulka_predkosc_x;
if (niebieska_kulka_srodek_x 370) {
niebieska_kulka_predkosc_x = -1 * Math.abs (niebieska_kulka_predkosc_x);
}
}
setInterval (AnimacjaDwaKolka, 10);