Keskustelu: Nettisivujen teko: Muistipeliä tekemässä

Vasta_alkaja [12.11.2007 17:22:31]

Itse en ole vielä kerennyt edes asiaan tutustuaan, mutta ajattelin kysyä kuitenkin, jos teillä olisi antaa hyviä vinkkejä.

Jos minulla on 4x8 taulu, niin miten saisin taulun soluihin satunnaisen id:n 1-10

PS. Tämä siksi, että suunnittelen, miten olisi helppo toteuttaa yksinkertainen muistipeli sovellus.

Apuna, php, mysql sekä javascript.

Onko kenelläkään hyviä ideoita ?

Merri [12.11.2007 18:09:07]

Pistä taulukkomuuttuja kasaan jossa on numerot järjestyksessä, sitten valitset jäljellä olevien lukumäärän mukaan satunnaisen ID:n jonka vedät irti taulukosta, olikohan se array_pop jolla saa elementin vaikka keskeltä irroitettua (en ole sattunut tarvitsemaan, mutta bongannut sen pariin kertaan funktiolistauksesta). Sitten jatkat poistelua siihen asti kunnes on vaan yksi jäljellä, joka on jo itsestäänselvä sijoittaa viimeiseksi satunnoituun taulukkoon.

tsuriga [12.11.2007 18:40:48]

array_shift ottaa alusta, array_splice keskeltä ja array_pop lopusta. Range, shuffle ja array_pop -kombinaatiolla toteuttaisin satunnaisen uniikkien ID:iden hakemisen, mutta haettiinko tässä nyt sitä? Kun noita soluja on enempi entä id:itä..

jlaire [12.11.2007 19:57:33]

JavaScriptissä Math.random palauttaa satunnaisluvun väliltä 0-1. Taulukon saa täytettyä kokonaisluvuilla väliltä 1-10 näin:

var taulu = new Array(8), i, j;
for (i = 0; i < 8; i++) {
    taulu[i] = new Array(4);
    for (j = 0; j < 4; j++) {
        taulu[i][j] = Math.floor(Math.random() * 10 + 1);
    }
}

Vasta_alkaja [12.11.2007 20:11:40]

Kiitoksia näistä vastauksista. Pitää alkaa illalla kokeilemaan ja vielä palaan aika varmaan asiaan.

Antti Laaksonen [12.11.2007 20:27:12]

Jos tarkoitus on, että taulukossa ei ole mitä tahansa arvoja, vaan esim. jokaista arvoa kaksi kertaa, kuten muistipelissä yleensä on, yksi hyvä kikka on sijoittaa aluksi kaikki arvot taulukkoon järjestyksessä ja sitten vaihtaa riittävän monta kertaa kaksi satunnaisesti valittua arvoa keskenään, jolloin taulukko menee sekaisin.

Vasta_alkaja [12.11.2007 22:50:34]

Ajattelin lähteä etenemään niin, että pari löytyy aina logiikalla tulos = 1

Eli

1-2 = -1
3-4 = -1
5-6 = -1
jne...

Eli teen taulukon, jossa id:t 1,2,3,4,5......
Kun löytyy tulos = -1, niin pari on löytynyt.

Antti Laaksonen [12.11.2007 22:57:25]

Tuo onkin ihan ovela mekanismi. Eli käytännössä kaksi kuvaa, joilla on peräkkäiset tunnusnumerot (joista pienempi on pariton), muodostavat parin.

Vasta_alkaja [12.11.2007 23:36:30]

# Luodaan taulukko, jossa luvut 1-10
$numerot = range(1, 20);

# Sekoitetaan numerot
shuffle($numerot);

# Luodaan taulun aloitustagi
echo '<table align="center" border="1">';

# Listataan taulun osat muuttujiin ja käydään ne läpi each:hilla.
while(list(, $numero) = each($numerot))
{
    ## Eli tässä 0000123
    echo "<td id='$numero' class='nurin_td' onclick=\"alert(id)\"> &nbsp; </td>";
}
echo '</table>';
?>

Miten voin lasket tuossa ##0000123 kohdassa, että joka viides arvo tulostetaan <tr> tagit, että saisin tuon kasattua neljälle eri riville.

Blaze [12.11.2007 23:39:52]

Vasta_alkaja kirjoitti:

Miten voin lasket tuossa ##0000123 kohdassa, että joka viides arvo tulostetaan <tr> tagit, että saisin tuon kasattua neljälle eri riville.

https://www.ohjelmointiputka.net/oppaat/opas.php?tunnus=mat1

Vasta_alkaja [13.11.2007 08:49:30]

Tässä on vaihtoehdot, millä pari täsmää.

1-2 = -1
2-1 = 1
Kaksi perättäistä 1-2 2-1 Pienempi aina pariton.

Lebe80 [13.11.2007 12:20:22]

Vasta_alkaja: miksi noin vaikeasti, kun voisit laittaa jokaiselle "kortille" saman arvon, jotka ovat toistensa pareja. Eli 1 on 1:n pari ja 2 on 2:n pari. Jokaista numeroa olisi siis kaksi kappaletta (ts. pari) taulukossa.

Taulukko voisi olla vaikka (tosin sekoitettuna), uskoisin että taulukon arvojen tarkistus olisi näin paljon yksinkertaisempaa.

edit:
eli siis kuten Antti jo aikaisemmin sanoi. En näe mitä hyötyä tuolla "peräkkäisellä" numeroinnilla saavutetaan (1-2 = -1), kun voidaan vertailla suoraan ( 1 = 1 )

Resiina [13.11.2007 14:31:32]

funktio kirjoitti:

JavaScriptissä Math.random palauttaa satunnaisluvun väliltä 0-1. Taulukon saa täytettyä kokonaisluvuilla väliltä 1-10 näin:
var taulu = new Array(8), i, j;
for (i = 0; i < 8; i++) {
    taulu[i] = new Array(4);
    for (j = 0; j < 4; j++) {
        taulu[i][j] = Math.floor(Math.random() * 10 + 1);
    }
}

Eikös tuossa laiteta taulukkoon kokonaislukuja väliltä 1-11, eikä 1-10?
Jos Math.random() = 1, niin Math.random() * 10 + 1 = 11. Vai olenko kenties väärässä?

Lebe80 [13.11.2007 14:47:39]

Olet väärässä.

Math.random() * 10 palauttaa luvun 0 - 9.99999999, joka Math.floorin läpi käytettyä saa arvon 0 - 9, ja tähän kun lisätään +1, niin saadaan tulokseksi 1-10.

edit:
offtopic:
Liian usein näen Math.round():a käytettävän Math.randomin kanssa, jolloin saadaan tulos välillä 0-1 ( Math.round( Math.random()*10 ) = 0-10 ), tosin, todennäköisyydet ensimmäiselle (0) ja viimeiselle (10) esiintyä on paljon pienemmät kuin kaikille muille luvuille, ja näin ollen Math.round()-funktiota ei saa koskaan käyttää satunnaislukujen pyöristämiseen.

Vasta_alkaja [13.11.2007 19:27:38]

Kenelläkään vinkkejä, ajax-sista hyviä oppaita..

Eli ongelmana on se, että valittuani kortin. (id) valittuani toisen (id) aikaisempi on jo historiaa. Eli pitäisi saada hieman vuorovaikutteisuutta vai onnistuuko se ihan perus javascriptillä.

Antti Laaksonen [13.11.2007 22:02:16]

Tarkoitatko suunnilleen tällaista järjestelmää?

<script>
var tila = 0;
var eka, toka;

function valinta(kortti) {
    if (tila == 0) {
        eka = kortti;
        tila = 1;
    } else if (tila == 1) {
        toka = kortti;
        alert("Valitsit kortit " + eka + " ja " + toka);
        tila = 0;
    }
}
</script>

<img width="100" height="100" onclick="valinta(1);">
<img width="100" height="100" onclick="valinta(2);">
<img width="100" height="100" onclick="valinta(3);">
<img width="100" height="100" onclick="valinta(4);">
<img width="100" height="100" onclick="valinta(5);">

Tämän voi tehdä myös PHP:llä, joskin sivu täytyy ladata uudestaan välillä.

Vasta_alkaja [13.11.2007 22:18:37]

Suunnilleen tuota.. Eiköhän se tuosta irtoa. Lähdin itse heti ajattelemaan tuota liian monimutkaisella tavalla.

Vasta_alkaja [14.11.2007 19:55:36]

