A CoffeeScript programozási nyelv

Példaprogram

MemoryGame

A jól ismert memóriajáték böngészőben futó verziója, CoffeeScript-ben és jQueryben.

Adott számú kártya található a képernyőn lefordított állapotban. A kártyák két oldalúak, a hátlapjukon kérdőjel. Az előlapjukon képek vannak, amelyek kezdéskor nem látszódnak. Mindegyik kártyának van egy párja, amelyen ugyanaz a kép szerepel. A játékos egyszerre két kártyát fordíthat meg. Ha a kártyákon ugyanaz a kép található, akkor a kártyák eltűnnek. Ha a képek eltérőek, akkor a lapok visszafordulnak és újra a hátoldaluk lesz látható.

Működés: Az osztály az @images osztályváltozóban felsorolt képek lapjaival a paraméterben megadott számú kártyát helyez a képernyőre lefordított állapotban. A constructor: osztályfüggvényben áll elő véletlen elemekből a "kártyapakli".

A start: osztályfüggvényben található a felület összeállítása. Az addNewPicture: lokális függvény készíti el és adja a felülethez egyenként a kártyákat.

A kártyák felhelyezése után, a kártyák click eseményére épül fel játék logikája. Kattintásra felfordulnak a kártyák és a már említett módon, eltűnnek ha ugyanazon képek lettek felfordítva és visszafordulnak ha nem.

A játék működő demóját a következő oldal lehet megtekinteni: MemoryGame

