Dynamische Webseiten: Programmierung eines Browsergames mit HTML und Javascript/
Einstieg in HTML und Javascript

ISBN-Nr.: 9783839107386, Verlag: BoD, Autor: M. Schuchmann
 



Javascript-Beispiele

Wenn ihr auf den Link klickt, seht ihr das Beispiel im Browser.

while-Schleife:
<table border ="1">
<script type= "text/javascript">
var i = 0;
while (i<10)
{document.write("<tr><td>"+ i +"</td></tr>");i++;}
</script>
</table>

for-Schleife:
<script type= "text/javascript">
for (i=1;i<=5;i++)
{document.write("i hat den Wert:"+ i +"<br>");}
</script>

Formular:
<script type= "text/javascript">
function Ausgabe()
{x = document.getElementById('Nr1').value;
alert("Es wurde folgendes eingegeben:"+x);}
</script>
<form>
<input type="text" name="Feld1" id="Nr1">
<button type="button" onclick="Ausgabe()">Los! </button>
</form>
 
Bemerkung zum Beispiel Formular:

Die Funktion Ausgabe() wird nur aufgerufen, wenn auf den Button geklickt wird.
Möchte man aber, dass die Funktion auch dann aufgerufen wird, wenn z.B. die
Eingabetaste im Input-Feld mit dem Name Feld1 gedrückt wird (in diesem Fall
wird das Formular abgeschickt), dann muss man die Zeile mit <form> durch
<form onsubmit="Ausgabe()"> ersetzen.
 
Anzeige wenn Maus über Link:
<script language="javascript">
function Aktivieren()
{document.getElementById('Ausgabe').style.visibility = "visible";}

function Deaktivieren()
{document.getElementById('Ausgabe').style.visibility = "hidden";}
</script>

<title>Texte bei Linkberührung anzeigen</title>

<a href="http://google.de" OnMouseOver="Aktivieren();">Link zu Google</a>
<div id="Ausgabe" OnMouseOut="Deaktivieren();" style="visibility:hidden;">
<br>Hier gehts zu<br>
Google!!
</div>

Es folgt ein Skript, welches für ein Browsergame relevant ist. Hier kann man eine Grafik (schiff.jpg muss im selben
Verzeichnis stehen) vor einem Hintergrund (hintergrund.jpg) bewegen, indem man die Tasten a,w,s und d verwendet.
Das komplette Browsergame auf Javascriptbasis mit allen Grafiken kann hier heruntergeladen werden oder hier spielen.

Weitere Erläuterungen zum Programm: Die Startposition des Schiffes wird zu Beginn auf (xpos, ypos) = (10, 10) gesetzt,
was der oberen linken Ecke entspricht. Wird beispielsweise die Taste a gedrückt (hier gilt nr = 97), dann wird der Wert von
xpos um 5 reduziert (Bewegung nach links). Dabei wird die Grafik schiff.jpg auf dem Hintergrund verschoben.
Die Position der Grafik wird innerhalb des div-Blocks festgelegt (mit left und top). Das Javascript-Programm verändert
z.B. die horizontale Position mit der Zeile
document.getElementById("schiff").style.left = ... .

Grafik vor Hintergrund bewegen:  (unten ist eine Version, die auch in Firefox läuft)
<html>
<head>
<title>Bild auf Hintergund bewegen</title>
<script language="javascript1.2" type="text/javascript">
// Anfangsposition festlegen
var xpos=10;
var ypos=10;

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);
if (nr==97) xpos-=5;
if (nr==100) xpos+=5;
if (nr==119) ypos-=5;
if (nr==115) ypos+=5;

document.getElementById("schiff").style.left=xpos;
document.getElementById("schiff").style.top=ypos;}

</script>
</head>
<body bgcolor='#2222ff' background='hintergrund.jpg'>
<font color='#ff0000' size ='4'><br><br>Steuere mit a,w,s,d.<br></font>

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



Version, die auch bei Firefox läuft:

Grafik vor Hintergrund bewegen:

<html>
<head>
<title>Bild auf Hintergund bewegen</title>
<script language="javascript1.2" type="text/javascript">
// Anfangsposition festlegen
var xpos=10;
var ypos=10;

document.onkeydown = TasteGedrueckt;

function TasteGedrueckt (Ereignis) {
if (!Ereignis)
Ereignis = window.event;
if (Ereignis.which) {
nr = Ereignis.which;
} else if (Ereignis.keyCode) {
nr = Ereignis.keyCode;
}

if (nr==65) xpos-=5;
if (nr==68) xpos+=5;
if (nr==87) ypos-=5;
if (nr==83) ypos+=5;

document.getElementById("schiff").style.left=xpos;
document.getElementById("schiff").style.top=ypos;}

</script>
</head>
<body bgcolor='#2222ff' background='hintergrund.jpg'>
<font color='#ff0000' size ='4'><br><br>Steuere mit a,w,s,d.<br></font>

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

In den folgenden zwei Beispielen wird ein Würfel geworfen. Dazu müssen im selben Verzeichnis die Grafiken der
Würfelseiten wuerfel1.jpg, wuerfel2.jpg, wuerfel3.jpg, wuerfel4.jpg, wuerfel5.jpg und wuerfel6.jpg vorhanden sein.

würfeln:
<script type="text/javascript">
function grafik() {
var n=Math.floor(6*Math.random())+1;
document.images.wuerfel.src="wuerfel"+n+".jpg";}
</script>

<form action="wuerfel.html">
<img src="wuerfel1.jpg" name="wuerfel"><hr>
<input type="button" VALUE="w&uuml;rfeln" onclick="grafik()">
</form>

Würfelspiel (mit Einsatz):
<script type="text/javascript">
function grafik() {
var n=Math.floor(6*Math.random())+1;
document.images.wuerfel.src="wuerfel"+n+".jpg";
x = document.getElementById('Nr1').value;
punkte=document.getElementById("punkte").value;
einsatz=eval(document.getElementById("einsatz").value);
if(einsatz>punkte) {einsatz=punkte;}
if(einsatz<0) {einsatz=0;}
if(einsatz==null){einsatz=0;}
if(n==x) {alert("gewonnen!!");punkte=Number(punkte)+Number(10*einsatz);}
else {alert("verloren!!");punkte=punkte-einsatz;}
document.getElementById("punkte").value=punkte;
}

</script>

<form>
<img src="wuerfel1.jpg" name="wuerfel">
<hr>
Punkte:<input type='text' name='info' id='punkte' size='10' value='100' disabled>
<br><br>
Einsatz: <input type="text" name="Feld1" id="einsatz">
<br><br>
Setze auf:<select name="Nr1" size="1" id="Nr1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select><br><br>

<input type="button" value="w&uuml;rfeln" onclick="grafik()">
</form>


Weitere Beispiele:

Hier gibt's noch mehr Javascript-Beispiele!


Bei Fragen: e-Mail schicken.