Javascript Demo-Spiel
Das folgende Spiel ist in einer einzigen HTML-Seite integriert. Es unterliegt der GPLv3.0 Lizenz.
- Aufgabe
- Fange mit der Maus die Kreise.
- Schwierigkeit
- Zeitlimite
- Jeder Klick kostet 50 Punkte
- Gewonnen
- Alle bewegten
o
in gestopptex
verwandelt - Verloren
- Null oder weniger Punkte erreicht
→ Spiel starten
(Hinweis: Benötigt CSS und JavaScript, funktioniert folglich nur mit richtigen Webbrowsern.)
Der Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> body { border: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; } #game { position: fixed; top: 0; right: 0; left: 0; bottom: 0; border: 0; padding: 0; background-color: red; } </style> <title>JavaScript</title> <script type="text/javascript">; // ====================================================================== Globals var timer; var score; var feinde; window.captureEvents(Event.LOAD|Event.CLICK); // ====================================================================== Startup window.onload = function() { try { // ------------------------------------------------------------- Object: Span function Span(i, scr) { // -------------------------------------------------------------- Variables this.o = document.createElement('span'); this.dirx = Math.random()*10-5; this.diry = Math.random()*10-5; this.dead = false; this.o.href = "javascript:alert('hallo')"; // ---------------------------------------------------------- Methods this.recalc = function() { // ................................. Span.recalc if (this.dead) { this.o.innerHTML = "x"; return true; } this.dirx += Math.random()*2-1; this.diry += Math.random()*2-1; if (Math.abs(this.dirx)>5) this.dirx = this.dirx<0?-5:5; if (Math.abs(this.diry)>5) this.diry = this.diry<0?-5:5; this.o.style.left = parseFloat(this.o.style.left) + this.dirx; this.o.style.top = parseFloat(this.o.style.top) + this.diry; if (parseFloat(this.o.style.left) >scr.offsetWidth-this.o.offsetWidth) { this.o.style.left=scr.offsetWidth-this.o.offsetWidth; this.dirx = -this.dirx; } if (parseFloat(this.o.style.top) >scr.offsetHeight-this.o.offsetHeight) { this.o.style.top=scr.offsetHeight-this.o.offsetHeight; this.diry = -this.diry; } if (parseFloat(this.o.style.left)<0) { this.o.style.left=0; this.dirx = -this.dirx; } if (parseFloat(this.o.style.top)<0) { this.o.style.top=0; this.diry = -this.diry; } return false; } this.o.onclick = function() { // ............................. Span.onclick feinde[this.id].dead = true; } // -------------------------------------------------------------- Span.Body this.o.id = i; this.o.style.position = "fixed"; this.o.style.left = Math.random()*scr.offsetWidth; this.o.style.top = Math.random()*scr.offsetHeight; this.o.innerHTML = "o"; scr.appendChild(this.o); } // ------------------------------------------------------------- Startup.Body feinde = new Array(); score = 1000; var scr = document.getElementById("game"); while (scr.hasChildNodes()) scr.removeChild(scr.firstChild); for (var i=0; i<10; ++i) { var child = new Span(i, scr); feinde.push(child); } scr.onclick = function() { // .................................. body.onclick score -= 50; } // ............................................................ Startup.timer timer = window.setInterval(function() { try { var finish = true; for (var i=0; i<feinde.length; ++i) { finish = feinde[i].recalc() && finish; } if (finish) { window.clearInterval(timer); alert("Geschafft!"); return; } if (--score<1) { score = 0; window.clearInterval(timer); alert("Verloren!"); } document.getElementById("score").innerHTML = score; } catch (e) { window.clearInterval(timer); alert(e); } }, 100) // ............................................................. Startup.stop var stop = document.createElement('a'); stop.href = 'javascript:window.clearInterval(timer)'; stop.innerHTML = " STOP "; scr.appendChild(stop); // .......................................................... Startup.restart var stop = document.createElement('a'); stop.href = 'javascript:\ window.clearInterval(timer);\ window.onload();\ '; stop.innerHTML = " RELOAD "; scr.appendChild(stop); // .............................................................Startup.score var p = document.createElement('p'); p.innerHTML = "Score: "; scr.appendChild(p); var s = document.createElement('span'); s.id = "score"; s.innerHTML = score; p.appendChild(s); } catch (e) { // ---------------------------------------------- Start.Exception alert(e); } }; // =========================================================================== </script> </head> <body> <div id="game"> <noscript> <p>Dieses Spielchen benötigt JavaScript.</p> </noscript> </div> <p>Wenn Du das hier siehst, dann kann Dein Webbrowser kein CSS. Bitte benutze einen standardkonformen Browser! Ich empfehle: Firefox.</p> </body> </html>