Pankaapa piin desimaalit järjestykseen, jos muistatte niitä...Näin tietokoneiden ja taskulaskinten aikana opetteleeko kukaan edes piin desimaaleja ulkoa? Itse kouluikäisenä opettelin niitä noin 60 kpl.
Siis tuollainen "laattojen vaihtopeli"...Javascriptilla.
Ohjelman kehityskulusta johtuen, koodi ei ole ehkä kovin loogista. Aluksi mulla oli piin desimaalit aina samassa sotketussa järjestyksessä, mutta nyt sivua ladatessa arvotaan aina uusi järjestys. Muutostyö oli uskomattoman vaikea, mulle. Meinasin jo heittää pyyhkeen kehään. Tappelin koodin kanssa, vaikka oleellista oli numeroida myös kuvat uudestaan. Älkää perhana sanoko mulle, että ohjelmointi olisi aina helppoa! Ohjelma ei näytä mitä laattaa on painettu, mutta ei se nyt niin oleellista ole. Siis ideana aina painaa kahta laattaa ja vaihtaa niiden paikkaa.
Ja hauskaa juhannusaattoa! Älkääpä kasvattako hukkumistilastoja.
PetriKeckman kirjoitti:
Pankaapa piin desimaalit järjestykseen, jos muistatte niitä...Näin tietokoneiden ja taskulaskinten aikana opetteleeko kukaan edes piin desimaaleja ulkoa? Itse kouluikäisenä opettelin niitä noin 60 kpl.
Mä opettelin joskus jonkun verran. Tein tämmösen harjottelua varten: http://laire.fi/3/
PetriKeckman kirjoitti:
Älkää perhana sanoko mulle, että ohjelmointi olisi aina helppoa!
Jos joku on tätä mieltä, koodaa ehkä liian helppoja juttuja.
jlaire kirjoitti:
Mä opettelin joskus jonkun verran. Tein tämmösen harjottelua varten: http://laire.fi/3/
Hah hahhaa! :) :) Paitsi, että jos aioit opiskella vain kymmenen ensimmäistä desimaalia,
3.14159 26535...
niin tuo viimeinen vitonen olisi pitänyt pyöristää ylöspäin 6:ksi, sillä seuraava numero on 8.
3.14159 265358...
Jostain käsittämättömästä syystä tuhlasin aikaani tekemällä oman version laattapelistä. Ehkä PetriKeckman voi katsoa koodia ja oppia siitä pari niksiä, vaikka toki en ole mikään tyyliguru.
<!DOCTYPE html>
<html>
<body>
<p class="instructions">Klikkaa laattoja, vaihda paikkoja,<br>järjestä piin desimaalit.</p>
<div class="game">3.1415926535897932384626</div>
<p class="congrats">Onneksi olkoon, voitit!</p>
<style>
html {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.game {
display: inline-flex;
flex-wrap: wrap;
max-width: 24rem;
}
.game .char {
display: inline-block;
box-sizing: border-box;
width: 3.4rem;
height: 3.4rem;
margin: 0.3rem;
font-size: 2rem;
text-align: center;
line-height: 3.4rem;
border: 0.1rem solid black;
background: #eef;
color: #000;
transition: background 0.5s;
cursor: pointer;
}
.char.selected, .char:hover:not(.selected):not(.disabled) {
background: #9f9;
}
.char.selected {
transition: unset;
}
.char.disabled {
background: #ccc;
}
.done .char {
background: #fd0 !important;
}
.instructions {
text-align: center;
}
.congrats {
text-align: center;
font-size: 2rem;
visibility: hidden;
opacity: 0;
transition: opacity 2s;
}
.done + .congrats {
visibility: initial;
opacity: 1;
}
</style>
<script>
"use strict";
(() => {
let game = document.querySelector(".game");
let text = game.textContent;
let prev;
let done = false;
function swap() {
if (done || this.classList.contains("disabled")) {
return;
}
this.classList.add("selected");
if (!prev) {
prev = this;
} else {
[prev.textContent, this.textContent] = [this.textContent, prev.textContent];
prev.classList.remove("selected");
this.classList.remove("selected");
done = game.textContent == text;
game.classList.toggle("done", done);
prev = null;
}
}
game.textContent = "";
for (let a = text.split(""); a.length;) {
let c = game.appendChild(document.createElement("span"));
c.classList.add("char");
c.textContent = a.splice(Math.random() * a.length | 0, 1)[0];
c.addEventListener("click", swap);
}
})();
</script>Piin desimaalien laskentakaavojen vertailua voinee jatkaa eri keskustelussa.
PetriKeckman kirjoitti:
jos aioit opiskella vain kymmenen ensimmäistä desimaalia
jlaireen pelin käyttöliittymä ei ilmeisesti valjennut sinulle, mutta kokeilepa painaa numeronäppäimiä, niin pääset pelaamaan.
PetriKeckman kirjoitti:
vitonen olisi pitänyt pyöristää ylöspäin
Minusta tuo on sikäli huono idea, että opittua lukua ei kuitenkaan käytetä laskuissa ja siten pyöristetystä desimaalista on vain haittaa myöhemmässä jatko-opettelussa.
PetriKeckman kirjoitti:
Ohjelman kehityskulusta johtuen, koodi ei ole ehkä kovin loogista.
Ehkä oudointa koodissasi on var- ja let-sanojen käyttö. Tiesitkö, että let-sana määrittelee JavaScriptissa muuttujan ja const olisi vakio? Nykyään var-sanaa ei juuri käytetä sen erikoisten ominaisuuksien takia.
Metabolix kirjoitti:
Jostain käsittämättömästä syystä tuhlasin aikaani tekemällä oman version laattapelistä. Ehkä PetriKeckman voi katsoa koodia ja oppia siitä pari niksiä, vaikka toki en ole mikään tyyliguru.
Kiitos! Koitan tutustua koodiin - vaikka myönnän: mulla on omaksi huviksi ohjelmoidessani täysin väärä asenne so. pääasia, että ohjelma toimii. Pelasin peliäsi ja se oli hieno.
Metabolix kirjoitti:
jlaireen pelin käyttöliittymä ei ilmeisesti valjennut sinulle, mutta kokeilepa painaa numeronäppäimiä, niin pääset pelaamaan.
Ah jaa! No ei tosiaankaan valjennut! :) :) Manuaali puuttui ;) Siis minä luulin juttua täysin joksikin oudoksi vitsiksi, että jlaire oli opetellut kymmenen ensimmäistä desimaalia ja laittanut muistinsa tueksi ne webbisivulleen.
Nyt kun kun pelasin peliä, niin sehän oli tosi mainio sovellus!!
Metabolix kirjoitti:
Tiesitkö, että let-sana määrittelee JavaScriptissa muuttujan ja const olisi vakio?
Empä tiennyt. Viittaan kuitenkin vähän edelliseen lausuntooni: oli pääasia, että ohjelma toimi jotenkuten.
Aihe on jo aika vanha, joten et voi enää vastata siihen.