📄 pongkideu.html
字号:
<html><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Java Cooperation: Artificial inteligence</title>
<!-- InstanceEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="jc_style.css" rel="stylesheet" type="text/css">
<script src="klayers.js"></script>
<script>
function cancelCloseMenu(){
if(self.tm) clearTimeout(tm) // cancel delayed closing
}
function showMenu(){
if(!self.menu || !self.submenu){
menu=layer("menulayer")
submenu=layer("submenulayer")
}
cancelCloseMenu()
submenu.moveTo(menu.getAbsoluteLeft(), menu.getAbsoluteTop() + menu.getHeight()) // move second menu relatively
submenu.show()
}
function initiateHideMenu(){
tm=setTimeout("hideMenu()",400) // 1 second delay to close a submenu
}
function hideMenu(){
submenu.hide()
}
</script>
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0">
<div align="center">
<a name="top"></a>
<table bgcolor="#737373" border="0" cellpadding="0" cellspacing="0" width="618">
<tr>
<td rowspan="8" bgcolor="#000000"><img src="Pics/spacer.gif" width="1" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="131" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="13" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="58" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="94" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="81" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="48" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="23" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="38" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="19" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="108" height="1" border="0" alt=""></td>
<td bgcolor="#000000"><img src="Pics/spacer.gif" width="5" height="1" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="5"><a href="index.html"><img name="fab_r1_c1" src="Pics/fab_r1_c1.gif" width="131" height="71" border="0" alt="Java cooperation home"></a></td>
<td rowspan="6" bgcolor="#737373"></td>
<td colspan="9" height="15" bgcolor="#737373"></td>
<td rowspan="8" bgcolor="#000000"><img src="Pics/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>
<tr>
<td colspan="5"><div class="colontitul"><!-- InstanceBeginEditable name="Colontitul" -->Tutorial<!-- InstanceEndEditable --></div></td>
<td colspan="2" bgcolor="#737373"><img name="fab_r2_c8" src="Pics/fab_r2_c8.gif" width="57" height="19" border="0" alt="type and press Enter"></td>
<td colspan="2">
<FORM method=GET action="http://www.google.com/search">
<TABLE bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" height="10px"><tr>
<td height="10" valign="middle">
<INPUT TYPE=text name=q size=18 maxlength=60 value="" style="font-size:12px; color:#000000; border-width: 0px;">
<input type=hidden name=domains value="http://javacooperation.gmxhome.de/">
<input type=hidden name=sitesearch value="http://javacooperation.gmxhome.de/" checked>
</td></tr></TABLE>
</td>
</form>
<td><img src="Pics/spacer.gif" width="1" height="19" border="0" alt=""></td>
</tr>
<tr>
<td colspan="9" bgcolor="#666666"><img name="fab_r3_c3" src="Pics/fab_r3_c3.gif" width="474" height="8" border="0" alt=""></td>
<td><img src="Pics/spacer.gif" width="1" height="8" border="0" alt=""></td>
</tr>
<tr>
<td colspan="6"><a href="TutorialStartDeu.html"><img src="Pics/deupanel_01.gif" width="56" height="22" border="0"></a><a href="OnlineSpieleStartDeu.html"><img src="Pics/deupanel_02.gif" width="94" height="22" border="0"></a><a href="DownloadsDeu.html"><img src="Pics/deupanel_03.gif" width="76" height="22" border="0"></a><a href="LinksDeu.html"><img src="Pics/deupanel_04.gif" width="52" height="22" border="0"></a><a href="KontaktDeu.html"><img src="Pics/deupanel_05.gif" width="64" height="22" border="0"></a></td>
<td><img name="fab_r4_c9" src="Pics/fab_r4_c9.gif" width="19" height="22" border="0" alt=""></td>
<td width="108" height="22" bgcolor="#666666"><div align="center"><span id="menulayer" style="position: relative; background-color:#666666; width:108; height:20; vertical-align:baseline; border:1px solid #FFFFFF"><a href="#" class="text" onmouseover="showMenu(); return true" onmouseout="initiateHideMenu(); return true">Select language</a></span>
</div>
<div id="submenulayer" style="position: absolute; visibility: hidden; background-color: #666666; width:108px;">
<div class="text" style="border:1px solid #FFFFFF; border-top-width:0; padding:5px">
<a href="#" onmouseover="cancelCloseMenu(); return true" onmouseout="initiateHideMenu(); return true">German</a><br>
<a href="indexEng.html" onmouseover="cancelCloseMenu(); return true" onmouseout="initiateHideMenu(); return true">English</a><br>
<a href="http://javacooperation.dev.juga.ru/index.html" onmouseover="cancelCloseMenu(); return true" onmouseout="initiateHideMenu(); return true">Russian</a>
</div>
</div>
</td>
<td><img name="fab_r4_c11" src="Pics/fab_r4_c11.gif" width="5" height="22" border="0" alt=""></td>
</tr>
<tr>
<td colspan="9"><img name="fab_r5_c3" src="Pics/fab_r5_c3.gif" width="474" height="7" border="0" alt=""></td>
</tr>
<tr>
<td colspan="11" style="padding:18; background-color:#333333; vertical-align:top;">
<div class="text">
<!-- InstanceBeginEditable name="EditRegion" -->
<h2>Künstliche Intelligenz in einem Pong Klon</h2>
<p align="justify">Viele Spiele erfordern einen Gegner, gegen den der Spieler antreten kann. Um dem Spieler den Eindruck zu vermitteln, dass er einen "echten", ernstzunehmenden Gegner hat, der aber auf der anderen Seite nicht unschlagbar sein darf, benötigt man in vielen Spielen eine Art von "Künstlicher Intelligenz". Ich möchte euch in diesem Kapitel eine sehr einfache KI vorstellen, die sich z. B. in einem Pong Klon einsetzten lässt. Wie schon in dem vorangegangenen Kapitel werde ich nicht mehr auf alle Funktionen des Appelts, das ihr am Schluss sehen könnt eingehen. Ladet euch also den Source Code runter und versucht alles, was ich nicht bespreche, selbst zu verstehen. Als Beispiel für ein fertiges Pong Spiel kann euch
<a href="Applets/Games/StreetHockey/StreetHockey.html"> Streethockey</a> dienen.</p>
<h3>Die Situation</h3>
<p align="justify">Zunächst sollten wir uns kurz klarmachen, was wir eigentlich wollen, bzw. wie ein menschlicher Spieler in einem Pong Klon reagiert. Der Computer hat, wie sein menschlicher Gegner, die Aufgabe den Ball nicht in das Tor zu lassen. Ein menschlicher Spieler versucht dazu mit seinem Paddel immer auf der Höhe des Balles zu sein, um den Ball abzuwehren bevor er ins Tor fliegt. Sich diese sehr einfache Situation so klar zu machen mag vielleicht sogar etwas überzogen wirken, aber genau dieses einfache Verhalten wollen wir nun dem Computer beibringen.</p>
<h3>Die Idee</h3>
<p align="justify">Der Computer soll also ständig den Ball "im Auge behalten" und seine Position (in dem Spiel <a href="Applets/Games/StreetHockey/StreetHockey.html"> Streethockey</a> ist es die y - Position) an die des Balles anpassen. Angenommen das Ballobject würde uns Funktionen zur Verfügung stellen, die uns die aktuelle Position und Geschwindigkeit des Balles übergeben würden (sozusagen die Augen des Computers), könnte eine Funktion, die das Paddel des Computers bewegt, folgendermaßen aussehen:</p>
<h3>Die KI - Funktion</h3>
<ul>
/** Diese Methode bewegt das Paddel */<br>
public void move (Ball ball)<br>
{<ul>
// Berechnet die Mitte des Paddels<br>
real_y_pos = y_pos + (size_y / 2);<br><br>
/* Wenn sich Ball von Paddel wegbewegt, werden die Paddel in die Mitte zurückbewegt */<br>
if (ball.getXSpeed() > 0)<br>
{<ul>
// Paddel oberhalb der Mitte<br>
if (real_y_pos < 148)<br>
{<ul>
y_pos += y_speed;<br>
</ul>}<br>
// Paddel unterhalb der Mitte<br>
else if (real_y_pos > 152)<br>
{<ul>
y_pos -= y_speed;<br>
</ul>}
</ul>}<br>
else if (ball.getXSpeed() < 0)<br>
{<ul>
// Solange Paddel nicht auf Höhe des Balles ist wird es bewegt<br>
if ( real_y_pos != ball.getYPos())<br>
{<ul>
// Ball oberhalb von Paddel<br>
if (ball.getYPos() < real_y_pos)<br>
{<ul>
y_pos -= y_speed;<br>
</ul>}<br>
// Ball unterhalb von Paddel<br>
else if (ball.getYPos() > real_y_pos)<br>
{<ul>
y_pos += y_speed;<br>
</ul>}<br>
</ul>}
</ul>}
</ul>}
</ul>
<h3>Erläuterungen zur Funktion</h3>
<p align="justify">Diese Funktion ist eigentlich denkbar einfach: Zunächst unterscheiden wir zwei verschiedene Fälle:<br>
Bewegt sich der Ball vom Paddel weg ist seine Geschwindigkeit in x - Richtung also positiv (Paddel am linken Spielfeldrand), so wird das Paddel zurück in die Mitte bewegt, indem wir die y - Position solange entweder vergrößern oder verkleinern, bis wir die Mitte des Spielfeldes erreicht haben. Die Mitte wäre ja eigentlich 150. Ich habe jedoch einen Bereich dazwischen freigelassen (151-149) damit das Paddel auch mal richtig gestoppt wird. Würde man in beiden Fällen 150 angeben, so würde sich das Paddel an dieser Position ganz schnell hin und herbewegen, was etwas nervig aussieht.<br>
Jetzt zum eigentlich interessanten Fall: Der Ball bewegt sich auf den Computer zu. Nun muss der Computer versuchen seine y - Position der des Balles anzupassen indem er seine y - Position entweder verkleinert, wenn sich der Ball oberhalb seiner eigenen Position befindet oder eben vergrößert ist das Gegenteil der Fall. Befindet sich der Computer auf Höhe des Balles, so bewegt er sich nicht mehr. Damit hätten wir unsere erste kleine "künstliche Intelligenz" zum "Leben" erweckt und wie ihr euch im Applet unten anschauen könnt, funktioniert sie ganz hervorragend.</p>
<h3>Noch ein Hinweis</h3>
<p align="justify">In diesem Fall kann man die KI so programmieren, dass ein Mensch dagegen keine Chance mehr hat. Zum einen reagiert der Computer sofort auf eine Änderung der Ballposition und wenn er auch noch schneller ist als der Ball, so wird er, da er auch nicht ermüdet, jedes Tor des Spielers vereiteln. Ein solches Spiel würde dem Spieler wohl kaum noch Spaß machen. Es ist also wichtig, dass ihr dem Computer einige Schwächen einbaut, indem ihr den Computer z. B. langsamer macht als den Ball. Alles in allem dauert es wohl ein wenig, bis ihr die "KI" so auf das Spiel abgestimmt habt, dass sie weder zu "dumm" noch zu "intelligent" ist.</p>
<a href="SourceCodes/PongKI/PongKI.zip">SourceCode download (*.zip - Datei)</a><br>
<a href="Applets/PongKI/PongKI.html">Applet ansehen</a>
<h4>Nächstes Kapitel</h4>
<a href="LandscapeDeu.html">Generierung eines Zufallslandschaft</a>
<!-- InstanceEndEditable -->
</div>
</td>
</tr>
<tr>
<td colspan="11" style="background-color:#990000" align="center">
<table width="100%" style="padding:0"><tr>
<td width="88" bgcolor="#993300"><div align="center" style="font-size:10px; color: #FFFFFF;"> <a href="#top"> to top </a></div></td>
<td><div align="center" style="font-size:10px; color: #FFFFFF;">
<a href="mailto:javacooperation@gmx.de">Fabian Birzele</a>, 2001-2004.<br>
web-design: <a href="http://www.freehand.str.ru/">Vadim Murzagalin</a>, 2004.
</div></td>
<td width="88">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
<!-- InstanceEnd --></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -