📄 ballstopdeu.html
字号:
<html><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Java Cooperation: bounce a ball</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>Den Ball im Spielfeld halten</h2>
<p align="justify">Nachdem wir nun einen Ball ohne Bildschirmflackern über das Spielfeld bewegen können, berherschen wir im Grunde die beiden wichtigsten Grundtechniken zum Programmieren von Spielen mit Animationen. Wir wenden uns also nun einer wichtigen Technik zu, die allerdings nicht mehr durch ein Standardverfahren zu realisieren ist, sondern auf jede Spielsituation speziel zugeschnitten sein muss (natürlich kann man, hat man die Idee einmal gehabt bzw. irgendwo gesehen, immer wieder in ähnlichen Situationen darauf zurückgreifen!). In unseren letzten beiden Programmstücken laüft der Ball lediglich einmal über das Spielfeld. Angenommen wir wollten aber verhindern dass der Ball das Spielfeld verlässt. Stattdessen soll er, hat er den Rand des Spielfeldes erreicht, einfach in die entgegengesetzte Richtung abprallen. Was also müssten wir tun? Am besten wäre es nun natürlich, wenn ihr euch dieses Problem selbst überlegen und es dann auf eure Weise lösen würdet, denn es gibt mit Sicherheit mehr als nur eine Lösung dafür. Im Folgenden erfahrt ihr meinen Lösungsansatz, als Grundlage dient wieder das Ball - Applet, diesmal in der überarbeiteten Version mit Doppelpufferung.</p>
<h5>Ballbewegung in verschiedene x - Richtungen</h5>
<p align="justify">Zunächst müssen wir uns klar machen, wie wir den Ball im ersten Kapitel bewegt haben. Wir haben in jedem Durchlauf des Threads die x - Position des Balles um eins erhöht und den Ball an der neuen Stelle erneut gezeichnet. Wir haben also, ohne es zu wissen, einen Geschwindigkeitsvektor in x - Richtung verwendet, immer wenn wir mit <i>x_pos ++</i> die x - Position verändert haben. Daher können wir auch explizit eine Variable <i>x_speed</i> definieren, die die Geschwindigkeit in x - Richtung angibt und diese mit dem Aufruf von <i>x_pos += x_speed</i> zu x_pos hinzuzählen. Wenn x_speed dabei den Wert 1 hat, so erhöht sich die x - Koordinate des Balles bei jedem Durchlauf um den Wert 1, der Ball bewegt sich also von links nach rechts. Um die Richtung der Ballbewegung umzukehren, müssen wir der Variable x_speed nur den Wert -1 zuweisen. Somit wird die x - Koordinate des Balles in jedem Threaddurchlauf um 1 erniedrigt und der Ball bewegt sich von rechts nach links.</p>
<p align="justify">Nachdem wir die Richtung der Ballbewegung nun umkehren können, ist es nur noch notwendig, zu testen, wann eine Umkehrung der Richtung notwendig wird. Dies erreichen wir mit folgendem Programmstück, das wir in die run - Methode unseres Programmes einfügen.</p>
// Wenn der Ball den rechten Rand berührt, dann prallt er ab <br>
if (x_pos > appletsize_x - radius)<br>
{<ul>
// Ändern der Richtung des Balles<br>
x_speed = -1;
</ul>
}<br>
// Ball brührt linken Rand und prallt ab<br>
else if (x_pos < radius)<br>
{<ul>
// Ändern der Richtung des Balles<br>
x_speed = +1;
</ul>
}<br>
<p align="justify">Wir bestimmen also in jedem Durchlauf, ob die x - Position des Balles größer als der rechte Rand bzw. kleiner als der linke Rand wird. Ist dies der Fall, so ändern wir den Richtungsvektor x_speed des Balles und kehren somit die Bewegungsrichtung des Balles um.<br>
Vielleicht fragt ihr euch nun, warum ich den Radius mit einbeziehe. Die x - Koordinate des Balles ist seine Mitte, also ist die rechte bzw. linke Koordinate um den Radius des Balles größer bzw. kleiner. Damit der Ball nicht erst vom Rand abprallt, wenn er den Rand schon zur Hälfte überschritten hat, sondern schon wenn er den Rand berührt, darf seine x - Position bei einer Appletgröße von 300 und einem Radius von 20 höchstens 280 bzw. 20 betragen, damit es so aussieht, als würde er direkt vom Rand zurückgeschossen.</p>
<h5>Ball auf die andere Seite "beamen"</h5>
<p align="justify">Wenn man das Prinzip der Abfrage nach der Position des Balles einmal verstanden hat, kann man natürlich viele andere Sachen implementieren. Um den Ball, nachdem er auf der einen Seite verschwunden ist auf der anderen wieder auftauchen zu lassen, genügt eine einzige Abfrage und diesmal die Veränderung der x - Position:</p>
// Test ob Ball Spielfeld ganz verlassen hat
if (x_pos > appletsize_x + radius)<br>
{<ul>
// Ändern der Position des Balles<br>
x_pos = -20;
</ul>}
<p align="justify">Später werde ich noch auf die Bewegung eines Balles in x und y Richtung, also in der Ebene eingehen, was allerdings, hat man das Prinzip mit den Richtungsvektoren verstanden, sehr einfach ist. Man muss lediglich einen Vektor in y - Richtung einfügen und die y - Position zusammen mit der x - Position in jedem Threaddurchlauf verändern. Die Abfragen nach der Position gestallten sich ebenfalls nur geringfügig komplizierter. Wer will kann ja schon mal ein Applet programmieren, in dem der Ball nach allen Richtungen fliegen und von allen Wänden abprallen kann.</p>
<p><a href="SourceCodes/BallStop/BallbewegungReverse.java">SourceCode BallReverse download</a><br>
<a href="SourceCodes/BallStop/BallbewegungBeamen.java">SourceCode Programmcode BallBeamen download</a><br>
<a href="Applets/BallStop/BallBewegungReverseApplet.html">Applet <i>Ball Reverse</i> ansehen</a><br>
<a href="Applets/BallStop/BallBewegungBeamenApplet.html">Applet <i>Ball Beamen</i> ansehen</a><br>
<h4>Nächstes Kapitel</h4>
<a href="SoundinAppletsDeu.html">Einbinden von Sounddateien in Applets</a></p>
<!-- 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 + -