// Es werden die Start-Positionen für das Schiff (10,10) = obere linke Ecke, das Ufo (800,800) und das Plasma (800,400) festgelegt.
// Die Punkte werden in der Variablen punkte gespeichert (Anfangswert = 0). Die Werte der Variablen werden aber erst nach einem 
// Tastendruck unten mit document.getElementById... übergeben. Die eigentliche Startposition wird unten in html über die
// <div>-Blöcke festgelegt.

var xpos=10;
var ypos=10;
var xposu=800;
var yposu=800;
var xposp=800;
var yposp=400;

var punkte=0;

// Wenn eine Taste gedrückt wird, dann wird der Wert der Taste in der Variable nr gespeichert. Die Taste a hat die Nummer 97.
// Beim Drücken von a wird die x-Position um den Wert 5 verringert (am Anfang hätte dann xpos den Wert 10 - 5 = 5 und das Schiff würde
// die Position (5, 10) haben). Entsprechend wird bei der Taste d (Nummer 100) die x-Position um den Wert 5 erhöht, womit sich
// das Schiff nach rechts bewegt. Die Taste w hat die Nummer 119 und die Taste s die Nummer 115 (beim Drücken dieser Tasten wird die
// y-Position entsprechend verändert). Wenn man den Kommentar (//) in der Zeile "//alert(nr);" entfernt, wird die Nummer der gedrückten
// Taste immer ausgegeben.

// Bei jedem Tastendruck wird die Punktzahl um 1 erhöht.

if(document.captureEvents)document.
captureEvents(Event.KEYPRESS);
document.onkeypress = alarm;
function alarm(e)
{
var nr = document.all? window.event.keyCode : e.which;

if(document.captureEvents) routeEvent(e);
//alert(nr);

punkte+=1;
if (nr==97) xpos-=5;
if (nr==100) xpos+=5;
if (nr==119) ypos-=5;
if (nr==115) ypos+=5;

// d ist das Quadrat des Abstandes des Schiffes zur Position (400,400), dem Wurmloch.
// du ist das Quadrat des Abstandes des Schiffes zum Ufo.
// dp ist das Quadrat des Abstandes des Schiffes zum Plasma.

d=(xpos-400)*(xpos-400)+(ypos-400)*(ypos-400);
du=(xpos-xposu)*(xpos-xposu)+
(ypos-yposu)*(ypos-yposu);
dp=(xpos-xposp)*(xpos-xposp)+
(ypos-yposp)*(ypos-yposp);


// Beim Fliegen in das Wurmloch (d.h. wenn d <= 6400) wird die Position des Schiffes auf (800,100) gesetzt und somit verschoben.
dw=6400;
if (d<=dw) {
punkte+=200;
xpos=800;
ypos=100;}

// Bei der Kollision mit dem Ufo (d.h. wenn du <= 4000) wird die Position des Schiffes auf (10,10) und die des Ufos auf (700,300) gesetzt
// und die Punktzahl um 1000 verringert (falls diese dann negativ wäre, wird sie auf 0 gesetzt). Es wird auch eine Meldung ausgegeben (über alert).
dmax=4000;
if (du<=dmax) punkte-=1000;
if (punkte<0) punkte = 0;
if (du<=dmax) {
xpos=10;
ypos=10;
xposu=700;
yposu=300;
alert("Kollision mit Ufo! -1000 Punkte!");}

// Bei der Kollision mit dem Plasma (d.h. wenn dp <= 3600) wird die Position des Schiffes auf (10,10) und die des Plasmas auf (700,300) gesetzt
// und die Punktzahl um 800 verringert (falls diese dann negativ wäre, wird sie auf 0 gesetzt). Es wird auch eine Meldung ausgegeben (über alert).
dmax=3600;
if (dp<=dmax) punkte-=800;
if (punkte<0) punkte = 0;
if (dp<=dmax) {
xpos=10;
ypos=10;
xposp=700;
yposp=300;
alert("Kollision mit Plasma! -800 Punkte!");}

// Bewegung Ufo: Es wird eine (Pseudo-)Zufallszahl erzeugt, die zunächst zwischen 0 und 1 liegt. Diese wird mit 15 multipliziert, womit
// diese zwischen 0 und 15 liegt. Der Wert wird in a gespeichert. Entsprechend wird eine Zufallszahl zwischen 0 und 20 erzeugt und
// in b gespeichert. Die x-Position des Ufos wird dann um den Wert a erhöht (= zufällige Bewegung nach rechts). Zur y-Position wird der
// Wert b-5 (dies wäre dann eine Zahl zwischen -5 und 15) addiert. Eine Erhöhung des Wertes der y-Position ist eine Bewegung nach unten.
// Im "Mittel" bewegt sich das Schiff dann "zufällig" nach unten, da im "Mittel" mehr erhöht als verringert wird. Gleichzeitig bewegt sich das Ufo
// nach rechts (bei jedem Tastendruck zwischen 0 und 15 Einheiten).

a=Math.random();
a=15*a;
a=Math.round(a);
b=Math.random();
b=20*b;
b = Math.round(b);
xposu+=a;
yposu+=b-5;


// Wenn die Taste x gedrückt wird (falls nr = 120), so wird der Laser aktiviert. In diesem Fall wird das Bild laser.jpg eingeblendet (an der Position
// (xpos + 120, ypos + 10)). Wenn die Taste nicht gedrückt wurde, wird die Position des Lasers auf (-400, -400) gesetzt, die nicht zu sehen ist.
// Bei einem Treffer wird die Punktzahl um 2000 erhöht. Damit getroffen wurde, muss folgendes gelten: Der Betrag der Differenz der
// y-Positionen (dly) von Schiff und Ufo darf höchstens 30 betragen und das Ufo muss sich vor dem Schiff befinden (d.h. dlx >= 10).
// Bei einem Treffer wird die y-Position des Ufos auf xposu+100 gesetzt. Außerdem wird an der Stelle, an der sich zuvor das Ufo befand,
// das Bild ufot.jpg eingeblendet, welches ein rotes Ufo zeigt.

if (nr==120) document.getElementById("laser").style.left=
xpos+120;
if (nr==120) document.getElementById("laser").style.top=
ypos+10;
if (nr != 120) document.getElementById("laser").style.left=-400;
if (nr != 120) document.getElementById("laser").style.top=-400;
dlx=xposu-xpos;dly=Math.abs(ypos-yposu);
if (nr == 120 && dlx>=10 && dly <=30) {
alert("Treffer! +2000 Punkte!");
document.getElementById("ufot").style.left=xposu;
document.getElementById("ufot").style.top=yposu;
punkte=punkte+2000;
yposu=xposu+100;}
else {document.getElementById("ufot").style.left=-400;
document.getElementById("ufot").style.top=-400;}

// Es darf nichts über den "Rand" fliegen:
if (xpos>1000) xpos=1000;
if (ypos>900) ypos=900;
if (xpos<10) xpos=10;
if (ypos<10) ypos=10;
if (xposu>1000) xposu=10;
if (yposu>900) yposu=10;
if (xposp>1000) xposp=10;
if (yposp<10) yposp=900;

// Hier werden nun die Positionen gesetzt bzw. verändert. Ohne diese Anweisungen würden nur die Werte der Positionen verändert werden,
// die Veränderung wäre aber nicht zu sehen.
document.getElementById("schiff").style.left=xpos;
document.getElementById("schiff").style.top=ypos;
document.getElementById("ufo").style.left=xposu;
document.getElementById("ufo").style.top=yposu;
document.getElementById("plasma").style.left=xposp;
document.getElementById("plasma").style.top=yposp;
document.getElementById("info").value=punkte;
document.getElementById("info2").value=punkte;
}

