Lisää pelikeskittymä verkkosivulle JavaScriptin avulla

Tässä on versio klassisesta muistipelistä, jonka avulla verkkosivusi kävijät voivat yhdistää ruudukkokuvia JavaScriptin avulla.

Sinun on toimitettava kuvat, mutta voit käyttää mitä tahansa skriptilläsi haluamiasi kuvia, kunhan sinulla on oikeudet käyttää niitä verkossa. Sinun on myös muutettava koko 60 pikseliksi 60 pikseliksi ennen aloittamista.

Tarvitset yhden kuvan "korttien" takana ja viisitoista "rintaman" takana.

Varmista, että kuvatiedostot ovat mahdollisimman pieniä tai että pelin lataaminen voi kestää liian kauan. Tämän version kanssa olen rajoittanut komentosarjan 30 korttiin, koska kaikki kuvat tekevät sivun lataamisesta paljon hitaampaa. Mitä enemmän kortteja ja kuvia sivulla on, sitä hitaammin sivu latautuu. Tämä ei välttämättä ole ongelma niille, joilla on hyvät laajakaistayhteydet, mutta hitaammat yhteydet saattavat turhautua siihen kuluvaan aikaan.

Jos et ole pelannut tätä peliä aiemmin, säännöt ovat hyvin yksinkertaisia. On 30 ruutua tai korttia. Jokaisessa kortissa on yksi 15 kuvasta, jolloin kuvaa ei näy enemmän kuin kahdesti - nämä parit sopivat.

Kortit alkavat "kuvapuoli alaspäin" piilottaen 15 parin kuvat.

Tarkoitus on kääntää kaikki vastaavat parit mahdollisimman lyhyessä ajassa.

Toisto alkaa valitsemalla yksi kortti ja valitsemalla sitten toinen. Jos ne ovat ottelu, ne pysyvät kuvapuoli ylöspäin; Jos ne eivät täsmää, kaksi korttia käännetään takaisin ylöspäin, alaspäin. Pelatessasi sinun on luotettava aiempien korttien muistiin ja niiden sijaintiin menestyäksesi otteluita.

Tässä pelin JavaScript-versiossa valitset kortit napsauttamalla niitä. Jos valitset kaksi ottelua, ne jäävät näkyviin, jos eivät, silloin ne katoavat uudelleen noin sekunnin kuluttua.

Alaosassa on aikalaskuri, joka tarkkailee kuinka kauan kestää sinun sovittaa kaikki parit.

Jos haluat aloittaa alusta, paina vain laskuri-painiketta, niin koko taulukko muuttuu uudelleen ja voit aloittaa uudelleen.

Tässä esimerkissä käytetyt kuvat eivät tule skriptin mukana, joten kuten mainittiin, joudut toimittamaan omat. Jos sinulla ei ole kuvia tämän skriptin kanssa käytettäväksi ja et pysty luomaan omia, voit etsiä sopivia leikkeitä, joita voi käyttää vapaasti.

Muistikirjan skripti lisätään verkkosivullesi viidessä vaiheessa.

Vaihe 1: Kopioi seuraava koodi ja tallenna se tiedostoon nimeltä memoryh.js.

// Keskitysmuistipeli kuvilla - Head Script
// tekijänoikeudet Stephen Chapman, 28. helmikuuta 2006, 24. joulukuuta 2009
// voit kopioida tämän komentosarjan edellyttäen, että pidät tekijänoikeusilmoituksen

var back = 'back.gif';
var laatta = ['img0.gif', 'img1.gif', 'img2.gif', 'img3.gif', 'img4.gif', 'img5.gif',
'Img6.gif', 'img7.gif', 'img8.gif', 'img9.gif', 'img10.gif', 'img11.gif',
'Img12.gif', 'img13.gif', 'img14.gif'];

toiminto randOrd (a, b) {paluu (Math.round (Math.random ()) - 0,5);} var im = []; varten
(var i = 0; i <15; i ++) {im [i] = uusi kuva (); im [i] .src = laatta [i]; laatta [i] =
''; laatta [i + 15] =
laatta [i];} toiminto displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'

korkeus = "60" alt = "takaisin" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = alkaa; toiminnon aloitus () {varten (var i = 0; i <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
); LASK (); tid = setInterval ('cntr ()', 1000);} toiminto cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Value =
min + ':' + (sek <10? '0': '') + s; tmr ++;} funktio disc (sel) {if (tno> 1)
{clearTimeout (cid); kätke ();} document.getElementById ('t' + sel) .innerHTML =
laatta [sel]; jos (tno == 0) ch1 = sel; muuten {ch2 = sel; cid = setTimeout ('kätke ()',
900);} tno ++;} toiminto salata () {tno = 0; if (laatta [ch1]! = laatta [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; if (cnt> = 15)
clearInterval (tid);}

Voit korvata kuvatiedostojen nimet takaisin ja laatta kuvien tiedostonimillä.

Muista muokata kuviasi grafiikkaohjelmassa niin, että ne ovat kaikki 60 pikseliä neliömäisiä, jotta niiden lataaminen ei vie liian kauan (esimerkissäni käytettyjen 16 kuvan yhdistetty koko on vain 4758 tavua, joten kokonaisarvon pitäminen alle sinun ei pitäisi olla ongelma 10k).

Vaihe 2: Valitse alla oleva koodi ja kopioi se tiedostoon, jota kutsutaan memory.css.

.blk {leveys: 70px; korkeus: 70px; ylivuoto piilotettu;}

Vaihe 3: Lisää seuraava koodi verkkosivusi HTML-asiakirjan pääosaan soittaaksesi juuri luomillesi tiedostoille.

Vaihe 4: Valitse ja kopioi alla oleva koodi ja tallenna se sitten tiedostoon, jota kutsutaan memoryb.js.

// Keskitysmuistipeli kuvilla - kehon käsikirjoitus
// tekijänoikeudet Stephen Chapman, 28. helmikuuta 2006, 24. joulukuuta 2009
// voit kopioida tämän komentosarjan edellyttäen, että pidät tekijänoikeusilmoituksen

document.write ('

Vaihe 5: Nyt kaikki on jäljellä: lisää peli verkkosivullesi, missä haluat sen näkyvän lisäämällä seuraava koodi HTML-dokumenttiin.