ch12.htm

Web_Programming_with_Perl5,一个不错的Perl语言教程。

<P>Next, look at the three common subroutines responsible for emitting the rest of

the HTML. <TT>drawHangman()</TT> is just a wrapper around the <TT>drawMan() </TT>routine

you saw earlier. Its role is to create a temporary file and print out the <TT>&lt;IMG&gt;</TT>

tag for displaying the dynamic GIF. <TT>drawWord()</TT>is a bit more complicated.

Its job is to mask the part of the word that the user has not already guessed. It

does so using nested <TT>for</TT> loops. And <TT>gameForm()</TT> should look very

familiar to you by now. This routine uses the <TT>CGI::Form</TT> methods to display

all the form fields. The <TT>hidden()</TT> fields enable you to maintain the state

of the game across multiple CGI requests. The subroutines are as follow:</P>

<PRE><FONT COLOR="#0066FF">sub drawHangman {

   my($q,$numguesses)=@_;

   open(TEMP,&quot;&gt; $img_file&quot;);

   select(TEMP);

   &amp;drawMan($numguesses);

   select STDOUT;

   close(TEMP);

   chmod 0755, $img_file;

   print &quot;&lt;IMG SRC=/temp/$$.gif&gt;&quot;;

</FONT></PRE>

<PRE><FONT COLOR="#0066FF">

}

</FONT></PRE>

<PRE><FONT COLOR="#0066FF">

sub drawWord {

   my($word,$guesses)=@_;

   my($displayWord)=&quot;&quot;;

   for ($i=0;$i&lt;length($word);$i++) {

      my($found)=0;

      for ($j=0;$j&lt;length($guesses);$j++) {

         if (substr($word,$i,1) eq substr($guesses,$j,1)) {

            $found=1;

         }

      }

      if ($found) {

         $displayWord .= substr($word,$i,1);

      } else {

         $displayWord .= &quot;_&quot;;

      }

      $displayWord .= &quot; &quot;;

   }

   print &quot;&lt;BR&gt;&lt;H2&gt;$displayWord&lt;/H2&gt;&lt;BR&gt;\n&quot;;

</FONT></PRE>

<PRE><FONT COLOR="#0066FF">

}

</FONT></PRE>

<PRE><FONT COLOR="#0066FF">

