/*------------------------------------------------------------------------------*\ * Memory Spiel * * Programmiert von Markus Eichenberger http://mypage.bluewin.ch/katzenseite * * Es handelt es sich um eine sehr einfache Implementierung in JavaScript 1.2 * * * * Version 1.0.0 25.06.2002 Erste Version * * Version 1.0.1 02.08.2002 Jahr 2000 sicheres Datum * * Version 1.0.2 26.05.2003 Automatisches ermitteln von IMG_OFFSET * * Version 1.0.3 27.07.2003 Aufdecken von zwei Bildern die eine Gemeinsamkeit * * haben wie z.B. Schuhe + Al Bundy * * Version 1.0.4 27.02.2004 Verbesserte Unterstuetzung von m*n Bilder Matrizen * * Version 1.1.0 01.05.2004 Highscore mit PHP (Textfile auf dem Webserver) * \*------------------------------------------------------------------------------*/ // Spiel Einstellungen, siehe memory.html (Zeile 8) // // | | | // | | |-- Highscoremodus (js/php) // | |----- Spielmodus, siehe unten // |-------- Anzahl Bild Paare // // Spielmodus 0 : zwei identische Bilder aufdecken, // Dateinamen bild1.jpg, bild2.jpg ... // Spielmodus 1 : zwei aehnliche Bilder aufdecken, // Dateinamen bild1a.jpg, bild1b.jpg, bild2a.jpg, bild2b.jpg ... // // Highscoremodus 0 : Highscore lokal gespeichert mit Javascript (cookies) // Highscoremodus 1 : Highscore remote gespeichert mit PHP (Textfile) var IMG_PATH = "images/"; // Pfad der Bilder var arrHighScore = new Array(); // HighScore Objekt Array var imgKarte = new Image(); // Rueckseite der Karte var imgArrStartStop = new Array(4); // Start und Stop Button var imgArrPlusMinus = new Array(4); // Plus und Minus Button var imgArrNumber = new Array(11); // Zahlen 0 bis 9 var bRunning = false; // Zustand des Spiels var nLevel = 4; // Spiellevel var nSeconds = 0; // Anzahl Sekunden der Spieldauer var nAttempts = 0; // Anzahl Versuche var nHit = 0; // Anzahl Treffer var nSelected1 = -1; // Erstes selektiertes Bild var nSelected2 = -1; // Zweites selektiertes Bild var bShowCard = false; // Anzeigen der Karte var strPlayerName = "xxx"; // Name der Spielers var strDate = ""; // Datum des Spiels var nPoints = 0; // Anzahl Punkte des Spiels var bCookies = false; // Cookies var nHighscoreMode = 0; // 0=Cookies 1=PHP var IMG_START, IMG_STOP, IMG_PLUS, IMG_MINUS; var IMG_LEVEL, IMG_SEC, IMG_ATTEMPTS, IMG_HIT; var IMG_OFFSET, IMG_MODE, imgArrField, nImages, nSumImages; /* * Bilder laden */ function loadImages(nPairs, nImageMode, nScoreMode) { nHighscoreMode = nScoreMode; IMG_MODE = nImageMode; nImages = nPairs; imgArrField = new Array(nImages * 2); nSumImages = nImages * 2 + 4 + 4 + 11; IMG_START = 2 + nImages * 2; IMG_STOP = 4 + nImages * 2; IMG_PLUS = 12 + nImages * 2; IMG_MINUS = 8 + nImages * 2; IMG_LEVEL = 10 + nImages * 2; IMG_SEC = 17 + nImages * 2; IMG_ATTEMPTS = 25 + nImages * 2; IMG_HIT = 33 + nImages * 2; if(document.images) { imgKarte.src = IMG_PATH + "karte.jpg"; // Start und Stop Button for(var i = 0; i < 4; i++) { imgArrStartStop[i] = new Image(); imgArrStartStop[i].src = IMG_PATH + "startstop" + (i + 1) + ".gif"; } // Plus und Minus Button for(var i = 0; i < 4; i++) { imgArrPlusMinus[i] = new Image(); imgArrPlusMinus[i].src = IMG_PATH + "plusminus" + (i + 1) + ".gif"; } // Zahlen und Buchstaben laden for(var i = 0; i < 11; i++) { imgArrNumber[i] = new Image(); imgArrNumber[i].src = IMG_PATH + i + ".gif"; } // Bilder laden for(var i = 0; i < nImages; i++) { if(IMG_MODE == 1) { imgArrField[i * 2] = new Image(); imgArrField[i * 2].src = IMG_PATH + "bild" + (i + 1) + "a.jpg"; imgArrField[i * 2 + 1] = new Image(); imgArrField[i * 2 + 1].src = IMG_PATH + "bild" + (i + 1) + "b.jpg"; } else { // IMG_MODE = 0; // imgArrField[i * 2] = new Image(); // imgArrField[i * 2].src = IMG_PATH + "bild" + (i + 1) + ".jpg"; // imgArrField[i * 2 + 1] = new Image(); // imgArrField[i * 2 + 1].src = IMG_PATH + "bild" + (i + 1) + ".jpg"; imgArrField[0 * 2] = new Image(); imgArrField[0 * 2].src = "images/image-5358.jpg";imgArrField[0 * 2 + 1] = new Image(); imgArrField[0 * 2 + 1].src = "images/image-5358.jpg";imgArrField[1 * 2] = new Image(); imgArrField[1 * 2].src = "images/image-2458.jpg";imgArrField[1 * 2 + 1] = new Image(); imgArrField[1 * 2 + 1].src = "images/image-2458.jpg";imgArrField[2 * 2] = new Image(); imgArrField[2 * 2].src = "images/image-5331.jpg";imgArrField[2 * 2 + 1] = new Image(); imgArrField[2 * 2 + 1].src = "images/image-5331.jpg";imgArrField[3 * 2] = new Image(); imgArrField[3 * 2].src = "images/image-1273.jpg";imgArrField[3 * 2 + 1] = new Image(); imgArrField[3 * 2 + 1].src = "images/image-1273.jpg";imgArrField[4 * 2] = new Image(); imgArrField[4 * 2].src = "images/image-3077.jpg";imgArrField[4 * 2 + 1] = new Image(); imgArrField[4 * 2 + 1].src = "images/image-3077.jpg";imgArrField[5 * 2] = new Image(); imgArrField[5 * 2].src = "images/image-6633.jpg";imgArrField[5 * 2 + 1] = new Image(); imgArrField[5 * 2 + 1].src = "images/image-6633.jpg";imgArrField[6 * 2] = new Image(); imgArrField[6 * 2].src = "images/image-2295.jpg";imgArrField[6 * 2 + 1] = new Image(); imgArrField[6 * 2 + 1].src = "images/image-2295.jpg";imgArrField[7 * 2] = new Image(); imgArrField[7 * 2].src = "images/image-3087.jpg";imgArrField[7 * 2 + 1] = new Image(); imgArrField[7 * 2 + 1].src = "images/image-3087.jpg";imgArrField[8 * 2] = new Image(); imgArrField[8 * 2].src = "images/image-3124.jpg";imgArrField[8 * 2 + 1] = new Image(); imgArrField[8 * 2 + 1].src = "images/image-3124.jpg";imgArrField[9 * 2] = new Image(); imgArrField[9 * 2].src = "images/image-1163.jpg";imgArrField[9 * 2 + 1] = new Image(); imgArrField[9 * 2 + 1].src = "images/image-1163.jpg"; } } loadHighScore(); nLevel = 4; nSeconds = 0; nAttempts = 0; nHit = 0; searchFirstImage(); clearField(); updateAll(); setTimeout("checkLoading()", 1000) } } /* * Bilder mischen */ function shuffle() { if(document.images) { // Jeweils zwei Bilder vertauschen var j = Math.floor(new Date().getSeconds() * Math.random() + 60); for(var i = 0; i < j; i++) { n1 = Math.round(Math.random() * (nImages * 2 - 1)); n2 = Math.round(Math.random() * (nImages * 2 - 1)); img = imgArrField[n1]; imgArrField[n1] = imgArrField[n2]; imgArrField[n2] = img; } } } /* * Neues Spiel starten */ function startGame() { if(document.images) { if(!bRunning) { shuffle(); clearField(); nSeconds = 0; nSelected1 = -1; nSelected2 = -1; nAttempts = 0; nHit = 0; id = setInterval("countSeconds()", 1000) bRunning = true; bShowCard = false; updateAll(); } } } /* * Spiel stoppen */ function stopGame() { if(document.images) { if(bRunning) { clearInterval(id); bRunning = false; updateAll(); } } return; } /* * Sekunden zählen */ function countSeconds() { nSeconds++; showNumber(nSeconds, IMG_SEC + IMG_OFFSET, 5); } /* * Zahl anzeigen */ function showNumber(nNumber, nPosition, nCount) { if(document.images) { nNumber += ""; while(nNumber.length < nCount) nNumber = " " + nNumber; for(var i = 0; i < nCount; i++) { var n = nNumber.charAt(i); if(n == " ") { document.images[nPosition + i].src = imgArrNumber[10].src; } else { document.images[nPosition + i].src = imgArrNumber[n].src; } } } } /* * Spielfeld loeschen */ function clearField() { if(document.images) { for(var i = 0; i < nImages * 2; i++) { document.images[i + IMG_OFFSET].src = imgKarte.src; } } } /* * Zeigen der Karte */ function showCard(nImage) { if(document.images) { if(bRunning && !bShowCard) { // Aufdecken von zwei Karten if(nSelected1 == -1 || nSelected2 == -1) { // Nur zugedeckte Karten aufdecken if(document.images[nImage + IMG_OFFSET].src == imgKarte.src) { // Bild aufdecken document.images[nImage + IMG_OFFSET].src = imgArrField[nImage].src; if(nSelected1 == -1) { nSelected1 = nImage; } else { nSelected2 = nImage; } } } // Zwei Karten sind aufgedeckt if(nSelected1 != -1 && nSelected2 != -1) { showNumber(++nAttempts, IMG_ATTEMPTS + IMG_OFFSET, 5); // Karten miteinander vergleichen var pic1 = document.images[nSelected1 + IMG_OFFSET].src; var len1 = pic1.length; var pic2 = document.images[nSelected2 + IMG_OFFSET].src; var len2 = pic2.length; if(pic1.substr(0, len1 - IMG_MODE - 4) == pic2.substr(0, len2 - IMG_MODE - 4)) { // Karten identisch, Counter erhoehen showNumber(++nHit, IMG_HIT + IMG_OFFSET, 5); nSelected1 = -1; nSelected2 = -1; // Alle Bilder aufgedeckt if(nHit == nImages) { stopGame(); nPoints = Math.round(100000 * (nLevel + 1) / nSeconds / nAttempts); strMsg = "Sie haben " + nPoints + " Punkte geschafft.\nGeben Sie Ihren Namen fuer die Highscore Liste ein:"; strName = prompt(strMsg, strPlayerName); if(strName != null && strName != "") { strPlayerName = strName.substr(0, 100); strDate = getY2kDate(); arrHighScore.push(new objHighScore()); if(nHighscoreMode == 1) { strURL = "save_score.php" + "?&n=" + escape(strPlayerName) + "&l=" + nLevel + "&t=" + nSeconds + "&a=" + nAttempts; window.location = strURL; // window.open(strURL, "Highscore", "toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=300"); } } } } else { // Karten nicht identisch, nach n Sekunden wieder ausblenden, abhaengig vom Spiellevel bShowCard = true; setTimeout("clearCard()", 2000 - nLevel * 200); } } } else { if(!bRunning) { alert("Bitte zuerst Spiel starten !"); } } } } /* * Zwei Karten wieder verdecken */ function clearCard() { document.images[nSelected1 + IMG_OFFSET].src = imgKarte.src; document.images[nSelected2 + IMG_OFFSET].src = imgKarte.src; nSelected1 = -1; nSelected2 = -1; bShowCard = false; } /* * Spiellevel setzen */ function setLevel(nValue) { if(document.images && !bRunning) { nLevel += nValue; if(nLevel < 0) nLevel = 0; if(nLevel > 9) nLevel = 9; showNumber(nLevel, IMG_LEVEL + IMG_OFFSET, 1); } } /* * Alle Zaehler neu anzeigen */ function updateAll() { if(document.images) { showNumber(nLevel, IMG_LEVEL + IMG_OFFSET, 1); showNumber(nSeconds, IMG_SEC + IMG_OFFSET, 5); showNumber(nAttempts, IMG_ATTEMPTS + IMG_OFFSET, 5); showNumber(nHit, IMG_HIT + IMG_OFFSET, 5); if(bRunning) { document.images[IMG_START + IMG_OFFSET].src = imgArrStartStop[1].src; document.images[IMG_STOP + IMG_OFFSET].src = imgArrStartStop[2].src; document.images[IMG_PLUS + IMG_OFFSET].src = imgArrPlusMinus[1].src; document.images[IMG_MINUS + IMG_OFFSET].src = imgArrPlusMinus[3].src; } else { document.images[IMG_START + IMG_OFFSET].src = imgArrStartStop[0].src; document.images[IMG_STOP + IMG_OFFSET].src = imgArrStartStop[3].src; document.images[IMG_PLUS + IMG_OFFSET].src = imgArrPlusMinus[0].src; document.images[IMG_MINUS + IMG_OFFSET].src = imgArrPlusMinus[2].src; } } } /* * HighScore anzeigen */ function showHighScore() { sortHighScore(); saveHighScore(); strURL = "highscore.html"; if(nHighscoreMode == 1) { strURL = "show_score.php" } window.open(strURL, "Highscore", "toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=300"); } /* * HighScore Objekt */ function objHighScore() { this.nPoints = nPoints; this.strName = strPlayerName; this.strDate = strDate; this.nLevel = nLevel; this.nSeconds = nSeconds; this.nAttempts = nAttempts; } /* * HighScore sortieren nach Punktezahl (BubbleSort, sortieren durch Vertauschen) */ function sortHighScore() { var l = arrHighScore.length; if(l > 1) { for(var n = 0; n < l - 1; n++) { for(var m = 0; m < l - 1; m++) { if((arrHighScore[m].nPoints - arrHighScore[m + 1].nPoints) > 0) { var tmp = arrHighScore[m]; arrHighScore[m] = arrHighScore[m + 1]; arrHighScore[m + 1] = tmp; } } } } } /* * HighScore lesen */ function loadHighScore() { if(document.cookie != "") { bCookies = true; // Die besten fuenf Spieler for(var i = 1; i < 6; i++) { var strCookieValue = getMemoryCookie("MemoryScore" + i); if(strCookieValue != "") { var arrValues = unescape(strCookieValue).split(";"); nPoints = arrValues[0]; strPlayerName = arrValues[1]; strDate = arrValues[2]; nLevel = arrValues[3]; nSeconds = arrValues[4]; nAttempts = arrValues[5]; arrHighScore.push(new objHighScore()); } } strPlayerName = getMemoryCookie("MemoryPlayerName"); } else { // Es sind noch keine Cookies gespeichert, versuchen eines zu speichern setMemoryCookie("MemoryPlayerName", strPlayerName); if(document.cookie == "") { // Definitiv keine Cookies moeglich bCookies = false; } else { bCookies = true; } } } /* * HighScore speichern */ function saveHighScore() { if(bCookies) { setMemoryCookie("MemoryPlayerName", strPlayerName); // Die besten fuenf Spieler if(arrHighScore.length != null) { var n = arrHighScore.length - 1; var j = 0; for(var i = n; i > n - 5; i--) { if(i >= 0) { var strCookieValue = ""; strCookieValue += arrHighScore[i].nPoints + ";"; strCookieValue += arrHighScore[i].strName + ";"; strCookieValue += arrHighScore[i].strDate + ";"; strCookieValue += arrHighScore[i].nLevel + ";"; strCookieValue += arrHighScore[i].nSeconds + ";"; strCookieValue += arrHighScore[i].nAttempts; setMemoryCookie("MemoryScore" + ++j, strCookieValue); } } } } } /* * Cookie lesen */ function getMemoryCookie(strId) { var strReturn = ""; if(document.cookie != "") { var arrCookies = document.cookie.split(";"); for(var i = 0; i < arrCookies.length; i++) { var arrCookie = arrCookies[i].split("="); if(arrCookie.length == 2) { if(strTrim(arrCookie[0]) == strTrim(strId)) { strReturn = unescape(arrCookie[1]); } } } } return strReturn; } /* * Cookie setzen */ function setMemoryCookie(strId, strValue) { document.cookie = strId + "=" + escape(strValue) + ";expires=" + new Date(2036, 12, 31).toGMTString(); } /* * Leerzeichen aus String entfernen */ function strTrim(str) { var strReturn = ""; for(var i = 0; i < str.length; i++) { if(str.charAt(i) != " ") { strReturn += str.charAt(i); } } return strReturn; } /* * Y2k sicheres Datum liefern */ function getY2kDate() { var strReturn = ""; var d = new Date(); var strDate = addLeadingZero(d.getDate(), 2) + "." + addLeadingZero(d.getMonth() + 1, 2) + "." + getY2kYear(d); var strTime = addLeadingZero(d.getHours(), 2) + ":" + addLeadingZero(d.getMinutes(), 2); strReturn = strDate + " " + strTime; return strReturn; } /* * Y2k sichere Jahreszahl */ function getY2kYear(d) { var y = d.getYear(); if(y < 1970) { return y + 1900; } else { return y; } } /* * Fuehrende Nullen einfuegen */ function addLeadingZero(value, nTotalLength) { value += ""; while(value.length < nTotalLength) value = "0" + value; return value; } /* * Index der ersten Grafik suchen (IMG_OFFSET) */ function searchFirstImage() { for(var i = 0; i < document.images.length; i++) { if(document.images[i].name == "memory_id") { IMG_OFFSET = i + 1; break; } } } /* * Sind alle Bilder geladen ? */ function countLoadedImages() { var nCompleted = 0; for(var i = 0; i < 2 * nImages; i++) { if(imgArrField[i].complete) { nCompleted++; } //else alert(imgArrField[i].src); } for(var i = 0; i < 4; i++) { if(imgArrStartStop[i].complete) { nCompleted++; } //else alert(imgArrStartStop[i].src); } for(var i = 0; i < 4; i++) { if(imgArrPlusMinus[i].complete) { nCompleted++; } //else alert(imgArrPlusMinus[i].src); } for(var i = 0; i < 11; i++) { if(imgArrNumber[i].complete) { nCompleted++; } //else alert(imgArrNumber[i].src); } return nCompleted; } /* * Ladestand der Bilder anzeigen */ function checkLoading() { var nLoaded = countLoadedImages(); if(nLoaded < nSumImages) { document.images[IMG_OFFSET - 1].width = 456 - (456 / nSumImages * nLoaded); window.status = "" + nLoaded + " von " + nSumImages + " Bilder geladen"; setTimeout("checkLoading()", 250); } else { document.images[IMG_OFFSET - 1].src = IMG_PATH + "blank.gif"; document.images[IMG_OFFSET - 1].width = 5; window.status = ""; updateAll(); } }