📄 ballbewegungeng.html
字号:
<html><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Java Cooperation: how to move 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="TutorialStartEng.html"><img src="Pics/engpanel_01.gif" width="56" height="22" border="0"></a><a href="OnlineSpieleStartEng.html"><img src="Pics/engpanel_02.gif" width="94" height="22" border="0"></a><a href="DownloadsEng.html"><img src="Pics/engpanel_03.gif" width="76" height="22" border="0"></a><a href="LinksEng.html"><img src="Pics/engpanel_04.gif" width="52" height="22" border="0"></a><a href="KontaktEng.html"><img src="Pics/engpanel_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="indexDeu.html" onmouseover="cancelCloseMenu(); return true" onmouseout="initiateHideMenu(); return true">German</a><br>
<a href="#" 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>How to move a ball </h2>
<p align="justify">We want to start with a very essential step. We will program an applet in which a ball is moving from the left to the right hand side. I know this is nothing BIG but if you want to learn how to program games it is maybe the most important thing to understand how to animate objects! <br>
<br>
At the beginning we have to write our basic structure of an applet again but we will add two little things. Our applet has to implement the interface Runnable and the corrosponding method run() to animate a object. The structure of the applet should look like this: </p>
import java.applet.*; <br>
import java.awt.*; <br>
<br>
public class BallApplet extends Applet <em>implements Runnable </em><br>
{
<ul>
public void init() { } <br>
<br>
public void start() { } <br>
<br>
public void stop() { } <br>
<br>
public void destroy() { } <br>
<br>
<em>public void run () { } </em><br>
<br>
public void paint (Graphics g) { } <br>
<br>
</ul>
}
<p align="justify">To move a object we need an other object that has to be a instance of the class Thread, we declare this object in the start - method of our applet: </p>
<h3 align="justify">Threads</h3>
<p align="justify">A thread is a piece of program that is able to run paralell to other parts of the program (multithreading). Threads are implemented by the class Thread, the interface Runnable and the method run(), we have already implemented these two things in the step before. Important methods of the class Thread are: </p>
<ul>
<li>Thread.start(): starts a thread
<li>Thread.stop(): stops a thread
<li>Thread.sleep(time in milliseconds): stops thread for a certain amount of time </li>
</ul>
<p>You can find more functions of the thread class in the Java API! <br>
<br>
And here comes the code! </p>
public void start () <br>
{
<ul>
// define a new thread <br>
Thread th = new Thread (this); <br>
// start this thread <br>
th.start (); <br>
</ul>
}
<p align="justify">Now this thread is running in the run() - method of our applet. Every time all methods... in the run - method have been called, we stop the thread for a short time. Your run method should look like this: </p>
public void run () <br>
{
<ul>
// lower ThreadPriority <br>
Thread.currentThread().setPriority(Thread.MIN_PRIORITY); <br>
<br>
// run a long while (true) this means in our case "always" <br>
while (true) <br>
{
<ul>
// repaint the applet <br>
repaint(); <br>
<br>
try <br>
{
<ul>
// Stop thread for 20 milliseconds <br>
Thread.sleep (20); <br>
</ul>
} <br>
catch (InterruptedException ex) <br>
{
<ul>
// do nothing <br>
</ul>
} <br>
<br>
// set ThreadPriority to maximum value <br>
Thread.currentThread().setPriority(Thread.MAX_PRIORITY); <br>
</ul>
}
</ul>
}
<p align="justify">What we have now is a neverending loop that executes all things within the loop, waits 20 milliseconds and executes everything once again and so on. But how can we move a circle that is painted by the applet? <br>
Well this is a very simple idea: Our circle has a x - and a y - position. If we would add 1 to the x - position everytime the thread executed, the ball should be moving across the applet, because it is painted at a different x - position everytime we execute the thread! <br>
<br>
Ok, let's start with drawing a circle: Add these lines to the paint - method of the applet: </p>
public void paint (Graphics g) <br>
{
<ul>
// set color <br>
g.setColor (Color.red); <br>
<br>
// paint a filled colored circle <br>
g.fillOval (x_pos - radius, y_pos - radius, 2 * radius, 2 * radius); <br>
</ul>
}
<p align="justify">And we need the following instance variables at the head of the program: <br>
<br>
int x_pos = 10; <br>
int y_pos = 100; <br>
int radius = 20; <br>
<br>
To move a ball we change the value of the x_pos variable everytime the thread is executed. Our run - method should look like this: </p>
public void run () <br>
{ <br>
...
<ul>
while (true) <br>
{
<ul>
<em>// changing the x - position of the ball/circle <br>
x_pos ++; </em><br>
... <br>
</ul>
}
</ul>
}
<p align="justify">If you add this applet to a HTML - document as seen in the chapter before, a red ball should be moving across the applet one times! </p>
<p><a href="SourceCodes/Ballbewegung1/Ballbewegung1.java">Sourcecode download </a><br>
<a href="Applets/Ballbewegung1/BallBewegung1Applet.html">Take a look at the applet </a>
<h4>Next chapter </h4>
<a href="BildschirmflackernEng.html">Double buffering </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 + -