Keskustelu: Nettisivujen teko: JavaScript matopeli

Olen aina halunnut tehdä matopelin, mutta en ole osannut tai jaksanut. Nyt jaksoin ja tässä on lopputulos. Peli on täysin JavaScriptillä tehty.

Risuja, ruusuja ja muutosehdotuksia otetaan vastaan (sen takia tänne kirjoitinkin).

Ihan kiva :). Perus toteutus ja toimiva, jos jotain haluaa lisätä niin aina silloin tällöin tulevat erikoissyömäpalat, joista saa enemmän pisteitä. Niiden pitäisi myös poistua kentältä esim. 10sek päästä.

Eka odotin perus ASCIImättöä, mutta tämä yllätti, hyvin tehty. :D

Taustalle kehittelet jonku matoaiheisen kuvion niin olé.

Pienensin vielä tuota kenttää ja nopeutin matoa hieman, tosin kuka vaan tehdä tämän sillä ovat vain muuttujan takana.

punppis kirjoitti:

Pienensin vielä tuota kenttää ja nopeutin matoa hieman, tosin kuka vaan tehdä tämän sillä ovat vain muuttujan takana.

Mut harvapa jaksaa/osaa alkaa tota säätään ^^

Noh, siellä on asetukset ihan sitä säätöä varten. Jos joku haluaa vaikka omille sivuilleen laadukkaan matopelin =D

Käsitinkö oikein siis tätäkö saa kopioida omille sivuilleen kunhan ei väitä omakseen?

edit: toimii FF 3.5 Beta 4, IE 8 ja Chrome-selaimilla ainakin. Operaa en jasksanu testata.

Olli kirjoitti:

Käsitinkö oikein siis tätäkö saa kopioida omille sivuilleen kunhan ei väitä omakseen?

edit: toimii FF 3.5 Beta 4, IE 8 ja Chrome-selaimilla ainakin. Operaa en jasksanu testata.

Juu siitä vaan.

Ihan tyylikäs matopeli on :).

Onnistuin kuitenkin joutumaan pelissä tilanteeseen, jossa kentällä ei näkynyt ruokaa ollenkaan.
Pikaisen koodin katselemisen perusteella luulisin tämän koodinpätkän olevan syyllinen:

if(ruoka_ok) {
	syoRuoka();
}
else {
//...
}

taynna(x, y);
paa(x, y); // väritetään pää

Uusi ruoka generoidaan ennen uuden pään sijainnin täyttämistä, joten ruoka tulee ylikirjoitetuksi, jos se satutaan generoimaan samaan ruutuun, kuin mihin ollaan juuri siirtymässä.

Nyt ruoka generoidaan vasta tuon madon liikkumisen jälkeen. Sisuaskin kannattaa laittaa lotto vetämään.

punppis kirjoitti:

Sisuaskin kannattaa laittaa lotto vetämään.

Jaaha :D Tuohon tilanteeseen ei kovin suurta mahdollisuutta siis ei ole päästä?

Olli kirjoitti:

Jaaha :D Tuohon tilanteeseen ei kovin suurta mahdollisuutta siis ei ole päästä?

1 / (25 * 35) = 0,00114, kun jätetään täydet ruudut huomiotta. Oikeasti siis hieman suurempi.

Ihan siisti peli. Itse generoisin tuon pelilaudankin JS:llä, sen verran monta ruutua on. Samalla säästyisi getElementById:n käytöltä.

Metabolix kirjoitti:

1 / (25 * 35) = 0,00114, kun jätetään täydet ruudut huomiotta. Oikeasti siis hieman suurempi.

Siis syönti epäonnistuu yli todennäköisyydellä 0,11429 % eli onnistuu alle todennäköisyydellä 99,88571 %. Edelleen 10 syönnin sarja onnistuu alle todennäköisyydellä 98,86300 %, 100 syönnin sarja onnistuu alle todennäköisyydellä 89,19448 % ja 1000 syönnin sarja onnistuu alle todennäköisyydellä 31,86982 %. Eli jos syö pelissä 1000 kertaa, luultavasti virhe tapahtuu ainakin kerran – ellei punppis olisi korjannut sitä.

Metabolix kirjoitti:

Ihan siisti peli. Itse generoisin tuon pelilaudankin JS:llä, sen verran monta ruutua on. Samalla säästyisi getElementById:n käytöltä.

Miten tuon pelikentän saisi toteutettua JavaScriptillä, tai siis tehdäänhän table nytkin js:llä, mutta onko tähän joku järkevämpikin tapa? Miksi pitää säästyä getElementById:n käytöltä, onko tuo jotenkin hidasta?

Olen ihan noviisi tämän JS:n kanssa, joten neuvoja kaivataan!

Fx:n lähdekoodinkatselu johdatti harhaan ja näytti tuon JS:n tulostaman koodinkin HTML:nä, enkä huomannut, että se oli luotu document.writellä. Toinen tapa on käyttää DOMia. Tällöin pelikenttä pitää luoda vasta, kun sivu on ladattu kokonaan.

var taulu = [];
function getId(x, y) {
  return taulu[y][x];
}
function luo() {
  // Sivulle voi valmiiksi tulostaa vaikka tyhjän divin pelikenttää varten,
  // jotta se on helppo luoda jälkikäteen oikeaan paikkaan.
  var div = document.getElementById("pelikentta");

  var table = document.createElement("table");
  div.appendChild(table);
  var tbody = document.createElement("tbody");
  table.appendChild(tbody);
  for (var y = 0; y < 25; ++y) {
    var tr = document.createElement("tr");
    tbody.appendChild(tr);
    taulu[y] = [];
    for (var x = 0; x < 35; ++x) {
      var td = document.createElement("td");
      tr.appendChild(td);
      td.className = "tyhja";
      taulu[y][x] = td;
    }
  }
}
window.onload = luo;