Ennen kuin tästä jatkan, niin haluaisin kommenttia.

Ei näin vaan näin :D

<html>
<head>
<style type="text/css">
.Pelilauta{
    vertical-align:middle;
    height:50%
}
.pohja{
    background:rgb(191,191,191);
    border-width:1px 2px 2px 2px;
    border-style:groove;
    border-color:grey;
}
body{
    background:;
}
.nurin_td{
    border:1px solid black;
    height:105px;
    width:100px;
    background:teal;
}
</style>
<script type="text/javascript">
var tila = 0;
var eka, toka, lopputulos;

function valinta(kortti)
{

    if (tila == 0)
    {

        eka = kortti;

        if(kortti == 1 || kortti == 2)
        document.getElementById(kortti).style.background = "red";

        if(kortti == 3 || kortti == 4)
            document.getElementById(kortti).style.background = "green";

        if(kortti == 5 || kortti == 6)
            document.getElementById(kortti).style.background = "blue";

        if(kortti == 7 || kortti == 8)
            document.getElementById(kortti).style.background = "brown";

        if(kortti == 9 || kortti == 10)
            document.getElementById(kortti).style.background = "yellow";

        if(kortti == 11 || kortti == 12)
            document.getElementById(kortti).style.background = "orange";

        if(kortti == 13 || kortti == 14)
            document.getElementById(kortti).style.background = "mediumvioletred";

        if(kortti == 15 || kortti == 16)
            document.getElementById(kortti).style.background = "yellowgreen";

        if(kortti == 17 || kortti == 18)
            document.getElementById(kortti).style.background = "olive";

        if(kortti == 19 || kortti == 20)
        document.getElementById(kortti).style.background = "indigo";

        tila = 1;
    }
    else if (tila == 1)
    {

        if(kortti == 1 || kortti == 2)
        document.getElementById(kortti).style.background = "red";

        if(kortti == 3 || kortti == 4)
            document.getElementById(kortti).style.background = "green";

        if(kortti == 5 || kortti == 6)
            document.getElementById(kortti).style.background = "blue";

        if(kortti == 7 || kortti == 8)
            document.getElementById(kortti).style.background = "brown";

        if(kortti == 9 || kortti == 10)
            document.getElementById(kortti).style.background = "yellow";

        if(kortti == 11 || kortti == 12)
            document.getElementById(kortti).style.background = "orange";

        if(kortti == 13 || kortti == 14)
            document.getElementById(kortti).style.background = "mediumvioletred";

        if(kortti == 15 || kortti == 16)
            document.getElementById(kortti).style.background = "yellowgreen";

        if(kortti == 17 || kortti == 18)
            document.getElementById(kortti).style.background = "olive";

        if(kortti == 19 || kortti == 20)
        document.getElementById(kortti).style.background = "indigo";

        toka = kortti;

        lopputulos = eka - toka;

        if(lopputulos == -1 || lopputulos == 1)
        {
            document.getElementById(eka).style.background ="black";
            document.getElementById(toka).style.background ="black";

            tila = 0;

        }
        else
        {
            alert('Parit eivät täsmänneet');

            document.getElementById(eka).style.background ="teal";
            document.getElementById(toka).style.background ="teal";


           tila = 0;
        }
    }

}
</script>
<title>Muistipeli</title>
</head>
<body>
<form name="muistipeli" method="post" action="<?php $_SERVER['PHP_SELF']; ?>">
<?php
echo '<pre>', print_r($_REQUEST) ,'</pre>';
# Luodaan taulukko, jossa luvut 1-10
$numerot = range(1, 20);

# Sekoitetaan numerot
shuffle($numerot);
?>
<center><h3> MUISTIPELI </h3></center>
<table border="0" align="center" height="80%" class="pohja"><tr><td>&nbsp;</td>
<tr><td>
<?php
# Luodaan taulun aloitustagi
echo '<table class="Pelilauta" align="center" border="1" width="90%">';

# Luodaan laskuri, ja alustetaan se nollaksi
$laskuri = 0;
$riviTulostettu = false;

# Listataan taulun osat muuttujiin ja käydään ne läpi each:hilla.

