You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
272 lines
14 KiB
272 lines
14 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
|
<!-- /home/espenr/tmp/qt-3.3.8-espenr-2499/qt-x11-free-3.3.8/doc/tutorial.doc:2381 -->
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
|
<title>TQt Tutorial - Chapter 14: Facing the Wall</title>
|
|
<style type="text/css"><!--
|
|
fn { margin-left: 1cm; text-indent: -1cm; }
|
|
a:link { color: #004faf; text-decoration: none }
|
|
a:visited { color: #672967; text-decoration: none }
|
|
body { background: #ffffff; color: black; }
|
|
--></style>
|
|
</head>
|
|
<body>
|
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
|
<tr bgcolor="#E5E5E5">
|
|
<td valign=center>
|
|
<a href="index.html">
|
|
<font color="#004faf">Home</font></a>
|
|
| <a href="classes.html">
|
|
<font color="#004faf">All Classes</font></a>
|
|
| <a href="mainclasses.html">
|
|
<font color="#004faf">Main Classes</font></a>
|
|
| <a href="annotated.html">
|
|
<font color="#004faf">Annotated</font></a>
|
|
| <a href="groups.html">
|
|
<font color="#004faf">Grouped Classes</font></a>
|
|
| <a href="functions.html">
|
|
<font color="#004faf">Functions</font></a>
|
|
</td>
|
|
<td align="right" valign="center"><img src="logo32.png" align="right" width="64" height="32" border="0"></td></tr></table><h1 align=center>TQt Tutorial - Chapter 14: Facing the Wall</h1>
|
|
|
|
|
|
<p> <center><img src="t14.png" alt="Screenshot of tutorial fourteen"></center>
|
|
<p> This is the final example: a complete game.
|
|
<p> We add keyboard accelerators and introduce mouse events to CannonField. We
|
|
put a frame around the CannonField and add a barrier (wall) to make the
|
|
game more challenging.
|
|
<p> <ul>
|
|
<li> <a href="t14-lcdrange-h.html">t14/lcdrange.h</a> contains the LCDRange
|
|
class definition.
|
|
<li> <a href="t14-lcdrange-cpp.html">t14/lcdrange.cpp</a> contains the LCDRange
|
|
implementation.
|
|
<li> <a href="t14-cannon-h.html">t14/cannon.h</a> contains the CannonField class
|
|
definition.
|
|
<li> <a href="t14-cannon-cpp.html">t14/cannon.cpp</a> contains the CannonField
|
|
implementation.
|
|
<li> <a href="t14-gamebrd-h.html">t14/gamebrd.h</a> contains the GameBoard
|
|
class definition.
|
|
<li> <a href="t14-gamebrd-cpp.html">t14/gamebrd.cpp</a> contains the GameBoard
|
|
implementation.
|
|
<li> <a href="t14-main-cpp.html">t14/main.cpp</a> contains MyWidget and main.
|
|
</ul>
|
|
<p> <h2> Line-by-line Walkthrough
|
|
</h2>
|
|
<a name="1"></a><p> <h3> <a href="t14-cannon-h.html">t14/cannon.h</a>
|
|
</h3>
|
|
<a name="1-1"></a><p> The CannonField can now receive mouse events to make the user aim the
|
|
barrel by clicking on it and dragging. CannonField also has a barrier
|
|
wall.
|
|
<p>
|
|
|
|
<p> <pre> protected:
|
|
void paintEvent( <a href="qpaintevent.html">TQPaintEvent</a> * );
|
|
void mousePressEvent( <a href="qmouseevent.html">TQMouseEvent</a> * );
|
|
void mouseMoveEvent( <a href="qmouseevent.html">TQMouseEvent</a> * );
|
|
void mouseReleaseEvent( <a href="qmouseevent.html">TQMouseEvent</a> * );
|
|
</pre>
|
|
<p> In addition to the familiar event handlers, CannonField implements
|
|
three mouse event handlers. The names say it all.
|
|
<p> <pre> void paintBarrier( <a href="ntqpainter.html">TQPainter</a> * );
|
|
</pre>
|
|
<p> This private function paints the barrier wall.
|
|
<p> <pre> <a href="ntqrect.html">TQRect</a> barrierRect() const;
|
|
</pre>
|
|
<p> This private function returns the enclosing rectangle of the barrier.
|
|
<p> <pre> bool barrelHit( const <a href="ntqpoint.html">TQPoint</a> & ) const;
|
|
</pre>
|
|
<p> This private function checks if a point is inside the barrel of the cannon.
|
|
<p> <pre> bool barrelPressed;
|
|
</pre>
|
|
<p> This private variable is TRUE if the user has pressed the mouse on the
|
|
barrel and not released it.
|
|
<p> <h3> <a href="t14-cannon-cpp.html">t14/cannon.cpp</a>
|
|
</h3>
|
|
<a name="1-2"></a><p>
|
|
|
|
<p> <pre> barrelPressed = FALSE;
|
|
</pre>
|
|
<p> This line has been added to the constructor. Initially, the mouse is
|
|
not pressed on the barrel.
|
|
<p> <pre> <a name="x2429"></a> } else if ( shotR.<a href="ntqrect.html#x">x</a>() > width() || shotR.<a href="ntqrect.html#y">y</a>() > height() ||
|
|
shotR.<a href="ntqrect.html#intersects">intersects</a>(barrierRect()) ) {
|
|
</pre>
|
|
<p> Now that we have a barrier, there are three ways to miss. We test for
|
|
the third, too.
|
|
<p> <pre> void CannonField::<a href="ntqwidget.html#mousePressEvent">mousePressEvent</a>( <a href="qmouseevent.html">TQMouseEvent</a> *e )
|
|
{
|
|
if ( e-><a href="qmouseevent.html#button">button</a>() != LeftButton )
|
|
return;
|
|
<a name="x2418"></a> if ( barrelHit( e-><a href="qmouseevent.html#pos">pos</a>() ) )
|
|
barrelPressed = TRUE;
|
|
}
|
|
</pre>
|
|
<p> This is a TQt event handler. It is called when the user presses a
|
|
mouse button when the mouse cursor is over the widget.
|
|
<p> If the event was not generated by the left mouse button, we return
|
|
immediately. Otherwise, we check if the position of the mouse cursor
|
|
is within the cannon's barrel. If it is, we set <tt>barrelPressed</tt> to
|
|
TRUE.
|
|
<p> Notice that the pos() function returns a point in the widget's
|
|
coordinate system.
|
|
<p> <pre> void CannonField::<a href="ntqwidget.html#mouseMoveEvent">mouseMoveEvent</a>( <a href="qmouseevent.html">TQMouseEvent</a> *e )
|
|
{
|
|
if ( !barrelPressed )
|
|
return;
|
|
<a href="ntqpoint.html">TQPoint</a> pnt = e-><a href="qmouseevent.html#pos">pos</a>();
|
|
<a name="x2424"></a> if ( pnt.<a href="ntqpoint.html#x">x</a>() <= 0 )
|
|
<a name="x2422"></a> pnt.<a href="ntqpoint.html#setX">setX</a>( 1 );
|
|
<a name="x2425"></a> if ( pnt.<a href="ntqpoint.html#y">y</a>() >= <a href="ntqwidget.html#height">height</a>() )
|
|
<a name="x2423"></a> pnt.<a href="ntqpoint.html#setY">setY</a>( <a href="ntqwidget.html#height">height</a>() - 1 );
|
|
double rad = atan(((double)<a href="ntqwidget.html#rect">rect</a>().bottom()-pnt.<a href="ntqpoint.html#y">y</a>())/pnt.<a href="ntqpoint.html#x">x</a>());
|
|
setAngle( tqRound ( rad*180/3.14159265 ) );
|
|
}
|
|
</pre>
|
|
<p> This is another TQt event handler. It is called when the user already
|
|
has pressed the mouse button inside this widget and then moves/drags
|
|
the mouse. (You can make TQt send mouse move events even when no
|
|
buttons are pressed. See <a href="ntqwidget.html#setMouseTracking">TQWidget::setMouseTracking</a>().)
|
|
<p> This handler repositions the cannon's barrel according to the position of
|
|
the mouse cursor.
|
|
<p> First, if the barrel is not pressed, we return. Next, we fetch the
|
|
mouse cursor's position. If the mouse cursor is to the left or below
|
|
the widget, we adjust the point to be inside the widget.
|
|
<p> Then we calculate the angle between the bottom edge of the widget and
|
|
the imaginary line between the bottom-left corner of the widget and
|
|
the cursor position. Finally we set the cannon's angle to the new
|
|
value converted to degrees.
|
|
<p> Remember that setAngle() redraws the cannon.
|
|
<p> <pre> <a name="x2432"></a>void CannonField::<a href="ntqwidget.html#mouseReleaseEvent">mouseReleaseEvent</a>( <a href="qmouseevent.html">TQMouseEvent</a> *e )
|
|
{
|
|
<a name="x2417"></a> if ( e-><a href="qmouseevent.html#button">button</a>() == LeftButton )
|
|
barrelPressed = FALSE;
|
|
}
|
|
</pre>
|
|
<p> This TQt event handler is called whenever the user releases a mouse
|
|
button and it was pressed inside this widget.
|
|
<p> If the left button is released, we can be sure that the barrel is no
|
|
longer pressed.
|
|
<p> The paint event has two extra lines:
|
|
<p> <pre> <a name="x2427"></a> if ( updateR.<a href="ntqrect.html#intersects">intersects</a>( barrierRect() ) )
|
|
paintBarrier( &p );
|
|
</pre>
|
|
<p> paintBarrier() does the same sort of thing as paintShot(),
|
|
paintTarget(), and paintCannon().
|
|
<p> <pre> void CannonField::paintBarrier( <a href="ntqpainter.html">TQPainter</a> *p )
|
|
{
|
|
p-><a href="ntqpainter.html#setBrush">setBrush</a>( yellow );
|
|
p-><a href="ntqpainter.html#setPen">setPen</a>( black );
|
|
p-><a href="ntqpainter.html#drawRect">drawRect</a>( barrierRect() );
|
|
}
|
|
</pre>
|
|
<p> This private function paints the barrier as a rectangle filled with
|
|
yellow and with a black outline.
|
|
<p> <pre> TQRect CannonField::barrierRect() const
|
|
{
|
|
return TQRect( 145, height() - 100, 15, 100 );
|
|
}
|
|
</pre>
|
|
<p> This private function returns the rectangle of the barrier. We fix
|
|
the bottom edge of the barrier to the bottom edge of the widget.
|
|
<p> <pre> bool CannonField::barrelHit( const <a href="ntqpoint.html">TQPoint</a> &p ) const
|
|
{
|
|
<a href="ntqwmatrix.html">TQWMatrix</a> mtx;
|
|
<a name="x2436"></a> mtx.<a href="ntqwmatrix.html#translate">translate</a>( 0, height() - 1 );
|
|
<a name="x2435"></a> mtx.<a href="ntqwmatrix.html#rotate">rotate</a>( -ang );
|
|
<a name="x2433"></a> mtx = mtx.<a href="ntqwmatrix.html#invert">invert</a>();
|
|
<a name="x2434"></a><a name="x2426"></a> return barrelRect.<a href="ntqrect.html#contains">contains</a>( mtx.<a href="ntqwmatrix.html#map">map</a>(p) );
|
|
}
|
|
</pre>
|
|
<p> This function returns TRUE if the point is in the barrel; otherwise it returns
|
|
FALSE.
|
|
<p> Here we use the class <a href="ntqwmatrix.html">TQWMatrix</a>. It is defined in the header file
|
|
ntqwmatrix.h, which is included by ntqpainter.h.
|
|
<p> <a href="ntqwmatrix.html">TQWMatrix</a> defines a coordinate system mapping. It can perform the same
|
|
transformations as the <a href="ntqpainter.html">TQPainter</a>.
|
|
<p> Here we perform the same transformation steps as we do when drawing
|
|
the barrel in the paintCannon() function. First we translate the
|
|
coordinate system and then we rotate it.
|
|
<p> Now we need to check whether the point <tt>p</tt> (in widget coordinates) lies
|
|
inside the barrel. To do this, we invert the <a href="ntqwmatrix.html#TransformationMode">transformation matrix</a>.
|
|
The inverted matrix performs the inverse transformation that we used
|
|
when drawing the barrel. We map the point <tt>p</tt> using the inverted
|
|
matrix and return TRUE if it is inside the original barrel rectangle.
|
|
<p> <h3> <a href="t14-gamebrd-cpp.html">t14/gamebrd.cpp</a>
|
|
</h3>
|
|
<a name="1-3"></a><p>
|
|
|
|
<p> <pre> #include <<a href="qaccel-h.html">ntqaccel.h</a>>
|
|
</pre>
|
|
<p> We include the class definition of <a href="ntqaccel.html">TQAccel</a>.
|
|
<p> <pre> <a href="ntqvbox.html">TQVBox</a> *box = new <a href="ntqvbox.html">TQVBox</a>( this, "cannonFrame" );
|
|
box-><a href="ntqframe.html#setFrameStyle">setFrameStyle</a>( TQFrame::WinPanel | TQFrame::Sunken );
|
|
cannonField = new CannonField( box, "cannonField" );
|
|
</pre>
|
|
<p> We create and set up a <a href="ntqvbox.html">TQVBox</a>, set its frame style, and then create
|
|
<tt>CannonField</tt> as a child of that box. Because nothing else is in the
|
|
box, the effect is that the <a href="ntqvbox.html">TQVBox</a> will put a frame around the
|
|
CannonField.
|
|
<p> <pre> <a href="ntqaccel.html">TQAccel</a> *accel = new <a href="ntqaccel.html">TQAccel</a>( this );
|
|
<a name="x2438"></a><a name="x2437"></a> accel-><a href="ntqaccel.html#connectItem">connectItem</a>( accel-><a href="ntqaccel.html#insertItem">insertItem</a>( Key_Enter ),
|
|
this, TQ_SLOT(fire()) );
|
|
accel-><a href="ntqaccel.html#connectItem">connectItem</a>( accel-><a href="ntqaccel.html#insertItem">insertItem</a>( Key_Return ),
|
|
this, TQ_SLOT(fire()) );
|
|
</pre>
|
|
<p> Here we create and set up an accelerator. An accelerator is an object
|
|
that intercepts keyboard events to an application and calls slots if
|
|
certain keys are pressed. This mechanism is also called shortcut
|
|
keys. Note that an accelerator is a child of a widget and will be
|
|
destroyed when that widget is destroyed. <a href="ntqaccel.html">TQAccel</a> is <em>not</em> a widget
|
|
and has no visible effect on its parent.
|
|
<p> We define two shortcut keys. We want the slot fire() to be called
|
|
when the user presses Enter, and we want the application to quit when
|
|
key Ctrl+Q is pressed. Because Enter is sometimes Return and there
|
|
are even keyboards with <em>both</em> keys, we make both Enter and Return
|
|
invoke fire().
|
|
<p> <pre> accel-><a href="ntqaccel.html#connectItem">connectItem</a>( accel-><a href="ntqaccel.html#insertItem">insertItem</a>( CTRL+Key_Q ),
|
|
tqApp, TQ_SLOT(<a href="ntqapplication.html#quit">quit</a>()) );
|
|
</pre>
|
|
<p> And then we set up Ctrl+Q to do the same thing as Alt+Q. Some
|
|
people are more used to Ctrl+Q (and anyway it shows how do do it).
|
|
<p> CTRL, Key_Enter, Key_Return and Key_Q are all constants provided by
|
|
TQt. They're actually TQt::Key_Enter, etc., but practically all classes
|
|
inherit the <a href="ntqt.html">TQt</a> namespace class.
|
|
<p> <pre> <a href="qgridlayout.html">TQGridLayout</a> *grid = new <a href="qgridlayout.html">TQGridLayout</a>( this, 2, 2, 10 );
|
|
<a name="x2441"></a> grid-><a href="qgridlayout.html#addWidget">addWidget</a>( quit, 0, 0 );
|
|
grid-><a href="qgridlayout.html#addWidget">addWidget</a>( box, 1, 1 );
|
|
<a name="x2442"></a> grid-><a href="qgridlayout.html#setColStretch">setColStretch</a>( 1, 10 );
|
|
</pre>
|
|
<p> We put <tt>box</tt> (the <a href="ntqvbox.html">TQVBox</a>), not the CannonField, in the lower-right
|
|
cell.
|
|
<p> <h2> Behavior
|
|
</h2>
|
|
<a name="2"></a><p> The cannon now shoots when you press Enter. You can also position the
|
|
cannon's angle using the mouse. The barrier makes it a little more
|
|
challenging to play the game. We also have a nice looking frame
|
|
around the CannonField.
|
|
<p> (See <a href="tutorial1-07.html#compiling">Compiling</a> for how to create a
|
|
makefile and build the application.)
|
|
<p> <h2> Exercises
|
|
</h2>
|
|
<a name="3"></a><p> Write a space invaders game.
|
|
<p> (This exercise was first done by
|
|
<a href="mailto:igorr@ifi.uio.no">Igor Rafienko</a>. You can
|
|
<a href="http://www.stud.ifi.uio.no/~igorr/download.html">download his game</a>.)
|
|
<p> The new exercise is: Write a Breakout game.
|
|
<p> Final exhortation: Go forth now and create <em>masterpieces of the programming art!</em>
|
|
<p>
|
|
<p> [<a href="tutorial1-13.html">Previous tutorial</a>]
|
|
[<a href="tutorial1-01.html">First tutorial</a>]
|
|
[<a href="tutorial.html">Main tutorial page</a>]
|
|
<p>
|
|
<!-- eof -->
|
|
<p><address><hr><div align=center>
|
|
<table width=100% cellspacing=0 border=0><tr>
|
|
<td>Copyright © 2007
|
|
<a href="troll.html">Trolltech</a><td align=center><a href="trademarks.html">Trademarks</a>
|
|
<td align=right><div align=right>TQt 3.3.8</div>
|
|
</table></div></address></body>
|
|
</html>
|