Oppaat

Alkuun HTML 5 peliohjelmoinnissa
Kirjoittaja: Paavo Räisänen
1.Alkusanat
HTML5 on uusi multimediaohjelmointikieli, joka syrjäyttänee ainakin osittain Adoben Flashin ja Microsoftin Silverlightin. Sekä Adobe, että Microsoft ovat mukana HTML5 kielen kehittämisessä. HTML5 tekniikka perustuu HTML kielen, CSS3:n ja JavaScriptin yhdistämiseen ja tuo HTML standardiin paljon uutta.
Vaikka tämä opas on alkeisopas, tässä oletetaan, että osaat jotain ohjelmoinnista, ja eritoten HTML kielestä, CSS:stä ja JavaScriptistä. Oppaassa tehdään pingispeli, joka on tietynlainen pelimaailman ”Hello World” ohjelma, ja löytyy useista peliohjelmointioppaista. Oppaassa käytetään apuna jQuery JavaScript kirjastoa, joka on ilmaiseksi imuroitavissa netistä.
2. Alkuun
Tee kansio nimeltä ”Pingis” ja sinne alikansio ”js”. Lataa jQuery osoitteesta http://jquery.com/ ja tallenna se js kansioon. Käytän tässä oppaassa versiota jquery-1.9.1.min.js .
Tee html tiedosto nimeltä index.html ”js” kansioon ja kirjoita sinne koodi:
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="charset=iso-8859-1">
 <title>Pingis</title>
</head>
<body>
 <header>
   <h1>Pingis peli</h1>
 </header>
 <footer>
  Tässä pieni testiohjelma.
 </footer>
 <script src="jquery-1.9.1.min.js"></script>
 <script>
 $(function(){
  alert("Tervetuloa testaamiseen.");
  });
  </script>
</body>
</html>
Tällä rivillä <script src="query-1.9.1.min.js"></script> sisällytetään jQuery kirjasto koodiin. Tämä koodi
<script>
 $(function(){
  alert("Tervetuloa testaamiseen.");
  });
  </script>
lisätään jQueryä käytettäessä poikkeuksellisesti <body> tagien sisään, jQuery määritteen jälkeen. Normaali käytäntöhän on sijoittaa JavaScript koodi <head> tagien sisään.
 $(function(){
 //koodia
});
tarkoittaa samaa kuin
jQuery(function(){
 //koodia
});
mutta on lyhyemmin ilmaistu. Ilmaisu tarkoittaa, että scriptiä käytetään yhdessä jQuery kirjaston kanssa. $ merkillä lyhennetään ”jQuery”.
Nämä tarkoittavat siis samaa:
$(document).ready(function)
ja
jQuery(document).ready(function)
3. Pelinäkymä
Muokkaa index.html tiedosto seuraavanlaiseksi:
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="charset=iso-8859-1">
 
 
 <style>
 #pelialue{
  background: #00c700;
  width: 600px;
  height: 300px;
  position: relative;
  overflow: hidden;
 }
 #pallo{
  background: #f8ea0d;
  width: 20px;
  height: 20px;
  left: 300px;
  top: 150px;
  position: absolute;
  border-radius: 10px;
 }
 .maila{
  background: #4c45e0;
  width: 20px;
  height: 50px;
  left: 50px;
  top: 70px;
  position: absolute;
 }
 #maila2{
  left: 320px;
 }
</style>
 
</head>

<body>
 <header>
   <h1>Pingis peli</h1>
 </header>
 <footer>
  Tässä pieni testiohjelma.
 </footer>
 <script src="jquery-1.9.1.min.js"></script>
 <script src="pingisJs.js"></script>

  <div id="peli">
   <div id="pelialue">
    <div id="maila1" class="maila"></div>
    <div id="maila2" class="maila"><,/div>
    <div id="pallo"></div>
   </div>
  </div>
6lt;/body>
</html>
Tee JavaScript tiedosto nimeltä ”pingisJs” ja kirjoita sinne seuraava koodi:
$(function() {
 $("#maila2").css("top", "20px");
 $("#maila1").css("top", "60px");
});
HTML5 koodissa lauseessa <script src="pingisJs.js"></script> sisällytetään JavaScript koodi html5 koodiin. Ajettaessa index.html tiedosto, näkymä on seuraava: image/guide/2/html5-1.jpg
4. Koordinanteista
Kun css koordinanteissa antaa määritteen ”absolute”, käyttää ohjelma ”top” ja ”left” määritteitä kuten koordinantteja X (left) ja Y (top). Huomioi, että Y (top) kasvaa alaspäin, eli päinvastoin kuin matemaattinen koordinantisto.
Näissä annoimme määritteen ”absolute”:
#pallo{
  background: #f8ea0d;
  width: 20px;
  height: 20px;
  left: 300px;
  top: 150px;
  position: absolute;
  border-radius: 10px;
 }
 .maila{
  background: #4c45e0;
  width: 20px;
  height: 50px;
  left: 50px;
  top: 70px;
  position: absolute;
 }
Sensijaan määre ”relative” annettiin, kun määriteltiin pelialueen koko.