foreach($numerot as $numero)
{
    if($laskuri++ % 5 == 0)
    {
        if($riviTulostettu)
        {
            echo '</tr>';
        }

        echo '<tr>';
        $riviTulostettu = true;
    }
    echo "<td id='$numero' class='nurin_td' onclick=\"valinta($numero)\"> &nbsp; </td>";


}
if($laskuri > 0)
{
       echo "</tr>";
}
echo '</table>';
?>
</td></tr>
<tr><td>&nbsp;</td></tr>
</table>
</form>
</body>

jlaire [15.11.2007 13:50:15]

Vasta_alkaja kirjoitti:

Ennen kuin tästä jatkan, niin haluaisin kommenttia.

Turhan paljon toistoa, laita värit taulukkoon ja ota siitä sitten oikea. Ja "mediumvioletred" yms. eivät taida olla ihan standardin mukaisia, käyttäisin mieluummin "#rrggbb"-merkintää.

<script type="text/javascript">
var kortti_valittu = false;
var eka, toka, lopputulos;
var varit = ["red", "green", "blue", ...];

function valinta(kortti)
{
    document.getElementById(kortti).style.backgroundColor = varit[Math.floor((kortti - 1) / 2)];

    if (!kortti_valittu)
    {
        kortti_valittu = true;
        eka = kortti;
    }

    else
    {
        toka = kortti;
        lopputulos = eka - toka;

        if(lopputulos == -1 || lopputulos == 1)
        {
            document.getElementById(eka).style.backgroundColor = "black";
            document.getElementById(toka).style.backgroundColor = "black";
        }
        else
        {
            alert('Parit eivät täsmänneet');

            document.getElementById(eka).style.backgroundColor = "teal";
            document.getElementById(toka).style.backgroundColor = "teal";
        }

        kortti_valittu = false;
    }
}
</script>

Lisäksi tekisin korttien sekoittamisen mieluummin JavaScriptillä, koska se on todella helppo juttu ja siten muistipeli ei olisi niin riippuvainen palvelimesta.

Vasta_alkaja [15.11.2007 19:36:55]

Thanks.. Juuri tätä hain..

Vasta_alkaja [16.11.2007 19:21:54]

Perskele..

Logiikkanihan **** ihan silmille.

13-14 = -1
14-15 = -1

Eli <- 14 -> molemmin puolin olikin mahdollisuus ottaa kortti. Dam Dam Dam..

Miten kannattaisi toteuttaa tämä

taulukko ja sen sekoitus.

jlaire [16.11.2007 19:33:57]

Vasta_alkaja kirjoitti:

Miten kannattaisi toteuttaa tämä

1122
3344
5566
7788

taulukko ja sen sekoitus.

Tässä yksi tapa:

var kortit = [], i;
for (i = 1; i < 9; i++) {
    kortit.push(i, i);
}

var kortit_sekaisin = [];
while (kortit.length > 0) {
    // otetaan yksi satunnainen kortti
    kortit_sekaisin.push(kortit.splice(Math.floor(Math.random() * kortit.length), 1));
}

Antti Laaksonen [16.11.2007 20:01:38]

Vasta_alkaja kirjoitti:

Eli <- 14 -> molemmin puolin olikin mahdollisuus ottaa kortti. Dam Dam Dam..

Jos vaadit, että pienemmän numeron täytyy olla pariton, niin tämä ongelma poistuu.

jlaire [16.11.2007 20:08:58]

Antti Laaksonen kirjoitti:

Jos vaadit, että pienemmän numeron täytyy olla pariton, niin tämä ongelma poistuu.

Vertailun voisi myös tehdä Math.ceil(x / 2) == Math.ceil(y / 2) tai x + x%2 == y + y%2. Mutta olen Lebe80:n kanssa samaa mieltä, selkeämpää jos taulukossa on jokainen luku kahdesti.

Vasta_alkaja [16.11.2007 23:38:01]

Tässä tämänhetkinen toimiva versio. Mietin vain miten kannattaisi toteuttaa tuo, kortin löytyminen. Mustaksi vain sen värittäminen ei ole hyvä, käyttäjä voi valita sen uudelleen. Tietenkin tiedot voisi kerätä taulukkoo ja jos on jo löydetty ei reagoida. En tiedä onko sekään hyvä vaihtoehto.
Jos kentät vain piilottaa, vaihtaa laudan taulut paikkaa.
Onko kenelläkään hyviä ideoita tähän toteutukseen.

