MRW

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 gestoppte x 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>