📄 daserstespieleng.html
字号:
<html><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Java Cooperation: our first game</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>Our first game </h2>
<h3>The game idea </h3>
<p align="justify">In our game, the player has to shot at two balls (a red and a blue one) which are flying around in our applet. The direction and speed will be chosen at random, the user can hit a ball by clicking on it with the mouse pointer. If a ball reaches a border of the applet, without being hit, the player looses one of 10 lifes. If the player lost all of his lifes, the game is over. </p>
<h3>Outline of classes and methods </h3>
<h5>The Main class </h5>
<p align="justify">This class implements all methods concerning the animation of objects (balls) and "management" of the game. These are init(), start(), stop(), paint(), update(), run() and mouseDown() to handle mouse click events. The class also manages all objects (two ball objects, the player object) and the thread in which the game is running! </p>
<ol>
<li>init(): Initializes all objects, gets audio data, sets mouse pointer and gets the game speed from a parameter in the HTML - file.
<li>start(): starts thread
<li>stop(): stops thread
<li>run(): moves the balls
<li>paint(...): calls paint methods of the both balls, paints score and lifes information to the screen. If game is over it writes out a information text, how good the player has been playing (for example: "You are the champingon")
<li>update(...): Implements double buffering
<li>mouseDown (...): Listens to mouse events. If game is running it is watching out for "player hits ball" if game is stopped (start or over) then it listens for a double click and starts game (again). </li>
</ol>
<h5>The class Player </h5>
<p align="justify">This class is very simple. It has two instance variables to store score and lifes of the player. There are also two methods to add score (addScore(int plus)), loose lifes (looseLife) and two methods to transmit these values to the Main class (getScore(), getLifes()). As you see, a pretty simple class. </p>
<h5>The class Ball </h5>
<p align="justify">This class is the most complicated one in the game. It implements all important methods for a ball object including the following functions: </p>
<ol>
<li>Ball(...): Constructor, gets all important attributes of a ball object (color, speed, y - direction, ...) and initializes variables in the ball object.
<li>move(): Method moves the ball and tests by calling isOut() if ball is out which means, player looses one life.
<li>ballWasHit(): This method is called if ball was hit by the player. Afterwards new direction of the ball is set at random, and ball is set back to start position.
<li>userHit (int x, int y): This method tests with help of vectors, if ball was hit or not (details later).
<li>isOut(): Method tests if ball is out. Player looses one life if this is true.
<li>DrawBall(Graphics g): This method draws the ball and is called from the paint method of the Main - class. </li>
</ol>
<h5>How the methods work together: </h5>
<p align="justify">Everytime we call the run - method in our Main class, we call the move - methods of the ball. This method moves the ball and tests if the ball left the applet area by calling isOut(). If the ball has left the applet area, isOut() calles the looseLife() method of the player object and the number of lifes is decreased by one. <br>
Everytime the user clicks in the applet area, the mouseDown method in the Main class is called. This method calls userHit(), which is testing if the ball was hit by the user and returns true if this is the case and returns false if the ball was not hit. If true is returned by userHit() ballWasHit() is called. This method adds the score to the player score, resets the ball... . </p>
<h5>One important thing before we start </h5>
<p align="justify">It is essential, if you want to understand what I'm doing, that you download the <a href="SourceCodes/ErstesSpiel/DasersteSpiel.zip">sourcecode </a>and read in it while I'm explaning things. I won't explain every step in detail, instead you should read the sourcecode, try to understand these things I'm not talking about with help of the other chapters, and learn things by yourself that way. <br>
Even more important might be that you begin to write your own little programs very soon and try to solve problems on your own. Because every game needs its own, very special solutions and mostly there will be noone to help you to find these. Use this little game and all the other applets and sourcecodes on these pages as blueprints and "dictionarys" which help you to implement your own games. You'll learn most if you try it by yourself! </p>
<h3>Randomize the movement direction of the two balls </h3>
<p align="justify">As I said in the second chapter, we will move our ball in this game not only in the x - direction but in the y - direction, too. To do this we have to add a y_speed vector to the applet as well as the x_speed vector you already know. Our ball will have a x_pos variable which will be changed with every call of move() by adding the value of x_speed to it (remenber: x_speed can be negative) and our ball will also have a y_pos variable which will be changed by adding y_speed. In our game the value of y_speed shall be not changing. The first ball will be moving up (y_speed = -1) and the other ball will be movind down (y_speed = 1). Be careful, in Jave the y - coordinates get bigger when moving down!! The value of x_speed will be chosen at random everytime a ball left the applet. </p>
<h5>Random number generator </h5>
<p align="justify">First of all we need a random generator in Java. We have to import the class <em>java.util.*; </em> into the class Ball and declare the following instance variable afterwards: <br>
</p>
<ul>
<em>Random rnd = new Random (); </em>
</ul>
<p align="justify">Now we can generate a random integer number by calling <em>rnd.nextInt() </em>. Because we want to have values between -3 and +3 in our game, we have to calculate this random number mod 4 afterwards. <br>
Now we can randomize the movement direction of the ball. We have to set the value of x_speed to a new random value, everytime the ball was hit or the ball left the applet area. </p>
<h5>The move() - method of the ball object </h5>
<p align="justify">First of all we have to declare four instance variables (x_speed, y_speed, x_pos, y_pos) and initialize them in the constructor of our ball object. Everytime move() is called we add the value of x_speed to the x_pos variable and the value of y_speed to the y_pos variable. Everytime the ball is hit or has left the applet, we initialize x_speed with a random generated value, y_speed will be constant. Here comes the code: </p>
<ul>
<em>public void move() <br>
{ </em>
<ul>
<em> // Add values of y and x_speed to x and y position <br>
pos_x += x_speed; <br>
pos_y += y_speed; <br>
<br>
/* Call isOut() and test if ball is still within the applet area */ <br>
isOut(); <br>
</em>
</ul>
<em>} <br>
</em>
</ul>
<h5>The method isOut() </h5>
<p align="justify">This method tests if a ball has left the applet. If one of the four if - statements is true, the position of the ball will be reset, a audio file will be played, the player looses one life and x_speed will get a new value (per random). <br>
The tests of this method are quite the same as in chapter 2c, but there are four borders we have to test, not only two. But it stays the same technique and you should try to understand this method by yourself, with help of chapter 2c this should be no problem for you. </p>
<h3>How to hit a ball </h3>
<p align="justify">This game was the first one I've ever programmed and this problem of how to hit a ball by clicking on it caused me a lot of headache. Now I will try to explain my solution to you: Our ball has a x and a y position. The mouseDown - method in the main class, which calls userHit (int x_mouse, int y_mouse) gives the coordinates, where the user clicked on the applet, to the method userHit(). Now, our method has to decide if a ball has been hit or not. But how can we do this? <br>
<br>
It is not enough to test if the x and y position of the ball is exactly the same as the position where the player clicked on the applet! This would mean that the player has to hit <em>exactly </em> in the middle of our ball, something that is almost imposible when the ball is moving! <br>
<br>
Ok, second idea: We accept all mouseDown coordinates as a hit that are in a certain range around the exact position of our ball. Of course the x and the y position have to be in this range at the same time (&& - test). That way we would test if the player hit into a rectangle around the ball (for example if the ball has the radius 10, this rectangle should be 20 pixles each side). This was the first idea I tried to implement but it didn't work out that well as I thought it would. The whole thing worked sometimes and sometimes not, even if I hit the ball exactly! I don't even have the slightest idea why it didn't work . <br>
<br>
Well, alright, third idea: I think, everyone has heard of vectors. In our game we have two vectors: one is the x and y position of the ball and the other one is the x and y position of the mouse click. If we calculate the length of the connection vector of these two vectors and if the length of this connection vector is smaller than the radius of the ball, the player has hit the ball. <br>
First of all we have to calculate the connection vector: </p>
<ul>
<em>// Calculate connection vector <br>
double x = maus_x - pos_x; <br>
double y = maus_y - pos_y; <br>
</em>
</ul>
<p align="justify">Now we use Pythagoras (c = Math.sqrt a? + b?) to get the length of this vector, which is the distance between the mouse click and the position of the ball: </p>
<ul>
<em>// Calculate distance <br>
double distance = Math.sqrt ((x*x) + (y*y)); <br>
</em>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -