Kleiner JavaScript Kurs
"Künstliche Intelligenz" (Schnapp den Schatz)
Jetzt programmieren wir ein kleines Spiel, bei dem du gegen den Computer spielst.
Die Geschichte: 2 Piraten haben einen Schatz gefunden. Leider gibt es nur eine Schatztruhe
mit Gold
und viele Säcke mit Steinen.
Da beide Piraten nicht teilen wollen, spielen sie um den Schatz. Jeder darf abwechselnd 1 bis 3 Säcke nehmen. Wer mit einem Zug am Ende (wieder mit 1 bis 3 Gegenständen) den Schatz nehmen kann, darf ihn behalten und hat gewonnen. Das spiel ist noch sehr einfach programmiert und beginnt immer mit dem Schatz und 20 Säcken. Schwieriger würde es werden, wenn beim Start durch Zufall z.B. zwischen 15 und 30 Säcke angezeigt würden. Du kannst das Spiel ja entsprechend umprogrammieren. Der Computer macht übrigens keine Fehler, so dass es schwer ist, zu gewinnen (es ist auch nur möglich, da du das Spiel beginnst).
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>JavaScript Kurs; "künstliche Intelligenz" (Schnapp den Schatz)</title>
<script type="text/javascript">
var Zufallszahl;
var Anzahl=21;
var Ausgabetext= ["Du beginnst -> weiter", "Der Computer beginnt", "Der Computer nimmt", "Wie viele Säcke nimmst Du?", "Sack", "Säcke", "Der Computer hat gewonnen", "Herzlichen Glückwunsch, Du hast gewonnen", "1, 2 oder 3 Säcke müssen genommen werden"];
var Rest=21;
var PCnimmt;
var zuviel=" ";
function Schatz(){
var Schaltflaeche=document.getElementById('Button1');
var TextAusgabe=document.getElementById('meinAusgabefeld');
Rest=21;
var Ausgabe=document.getElementById('Bild1');
Ausgabe.src="images/schatz.gif";
for(i=2;i<=Anzahl;i++){
var Ausgabe=document.getElementById('Bild' + i);
Ausgabe.src="images/sack.gif";
}
TextAusgabe.innerHTML=Ausgabetext[0];
Schaltflaeche.value="weiter ->";
Schaltflaeche.onclick=Schatz_1;
}
function Schatz_1(){
var Schaltflaeche=document.getElementById('Button1');
var TextAusgabe=document.getElementById('meinAusgabefeld');
TextAusgabe.innerHTML=Ausgabetext[3];
Schaltflaeche.onclick=EinDu;
}
function EinDu(){
var Eingabe=document.getElementById('Eingabe').value;
var FehlerAusgabe=document.getElementById('meinFehler');
var TextAusgabe=document.getElementById('meinAusgabefeld');
var Schaltflaeche=document.getElementById('Button1');
if(Eingabe < 1 || Eingabe > 3)
{FehlerAusgabe.innerHTML="Du musst mindestens 1 und höchstens 3 Säcke nehmen !";}
else
{FehlerAusgabe.innerHTML="";
if(Eingabe>Rest){
Eingabe=Rest;
var zuviel="Es sind nur noch " + Rest + " vorhanden. "
}
for(i=Rest-Eingabe+1; i<=Rest;i++){
var Ausgabe=document.getElementById('Bild' + i);
Ausgabe.src="images/leer.gif";
}
Rest=Rest-Eingabe;
if (Rest==0){
TextAusgabe.innerHTML=Ausgabetext[7];
Schaltflaeche.value="Neustart ?";
Schaltflaeche.onclick=Schatz;
}
else {
PCnimmt=Rest % 4;
if (PCnimmt==0) {
var Zufallszahl=Math.random();
Zufallszahl=Math.ceil(Zufallszahl*3);
PCnimmt = Zufallszahl;
}
TextAusgabe.innerHTML="Jetzt ist der Computer dran. Der Computer nimmt " + PCnimmt;
Schaltflaeche.onclick=EinPC;
} }
}
function EinPC(){
var TextAusgabe=document.getElementById('meinAusgabefeld');
var Schaltflaeche=document.getElementById('Button1');
for(i=Rest-PCnimmt+1; i<=Rest;i++){
var Ausgabe=document.getElementById('Bild' + i);
Ausgabe.src="images/leer.gif";
}
Rest=Rest-PCnimmt;
if (Rest==0) {
TextAusgabe.innerHTML=Ausgabetext[6];
Schaltflaeche.value="Neustart ?";
Schaltflaeche.onclick=Schatz;
}
else {
TextAusgabe.innerHTML=Ausgabetext[3];
Schaltflaeche.onclick=EinDu;
}
}
</script>
</head>
<body>
<h1>JavaScript Kurs; "künstliche Intelligenz" (Schnapp den Schatz)</h1>
<h2>Ziel des Spiels ist es, den Schatz zu bekommen. Abwechselnd dürfen die 2 Spieler (Du und der Computer) 1, 2 oder 3 Säcke nehmen<br clear="all"/>
(also mindestens 1, höchstens 3). Wer am Schluss den Schatz nehmen kann, hat gewonnen.</h2>
<!-- Schaltfläche auf HTML Seite; onclick Ereignis startet JavaScript -->
<input type="submit" id="Button1" value="Start" onclick="Schatz();">
<br> <br>
<img src="images/schatz.gif" id="Bild1" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild2" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild3" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild4" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild5" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild6" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild7" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild8" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild9" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild10" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild11" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild12" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild13" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild14" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild15" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild16" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild17" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild18" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild19" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild20" alt="" border="0" width="50" height="50">
<img src="images/leer.gif" id="Bild21" alt="" border="0" width="50" height="50">
<font color="#0000FF"><h2 id="meinAusgabefeld"></h2></font>
1 - 3 eingeben: <input type="text" id="Eingabe" /> -> weiter klicken
<font color="#FF0000"><h2 id="meinFehler"></h2></font>
</body>
</html>