sub gameForm {

   my($q)=@_;

   print $q-&gt;start_multipart_form();

   print $q-&gt;popup_menu(-name=&gt;`Letter',-value=&gt;\@letters);

   print $q-&gt;hidden(-name=&gt;`word', -value=&gt;&quot;$word&quot;);

   print $q-&gt;hidden(-name=&gt;`guesses', -value=&gt;&quot;$guesses&quot;);

   print $q-&gt;hidden(-name=&gt;`numguesses', -value=&gt;&quot;$numguesses&quot;);

   print $q-&gt;submit(-name=&gt;`Action',-value=&gt;`Guess');

   print &quot; &quot;;

   print $q-&gt;submit(-name=&gt;`Action',-value=&gt;`New Game');

   print $q-&gt;endform;

}

</FONT></PRE>

<P>Finally, you need the <TT>guessedFullWord()</TT> function, which returns whether

the user has completely guessed the entire word. It uses the same algorithm that

<TT>drawWord</TT> uses, except that it returns <TT>FALSE</TT> as soon as it detects

a letter that has not been found.</P>

<PRE><FONT COLOR="#0066FF">sub guessedFullWord {

   my($word,$guesses)=@_;

   my($i,$j);

   for ($i=0;$i&lt;length($word);$i++) {

      my($found)=0;

      for ($j=0;$j&lt;length($guesses);$j++) {

     if (substr($word,$i,1) eq substr($guesses,$j,1)) {

        $found=1;

     }

      }

      if (!$found) {

     return 0;

      }

   }

   return 1;

}

</FONT></PRE>

<P>Images of the game in action are shown in Figures 12.1 through 12.3. <BR>

<BR>

<A HREF="13wpp01.jpg" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/13wpp01.jpg"><TT><B>Figure 12.1.</B></TT></A> The Hangman game

within the Netscape browser. <BR>

<BR>

<A HREF="13wpp02.jpg" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/13wpp02.jpg"><TT><B>Figure 12.2.</B></TT></A> The game after two

wrong guesses. <BR>

<BR>

<A HREF="13wpp03.jpg" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/13wpp03.jpg"><TT><B>Figure 12.3.</B></TT></A> The game after the

user lost. <BR>

<BR>

The Hangman game is a simple example of how to use the <TT>GD </TT>module to draw

graphics dynamically from a CGI script. This example runs on UNIX, although you could

run it on Windows using a slightly modified version of GD.pm from David Roth. This

version is available at <TT>ftp://roth.net.com/pub/ntPerl/win32GD.zip</TT>. The current

version of MacPerl (5.10r2) also supports the standard <TT>GD</TT> module.

<H3 ALIGN="CENTER"><A NAME="Heading8"></A><FONT COLOR="#000077">Server Push Animation

Techniques</FONT></H3>

<P>Server push, which is a mechanism developed by Netscape, allows a server to maintain

an open connection with the client. The technique I describe here concerns the use

of the <TT>x-multi-<BR>

replace</TT> MIME type. Document content defined by this MIME type can be automatically

refreshed on a specific interval. This capability enables you to draw a sequence

of images in the same frame to construct a &quot;poor man's animation.&quot; This

animation can either be continuous or finite.</P>

<P>To draw a finite animation sequence, you include in your Perl script a finite

loop that completes on the last image frame. A continuous animation sequence does

not stop until the user clicks Stop in the browser or leaves the page entirely. You

must consider that, while a user is connected to a page that has a continuous animation

sequence, the TCP port connection remains open for the duration of that user's visit.

Keeping this connection open can prove expensive, depending on the capacity of your

Web server. You need to consider several points if you decide to use a server push

animation technique. The following URL points to some good documentation on this

subject:</P>

<PRE><A HREF="javascript:if(confirm('http://home.netscape.com/assist/net_sites/pushpull.html  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://home.netscape.com/assist/net_sites/pushpull.html'" tppabs="http://home.netscape.com/assist/net_sites/pushpull.html"><FONT COLOR="#0066FF">http://home.netscape.com/assist/net_sites/pushpull.html

</FONT></A><FONT COLOR="#0066FF"></FONT></PRE>

<P>The following is an example of how to write a server push CGI script. Assume that

you have a sequence of images, <TT>frame1.gif</TT> through <TT>frame10.gif</TT>.

The important point is to declare the document as <TT>multipart/x-mixed-replace;</TT>

and to specify a random string as the boundary.</P>

<PRE><FONT COLOR="#0066FF">#!/usr/local/bin/Perl



use GD;



$frmLoc=&quot;/user/bdeng/Web/docs/images&quot;;

$header=&quot;Content-type: multipart/x-mixed-replace;&quot; . 

        &quot;boundary=***Boundary_String***\n&quot;;

$boundary=&quot;\n--***Boundary_String***\n&quot;;

$giftype=&quot;Content-type: image/gif\n\n&quot;;



print $header;

print $boundary;

$i=1;

while (1) {

   sleep 1;

   print $giftype;

   open(GIFH,&quot;&lt; ${frmLoc}/frame${i}.gif&quot;);

   $img = newFromGif GD::Image(GIFH);

   close(GIFH);

   print $img-&gt;gif;

   print $boundary;

   if ($i == 10) {

      $i=1;

   } else {

      $i++

   }

}

</FONT></PRE>

<P>To view this animation on a Web page, simply point the <TT>SRC</TT> attribute

of your <TT>&lt;IMG&gt;</TT> tag to the CGI script, like this:</P>

<PRE><FONT COLOR="#0066FF">&lt;HTML&gt;

&lt;BODY&gt;

&lt;H1&gt;Animated GIF using Server-push&lt;/H1&gt;

&lt;IMG SRC=/cgi-bin/frames.pl&gt;

&lt;P&gt;This is a poor man's animation that downloads the next frame continuously

until you leave the page.

&lt;/BODY&gt;

&lt;/HTML&gt;

</FONT></PRE>

<P>Figure 12.4 shows the resulting animation. <BR>

<BR>

<A HREF="13wpp04.jpg" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/13wpp04.jpg"><TT><B>Figure 12.4.</B></TT></A> One frame of the

server push animation page.

<H3 ALIGN="CENTER"><A NAME="Heading9"></A><FONT COLOR="#000077">Other Techniques</FONT></H3>

<P>You can, of course, embed multimedia into your Web documents in other ways by

using some of the conventional multimedia standard file formats. In the following

section, I briefly describe some of these options, even though they really don't

involve the use of Perl.

<H4 ALIGN="CENTER"><A NAME="Heading10"></A><FONT COLOR="#000077">Embedding AVI, QuickTime,

WAV, and GIF89a within HTML</FONT></H4>

<P>QuickTime, which is a movie format developed by Apple Computer, Inc., is available

on many platforms. AVI is a similar format available on the Windows platform. WAV

is an audio format available for use on the Windows platform. Most of these formats

are registered MIME types known by browsers. The Web author's role is to simply include

these types of files within the HTML file. Some browsers can view or play these files

directly within the browser window. Netscape's plug-in technology for Netscape Navigator

and Microsoft's ActiveX technology in the Internet Explorer are examples. Using these

technologies, you can directly embed these multimedia formats within Web pages. Refer

to Chapter 4, &quot;HTML Forms--The Foundation of an Interactive Web,&quot; for a

discussion of the <TT>&lt;EMBED&gt;</TT> HTML tag.</P>

<P>Previously in this chapter, you learned how to implement a &quot;poor man's animation&quot;

using the Netscape server push technique. You also can author a GIF file in such

a way that server push is not required for an animation effect. A new developing

standard called GIF89a is now available; it defines an extension to the GIF format,

allowing for multiple frames to be stored and played back in a single GIF file. Netscape

Navigator 2.0 and higher support GIF89a to some extent. To find more information

about the GIF89a standard, you can visit <A HREF="javascript:if(confirm('http://www.reiworld.com/royalef/gifabout.htm  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://www.reiworld.com/royalef/gifabout.htm'" tppabs="http://www.reiworld.com/royalef/gifabout.htm"><TT>http://www.reiworld.com/royalef/gifabout.htm</TT></A>.

<H3 ALIGN="CENTER"><A NAME="Heading11"></A><FONT COLOR="#000077">Summary</FONT></H3>

<P>Hopefully, this chapter has given you a few ideas on how to implement some multimedia

techniques on your Web page. Again, I cannot stress enough the importance of minimizing

the size of your media files. Some techniques on how to reduce the size of your image

are discussed in Chapter 7, &quot;Simple Pleasures--Examples.&quot; You may also

find some good examples of GIF animation in Web Page Wizardry by Dick Oliver (Sams.net

Publishing, ISBN 1-57521-094-4).<BR>



<P ALIGN="CENTER"><A HREF="ch11.htm" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/ch11.htm"><IMG SRC="blanprev.gif" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/blanprev.gif" WIDTH="37" HEIGHT="37"

ALIGN="BOTTOM" BORDER="2"></A><A HREF="index-1.htm" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/index-1.htm"><IMG SRC="blantoc.gif" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/blantoc.gif" WIDTH="42"

HEIGHT="37" ALIGN="BOTTOM" BORDER="2"></A><A HREF="ch13.htm" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/ch13.htm"><IMG SRC="blannext.gif" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/blannext.gif"

WIDTH="45" HEIGHT="37" ALIGN="BOTTOM" BORDER="2"></A>





</BODY>



</HTML>