Pelissä näet viisi sanaa, sitten ne poistetaan ja tilalle tulee 10 sanaa joista yksi oli noiden viiden joukossa. Muistatko mikä?
https://petke.info/muistipeli/
Myönnän: epäsiistiä koodia, mutta se toimii! Mikä minulle on tärkeintä. Yritin ensin saada chatGPT:n ohjelmoimaan tän pelin, mutta ei se tuntunut tajuavan mitään, lopulta aloin itse koodaamaan ja se olikin paljon mukavampaa itseasiassa. chatGPT alkoi jo ärsyttämään!!
<!DOCTYPE html>
<head>
<title>Muistipeli</title>
<style>
.center {
text-align: center;
border: 3px solid green;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.div {
border: 5px outset green;
background-color: lightblue;
text-align: center;
}
.b2 {
text-align: center;
align: center;
font-size: 30px;
border: none;
}
</style>
</head>
<html>
<body>
<h2>Sinulle näytetään 10 sekunnin ajan viittä sanaa ja sen jälkeen kymmenen sanaa, joista sinun pitää valita jokin noiden viiden joukosta</h2>
<button class="button" onclick="myFunction()">Aloita uusi peli</button>
<div class="b2" id="myDiv1"></div>
<div class="b2" id="myDiv2"></div>
<div class="b2" id="myDiv3"></div>
<div class="b2" id="myDiv4"></div>
<div class="b2" id="myDiv5"></div>
<hr>
<button class="b2" id="button1" onclick="tarkista(0)"></button>
<button class="b2" id="button2" onclick="tarkista(1)"></button>
<button class="b2" id="button3" onclick="tarkista(2)"></button>
<button class="b2" id="button4" onclick="tarkista(3)"></button>
<button class="b2" id="button5" onclick="tarkista(4)"></button>
<button class="b2" id="button6" onclick="tarkista(5)"></button>
<button class="b2" id="button7" onclick="tarkista(6)"></button>
<button class="b2" id="button8" onclick="tarkista(7)"></button>
<button class="b2" id="button9" onclick="tarkista(8)"></button>
<button class="b2" id="button10" onclick="tarkista(9)"></button>
<script>
var indeksi=Math.floor(Math.random() * 10);
function myFunction() {
var sanat = [
"auto", "kissa", "pöytä", "tuoli", "koira", "kukka", "kynä", "kirja", "puu", "omena",
"juna", "kello", "kala", "lintu", "pullo", "hevonen", "lasi", "kivi", "paita", "laukku",
"kukkaro", "hame", "pipo", "hattu", "reppu", "talo", "ovi", "ikkuna", "pensas", "maa",
"aurinko", "kuu", "tähti", "lampi", "meri", "joki", "tie", "silta", "metsä", "vuori",
"ranta", "pelto", "lumi", "sade", "pilvi", "varjo", "kamera", "näyttö", "nappi", "näppäimistö",
"hiiri", "pöytäliina", "kuppi", "lautanen", "haarukka", "veitsi", "lusikka", "pannu", "kattila", "uuni",
"liesi", "sänky", "peitto", "tyyny", "kaappi", "hylly", "tikkaat", "matto", "kello", "peili",
"ovi", "ikkuna", "piha", "portti", "penkki", "terassi", "ruoho", "nurmi", "maito", "leipä",
"juusto", "voi", "muna", "karkki", "suklaa", "karkkipaperi", "omena", "banaani", "appelsiini", "mansikka",
"viinirypäle", "kirsikka", "päärynä", "vihannes", "peruna", "porkkana", "kurkku", "tomaatti", "paprika", "salaatti"
];
var divElement = document.getElementById("button1");
divElement.innerHTML = " ";
divElement = document.getElementById("button2");
divElement.innerHTML = " ";
divElement = document.getElementById("button3");
divElement.innerHTML = " ";
divElement = document.getElementById("button4");
divElement.innerHTML = " ";
divElement = document.getElementById("button5");
divElement.innerHTML = " ";
divElement = document.getElementById("button6");
divElement.innerHTML = " ";
divElement = document.getElementById("button7");
divElement.innerHTML = " ";
divElement = document.getElementById("button8");
divElement.innerHTML = " ";
divElement = document.getElementById("button9");
divElement.innerHTML = " ";
divElement = document.getElementById("button10");
divElement.innerHTML = " ";
naytettavat=[];
while (naytettavat.length < 5) {
var sana = sanat[Math.floor(Math.random() * sanat.length)];
if (!(naytettavat.includes(sana))) {
naytettavat.push(sana);
}
}
console.log(naytettavat);
document.getElementById("myDiv1").innerHTML=naytettavat[0];
document.getElementById("myDiv2").innerHTML=naytettavat[1];
document.getElementById("myDiv3").innerHTML=naytettavat[2];
document.getElementById("myDiv4").innerHTML=naytettavat[3];
document.getElementById("myDiv5").innerHTML=naytettavat[4];
// Pelikello
setTimeout(function() {
alert("10 sekuntia on kulunut!");
var valittuSana = naytettavat[Math.floor(Math.random() * naytettavat.length)];
naytettavat2=[];
var sanat10=[];
while (sanat10.length < 10) {
var sana = sanat[Math.floor(Math.random() * sanat.length)];
if (!(sanat10.includes(sana) && (sana!=valittuSana))) {
sanat10.push(sana);
}
}
console.log(sanat10);
var divElement = document.getElementById("myDiv1");
divElement.innerHTML = " ";
divElement = document.getElementById("myDiv2");
divElement.innerHTML = " ";
divElement = document.getElementById("myDiv3");
divElement.innerHTML = " ";
divElement = document.getElementById("myDiv4");
divElement.innerHTML = " ";
divElement = document.getElementById("myDiv5");
divElement.innerHTML = " ";
if (indeksi==0) {
document.getElementById("button1").innerHTML=valittuSana;
} else {
document.getElementById("button1").innerHTML=sanat10[0];
}
if (indeksi==1) {
document.getElementById("button2").innerHTML=valittuSana;
} else {
document.getElementById("button2").innerHTML=sanat10[1];
}
if (indeksi==2) {
document.getElementById("button3").innerHTML=valittuSana;
} else {
document.getElementById("button3").innerHTML=sanat10[2];
}
if (indeksi==3) {
document.getElementById("button4").innerHTML=valittuSana;
} else {
document.getElementById("button4").innerHTML=sanat10[3];
}
if (indeksi==4) {
document.getElementById("button5").innerHTML=valittuSana;
} else {
document.getElementById("button5").innerHTML=sanat10[4];
}
if (indeksi==5) {
document.getElementById("button6").innerHTML=valittuSana;
} else {
document.getElementById("button6").innerHTML=sanat10[5];
}
if (indeksi==6) {
document.getElementById("button7").innerHTML=valittuSana;
} else {
document.getElementById("button7").innerHTML=sanat10[6];
}
if (indeksi==7) {
document.getElementById("button8").innerHTML=valittuSana;
} else {
document.getElementById("button8").innerHTML=sanat10[7];
}
if (indeksi==8) {
document.getElementById("button9").innerHTML=valittuSana;
} else {
document.getElementById("button9").innerHTML=sanat10[8];
}
if (indeksi==9) {
document.getElementById("button10").innerHTML=valittuSana;
} else {
document.getElementById("button10").innerHTML=sanat10[9];
}
}, 10000); // 10000 millisekuntia = 10 sekuntia
}
function tarkista(painettu) {
if (indeksi==painettu) {alert("Loistavaa! Muistit oikein!");
} else {
alert("muistit väärin!");
}
}
</script>
</body>
</html>Tuossa on ainakin sellainen bugi, että oikea sana tai useampi ensimmäisessä listassa ollut sana voi esiintyä 10 sanan joukossa kaksi (tai useamman) kertaa jolloin vain yksi valinta kelpaa, vaikka oikeita siis on useampi.
Ei voi esiintyä kahta kertaa mikään sana.
if (!(sanat10.includes(sana) && (sana!=valittuSana)))
Tuossa tarkistetaan, että 10 joukossa ei ole arvottua sanaa && ettei se ole arvottu sana.
Tuossahan tarkistetaan että joko 10 joukossa ei ole arvottua sanaa tai sana on valittu sana. Eli mitään muuta sanaa kuin arvottua sanaa ei voi esiintyä kahteen kertaan.
Myös "Aloita uusi peli" nappia useamman kerran peräkkäin painettaessa voisi olla hyvä tarkastaa onko ajastin jo käynnissä...
Grez kirjoitti:
Tuossahan tarkistetaan että joko 10 joukossa ei ole arvottua sanaa tai sana on valittu sana. Eli mitään muuta sanaa kuin arvottua sanaa ei voi esiintyä kahteen kertaan.
Mitä sekoilet? sana!=valittuSana..., sulla lauseessa "tai" sana.
jalski kirjoitti:
Myös "Aloita uusi peli" nappia useamman kerran peräkkäin painettaessa voisi olla hyvä tarkastaa onko ajastin jo käynnissä...
Jos käyttäjä ei tajua olla painamatta "Aloita uusi peli" nappia silloin kun pelaa, niin on kyllä tyhmempi kuin ohjelmoija.
PetriKeckman kirjoitti:
Mitä sekoilet? sana!=valittuSana..., sulla lauseessa "tai" sana.
Sinähän se tässä sekoilet. Tai vähintäänkin boolen logiikan perusteet on hakusessa...
!(a && b) //on sama kuin: (!a || !b)
eli
if (!(sanat10.includes(sana) && (sana!=valittuSana))) //on sama kuin: if (!sanat10.includes(sana) || sana==valittuSana)
!(a) && !(b) siinä on.
PetriKeckman kirjoitti:
Jos käyttäjä ei tajua olla painamatta "Aloita uusi peli" nappia silloin kun pelaa, niin on kyllä tyhmempi kuin ohjelmoija.
Kyllähän sinun tuo väärinkäytön mahdollisuus ohjelmoijana kuuluisi silti huomioida...
jalski kirjoitti:
PetriKeckman kirjoitti:
Jos käyttäjä ei tajua olla painamatta "Aloita uusi peli" nappia silloin kun pelaa, niin on kyllä tyhmempi kuin ohjelmoija.
Kyllähän sinun tuo väärinkäytön mahdollisuus ohjelmoijana kuuluisi silti huomioida...
Antaa pelaajan olla vaan tyhmä, jos hän sellaista haluaa olla.
Grez kirjoitti:
boolen logiikan perusteet on hakusessa...
Jos ei yliopistossa suoritetut logiikan kurssit 3/3 arvosanalla riitä, niin mikä sulle riittäisi? Pitäisikö olla Logiikan professori?
PetriKeckman kirjoitti:
niin mikä sulle riittäisi?
Ihan se riittäisi että osaisit lukea omaa koodiasi ja tietäisit mitä se tekee.
Tuossa lauseessanikin oli tai-sana, eli senkin puitteissa on täysin mahdollista että logiikka on sinulla täydellisesti hallussa, mutta vaan sekoilet. Ja helpostihan sitä sekoaa noiden sulkujen kanssa. Erehtyminen on inhimillistä. Silti vähän epäkohteliasta väittää, että minä sekoilen, vaikka olet itse väärässä.
Eihän siinä rivillä tarvitse kuin siirtää se ensimmäinen huutomerkki yhden sulun verran enemmän oikealle, niin se tekee mitä pitäisi.
if (!(sanat10.includes(sana) && (sana!=valittuSana))) // korjattu ==> if ((!sanat10.includes(sana) && (sana!=valittuSana)))
Grez kirjoitti:
Tuossa lauseessanikin oli tai-sana,
Niin, sinun väärässsä lauseesasi "tai" sana mitä sitten? Sait sen aikaiseksi väärällä logiikalla.
sana!=valittuSana on ihan sama kuin !(sana=valittuSana).
Luovuta jo, tai saat turpiin jos tuut tänne.
PetriKeckman kirjoitti:
Niin, sinun väärässsä lauseesasi "tai" sana mitä sitten?
Viittasin siis tämän lauseen tai-sanaan:
PetriKeckman kirjoitti:
Sinähän se tässä sekoilet. Tai vähintäänkin boolen logiikan perusteet on hakusessa...
Mutta siis joo enpä tässä nyt jaksa enempää rautalangasta vääntää. Se on minulle aivan sama kuinka virheellisesti pelisi toimii, jos sinua ei kiinnosta kerran korjata.
PetriKeckman kirjoitti:
sana!=valittuSana on ihan sama kuin !(sana=valittuSana).
Tämä menee nyt jo aika pahasti aiheen ohi, mutta nuohan eivät ole yhtään samat. Ensimmäinen vertailee sana ja valittuSana muuttujia ja jälkimmäinen sijoittaa valittuSana muuttujan sisällön muuttujaan sana ja sitten palauttaa negaation sana -muuttujan arvosta.
Jos jälkimmäisessä olisi viimeisen = -merkin tilalla == niin ne olisivat sama asia, mutta edelleenkään ei ole olennaista asian kannalta.
Anna mulle empiirinen todiste: ota screengrabbi tilenteesta, nissä koodi toimii väärin.
Grez kirjoitti:
Jos jälkimmäisessä olisi viimeisen = -merkin tilalla == niin ne olisivat sama asia, mutta edelleenkään ei ole olennaista asian kannalta.
Se oli pseudokoodia.
Grez kirjoitti:
Mutta siis joo enpä tässä nyt jaksa enempää rautalangasta vääntää.
Tulkitsen tuon luovuttamiseksi ja väärässä olon tunnustamiseksi.
PetriKeckman kirjoitti:
Anna mulle empiirinen todiste: ota screengrabbi tilenteesta, nissä koodi toimii väärin.
Sinänsä hupaisasti ihan ensimmäisellä kerralla kun tuota peliä kokeilin, niin yksi viidestä sanasta oli appelsiini ja kymmenen vaihtoehdon joukossa oli kaksi kertaa appelsiini. Klikkasin ensimmäistä ja se sanoi että muistin väärin. Klikkasin toista ja se sanoi että muistin oikein. En valitettavasti silloin ottanut screenshotia. En siis todellakaan lähtenyt tonkimaan koodia ja etsimään sieltä bugeja, vaan ihan vaan käytännön testinä tuohon törmäsin.
Voisin toki pelata niin monta kertaa että vastaava tilanne tulee uudelleen, mutta luultavasti screenshot tilanteesta johtaisi vain väitteeseen että kuva on väärennetty jne.
PetriKeckman kirjoitti:
Tulkitsen tuon luovuttamiseksi ja väärässä olon tunnustamiseksi.
Sinä voit tulkita sen ihan miten haluat :D
Toisaalta jos haluat oppia jotain tänään, niin voit lukea nuo aikaisemmin kirjoittamani viestit uudelleen ajatuksella. Haastan löytämään yhdenkin viestin minulta tässä ketjussa, jossa on asiavirhe.
Tässä nyt vielä kuvankaappauskin, vaikka äsken epäilin ettei siitä ole hyötyä
https://ibb.co/3S0Q5tT
Tuossa siis esiintyy kukka kaksi kertaa.
OK! Huutomerkin kanssa! Olit oikeassa! Pyydän anteeksi kiivastumistani! Saanko?
Ehtolauseessani oli tosiaankin sulkuvirhe. Se olisi pitänyt olla:
(!(sanat10.includes(sana)) && (sana!=valittuSana))
Korjaa jos olen tässäkin! väärässä?
Yliopistokurssit suoritettu 80-luvulla.
Toki saat kiivastumisen anteeksi. Hyvä että vika korjaantui ja tuo korjattu versio näyttää ihan ok:lta.
Sitten tosiaan toinen ongelma oli että sieltä voi tulla muitakin kuin valittu sana 5 ensin näytetyn joukosta. Tämäkin korjaantuisi varmaankin seuraavalla muutoksella:
while (sanat10.length < 10) {
var sana = sanat[Math.floor(Math.random() * sanat.length)];
if (!(sanat10.includes(sana) || naytettavat.includes(sana))) {
sanat10.push(sana);
}
}Grez kirjoitti:
(18.06.2023 22:36:40): Toki saat kiivastumisen anteeksi. Hyvä että...
Joo. Ehkä. Pitäis koodia korjata, mutten jaksa..ainakaan nyt. Paha bugihan tuo toinenkin oli, mutta sinänsä helpottaa vaan pelaajaa...kun siellä onkin mahdollisuus olla useampikin 5 joukosta.
Itse tekisin funktion mikä sekoittaisi taulukon sisällön. Sitten splittaisin sekoitetun sanataulukon kahdeksi uudeksi taulukoksi siten, että toisessa taulukossa olisi viisi sanaa ja toisessa taulukossa loput sanat. Nyt loppujen sanojen taulukosta ottaa yhdeksän sanan mittaisen siivun ja viiden sanan mittaisesta taulukosta työntää yhden sanan siihen ja sekoittaa.
jalski kirjoitti:
Itse tekisin funktion mikä sekoittaisi taulukon sisällön. Sitten splittaisin...
Joo. Kuulostaa paljon helpommalta. En vaan oo koskaan mitään splittiä käyttänyt ja näillä aivoilla ja tässä iässä voi uuden omaksuminen olla liian haastavaa :)
Jalskin idean voisi myös toteuttaa niin, että arpoo 14 satunnaista sanaa joista näytetään ensin 5 ensimmäistä ja sitten 10 viimeistä.
Sanalistassa on kuitenkin muutama kahdesti esiintyvä sana, jotka pitäisi siivota pois, jotta tämä toimisi halutulla tavalla.
Ja kun lapsukswt on korjattu, niin copy/paste -koodia voisi siistiä ja miettiä, miten tehdä rutiineja paljon toistuville asioille, joissa vain jokin merkkijonon numero muuttuu. Selkeyttäisi koodia ja vähentäisi kirjoitusvirheistä johtuvia mahdollisia ongelmia. Samalla pelistä saisi helposti sellaisen, että saisi "vaikeustasoa" vaihdettua vaihtamalla etsittävien sanojen määrää.
Aihe on jo aika vanha, joten et voi enää vastata siihen.