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
oin gestopptexverwandelt - 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>