/* ############################################################ ### astroklick.js ### ### Javascript von Michael Duetting ### ### copyright 2010 ### für sternfreunde-muenster.de CMS |----||----| Datenbanken | || | |----||----| eShops |----| |------| | | Webdesign | | |----| | multi|p l i c o Multimedia |------| ### Telemannstr. 26 ### ### 48147 Münster ### ### http://www.multiplico.de ### ############################################################ */ /* ================================Puzzleteile (Decker) =============================== */ var astroklick = {reihe:[ {top:3,tiles:[0,65,110,204,249,343,388,481],r:0}, /*0 (r0)*/ {top:46,tiles:[0,43,136,182,275,321,414,459],r:0}, /*1 (r1)*/ {top:141,tiles:[0,-1,110,-1,249,-1,388,-1],r:0}, /*2 (r2)*/ {top:108,tiles:[-1,65,-1,204,-1,343,-1,481],r:-1}, /*3 (r2a)*/ {top:185,tiles:[0,43,136,182,275,321,414,459],r:-1}, /*4 (r3)*/ {top:279,tiles:[0,-1,110,-1,249,-1,388,-1],r:-1}, /*5 (r4)*/ {top:247,tiles:[-1,65,-1,204,-1,343,-1,481],r:-2}, /*6 (r4a)*/ {top:322,tiles:[0,43,136,182,275,321,414,459],r:-2}, /*7 (5)*/ {top:416,tiles:[0,-1,110,-1,249,-1,388,-1],r:-2}, /*8 (6)*/ {top:384,tiles:[-1,65,-1,204,-1,343,-1,481],r:-3}, /*9 (6a)*/ {top:459,tiles:[0,43,136,182,275,321,414,459],r:-3} /*10 (7)*/ ]} //----------------------------------Puzzleteile (Spiele)--------------------------- var spiele = {games:[ {data:["dalli0/","Galileo Galilei","Nikolaus Kopernikus","Johannes Kepler","Friedrich Wilhelm Herschel","Charles Messier","William Parson"],L:1}, {data:["dalli1/","Andromedanebel","Ringnebel","Strudelgalaxie","Orionnebel","Kugelsternhaufen","Hantelnebel"],L:1}, {data:["dalli2/","Andromedanebel","Ringnebel","Strudelgalaxie","Orionnebel","Kugelsternhaufen","Hantelnebel"],L:4}, {data:["dalli3/","Galileo Galilei","Nikolaus Kopernikus","Johannes Kepler","Friedrich Wilhelm Herschel","Charles Messier","William Parson"],L:3}, {data:["dalli4/","Galileo Galilei","Nikolaus Kopernikus","Johannes Kepler","Friedrich Wilhelm Herschel","Charles Messier","William Parson"],L:2}, {data:["dalli5/","Galileo Galilei","Nikolaus Kopernikus","Johannes Kepler","Friedrich Wilhelm Herschel","Charles Messier","William Parson"],L:5}, {data:["dalli6/","Galileo Galilei","Nikolaus Kopernikus","Johannes Kepler","Friedrich Wilhelm Herschel","Charles Messier","William Parson"],L:4}, {data:["dalli7/","Galileo Galilei","Nikolaus Kopernikus","Johannes Kepler","Friedrich Wilhelm Herschel","Charles Messier","William Parson"],L:6}, {data:["dalli8/","Andromedanebel","Ringnebel","Strudelgalaxie","Orionnebel","Kugelsternhaufen","Hantelnebel"],L:6}, {data:["dalli9/","Andromedanebel","Ringnebel","Strudelgalaxie","Orionnebel","Kugelsternhaufen","Hantelnebel"],L:5}, {data:["dalli10/","Andromedanebel","Ringnebel","Strudelgalaxie","Orionnebel","Kugelsternhaufen","Hantelnebel"],L:3}, {data:["dalli11/","Andromedanebel","Ringnebel","Strudelgalaxie","Orionnebel","Kugelsternhaufen","Hantelnebel"],L:2} ]} var texte = {contents:[ {loese:"Galileo Galilei (*1564 +1642), italienischer Astronom, der als Erster ein Fernrohr auf den Himmel richtete. Er entdeckte zeitgleich mit dem deutschen Astronomen Simon Marius im Jahre 1610 die vier größten Jupitermonde. Weiterhin erkannte er die Phasen der Venus sowie die Krater und Gebirge des Mondes. Galilei vertrat das Kopernikanische Weltsystem, nach dem die Sonne im Zentrum des Planetensystems steht und geriet damit in Konflikt mit der Kirche."}, {loese:"Der Andromedanebel (Messier 31) ist eine Spiralgalaxie im Sternbild Andromeda und 2.5 Mio. Lichtjahre entfernt."}, {loese:"Der Orionnebel (Messier 42) ist eines der aktivsten Sternentstehungsgebiete in der galaktischen Nachbarschaft der Sonne. Die Entfernung von unserem Sonnensystem beträgt 1350 Lichtjahre, der Durchmesser 30 Lichtjahre."}, {loese:"Johannes Kepler (*1551 +1630) entdeckte auf der Basis der Beobachtungen der Marsbahn Tycho Brahes die Gesetze der Planetenbewegungen (Keplersche Gesetze) und war ein Vertreter des heliozentrischen Weltsystems nach Kopernikus."}, {loese:"Nikolaus Kopernikus (*1473 +1543), polnischer Arzt und Astronom, der in seinem Buch \"De Revolutionibus Orbium Coelestium\" das heute allgemein akzeptierte Modell des Sonnensystems, gemäß dem sich die Planeten um die Sonne bewegen und die Erde sich um die eigene Achse dreht, beschrieb. Er wurde dadurch zu einem der bedeutendsten Astronomen der Welt."}, {loese:"Charles Messier (*1730 +1817) war ein französischer Astronom. Auf seiner Suche nach neuen Kometen stieß er auf eine Vielzahl anderer Objekte wie Galaxien, Sternenhaufen oder Nebel, die er in einer Liste zusammenfasste, dem später berühmten Messier-Katalog."}, {loese:"Friedrich Wilhelm Herschel (*1738 +1822) war ein deutsch-britischer Astronom und Musiker. Er entdeckte 1781 den Planeten Uranus. Herschel führte als Erster eine Klassifizierung von Nebeln und Sternhaufen durch und legte damit die Grundlage für den \"Neuen General Katalog\" (NGC). Aus der Verteilung der Fixsterne suchte er die Gestalt der Milchstraße abzuleiten. Er kam zu dem Ergebnis, dass es sich um eine linsenförmige Ansammlung von Sternen handele."}, {loese:"William Parson (*1800 +1867), irischer Astronom, der als erster die Spiralarme in der Galaxie Messier 51 beobachtete. Er benutzte dazu das größte Fernrohr seiner Zeit, den \"Leviathan von Parsonstown\" mit einem Spiegeldurchmesser von 1,8 Metern."}, {loese:"Der Hantelnebel (Messier 27) ist ein heller planetarischer Nebel im Sternbild Fuchs. Im Fernglas ist er gerade erkennbar, im Teleskop zeigen sich weitere Strukturen. Er hat seinen Namen von Sir William Herschel wegen seiner länglichen Form erhalten. Der Hantelnebel wurde von Charles Messier 1764 als erster planetarischer Nebel überhaupt entdeckt."}, {loese:"Messier 13 ist ein Kugelsternhaufen im Sternbild Herkules. Entdeckt wurde der Kugelsternhaufen im Jahre 1714 durch den englischen Astronomen Sir Edmond Halley. Er ist etwa 22.800 Lichtjahre von der Sonne entfernt. Er hat die 300.000-fache Leuchtkraft der Sonne und einen Durchmesser von 150 Lichtjahren."}, {loese:"Die Whirlpool-Galaxie (Messier 51 ) ist eine bekannte Galaxie mit deutlich ausgeprägter Spiralstruktur im Sternbild Jagdhunde. Ihre Entfernung beträgt etwa 31 Millionen Lichtjahre."}, {loese:"Der Ringnebel (auch mit Messier 57 oder NGC 6720 bezeichnet) ist ein planetarischer Nebel im Sternbild Leier. Der Nebel ist der Überrest eines Sterns, der vor etwa 20.000 Jahren seine äußere Gashülle abgestoßen hat."} ]} /* =============================== DOM-Weiche ======================================== */ var DOM = (!window.netscape && !window.opera && /KHTML/.test(navigator.userAgent) == false)?0:1; var dimX = (DOM == 1)?parseInt(window.innerWidth):parseInt(document.documentElement.offsetWidth); var dimY = (DOM == 1)?parseInt(window.innerHeight):parseInt(document.documentElement.offsetHeight); var gx = (DOM == 0)?2:1;//IE berechnet die Array-Length falsch /* =============================== global vars ======================================= */ var tcounter = null; var tcounterStart = 0; var gameWahl = 1;var rand = 1; var ztimer_1=0; var ztimer_10=0; var ztimer_100=0;var punktZeit=0; var tileCounter = 64;var punktstand=0; /* ################################ #******************************# #* Initialisierung *# #******************************# ################################ */ //onload = Init;//manuell function Init() { //----------------------- Spielfenster ------------------------------------------- var gamebox = document.createElement("div"); gamebox.id = "gamebox"; gamebox.style.position = "absolute"; gamebox.style.left = (dimX-900)/2+"px"; gamebox.style.top = (dimY-600)/2+"px"; gamebox.style.width = "904px"; gamebox.style.height = "605px"; if(DOM==0) { gamebox.style.backgroundImage = "url(astroklick/icon/gamebox2.jpg)"; gamebox.style.backgroundRepeat = "no-repeat"; gamebox.style.width = "915px"; gamebox.style.height = "619px"; } else { gamebox.style.border = "#000000 solid 2px"; gamebox.style.MozBorderRadius = "15px"; gamebox.style.WebkitBorderRadius = "15px"; gamebox.style.borderRadius = "15px"; gamebox.style.MozBoxShadow = "5px 5px 5px #333333"; gamebox.style.WebkitBoxShadow = "5px 5px 5px #333333"; gamebox.style.backgroundImage = "url(astroklick/icon/gameboxbg.jpg)"; } //------------------------ Close-Button ------------------------------------------- var closer = document.createElement("a"); closer.title = "Spiel beenden"; closer.style.position = "absolute"; closer.style.left = "855px"; closer.style.top = "5px"; closer.href = "javascript:Exit()"; closerImg = new Image(); closerImg.src = "astroklick/icon/cancel_48.png"; closerImg.style.border = "none"; closer.appendChild(closerImg); gamebox.appendChild(closer); //------------------------- Reload-Button ----------------------------------------- var newGame = document.createElement("a"); newGame.title = "Neues Spiel"; newGame.style.position = "absolute"; newGame.style.left = "800px"; newGame.style.top = "5px"; newGame.href = "javascript:Spiel()"; newGameImg = new Image(); newGameImg.src = "astroklick/icon/refresh.png"; newGameImg.style.border = "none"; newGame.appendChild(newGameImg); gamebox.appendChild(newGame); //------------------------------ Hilfe -------------------------------------------- var hilfe = document.createElement("a"); hilfe.title = "Anleitung"; hilfe.style.position = "absolute"; hilfe.style.left = "745px"; hilfe.style.top = "5px"; hilfe.href = "javascript:Hilfe('block')"; hilfeImg = new Image(); hilfeImg.src = "astroklick/icon/hilfe.png"; hilfeImg.style.border = "none"; hilfe.appendChild(hilfeImg); gamebox.appendChild(hilfe); //------------------------------ Anleitung ---------------------------------------- var anlt = document.createElement("div"); anlt.id = "anlt"; anlt.style.display = "none"; anlt.style.position = "absolute"; anlt.style.zIndex = "2"; anlt.style.left = "600px"; anlt.style.top = "200px"; anlt.style.width = "250px"; anlt.style.height = "400px"; anlt.style.padding = "20px 0px 0px 10px"; anlt.style.backgroundImage = "url(astroklick/icon/hilfebox.png)"; anlt.style.backgroundRepeat = "no-repeat"; var h1 = document.createElement("h1"); h1.style.font = "bold 12pt sans-serif"; var h1txt = document.createTextNode("Und so gehts:"); h1.appendChild(h1txt); var ph0 = document.createElement("p"); ph0.style.font = "10pt sans-serif"; ph0.style.width = "225px"; var ph0txt = document.createTextNode("Klicke in das Spielfeld links, um Teile des verborgenen Bildes aufzudecken. Wenn Du zu wissen glaubst, was sich hier verbirgt, kreuze Deine Antwort in der rechten Box an."); ph0.appendChild(ph0txt); var ph1 = document.createElement("p"); ph1.style.font = "10pt sans-serif"; ph1.style.width = "225px"; var ph1txt = document.createTextNode("Je weniger Teile Du aufdecken musst und je schneller Du bist, desto höher ist Deine Punktzahl. Wenn die Anzahl der noch verdeckten Bereiche gleich der Zeitanzeige (unten links) ist, warst Du leider zu langsam. Hast Du richtig geraten, kannst Du Dich in der Bestenliste eintragen."); ph1.appendChild(ph1txt); anlt.appendChild(h1); anlt.appendChild(ph0); anlt.appendChild(ph1); var closeAnlt = new Image(); closeAnlt.src = "astroklick/icon/ok.png"; closeAnltAk = document.createAttribute("onclick"); closeAnltAk.nodeValue = "Hilfe('none')"; closeAnlt.setAttributeNode(closeAnltAk); anlt.appendChild(closeAnlt); gamebox.appendChild(anlt); //------------------------------ Bestenliste--------------------------------------- var best = document.createElement("a"); best.title = "Bestenliste"; best.style.position = "absolute"; best.style.left = "690px"; best.style.top = "5px"; best.href = "javascript:Best()"; bestImg = new Image(); bestImg.src = "astroklick/icon/sieg.png"; bestImg.style.border = "none"; best.appendChild(bestImg); gamebox.appendChild(best); //------------------------------ Sekundenzähler ----------------------------------- var counter = document.createElement("div"); counter.style.position = "absolute"; counter.src="icon/z9.jpg."; counter.style.left = "645px"; counter.style.top = "495px"; counter.style.width = "45px"; counter.style.height = "27px"; counter.style.padding = "5px 0px 0px 5px"; counter.style.backgroundColor = "#000000"; var s1 = new Image(); s1.id ="s1"; s1.src = "astroklick/icon/z0.jpg"; var s10 = new Image(); s10.id ="s10"; s10.src = "astroklick/icon/z0.jpg"; var s100 = new Image(); s100.id ="s100"; s100.src = "astroklick/icon/z0.jpg"; counter.appendChild(s100); counter.appendChild(s10); counter.appendChild(s1); gamebox.appendChild(counter); //----------------------------- Teile-Zähler -------------------------------------- var counterTile = document.createElement("div"); counterTile.style.position = "absolute"; counterTile.src="astroklick/icon/z9.jpg."; counterTile.style.left = "770px"; counterTile.style.top = "495px"; counterTile.style.width = "35px"; counterTile.style.height = "27px"; counterTile.style.padding = "5px 0px 0px 5px"; counterTile.style.backgroundColor = "#000000"; var t1 = new Image(); t1.id ="t1"; t1.src = "astroklick/icon/z4.jpg"; var t10 = new Image(); t10.id ="t10"; t10.src = "astroklick/icon/z6.jpg"; counterTile.appendChild(t10); counterTile.appendChild(t1); gamebox.appendChild(counterTile); //------------------------------Titel---------------------------------------------- var titel = document.createElement("img"); titel.src = "astroklick/icon/titel.png"; titel.style.position = "absolute"; titel.style.top = "120px"; titel.style.left = "588px"; gamebox.appendChild(titel); //--------------------------------------------------------------------------------- document.getElementsByTagName("body")[0].appendChild(gamebox); Spiel(); } /* =================================================================================== */ /* ################################ #******************************# #* Aufbau des Spiels *# #******************************# ################################ */ function Spiel() { if(document.getElementById("spielfeld"))//neuStart { window.clearInterval(tcounter) document.getElementById("spielfeld").parentNode.removeChild(document.getElementById("spielfeld")); tcounterStart=0; ztimer_1=0; ztimer_10=0; ztimer_100=0; punktZeit=0; tileCounter = 64; document.getElementById("s1").src = "astroklick/icon/z0.jpg"; document.getElementById("s10").src = "astroklick/icon/z0.jpg"; document.getElementById("s100").src = "astroklick/icon/z0.jpg"; //falls gewonnen Lösung ausblenden if(document.getElementById("loesung")) {document.getElementById("loesung").parentNode.removeChild(document.getElementById("loesung"));} if(document.getElementById("loesDiv")) {document.getElementById("loesDiv").parentNode.removeChild(document.getElementById("loesDiv"));} //falls winnerbox : ausblenden if(document.getElementById("sieger")) {document.getElementById("sieger").parentNode.removeChild(document.getElementById("sieger"));} } //---------------------- Zufallsbild ---------------------------------------------- rand = 1 + Math.floor(Math.random()*(spiele.games.length-gx+1)); rand = (rand >spiele.games.length-gx)?0:rand; gameWahl = spiele.games[rand]; //--------------------------------------------------------------------------------- var spielfeld = document.createElement("div"); spielfeld.id = "spielfeld"; spielfeld.style.position = "absolute"; spielfeld.style.zIndex = "1"; spielfeld.style.left = "10px"; spielfeld.style.top = "10px"; spielfeld.style.width = "560px"; spielfeld.style.height = "560px"; spielfeld.style.backgroundImage = "url(astroklick/icon/astroklick.png)"; spielfeld.style.backgroundPosition = "0px 2px"; spielfeld.style.backgroundRepeat = "no-repeat"; for(var i=0;i 9) {ztimer_1 = 0; ztimer_10 +=1;} if(ztimer_10 > 9) {ztimer_10 = 0; ztimer_100 +=1;} (punktZeit == 64)?window.clearInterval(tcounter):void(0); document.getElementById("s1").src = "astroklick/icon/z"+ztimer_1+".jpg"; document.getElementById("s10").src = "astroklick/icon/z"+ztimer_10+".jpg"; document.getElementById("s100").src = "astroklick/icon/z"+ztimer_100+".jpg"; (tileCounter - punktZeit <= 0)?looser(1):void(0); } //================================================================================ function TileCounter()//Puzzleteile { tileCounter--; var TCstring = tileCounter.toString(); TCstring_0 = (TCstring.length>1)?TCstring.substring(0,1):0; TCstring_1 = (TCstring.length>1)?TCstring.substring(1,2):TCstring; document.getElementById("t10").src = "astroklick/icon/z"+TCstring_0+".jpg" document.getElementById("t1").src = "astroklick/icon/z"+TCstring_1+".jpg" } /* =================================================================================== */ /* ################################ #******************************# #* Auswertung und Ende *# #******************************# ################################ */ function winner()//gewonnen? { window.clearInterval(tcounter); punktstand = tileCounter - punktZeit; //----------------Lösung einblenden---------------------------------------------- var loesung = new Image(); loesung.id = "loesung"; loesung.src = "astroklick/"+gameWahl.data[0]+"loesung.jpg"; loesung.style.position = "absolute"; loesung.style.zIndex = "10"; loesung.style.left = "10px"; loesung.style.top = "12px"; loesung.style.width = "553px"; loesung.style.height = "553px"; var opac = (DOM==1)?"loesung.style.opacity=\"0.0\"":"loesung.style.filter=\"alpha(opacity=0 finishopacity=0)\";"; eval(opac); document.getElementById("gamebox").appendChild(loesung); fadeTimer = window.setInterval("fade()",25); //--------------------------Motiv-Text einblenden--------------------------------- var loesText = document.createTextNode(texte.contents[rand].loese); var loesDiv = document.createElement("div"); loesDiv.style.position = "absolute"; loesDiv.id ="loesDiv"; loesDiv.style.zIndex = "10"; loesDiv.style.left = "25px"; loesDiv.style.top = "442px"; loesDiv.style.width = "520px"; loesDiv.style.height = "250px"; loesDiv.style.font = "10pt verdana,arial,sans-serif"; loesDiv.style.color = "#ffffff"; loesDiv.appendChild(loesText); document.getElementById("gamebox").appendChild(loesDiv); //-------------------------Winnerbox einblenden------------------------------------ var h1 = document.createElement("h1"); h1.style.font = "bold 12pt sans-serif"; var winner = document.createTextNode("Gewonnen!!"); h1.appendChild(winner); var p = document.createElement("p"); p.style.width = "290px"; p.style.font = "bold 12pt sans-serif"; var score = document.createTextNode("Deine Punktzahl: "+punktstand); p.appendChild(score); var wlabel = document.createElement("label"); wlabel.style.width = "290px"; wlabelFor = document.createAttribute("for"); wlabelFor.nodeValue = "winIn"; wlabel.setAttributeNode(wlabelFor); var wlabelT = document.createTextNode("Dein Name: "); wlabel.appendChild(wlabelT); var winIn = document.createElement("input"); winIn.style.width = "100px"; winIn.style.border = "#000000 solid 1px"; winIn.type = "text"; winIn.id = "winIn"; var p2 = document.createElement("p"); p2.style.width = "290px"; p2.style.font = "bold 12pt sans-serif"; p2.appendChild(wlabel); p2.appendChild(winIn); var okImg = new Image(); okImg.src = "astroklick/icon/ok.png"; var okAktion = document.createAttribute("onclick"); okAktion.nodeValue = "saveBest()"; okImg.setAttributeNode(okAktion); var p3 = document.createElement("p"); p3.style.width = "290px"; p3.appendChild(okImg); xBox(h1,p,p2,p3); } //==============================Fader für Lösung================================== var fadeTimer; function fade() { if(document.getElementById("loesung")) { var opac = (DOM==1)?document.getElementById("loesung").style.opacity:document.getElementById("loesung").style.filter; if(DOM==1) { document.getElementById("loesung").style.opacity = parseFloat(opac)+0.025; (parseFloat(opac)+0.1 >= 1)?window.clearInterval(fadeTimer):void(0); } else { var ieFilter = parseInt(opac.split("=")[2].split(")")[0])+5; document.getElementById("loesung").style.filter = "alpha(opacity="+ieFilter+" finishopacity="+ieFilter+")"; (ieFilter >=100)?window.clearInterval(fadeTimer):void(0); } } } /* =================================================================================== */ function looser()//verloren { window.clearInterval(tcounter); var xlooser = document.createTextNode((arguments[0]==1)?"Die Zeit ist abgelaufen!":"Das war falsch!"); var loosed = document.createElement("p"); loosed.style.width = "290px"; loosed.style.font = "bold 12pt sans-serif"; loosed.appendChild(xlooser); xBox(loosed); var timer = window.setTimeout("Spiel()",2000); } /* =================================================================================== */ function xBox() { var winbox = document.createElement("div"); winbox.style.position = "absolute"; winbox.style.left = "575px"; winbox.style.top = "200px"; winbox.style.width = "300px"; winbox.style.height = "206px"; winbox.style.backgroundImage = "url(astroklick/icon/aabox.png)"; winbox.style.backgroundPosition = "0px 2px"; winbox.style.backgroundRepeat = "no-repeat"; winbox.style.padding = "10px 0px 0px 10px"; winbox.style.lineHeight = "36px"; winbox.style.textAlign = "center"; for(var i=0;i