// Die Funktion plasmashift bewegt das Plasma und ruft sich alle 100ms neu auf. Sie befindet sich außerhalb des if-Blocks,
// der bei einem Tastendruck durchlaufen wird. Damit bewegt sich hier das Plasma unabhängig vom Ufo. Das Plasma bewegt sich
// im "Mittel" nach oben (denn zur y-Position yposp des Plasmas wird alle 100ms eine Zahl zwischen -10 und 4 addiert) und nach
// rechts (denn zur x-Position xposp des Plasmas wird alle 100ms eine Zahl zwischen 0 und 16 addiert).
function plasmashift(){
xposp=xposp+16*Math.random();
yposp=yposp+14*Math.random()-10;
// nicht über Rand fliegen
if (xposp>1000) xposp=10;
if (yposp>900) yposp=10;
document.getElementById("plasma").style.left=xposp;
document.getElementById("plasma").style.top=yposp;
setTimeout ("plasmashift()", 100);}

</script>
</head>
<body bgcolor='#2222ff' background='hintergrund.jpg' onload="plasmashift()">
<font color='#ff0000' size ='4'><br><br>Steuere mit a,w,s,d.<br> Laser abfeuern: x-Taste</font>

<div id='schiff' style='position:absolute;
z-index:1;left:10;top:10;visibility:visible;'>
<img border='0' src='schiff.jpg'> </div>

<div id='bild1' style='position:absolute;
z-index:1;left:400;top:400;visibility:visible;'>
<img border='0' src='bild1.jpg'> </div>

<div id='ufo' style='position:absolute;
z-index:1;left:800;top:800;visibility:visible;'>
<img border='0' src='ufo.jpg'> </div>

<div id='ufot' style='position:absolute;
z-index:1;left:-400;top:-400;visibility:visible;'>
<img border='0' src='ufot.jpg'> </div>

<div id='plasma' style='position:absolute;
z-index:1;left:800;top:400;visibility:visible;'>
<img border='0' src='plasma.jpg'> </div>

<div id='laser' style='position:absolute;
z-index:1;left:-500;top:-500;visibility:visible;'>
<img border='0' src='laser.jpg'> </div>

<br>
<font color='#ff0000' size ='4'>
Punkte:<input type='text' name='info' id='info' size='10' value='0' disabled>
</font><br>

</body>
</html>