<html>
<head>
<style type="text/css">
.Pelilauta{
    vertical-align:middle;
    height:400px;
    width:425px;
}
.pohja{
    background:rgb(191,191,191);
    border-width:1px 2px 2px 2px;
    border-style:groove;
    border-color:grey;
}
body{
    background:;
}
.nurin_td{
    border-width:1px 2px 2px 2px;
    border-style:groove;
    border-color:grey;
    height:90px;
    width:85px;
    background:teal;
}
</style>
<script type="text/javascript">
var tila = 0;
var eka, toka, lopputulos;
var varit = ["red", "green", "#9999ff","#cc0099","#990033","#660000","#330099","#999966","#3399ff","#3333ff"];

function valinta(kortti)
{

    document.getElementById(kortti).style.backgroundColor = varit[Math.floor((kortti - 1) / 2)];

    if (tila == 0)
    {
        eka = kortti;
        tila = 1;
    }
    else if (tila == 1)
    {

        toka = kortti;

        lopputulos = eka - toka;

        var pienempiKortti = (Math.min(eka, toka));
        var jakojaannos = pienempiKortti%2;

        if(jakojaannos == 1 && (lopputulos == -1 || lopputulos == 1))
        {
            document.getElementById(eka).style.background ="black";
            document.getElementById(toka).style.background ="black";

            tila = 0;

        }
        else
        {
            alert('Parit eivät täsmänneet');

                document.getElementById(eka).style.background="teal";
                document.getElementById(toka).style.background ="teal";

    //    var NaytaKortit = setTimeout(tila = 0)",5000)
         tila = 0
        }
    }

}
</script>
<title>Muistipeli</title>
</head>
<body>
<form name="muistipeli" method="post" action="<?php $_SERVER['PHP_SELF']; ?>">
<?php
# Luodaan taulukko, jossa luvut 1-10
$numerot = range(1, 20);

# Sekoitetaan numerot
shuffle($numerot);
?>
<center><h3> MUISTIPELI </h3></center>
<table border="0" align="center" height="80%" class="pohja"><tr><td>&nbsp;</td>
<tr><td>
<?php
# Luodaan taulun aloitustagi
echo '<table class="Pelilauta" align="center" border="1" width="90%">';

# Luodaan laskuri, ja alustetaan se nollaksi
$laskuri = 0;
$riviTulostettu = false;

# Listataan taulun osat muuttujiin ja käydään ne läpi each:hilla.

foreach($numerot as $numero)
{
    if($laskuri++ % 5 == 0)
    {
        if($riviTulostettu)
        {
            echo '</tr>';
        }

        echo '<tr>';
        $riviTulostettu = true;
    }
    echo "<td id='$numero' class='nurin_td' onclick=\"valinta($numero)\"> &nbsp; </td>";


}
if($laskuri > 0)
{
       echo "</tr>";
}
echo '</table>';
?>
</td></tr>
<tr><td>&nbsp;</td></tr>
</table>
</form>
</body>

jlaire [17.11.2007 10:25:19]

Vasta_alkaja kirjoitti:

Mustaksi vain sen värittäminen ei ole hyvä, käyttäjä voi valita sen uudelleen.

Tuon ongelman saa korjattua esim. näin:

document.getElementById(eka).removeAttribute("onclick");
document.getElementById(toka).removeAttribute("onclick");

Vasta_alkaja kirjoitti:

Tietenkin tiedot voisi kerätä taulukkoo ja jos on jo löydetty ei reagoida.

Itse luultavasti tekisin pelistä olion, jossa on korttien tiedot yms. Mutta se vaatisi aika paljon muutoksia.

Vasta_alkaja [17.11.2007 13:40:24]

Thanks.. Tuo oli juuri sitä taas mitä kaipasin.
Taidat olla perehtynyt javascriptin saloihin aika lailla. '
Olion luomisesta voit kyllä laittaa minulle tietoa, jos se ei paljon vaadi aikaasi ja sinulla on mielenkiintoa siihen.

Tämän pelin tekemisen takoituskin minulla on vain tutustua erillaisiin menetelmiin ohjelmoida ja saada uusia näkökulmia asioiden toteuttamiseen. Täältä olen saanut paljon apua ja uusia ideoita. Se on vaan niin jännään, kun näinkin "yksinkertaisen" asian luomisessa pitää ottaa niin monta eri asiaa huomioon ja javascriptistä minun kokemukseni on aikalailla onclick="alert('apua')"; tietoa.

Vasta_alkaja [19.11.2007 23:34:34]

Miten javascriptin setTimeout -funktiota voidaan hyödyntää. Voiko sen määrittää antamaan muuttujalle arvon ilman että sillä määrätään suorittamaan erillinen funktio.

jlaire [20.11.2007 08:48:33]

Voit käyttää nimetöntä funktiota:

setTimeout(function () { muuttuja += 5 }, 3000);

Vasta_alkaja [20.11.2007 09:17:28]

Kiitoksia tästä.

Vasta_alkaja [21.11.2007 20:15:39]

Hei,

Saisinko miten rekisteröityä itselleni muistiin, löydettyjen korttien määrän ja kirjoitettua sen talteen input kenttään.

Yritän tämmöistä :
document.muistipeli.maara.innerHTML = 1;
jne... Mutta tuo ei kirjoita kenttään maara mitään.

<html>
<head>
<style type="text/css">
.Pelilauta{
    vertical-align:middle;
    height:490px;
    width:558px;
}
.pohja{
    padding:8px;
    background:url(./tausta.gif);
    border-width:1px 2px 2px 2px;
    border-style:groove;
    border-color:grey;
}
body{
    background:;
}
.nurin_td{
    border-width:1px 2px 2px 1px;
    border-style:outset;
    border-color:blue;
    height:95px;
    width:116px;
    background:skyblue;
}
.havaittu_td{
    height:95px;
    width:116px;
}
#div{
    position: absolute;
    background-color:black;
    width: 100%;
    height:100%;
    overflow: hidden;
    font-size: xx-small;
    z-index: 5;
    opacity: 0.0;
    filter:alpha(opacity=00);
}
</style>
<script type="text/javascript">
// Luodaan muuttujat
var tila = 0;
var eka, toka, lopputulos;

// Sijoitetaan korttien kuvat taulukkoon
var varit =
[
"url(./kortti1.gif)",
"url(./kortti2.gif)",
"url(./kortti3.gif)",
"url(./kortti4.gif)",
"url(./kortti5.gif)",
"url(./kortti6.gif)",
"url(./kortti7.gif)",
"url(./kortti8.gif)",
"url(./kortti9.gif)",
"url(./kortti10.gif)"
];

function valinta(e, kortti)
{
    if(!e)
    {
      var e = window.event;
    }

    document.getElementById(kortti).style.background = varit[Math.floor((kortti - 1) / 2)];

    if (tila == 0)
    {
        eka = kortti;
        tila = 1;
    }
    else if (tila == 1)
    {

        toka = kortti;

        // Katsotaan mikä on korttien yhteenlaskettu tulos
        lopputulos = eka - toka;

        // Katsotaan mikä on pienemmän kortin arvo
        var pienempiKortti = (Math.min(eka, toka));

        // Katsotaan mikä on pienemmän kortin jakojäännös
        var jakojaannos = pienempiKortti%2;

        // Jos jakojäännös on yksi ja lopputulos -1 tai 1 löydetään pari
        if(jakojaannos == 1 && (lopputulos == -1 || lopputulos == 1))
        {
            // Vaihdetaan korttien luokan nimi
            document.getElementById(eka).className ="havaittu_td";
            document.getElementById(toka).className ="havaittu_td";

            // Annetaan korteille pohjan mukainen tausta
            document.getElementById(eka).style.background="url(./tausta.gif); ";
            document.getElementById(toka).style.background ="url(./tausta.gif); ";

            // Otetaan korteista onclik- atribuutti pois
            document.getElementById(eka).removeAttribute("onclick");
            document.getElementById(toka).removeAttribute("onclick");

            // Määrätään tila alkamaan uudelleen alusta
            tila = 0;

        }
        else
        {
            // Jos kortteja ei löydetä, luodaan läpinäkyvä divikkuna peittämään lauta
            var divPeitto =  document.getElementById('div');

            // Annetaa div-ikkunalle sijainti
            divPeitto.style.left = + 0 + "px";
            divPeitto.style.top = + 0 + "px";

            // Tuodaan div-ikkuna esiin
            divPeitto.style.display = "block";

            // Aloitetaan nimetön functio, suoritus on ajanmukainen
            setTimeout(function () {

            // Laitetaan korteille taas ns. pimeä puoli näkyviin
            document.getElementById(eka).style.background="skyblue";
            document.getElementById(toka).style.background ="skyblue";

            // Otetaan peitto pois, jotta peliä voidaan jatkaa.
            divPeitto.style.display = "none";

            // Annetaan muuttujalle tila arvoksi 0
            tila = 0;
            // Määritetään aika, kauanko kortit ovat esillä
            }, 1000);
     }
    }
}
</script>
<title>Muistipeli</title>
</head>
<body>
<form name="muistipeli" method="post" action="<?php $_SERVER['PHP_SELF']; ?>">
<?php
# Luodaan taulukko, jossa luvut 1-10
$numerot = range(1, 20);

