📄 231-238.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:Creating Customizable Games with the AWT</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=7//-->
<!--PAGES=231-238//-->
<!--UNASSIGNED1//-->
<!--UNASSIGNED2//-->
<CENTER>
<TABLE BORDER>
<TR>
<TD><A HREF="../ch06/228-230.html">Previous</A></TD>
<TD><A HREF="../ewtoc.html">Table of Contents</A></TD>
<TD><A HREF="238-242.html">Next</A></TD>
</TR>
</TABLE>
</CENTER>
<P><BR></P>
<H2><A NAME="Heading1"></A><FONT COLOR="#000077">Chapter 7<BR>Creating Customizable Games with the AWT
</FONT></H2>
<P><I>Joel Fan</I></P>
<P><FONT SIZE="+1"><B>Goals:</B></FONT></P>
<P>Use AWT components, containers, and layout managers to create graphical interfaces
</P>
<P>Read applet parameters from HTML files</P>
<P>Enable players to customize the Alien Landing video game</P>
<P>The audience for your games is the World Wide Web, and like any large group of people, this audience has diverse tastes and abilities. For any game, some players are more skillful than others and will want greater challenges. Some users might want to enable options, such as sound; others will want to keep the game as quiet as possible, to avoid distracting the boss or waking the baby. In a multiplayer game, you might want the option of playing the computer, if your human opponents don’t show up! To accommodate the vast population on the Web, players must be able to <I>customize</I> your game.</P>
<P>In this chapter, you’ll see how the Java Abstract Windowing Toolkit (AWT) can enable users to modify parameters in your games. The AWT allows you to create graphical user interfaces (GUIs) that are intuitive and easy to use. By the end of this chapter, you’ll permit the player to customize our Alien Landing game by interfacing with AWT components. Of course, you’ll be able to apply what you learn about the AWT to create nice interfaces for your own games!</P>
<P>Let’s start with a deeper look at the AWT and how its classes work together. After that, you’ll learn how to create GUI widgets, such as buttons, checkboxes, and text fields, and how to arrange them in your applets. You’ll also see how to interpret the events that these widgets trigger and change the state of your games accordingly. Finally, you’ll see how your game applet can read parameters from an HTML file.</P>
<H3><A NAME="Heading2"></A><FONT COLOR="#000077">Creating Graphical Interfaces with the AWT</FONT></H3>
<P>The AWT, which we introduced in Chapter 1, Fundamental Java, and Chapter 4, Adding Interactivity, allows you to create graphical user interfaces (GUIs) for your games. In this section, you’ll learn how to do this.
</P>
<H4 ALIGN="LEFT"><A NAME="Heading3"></A><FONT COLOR="#000077">Overview of the AWT</FONT></H4>
<P>The AWT is contained in the package java.awt, and it divides into three kinds of classes:
</P>
<DL>
<DD><B>•</B> Classes that encapsulate GUI windows and widgets (i.e., buttons and checkboxes). Many of these classes derive from the abstract class Component.
<DD><B>•</B> Classes that lay out the onscreen position of GUI components. These classes implement the LayoutManager interface.
<DD><B>•</B> Classes for graphics, images, events, fonts, and other purposes. You’ve used many of these, such as Graphics, Event, FontMetrics, and MediaTracker, to name a few. We’ve covered many of these classes in previous chapters.
</DL>
<P>In this chapter, we’ll focus on classes from the first two categories in previous chapters.
</P>
<P>First, here’s a high-level view of the component and layout manager classes. The AWT classes that derive from Component are shown in Figure 7-1. You’ll find a table of Component methods in the Quick AWT Reference section of this chapter.</P>
<P><A NAME="Fig1"></A><A HREF="javascript:displayWindow('images/07-01.jpg',467,584 )"><IMG SRC="images/07-01t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/07-01.jpg',467,584)"><FONT COLOR="#000077"><B>Figure 7-1</B></FONT></A> Component hierarchy</P>
<P>A notable subclass of Component is the abstract class Container. Classes that derive from Container can contain other Components. For example, a Frame can hold a Button and a Checkbox, as seen in Figure 7-2. This Frame is the parent container of the button and checkbox it holds.
</P>
<P><A NAME="Fig2"></A><A HREF="javascript:displayWindow('images/07-02.jpg',485,212 )"><IMG SRC="images/07-02t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/07-02.jpg',485,212)"><FONT COLOR="#000077"><B>Figure 7-2</B></FONT></A> Frame containing Button and Checkbox</P>
<P>What determines the arrangement of Components in a Container? The arrangement is done by the LayoutManager that is associated with the Container. For example, the Window in Figure 7-2 is using a LayoutManager called FlowLayout. There are several classes of LayoutManagers, each offering different degrees of precision and ease of use. Figure 7-3 shows the available LayoutManagers.
</P>
<P><A NAME="Fig3"></A><A HREF="javascript:displayWindow('images/07-03.jpg',462,317 )"><IMG SRC="images/07-03t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/07-03.jpg',462,317)"><FONT COLOR="#000077"><B>Figure 7-3</B></FONT></A> Layout Managers</P>
<P>Now let’s see how Components, Containers, and LayoutManagers work together to create graphical interfaces.
</P>
<H4 ALIGN="LEFT"><A NAME="Heading4"></A><FONT COLOR="#000077">Creating Graphical Interfaces</FONT></H4>
<P>Here are the four steps involved in creating and displaying graphical interfaces:
</P>
<DL>
<DD><B>1.</B> Create a Container. (Applet is a subclass of Container, so if you’re adding widgets to your applet, this step is already done!)
<DD><B>2.</B> Create the Components that the Container will hold.
<DD><B>3.</B> Associate a particular LayoutManager with the Container, using the Container method setLayout().
<DD><B>4.</B> Add the Components to the Container, by using the add() method of the Container. The order in which you add Components is important.
</DL>
<P>Let’s write an applet that displays a button, using these steps. Although this is a simple example, you’ll follow the same basic pattern anytime you use the AWT to create a graphical interface.
</P>
<P>First, use the following line:</P>
<!-- CODE SNIP //-->
<PRE>
import java.awt.*;
</PRE>
<!-- END CODE SNIP //-->
<P>to import the classes in the java.awt package. (This means we’ll be able to refer to the classes in java.awt directly, without prefixing the package name.)
</P>
<P>An Applet is a Container, which means it can contain the button. Let’s declare and allocate the button in the applet’s init() method:</P>
<!-- CODE SNIP //-->
<PRE>
public class ButtonTest extends Applet {
public void init() {
Button b = new Button("Hello");
</PRE>
<!-- END CODE SNIP //-->
<P>The next step is to associate a LayoutManager with the applet container. The simplest LayoutManager is FlowLayout, which places Components, one at a time, in rows from left to right. If a component doesn’t fit in a row, FlowLayout puts it in a new row below. Let’s tell the applet to use FlowLayout:
</P>
<!-- CODE SNIP //-->
<PRE>
setLayout(new FlowLayout());
</PRE>
<!-- END CODE SNIP //-->
<P>The final step is to add the button to the applet:
</P>
<!-- CODE SNIP //-->
<PRE>
add(b);
</PRE>
<!-- END CODE SNIP //-->
<P>Pretty easy, right? The complete code is shown in Listing 7-1.
</P>
<P><B>Listing 7-1</B> ButtonTest applet</P>
<!-- CODE SNIP //-->
<PRE>
public class ButtonTest extends Applet {
public void init() {
Button b = new Button("Hello");
setLayout(new FlowLayout());
add(b);
}
}
</PRE>
<!-- END CODE SNIP //-->
<P>If you run this applet, you’ll get something like Figure 7-4.
</P>
<P><A NAME="Fig4"></A><A HREF="javascript:displayWindow('images/07-04.jpg',398,320 )"><IMG SRC="images/07-04t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/07-04.jpg',398,320)"><FONT COLOR="#000077"><B>Figure 7-4</B></FONT></A> ButtonTest</P>
<P>Now let’s see how to handle the events generated by components, such as buttons.
</P>
<H4 ALIGN="LEFT"><A NAME="Heading5"></A><FONT COLOR="#000077">Handling Action Events</FONT></H4>
<P>When you click on a button, it generates an <I>action</I> event. Action events are simply events that are triggered by the interaction of the user with a Component. To handle an action event, you’ll need to define an event handler called action(). There are two places you can place the action() method:</P>
<DL>
<DD><B>•</B> Within the Component subclass that interacts with the user
<DD><B>•</B> Within a Container subclass containing the component that interacts with the user
</DL>
<P>Let’s start with the second point, since it applies to the ButtonTest applet above.
</P><P><BR></P>
<CENTER>
<TABLE BORDER>
<TR>
<TD><A HREF="../ch06/228-230.html">Previous</A></TD>
<TD><A HREF="../ewtoc.html">Table of Contents</A></TD>
<TD><A HREF="238-242.html">Next</A></TD>
</TR>
</TABLE>
</CENTER>
</BODY>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -