Kirjautuminen
Tehtävät
Kilpailu
4. kierros:
7.11. klo 18 – 9.11. klo 23
Yksinkertainen matopeli JavaScriptillä. Peliä voi testata tästä.
Koodi on mieletäni hyvin kommentoitua (paitsi HTML-osuus on vähän sekava).
<html>
<head>
<title>Matopeli</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
var x = 0, y = 0, Suunta = 2, Pituus = 5; //Varataan x, y, suunta ja pituudelle
var x2 = new Array(), y2 = new Array(); //Madon pisteiden sijainnit
var t; //Timeout (ajastin
var l = 50, k = 50; //Alueen koko
var hx = new Array(), hy = new Array(), Pisteet = 0, Määrä = 3; //Pisteiden sijaintitaulukot, omat pisteet ja pisteitä kaikkiaan
var i = 0; //Looppeja varten
var Pyorii = false; //pyöriikö peli
//Alustaminen
function onLoad() {
document.getElementById("Pysauta").value = "Aloita"; //Asetetaan aloitus/pysäytä napin arvo
document.getElementById("Asetukset").style.display = "none"; //Asetetaan asetukset piilotetuiksi
clearTimeout(t); //Tyhjennetään ajastin
//Asetetaan alustasta punainen
for (x = 0; x < l; x++) {
for (y = 0; y < k; y++) {
Hae(x, y).bgColor = "#FF0000";
}
}
//Asetetaan madon sijainti taulukkoon
for (i = 0; i <= Pituus; i++) {
x2[i] = i; y2[i] = 0;
}
//Sijainti ja suunta
x = Pituus;
y = 0;
Suunta = 2;
//Peli ei pyöri
Pyorii = false;
//Asetetaan pisteet ja pisteiden sijainnit
Pisteet = 0;
for (i = 0; i < Määrä; i++) {
hx[i] = l - 1; hy[i] = k - 1;
Pojo(i);
}
}
//Hakee pisteen tietystä sijainnista
function Hae(x, y) {
return document.getElementById("R" + x.toString() + " " + y.toString())
}
//Pelin päivitys
function Tarkista() {
Pyorii = true; //Peli pyörii
t = setTimeout("Tarkista();", 100); //Ajastin
document.getElementById("In").focus(); //Asetetaan focus inputille
var Arvo = document.getElementById("In").value; //Ja luetaan sen arvo
//Ja käsotellään se
//If-lauseet: Tarkistetaan ettei vain tehdä 180 asteen käännöstä
switch (Arvo.toLowerCase()) {
case "a":
if (Suunta != 2) Suunta = 1;
break;
case "d":
if (Suunta != 1) Suunta = 2;
break;
case "w":
if (Suunta != 4) Suunta = 3;
break;
case "s":
if (Suunta != 3) Suunta = 4;
break;
}
//tuhjennetään tekstikenttä
document.getElementById("In").value = "";
//Ja piirretään
Piirra();
}
//Piirtää madon
function Piirra() {
//Jos madon "hännän" päällä ei ole pistettä, väritettään se punaiseksi (taustaksi)
if (Hae(x2[0], y2[0]).bgColor != "#00FF00")
Hae(x2[0], y2[0]).bgColor = "#FF0000";
//Käsitellään madon suunta
switch (Suunta.toString()) {
case "1":
x = x - 1;
break;
case "2":
x = x + 1;
break;
case "3":
y = y - 1;
break;
case "4":
y = y + 1;
break;
}
//Siirretään taulukkoa, jotta madon häntä olisi paikalla 0
for (i = 0; i < Pituus; i++) {
x2[i] = x2[i + 1];
y2[i] = y2[i + 1];
if (x == x2[i] && y == y2[i]) Hävisit(); //Jos törmättiin
}
//Reunan yli meno
x = x % l; y = y % k;
if (x < 0) x = l - 1;
if (y < 0) y = k - 1;
//Pisteiden tarkistus
for (i = 0; i < Määrä; i++) {
if (x == hx[i] && y == hy[i]) {
Pisteet = Pisteet + 1; //Lisätään pisteitä
Pituus = Pituus + 1; //Ja madon pituutta
Pojo(i); //Sijoitetaan piste uusiksi
break;
}
}
//Taulukon viimeisestä madon pää
x2[Pituus] = x; y2[Pituus] = y;
//Ja väritetään se
Hae(x, y).bgColor = "#0000FF";
}
function Hävisit() {
//Pysäytetään ajastin
clearTimeout(t);
//Ilmoitetaan häviämisestä
alert("Hävisit:(");
//Alustetaan peli
//Asetetaan aloitus/pysäytä napin arvo
document.getElementById("Pysauta").value = "Aloita";
//Taulukosta taas punainen
for (x = 0; x < l; x++) {
for (y = 0; y < k; y++) {
Hae(x, y).bgColor = "#FF0000";
}
}
//Ladataan asetukset samalla
Pituus = parseInt(document.getElementById("Pit").value); //Luetaan pituus
Määrä = parseInt(document.getElementById("Pist").value); //Luetaan pisteiden määrä
//Madon taulukon alustus
for (i = 0; i <= Pituus; i++) {
x2[i] = i; y2[i] = 0;
}
//Ja madon alustus
x = Pituus;
y = 0;
Suunta = 2;
//Peli on pausella
Pyorii = false;
//Ja vielä pisteet
Pisteet = 0;
for (var i2 = 0; i2 < Määrä; i2++) {
hx[i2] = l - 1; hy[i2] = k - 1;
Pojo(i2);
}
}
function Pojo(i) {
//Pisteet pelaajan näkyviin
document.getElementById("P").innerHTML = Pisteet.toString();
//Vanha piste punaiseksi (taustaksi)
Hae(hx[i], hy[i]).bgColor = "#FF0000";
//Arvotaan uusi pisteen sijainti
var ux = Math.round(Math.random() * (l - 1));
var uy = Math.round(Math.random() * (k - 1));
//Tarkistetaan ettei kaksi pistettä mene päällekkäin
for (j = 0; j < Määrä; j++) {
if (ux == hx[j] && uy == hy[j] && i != j) {
Pojo(i); //Jos pisteessä onkin piste niin kutsutaan itseä
break; break; //Ei suoriteta funktiota loppuun
}
}
//Asetetaan arvo
hx[i] = ux;
hy[i] = uy;
//Ja pisteestä vihreä
Hae(hx[i], hy[i]).bgColor = "#00FF00";
}
//Asetusten näyttö ja piilotus (ks. https://www.ohjelmointiputka.net/koodivinkit/23850-javascript-tekstin-piilotus-n%C3%A4ytt%C3%B6 )
function AsetuksetNP() {
if (document.getElementById("Asetukset").style.display == "") {
document.getElementById("Asetukset").style.display = "none";
document.getElementById("AsetuksetNP").innerHTML = "Näytä asetukset"
}
else {
document.getElementById("Asetukset").style.display = "";
document.getElementById("AsetuksetNP").innerHTML = "Piilota asetukset"
}
}
//pysäyttää pelin
function Pysauta() {
if (Pyorii) {
//Pelin pyöriessä pysäytetään peli ja laitetaan teksti "Jatka"
document.getElementById("Pysauta").value = "Jatka";
clearTimeout(t);
Pyorii = false;
}
else {
//Pelin ollessa pysäytettynä jatketaan peliä ja tekstiksi "Pysäytä"
document.getElementById("Pysauta").value = "Pysäytä";
t = setTimeout("Tarkista();", 100);
Pyorii = true;
}
}
//Kun asetuksia muutetaan
function Kauta() {
Pituus = parseInt(document.getElementById("Pit").value); //Luetaan pituus
Määrä = parseInt(document.getElementById("Pist").value); //Luetaan pisteiden määrä
onLoad(); //Ja alustetaan peli
}
// ]]>
</script>
</head>
<body onload="return onLoad();">
<span lang="fi">Pisteesi:</span><span id="P"></span>
<table>
<tr>
<td>
<table width="500" height="500">
<script language="javascript" type="text/javascript">
//Luodaan taulukko (helpompaa näin)
for (i = 0; i < k; i++) {
document.write("<tr>"); //Uusi rivi
for (j = 0; j < l; j++) {
document.write("<td id='" + "R" + j.toString() + " " + i.toString() + "'</td>"); //Uusi sarake riville
}
document.write("</tr>"); //Lopetetaan tagi
}
</script>
</table>
</td>
<td>
<span lang="fi">Sinistä matoa ohjataan WASD-näppäimillä ja yritetään
kerätä vihreitä pistetä.
<br />
<br />
Asetuksista voit säätää madon aloituspituutta (suositellaan
alle 50, jottei selain kaadu) ja ruoan (vihreiden pisteiden) määrää.
<br />
<br />
Mukavia pelihetkiä!</span>
<br />
<input id="Pysauta" type="button" value="Pysäytä" onclick="Pysauta();" />
<input id="Aloita" type="button" value="Aloita alusta" onclick="return onLoad();" />
<br />
<a href="javascript:AsetuksetNP();" id="AsetuksetNP">Näytä asetukset</a>
<div id="Asetukset">
<span lang="fi">Madon pituus:<input id="Pit" type="text" maxlength="3" value="5" />
<br />
Ruoan määrä:<input id="Pist" type="text" maxlength="4" value="3" />
<br />
<input id="Kauta" type="button" value="Käytä" onclick="Kauta();" />
</span>
</div>
</td>
</tr>
</table>
<input id="In" name="In" maxlength="1" size="1" />
</body>
</html>"<!CDATA[" on väärin kirjoitettu, oikein olisi "<![CDATA[".
Toteutus ei ole kovin mallikelpoinen. Esimerkiksi globaali muuttuja i silmukoita varten on melkoista pelleilyä ja aiheuttaa helposti virheitä, jos jossain silmukassa kutsutaan funktiota, joka sisältää myös silmukan.
Koodi on myös sekavaa, eikä asiaa varmasti auta se, että vinkistä puuttuu kokonaan selostus koodin rakenteesta ja pelin sisällöstä. Luin koodia useita minuutteja, ja pääsin tuskin alkuun sen ymmärtämisessä; jos tuon mittainen koodi olisi hyvin kirjoitettu, olisin minuutissa tarkistanut sen perusrakenteen ja tässä ajassa jo selvittänyt melko perusteellisesti koko toiminnan. Nyt sen sijaan en jaksa edes tutkia koodia loppuun asti.
Tiedän että se on todella sekavaa ja näin jälkeen päin ajateltuna en ihmettele, ettei julkaistu. CDATA juttu on Visual Studion tekemä, enkä sellaista edes lisää omiin koodeihini. Pitäisi varmaan...
CDATA-lohko on tarpeen JS- ja CSS-koodin ympärillä (turvallisimmin /*-*/-kommentin sisällä), jotta sivu olisi validia XHTML:ää kyseisissä koodeissa esiintyvistä merkeistä < ja > huolimatta. Kuitenkin vielä parempi on laittaa erilliset koodit erillisiin tiedostoihin ja liittää ne sivulle tähän tapaan:
<script type="text/javascript" src="koodi.js"></script>
<style type="text/css">
@import url("tyyli.css");
</style>Aihe on jo aika vanha, joten et voi enää vastata siihen.