# Sekoitetaan numerot
shuffle($numerot);
?>
<div style="display:none;" id="div"> asfasf</div>
<center><h3> MUISTIPELI </h3></center>
<table border="0" align="center" height="80%" class="pohja">
<tr><td>
<?php
# Luodaan taulun aloitustagi
echo '<table class="Pelilauta" align="center" border="0" width="90%">';

# Luodaan laskuri, ja alustetaan se nollaksi
$laskuri = 0;
$riviTulostettu = false;

# Listataan taulun osat muuttujiin ja käydään ne läpi each:hilla.
foreach($numerot as $numero)
{
    if($laskuri++ % 5 == 0)
    {
        if($riviTulostettu)
        {
            echo '</tr>';
        }

        echo '<tr>';
        $riviTulostettu = true;
    }
    echo "<td id='$numero' class='nurin_td' onclick=\"valinta(event, $numero)\"> &nbsp; </td>";


}
if($laskuri > 0)
{
       echo "</tr>";
}
echo '</table>';
?>
</td></tr>
</table>
</form>
</body>

Vasta_alkaja [22.11.2007 21:33:35]

Tuolla pätkällä ongelma on ratkaistu, joten ei enää mitään tästä kohdasta.

var loydetty = document.muistipeli.maara.value;

if(loydetty >= 1)
{
   var laske = Number(loydetty) + Number(1);
   document.muistipeli.maara.value = laske;
}
else
{
   document.muistipeli.maara.value = "1";
}

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Muistipeliä tekemässä

Vasta_alkaja [12.11.2007 17:22:31]

Merri [12.11.2007 18:09:07]

tsuriga [12.11.2007 18:40:48]

jlaire [12.11.2007 19:57:33]

Vasta_alkaja [12.11.2007 20:11:40]

Antti Laaksonen [12.11.2007 20:27:12]

Vasta_alkaja [12.11.2007 22:50:34]

Antti Laaksonen [12.11.2007 22:57:25]

Vasta_alkaja [12.11.2007 23:36:30]

Blaze [12.11.2007 23:39:52]

Vasta_alkaja [13.11.2007 08:49:30]

Lebe80 [13.11.2007 12:20:22]

Resiina [13.11.2007 14:31:32]

Lebe80 [13.11.2007 14:47:39]

Vasta_alkaja [13.11.2007 19:27:38]

Antti Laaksonen [13.11.2007 22:02:16]

Vasta_alkaja [13.11.2007 22:18:37]

Vasta_alkaja [14.11.2007 19:55:36]

jlaire [15.11.2007 13:50:15]

Vasta_alkaja [15.11.2007 19:36:55]

Vasta_alkaja [16.11.2007 19:21:54]

jlaire [16.11.2007 19:33:57]

Antti Laaksonen [16.11.2007 20:01:38]

jlaire [16.11.2007 20:08:58]

Vasta_alkaja [16.11.2007 23:38:01]

jlaire [17.11.2007 10:25:19]

Vasta_alkaja [17.11.2007 13:40:24]

Vasta_alkaja [19.11.2007 23:34:34]

jlaire [20.11.2007 08:48:33]

Vasta_alkaja [20.11.2007 09:17:28]

Vasta_alkaja [21.11.2007 20:15:39]

Vasta_alkaja [22.11.2007 21:33:35]

Vastaus