⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 scrollingdeu.html

📁 java tutorial all about java game design
💻 HTML
字号:
🔍 
<html><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Java Cooperation: scrolling</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>Scrollen eines Bildschirms</h2>
  <p align="justify">Ich bin mir ziemlich sicher, dass sich jeder von euch noch an das Spiel "Moorhuhn" erinnern kann, das vor ein paar Jahren Internetspiele (v.a. Werbespiele) so richtig popul&auml;r gemacht hat. Dieses Spiel lebte zu einem gro&szlig;en Teil davon, dass man nie den gesamten Bildschirm, sondern nur Teile davon in seinem Blickfeld hatte. Bewegte man die Maus an den Rand des Fensters, so scrollte der Bildschirm in die betreffende Richtung, d. h. das Blickfeld verschob sich. Und genau dieses "Problem" m&ouml;chte ich euch mit diesem Kapitel ein wenig n&auml;her bringen und euch nat&uuml;rlich meine L&ouml;sung daf&uuml;r vorstellen. Ich habe diese L&ouml;sung beim Programmieren des Spiels <a href="Applets/Games/UfoAttacks/UfoAttacks.html" >UfoAttacks</a> entwickelt und das erste mal verwendet.</p>
  <h3>Die Grundidee</h3>
  <p align="justify">Immer, wenn wir bisher unbewegte Objekte in unser Spiel aufgenommen haben (Steine, Grenzen...), so hatten diese immer einen festen "Standort", also eine fixe Position auf dem Spielfeld, die sich im Laufe des Spiels nicht &auml;nderte. Lediglich bewegte Objekte ver&auml;nderten ihre Position. Von dieser Vorstellung m&uuml;ssen wir uns nun verabschieden und damit haben wir eigentlich auch schon die L&ouml;sung f&uuml;r unser Problem, n&auml;mlich das Bildschirmscrollen, gefunden. In einem Spiel, dessen Bildschirm bzw. dessen Landschaft scrollen soll, hat einfach kein Objekt eine feste Position. Die Positionen aller Spielobjekte werden beim Scrollen des Bildschirms ver&auml;ndert.
  <h3>Veranschaulichung</h3>
  Nehmen wir der Einfachheit halber mal an, wir haben ein Applet der Gr&ouml;&szlig;e 300 x 300 und einen Hintergrund voller "Sterne", den wir scrollen wollen (siehe <a href= "Applets/Scrolling/Scroller.html" >Beispiel Applet</a>). Wir k&ouml;nnen nun nur einen Ausschnitt des gesammten Spielfeldes sehen, das 600 x 300 Pixel gro&szlig; sein soll, d. h. einige Sterne haben momentan Positionskoordinaten, deren Werte kleiner als 0 oder gr&ouml;&szlig;er als 300 sein k&ouml;nnen. Sie werden also au&szlig;erhalb unseres Blickfeldes gezeichnet, das zu Beginn des Applets den Spielfeldbereich zwischen den Positionen 150 und 450 umfasst, vorausgesetzt wir blicken genau in die Mitte unseres Spielfeldes.</p>   <br>
  <img src="tutorial_pics/Scrolling1.gif" align="left" border="0">
  <p align="justify"><i>Dieses Bild verdeutlicht die momentanen Positionen aller Spielobjekte. Die gelben Zahlen geben die absoluten Positionen der Objecte im Spielfeld an, die gr&uuml;nen die relativen Positionen, bezogen auf den Sichtbereich. Im blau gestrichelten Bereich haben alle Objekte im Moment eine Position &gt; 300, im rot gestrichelten Bereich sind die Positionen &lt; 0, alle Objekte mit einer relativen Position von 0 - 300 werden in unserem Gesichtsfeld gezeichnet</i></p><br clear=all> <br>
  <p align="justify">Stellen wir uns nun vor, wir scrollen den Screen nach links. Das bedeutet, dass wir die Werte der x - Koordinaten aller Sterne erh&ouml;hen m&uuml;ssen indem wir die Geschwindigkeit, mit der wir nach links scrollen, zur Position eines jeden Sternes hinzuz&auml;hlen. So werden die einige Sterne aus unserem Gesichtsfeld verschwinden (ihre Position wird gr&ouml;&szlig;er als 300), andere werden in unser Blickfeld treten, sobald ihre x - Koordinate nicht mehr negativ sondern &gt; 0 ist.</p> <br>
  <img src="tutorial_pics/Scrolling2.gif" align="left" border="0">
  <p align="justify"><i>Dieses Bild zeigt die Situation nach dem Scrollen nach links. Der Blickbereich hat sich bis zum Rand des Spielfeldes verschoben. Daher existieren nun keine Objekte mehr, deren Position kleiner als 0 ist. Nach wie vor gibt es jedoch viele Objekte, deren Lage gr&ouml;&szlig;er ist als 300, die sich also rechts au&szlig;erhalb unseres Sichtfeldes befinden.</i></p><br clear=all> <br>
  <h3>Die Initialisierung der Objekte</h3>
  <p align="justify">Wie ihr ja gesehen habt, stimmen nun, da wir nicht immer das gesammte Spielfeld sehen, die Positionen der Objekte im Spielfeld nicht mehr mit ihren Zeichenpositionen &uuml;berein. Ich m&ouml;chte das kurz am Beispiel der beiden Spielfeldgrenzen verdeutlichen. Wie gesagt ist unser <i>Spielfeld</i> 600 Pixel breit. Wie blicken am Anfang des Applets genau in die Mitte unseres Spielfeldes. Die linke Grenze unseres <i>Blickfeldes</i> ist also, bezogen auf das Spielfeld, die Koordinate 150. Die linke Grenze des <i>Spielfeldes</i> befindet sich also 150 Pixel weiter links, hat also die Position -150. Die rechte Grenze des Spielfeldes dagegen befindet sich 150 Pixel weiter rechts als die Grenze unseres Blickfeldes, also an Position 450. Somit k&ouml;nnen wir eine kleine Formel ableiten, mit der wir alle unsere Objekte, die eine bestimmte Position bezogen auf das Spielfeld haben, initialisieren k&ouml;nnen. Diese Formel gilt dabei nur, wenn wir am Start des Applets genau in der Mitte unseres Spielfeldes beginnen. Die Formel lautet:
  <ul><i>Startposition eines Objektes = Spielfeldposition - (Appletgr&ouml;&szlig;e / 2)</i></ul>
  Ich hoffe, dass euch das Prinzip nun soweit klar ist. Im folgenden m&ouml;chte ich noch kurz auf den Sourcecode und bewegte Objekte eingehen.
  </p>
  <h3>Einige Besonderheiten des Sourcecodes</h3>
  <p align="justify">Wie ich schon angedeutet habe, ist der einzige Unterschied im Bezug auf fr&uuml;here, nicht scrollende Applets, dass sich jedes Spielobjekt beim Scrollen des Bildschirmes bewegt. Daher verf&uuml;gt jedes Object in dem Beispielapplet &uuml;ber eine Methode scrollObject (int speed). Diese bewegt das Object beim Scrollen des Bildschirmes mit der richtigen Geschwindigkeit in die betreffende Scrollrichtung. <br>
  Das Applet selbst wird mit der Methode scrollGame(int speed) gescrollt. Diese Methode wird bei jedem Threaddurchlauf aufgerufen und ruft (falls die Scrollgeschwindigkeit gr&ouml;&szlig;er 0 ist) f&uuml;r jedes Spielobjekt (in unserem Fall alle Sterne im Sternenarray, sowie das Ufo) die jeweilige scrollObjekt - Methode des Objektes auf. <br>
  Bewegte Objecte k&ouml;nnen auch weiterhin auf die gleiche Art und Weise wie immer bewegt werden. Es ist nur darauf zu achten, dass auch bewegte Objekte zus&auml;tzlich zu ihrer eigenen Bewegung gescrollt werden m&uuml;ssen.</p>
  <h3>Das Beispielapplet</h3>
  <p align="justify">In dem Beispielapplet zu diesem Kapitel findet ihr beide Arten von Objekten. Die Sterne und die beiden Grenzen des Spielfeldes (blau) representieren statische Spielobjekte, die ihre Position lediglich durch das Scrollen &auml;ndern. Des weiteren fliegt noch ein Ufo durch die Gegend, anhand dessen ihr euch die Behandlung von bewegten Objekten ansehen k&ouml;nnt. Die Zahlenwerte dienen nur eurer Orientierung und der Veranschaulichung der Positionen von statischen Objekten (Beispiel: rechte und linke Spielfeldgrenze). Ansonsten ist der Sourcecode eigentlich selbsterkl&auml;rend und ich hoffe, dass ich euch ein wenig weiterhelfen konnte. Wie immer gibts am Ende das Applet zum Runterladen und Ansehen.</p>
  <p><a href="SourceCodes/Scrolling/Scrolling.zip">SourceCode download</a><br>
  <a href="Applets/Scrolling/Scroller.html">Applet ansehen</a>
  <h4>N&auml;chstes Kapitel</h4>
<a href="ShootingSpaceshipDeu.html">Ein schie&szlig;endes Raumschiff</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 + -