# CoffeeScript # JQuery document onLoad fuggvenybe agyazas $ -> class MemoryGame # A kártyák előlapján szerepelő képek listája. A media/img/items mappában foglalnak helyet. images : [ "500.jpg", "alieneatsalien.jpg", "awakening.jpg", "awesomedark.jpg", "awesome.jpg", "badpastlives.jpg", "bathtime.jpg", "bluehorde.jpg", "bootleghunter.jpg", "borntofly.jpg", "bubblejoke.jpg", "camping.jpg", "cheshireactivity.jpg", "chooseyourweapon.jpg", "clashofwizards.jpg", "classicuser.jpg", "conqueringeternia.jpg", "deadmanwalkman.jpg", "dontattack.jpg", "drivewithcare.jpg", "endofstory.jpg", "evoked.jpg", "fatality.jpg", "ff7.jpg", "fightthedinos.jpg", "flyingdeep.jpg", "geneticfail.jpg", "globalwarming.jpg", "gngcrest.jpg", "hangover.jpg", "hayaosangels.jpg", "helpasootgremlin.jpg", "highvoltage.jpg", "horror.jpg", "hungry.jpg", "jellyfishes.jpg", "jointhetribe.jpg", "kitchenfight.jpg", "latenight-alt.jpg", "latenightreadings.jpg", "littlewarrior.jpg", "mastersofentertainment.jpg", "mindyourhead.jpg", "monsterburger.jpg", "mummy.jpg", "mylittlenazgul.jpg", "narwhal.jpg", "naturalseeker.jpg", "nereyd303.jpg", "neverendingdream.jpg", "neverendingfight.jpg", "neverendingnightmare.jpg", "nitrousoxide.jpg", "nowwhat.jpg", "outlander.jpg", "pancakes.jpg", "randomdark.jpg", "random.jpg", "redfury.jpg", "roadkill.jpg", "rpgunited.jpg", "safe.jpg", "seatraveller.jpg", "sky.jpg", "social.jpg", "solarsystem.jpg", "spiceharvester.jpg", "spiritedcrest.jpg", "stoned.jpg", "suboceanicextreme.jpg", "super-he-man.jpg", "survivor-grey.jpg", "survivor.jpg", "takemeaway.jpg", "tapenap.jpg", "teerex.jpg", "thearcheogameologist.jpg", "thecomposer.jpg", "thejourney.jpg", "theprincess.jpg", "tinyrobot.jpg", "tomorrow.jpg", "unsocialnetwork.jpg", "useful.jpg", "voidspirit.jpg", "vsk.jpg", "waitingfortheasteroid.jpg", "welcometogoldsaucer.jpg", "yellowbricksroad.jpg", "zombie.jpg" ] ### A html struktúrához tartozó elérési utak, selectorok ### # A kártyalapok képeinek teljes elérési útja imgpath : "media/img/items/" # A játéktér div-ének selectora gameboard : $ "div#memory div.memory-playground" # A játékba már nem lévő, párban felfordított kártyák stílus osztálya (nem a kártya) outOfGame : 'outofgame' # Az éppen felfordított kártyák stílus osztálya (látszódik az előlapi kép) selectedClass : 'selected' # A kártyák div-ének stílus osztálya itemContainerClass : 'memory-item-container' # Elemek elrejtéséhez használt osztály hiddenClass : 'hidden' # A játék befejeztével felbukkanó "Gratulálok" képernyő gameEnd : $ "div#memory div.game-end" # Új pakli generálása, új játékmenethez generateNewDeck: (options) -> # Véletlen összehasonlító függvény az képlista permutációjához. [-1, 0, 1] értékeket ad vissza. randomComparator = (a, b) -> Math.floor((Math.random()*10)%3-1) # A nagy képlista permutálása @images.sort randomComparator # Megadott számosságú kártyához a képek kiválasztása @choosenImages = @images[0..@tileCount-1] # A listát megdupplázzuk, mert mindegyik kép kétszer szerepel Array::push.apply @choosenImages, @choosenImages # A megdupplázott kiválasztott képeket is permutáljuk, megkavarjuk @choosenImages.sort randomComparator # A kiválasztott képekre érték és index szerint meghívjuk fent definiált addNewPicture függvényt @addNewPicture picture, i for picture, i in @choosenImages # A játék visszaállítása eredeti állapotába resetGame: () -> # A játék vége képernyő elrejtése @gameEnd.addClass @hiddenClass # A játék tábla előhozatala @gameboard.removeClass @hiddenClass # A játéktábla kipucolása @gameboard.empty() # A kártyapakli kiterítése a játéktáblára @generateNewDeck() ### Példányosítás során az osztály konstruktora a paraméterben megadott számosságban elkészíti a kártypaklit ### constructor: (options) -> # Opciók, paraméterek leválogatása {@tileCount} = options # A játéklogika felépítése @init() # Játék elemek alaphelyzetbe állítása @resetGame() # A játék alaphelyzetbe állításának rákötse a játék vége képernyő-re @gameEnd.find("p.newgame").click (event) => @resetGame() # Új kártya lap hozzáadása a megadott névvel (@imagename), és a megadott index azonosítóval (@i) addNewPicture : (imageName, i) -> # Új kártya konténer létrehozása itemContainer = $ '
' # A kártya osztályainak beállítása itemContainer.attr class: @itemContainerClass # Új kép tag elkészítése a kártyalaphoz newimage = $ '' # A kép tag képforrásának beállítása, az osztály és az azonosító beállítása newimage.attr src: @imgpath + imageName, class: 'memory-item', id: "memo-item-img-#{i}" # A kép kártyára rárakása itemContainer.append newimage # A kárty a játéktérbe helyezése @gameboard.append itemContainer # A játék indítása init: () -> ### Ellenőrzi, hogy minden kártyalapot sikerült-e felfordítani, ha sikerült eltünteti a játéktáblát és megjeleíti a "Gratulálunk" játék vége képernyőt ### checkGame = () => # Keressük meg a nem felrodított lapok számát len = $(".#{@itemContainerClass}:not(.#{@outOfGame})").length # Ha null akkor tünjön el a játéktábla és jelenjen meg a játék végre képernyő if len is 0 @gameboard.addClass @hiddenClass @gameEnd.removeClass @hiddenClass ### A felrodított kártyák elfordítása és eltűntetése A megadot kép @id-val rendelkező kártya elfordítása. Az elfordítás átmenettel van megoldva, a kép és a kártya lassan, 3mp alatt eltűnik. A jQuery animate függvénye, álltíja át az opacity-t a megadot idő alatt a megadott értékre. Az @ugyanaz paraméter jelöli, hogy sikerült ugyanolyan kártyalapokat felfordítanunk és most mind a kettőt el kell tüntetni. Alapértelmezetten igaz a paraméter értéke. ### parEltuntetese = (id, ugyanaz = true) => # Az @id képazonosító alapján a kártya div tag-ek megkeresése. $elemek = $("#memo-item-img-#{id}").parents("div.#{@itemContainerClass}") # Az egyező játékkártyák eltüntetése # Az eltűntetett kártya selectedClass helyett outOfGamet kap. hideCard = (el) => # A kártya eltüntetése, kiszedése a játékból $(el).addClass @outOfGame # A kártya kijelölésének a megszüntetése $(el).removeClass @selectedClass # Ellenőrizzük le, hogy az összes kárty felfordult-e checkGame() # A káryák képeinket a visszafordítása turnBackCard = (el) => # A kártyák kijelölésének megszüntetése $elemek.removeClass @selectedClass # Az eltüntetett kép átlátszóságának visszaállítása $(el).css opacity: 100 ### Az animate függvény felparaméterezése az átlátszóság csökkentésére. A kártya tag osztályainak beállítása az animáció végén (complete), amikor teljesen eltűnik az elem Az animáció 3000 ms-ig tart. ### if ugyanaz $elemek .animate({ opacity: 0}, { complete: (() -> hideCard(@) ), duration: 3000}) # Az eltűntetett kártya kattintás eseményének eltávolítása .unbind 'click' else # Hasonlóan a fentiekhoz, viszont ebben az esetben nem a teljes kártya tűnik el, hanem # csak a felfodított kép (find('img')) $elemek.find('img') .animate({opacity: 0}, { complete: (() -> turnBackCard(@) ), duration: 3000}) # Az éppen kiválasztott kártyák képeinek azonosítója img1 = null img2 = null # Click esemény beregisztrálása minden kártyára @gameboard.on 'click', "div.#{@itemContainerClass}", (event) => # A katintott kátya kinyerése az eseményből $this = $ event.currentTarget # A kép id-jának kiszedése a kártya elemből imgID = $this.find('img').attr('id').split('-').splice(-1)[0] # Ne menjünk tovább ha olyanra kattinottunk amely már fel volt fordítva és meg volt jelölve return if $this.hasClass @selectedClass # Jelöljük meg a felfordított elemet $this.addClass @selectedClass # Ha még nem volt kijelölve egy elem sem if img1 is null and img2 is null # Akkor az első elem lesz a most kijelölt img1 = imgID else if img1 isnt null and img2 is null # Ha már volt akkor a második elem értéke lesz a kijelölt kárty képid-ja img2 = imgID # Ha megegyeznek a kártyák képei akkor eltüntetjük mind a kettő kártyát if @choosenImages[img1] is @choosenImages[img2] parEltuntetese img1 parEltuntetese img2 else # Ha nem egyeznek meg akkor visszafordítjük őket a parEltuntetese függvénnyel, # második paraméterként false értékkel parEltuntetese img1, false parEltuntetese img2, false # Reseteljük a kijelölt elemeket img1 = null img2 = null # Új játék, 10-db elemmel game = new MemoryGame (tileCount: 10)