Kirjoittaja: Juhko
Kirjoitettu: 18.02.2009 – 18.02.2009
Tagit: koodi näytille, vinkki
Näytöllä edestakaisin pomppiva pallo, joka käyttää hyväkseen CSS:ää. Kuvan määritys onnistuu helposti muuttamalla <img>-tagin src-attribuuttia. Laitoin esimerkkiä varten pallokuvan (50x50) omalle sivustolleni.
Jos haluat monta palloa, voit laittaa niiden nimet taulukoihin.
Edit: Korjattu muutama huolimattomuusvirhe.
Edit: Pallokuvan osoite korjattu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Pomppiva pallo</title>
<style type="text/css">
body {
background-color: #30a0ff;
}
.pomppu {
width: 5;
height: 5;
position: fixed;
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
moveTimer = setTimeout(move, 10); //ajastin
//näitä saa muuttaa
var x = 0; //koordinaatit
var y = 0;
var w = 50; //leveys
var h = 50; //korkeus
var speed = 3; //nopeus (x-suunnassa)
var force = 5; //pompun voimakkuus
var gravity = 0.1; //painovoima
var id = "eka" //kohteen id
//näitä ei saa muuttaa
var b = 0; //y-nopeus
var xw = speed; //x way eli liike x-suunnassa
function move() {
moveTimer = setTimeout(move, 10) //ajastin
//liikutukset
x = x + xw;
y = y + b;
b = b - gravity;
if (y < 0) b = force;
if (x < 0) xw = speed;
if (x > screen.width - w) xw = -speed;
document.getElementById(id).style.left = x; //varsinainen liikutus
document.getElementById(id).style.bottom = y;
document.getElementById(id).style.width = w; //varsinaiset mitat
document.getElementById(id).style.height = h;
}
</script>
<div class="pomppu" id="eka"><img src="http://jjp.jouluserver.com/pallo.gif"></div>
</body>
</html>Hienolta näyttää! Plussaa simppelistä skriptistä.
Ainakin minulla (käytössä Ubuntu ja Firefox 3) screen.width palauttaa koko näytön leveyden, ja kun selainikkuna on sitä pienempi, pallo menee välillä sen ulkopuolelle. Täällä on listattu, miten ikkunan leveyden saa tietää eri selaimissa.
Hyvä koodivinkki ehdottomasti, lisää näitä! :-) Putkassa ei olekaan kovin montaa JavaScript-vinkkiä.
Joo, tätä pitää vielä parannella. Mutta mukavaa, että pidätte tästäkin. :)
Voitko kertoa miten saa toimimaan wiki-sivulla? vaikkapa sielä ylhäällä olevan ykon tilalle? olisi jännä...
JavaScript-koodi pitää ujuttaa common.js- tai monobook.js-tiedostoon.
kiitos