Tämä on vapaasti käytettävissä oleva muistipeli, joka on kehitetty ihan harjoituksen vuoksi. Tästä pelistä varmasti muutama ohjelmointiputkan jäsenkin huomaa omat neuvonsa ja apunsa. Pelissä on 10 eri paria jotka pitää käyttäjän etsiä.
Tämä peli tarvitsee toimiakseen kuvat
kortti1.gif - kortti10.gif
lapi.gif sekä tausta.gif
Nämä kuvat voidaan tietenkin korvata väreillä.
Ei muutakuin testaamaan, pelaamaan ja kritiikkiä antamaan.
Kommentointia tulee heti lisää koodiin, kun sitä kaivataan ja tarvitaan.
<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);
}
.lapi{
vertical-align:top;
}
.btn{
background:rgb(30,91,254);
color:white;
border-width:1px 2px 2px 1px;
border-color:skyblue;
border-style:groove;
}
.btn:hover{
background:rgb(30,91,254);
color:yellow;
border-width:2px 1px 1px 2px;
border-color:skyblue;
border-style:groove;
}
</style>
<script type="text/javascript">
function Alusta()
{
document.muistipeli.maara.value = "0";
document.muistipeli.lapi.value = "false";
}
// 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");
var loydetty = document.muistipeli.maara.value;
if(loydetty >= 1)
{
var laske = Number(loydetty) + Number(1);
document.muistipeli.maara.value = laske;
if(laske >= 10)
{
document.muistipeli.lapi.value = "true";
document.muistipeli.submit();
}
}
else
{
document.muistipeli.maara.value = "1";
}
// Määrätään tila muuttuja 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 onload="Alusta();">
<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"> </div>
<?php if(!empty($_REQUEST['lapi']) && $_REQUEST['lapi'] == 'true') : ?>
<?php else : ?>
<center><h3> MUISTIPELI </h3></center>
<?php endif; ?>
<table border="0" align="center" height="80%" class="pohja">
<tr><td>
<?php
if(!empty($_REQUEST['lapi']) && $_REQUEST['lapi'] == 'true')
{
echo '<table class="Pelilauta" border="0" align="center" border="0" width="90%">';
echo '<tr><td class="lapi"><img src="./lapi.gif">
<br><center>
<input type="button" class="btn" value="Pelaa uudelleen" onclick="this.form.submit();"></center></td></tr>';
echo '</table>';
}
else
{
# 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)\"> </td>";
}
if($laskuri > 0)
{
echo "</tr>";
}
echo '</table>';
}
?>
</td></tr>
<?php if(!empty($_REQUEST['lapi']) && $_REQUEST['lapi'] == 'true') : ?>
<tr><td><font style="color:blue">© freeware </font></td></tr>
<?php else : ?>
<tr><td>
<input type="text" value="0" id="" name="maara">
<input type="hidden" value="false" id="" name="lapi">
</td></tr>
<?php endif; ?>
</table>
</form>
</body>Itse olen eka...
Hmm missä tätä voi testata? Jaksais ny kobioida tota.
Aihe on jo aika vanha, joten et voi enää vastata siihen.