docObraz w tle 1) Zliczanie i wyświetlanie bananów wypuszczonych i
download 
Reklamacja Transkrypt
Obraz w tle 1) Zliczanie i wyświetlanie bananów wypuszczonych i
Obraz w tle
<style>
body { background-image: url("jungle.jpg")}
1) Zliczanie i wyświetlanie bananów wypuszczonych i trafionych
przygotuj miejsce na wynik
<body>
<p id="wynik"></p>
przygotuj zmienne:
var licz = 0, traf = 0;
przy wypuszczeniu banana i przy trafieniu wypisz wynik
document.getElementById("wynik").innerHTML = traf + "/" + licz;
aby czcionka była widoczna na tle obrazka, ustaw jej w stylach jakiś jasny kolor, np;
#wynik {color: yellow }
Przy trafieniu 10-tym bananem:
2) zatrzymaj ruch małpy
var u;
// zmienna, id wątku animacji
u = setInterval(krokMalpy,100);
// uruchom wątek animacji i zapamiętaj jego id
clearInterval(u);
// zatrzymaj wątek animacji
3) zmień obrazek małpy na jakiś inny, np. hero.png
document.getElementById("malpa").setAttribute("src","hero.png") ;
4) zmierz czas w sekundach od chwili wyświetlenia strony do 10-go trafionego banana i wyświetl alert
var d, tp, tk;
d = new Date();
// d-aktualna data/czas: tp-czas początku, tk-czas końca
tp = d.getTime()
// milisekundy od północy 1 stycznia 1970 roku
d = new Date(); tk = d.getTime()
alert( (tk-tp)/1000 + " sekund" )
5) zamiast alertu wyświetl napis dużą żółtą czcionką mniej-więcej na środku ekranu, w tym celu
przygotuj blok <div>… </div> z odpowiednim napisem, na początku ukryty ( styl: display: none ),
a przy zakończeniu gry go odkryj (styl: display: block ),
w tym bloku przygotuj miejsce na wyświetlenie czasu gry.
w body:
<div id="gameover">
<p>
The game is over after <span id="czas"></span>
</p>
</div>
w stylach:
#gameover { position: absolute; left: 200px; top: 300px; display: none; color: yellow; font: 32px Arial bold }
w skrypcie:
document.getElementById("czas").innerHTML = (tk-tp)/1000 + " sekund"
document.getElementById("gameover").style.display = "block"
