📄 763-771.html
字号:
<HTML>
<HEAD>
<META name=vsisbn content="1571690433"><META name=vstitle content="Black Art of Java Game Programming"><META name=vsauthor content="Joel Fan"><META name=vsimprint content="Sams"><META name=vspublisher content="Macmillan Computer Publishing"><META name=vspubdate content="11/01/96"><META name=vscategory content="Web and Software Development: Programming, Scripting, and Markup Languages: Java"><TITLE>Black Art of Java Game Programming:Slider Puzzle</TITLE>
<!-- HEADER --><STYLE type="text/css"> <!-- A:hover { color : Red; } --></STYLE><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><script><!--function displayWindow(url, width, height) { var Win = window.open(url,"displayWindow",'width=' + width +',height=' + height + ',resizable=1,scrollbars=yes'); if (Win) { Win.focus(); }}//--></script><SCRIPT><!--function popUp(url) { var Win = window.open(url,"displayWindow",'width=400,height=300,resizable=1,scrollbars=yes'); if (Win) { Win.focus(); }}//--></SCRIPT><script language="JavaScript1.2"><!--function checkForQuery(fm) { /* get the query value */ var i = escape(fm.query.value); if (i == "") { alert('Please enter a search word or phrase'); return false; } /* query is blank, dont run the .jsp file */ else return true; /* execute the .jsp file */}//--></script></HEAD><BODY>
<TABLE border=0 cellspacing=0 cellpadding=0>
<tr>
<td width=75 valign=top>
<img src="../1571690433.gif" width=60 height=73 alt="Black Art of Java Game Programming" border="1">
</td>
<td align="left">
<font face="arial, helvetica" size="-1" color="#336633"><b>Black Art of Java Game Programming</b></font>
<br>
<font face="arial, helvetica" size="-1"><i>by Joel Fan</i>
<br>
Sams, Macmillan Computer Publishing
<br>
<b>ISBN:</b> 1571690433<b> Pub Date:</b> 11/01/96</font>
</td>
</tr>
</table>
<P>
<!--ISBN=1571690433//-->
<!--TITLE=Black Art of Java Game Programming//-->
<!--AUTHOR=Joel Fan//-->
<!--AUTHOR=Eric Ries//-->
<!--AUTHOR=Calin Tenitchi//-->
<!--PUBLISHER=Macmillan Computer Publishing//-->
<!--IMPRINT=Sams//-->
<!--CHAPTER=19//-->
<!--PAGES=763-771//-->
<!--UNASSIGNED1//-->
<!--UNASSIGNED2//-->
<CENTER>
<TABLE BORDER>
<TR>
<TD><A HREF="../ch18/759-762.html">Previous</A></TD>
<TD><A HREF="../ewtoc.html">Table of Contents</A></TD>
<TD><A HREF="771-774.html">Next</A></TD>
</TR>
</TABLE>
</CENTER>
<P><BR></P>
<H2><A NAME="Heading1"></A><FONT COLOR="#000077">Chapter 19<BR>Slider Puzzle
</FONT></H2>
<P><I>Steve Green</I></P>
<P>This chapter describes how to write a Java applet for a simple slider puzzle. The aim of the game is simple. After mixing up the numbers, or blocks, you return the blocks to their original positions by sliding them about. Most people are familiar with this game, whether it uses numbers or a picture.
</P>
<P>On starting the puzzle, the player hears some ambient thinking music while the applet draws the blocks. A mouse click over a wood block indicates that this block should move, if it is free to do so. More than one block may be manipulated in a single move by clicking the lead block. For example, if the number 13 block shown in Figure 19-1 is selected, then it and the two blocks to the right are moved to the right. The resulting configuration is shown in Figure 19-2.</P>
<P><A NAME="Fig1"></A><A HREF="javascript:displayWindow('images/19-01.jpg',189,240 )"><IMG SRC="images/19-01t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/19-01.jpg',189,240)"><FONT COLOR="#000077"><B>Figure 19-1</B></FONT></A> The puzzle solved</P>
<P><A NAME="Fig2"></A><A HREF="javascript:displayWindow('images/19-02.jpg',191,240 )"><IMG SRC="images/19-02t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/19-02.jpg',191,240)"><FONT COLOR="#000077"><B>Figure 19-2</B></FONT></A> After a move</P>
<P>During each move, a <I>clink </I>sound can be heard to provide audible feedback. Selecting a block that is not free to move will generate a sound of smashing glass. On completion of the puzzle, the sound of hysterical laughter will ring out from the player’s speakers.</P>
<P>Of course it would be pointless starting with the puzzle already solved, so the Randomize button was added to allow the player to mess things up. Figure 19-3 shows what it could look like after this button is clicked.</P>
<P><A NAME="Fig3"></A><A HREF="javascript:displayWindow('images/19-03.jpg',191,241 )"><IMG SRC="images/19-03t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/19-03.jpg',191,241)"><FONT COLOR="#000077"><B>Figure 19-3</B></FONT></A> Randomized puzzle</P>
<H3><A NAME="Heading2"></A><FONT COLOR="#000077">Creating the Basic Program</FONT></H3>
<P>The aim when developing this program is to learn the basics of how to display and animate graphics, and how to synchronize sounds with the animation.
</P>
<H4 ALIGN="LEFT"><A NAME="Heading3"></A><FONT COLOR="#000077">Understanding the Game’s Logic</FONT></H4>
<P>Before getting into the nitty gritty of the applet, let’s look at the overall logic.
</P>
<P>First, the init() method (shown in Figure 19-4) is called by the Web browser or applet viewer. This method sets up everything the game needs to work with, including the wood block images and the sounds.</P>
<P><A NAME="Fig4"></A><A HREF="javascript:displayWindow('images/19-04.jpg',317,317 )"><IMG SRC="images/19-04t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/19-04.jpg',317,317)"><FONT COLOR="#000077"><B>Figure 19-4</B></FONT></A> The init() method</P>
<P>Once the applet is running, it waits for the execution environment to send events to it. The only event that this applet is interested in is mouse clicks. Mouse clicks over the game’s only button, Randomize, are treated differently from mouse clicks over other parts of the applet area. Both mouseDown and mouseUp events may be intercepted and processed by your applet. The mouseDown event has been chosen to be acted on simply because it makes the game feel better to use. The mouseDown() method is shown in Figure 19-5.
</P>
<P><A NAME="Fig5"></A><A HREF="javascript:displayWindow('images/19-05.jpg',469,421 )"><IMG SRC="images/19-05t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/19-05.jpg',469,421)"><FONT COLOR="#000077"><B>Figure 19-5</B></FONT></A> The mouseDown() method</P>
<P>The only other event this applet needs to be concerned about is one generated in response to the Randomize button being clicked. The execution environment calls a method called action() with the name of the button clicked. By simply including this method in your applet, you can determine which button was pressed and take appropriate action. Figure 19-6 shows the logic flow of this method, as used in this applet.
</P>
<P><A NAME="Fig6"></A><A HREF="javascript:displayWindow('images/19-06.jpg',335,319 )"><IMG SRC="images/19-06t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/19-06.jpg',335,319)"><FONT COLOR="#000077"><B>Figure 19-6</B></FONT></A> The action() method</P>
<H4 ALIGN="LEFT"><A NAME="Heading4"></A><FONT COLOR="#000077">Creating the Graphics</FONT></H4>
<P>First, let’s get the graphics. A large image that contains all the beautiful wood blocks will be “cut up” into smaller GIF images that can be individually displayed and animated in the program. These images should be saved in separate files named 1.GIF to 64.GIF, the file number corresponding to the block number. The block images are shown in Figure 19-7.
</P>
<P><A NAME="Fig7"></A><A HREF="javascript:displayWindow('images/19-07.jpg',468,48 )"><IMG SRC="images/19-07t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/19-07.jpg',468,48)"><FONT COLOR="#000077"><B>Figure 19-7</B></FONT></A> The block images</P>
<H4 ALIGN="CENTER"><A NAME="Heading5"></A><FONT COLOR="#000077">Loading the Graphics</FONT></H4>
<P>In order to display a graphic, it must first be loaded into the program. The code in Listing 19-1 details how this is accomplished.
</P>
<P><B>Listing 19-1</B> Loading the graphics</P>
<!-- CODE //-->
<PRE>
// Load the blocks..
maxBlocks = GridSize.height * GridSize.width;
for (y=0;y<GridSize.height;y++)
for (x=0;x<GridSize.width;x++) {
if ( block < maxBlocks ) {
name = "graphics/" + block + ".gif";
grid[y][x] = newTile(getImage(getCodeBase(),name),block,name);
block++;
}
else {
grid[x][y] = new Tile(null,0,null);
blank = new Point(x,y);
}
}
</PRE>
<!-- END CODE //-->
<P>The correct number of GIF files will be loaded, corresponding to the numbered wood blocks. The height and width are determined by examining the amount of space that was allocated for the applet. The maximum size for the puzzle is 8x8, only limited by the number of images.
</P>
<P>The last grid position is left empty, providing a single space for blocks to slide around.</P>
<P>This code also creates the array of Tile objects that holds, for each image, the corresponding wood block number and the name of the graphics file.</P>
<H4 ALIGN="CENTER"><A NAME="Heading6"></A><FONT COLOR="#000077">Displaying the Graphics</FONT></H4>
<P>The paint() method is called by the Web browser or applet viewer whenever the whole image needs to be redrawn. The update() method is called in response to the applet itself calling the repaint() method. The update() method is set up to call another method called drawGrid(), shown in Listing 19-2.
</P>
<P><B>Listing 19-2</B> Displaying the graphics</P>
<!-- CODE //-->
<PRE>
private void drawGrid(Graphics g) {
int x,y;
// Only draw blocks that have changed to improve display speed.
for (y=0;y<GridSize.height;y++)
for (x=0;x<GridSize.width;x++) {
if ( grid[y][x].changed ) {
if ( grid[y][x].number != 0 )
g.drawImage(grid[y][x].img,x*48,y*48,this);
else
g.clearRect(x*48,y*48,48,48);
grid[y][x].changed = false;
}
}
}
</PRE>
<!-- END CODE //-->
<P>You’ll notice from the code that only blocks that have the<I> changed</I> variable set to <I>true</I> are redrawn. This greatly improves the efficiency of the code, especially on slower machines. The <I>changed</I> flags are set by the move() method, in response to a mouse click on a movable wood block, or by drawAll(), which is called by paint() in response to something dramatic like the browser window being resized.</P><P><BR></P>
<CENTER>
<TABLE BORDER>
<TR>
<TD><A HREF="../ch18/759-762.html">Previous</A></TD>
<TD><A HREF="../ewtoc.html">Table of Contents</A></TD>
<TD><A HREF="771-774.html">Next</A></TD>
</TR>
</TABLE>
</CENTER>
</BODY>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -