~oif-team/ubuntu/natty/qt4-x11/xi2.1

<td width="1">  </td><td class="postheader" 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>

[Previous: <a href="tutorial-t12.html">Chapter 12</a>]

[<a href="tutorial.html">Qt Tutorial</a>]

[Next: <a href="tutorial-t14.html">Chapter 14</a>]

</p>

<h1 align="center">Qt Tutorial 13 - Game Over</h1>

<p>Files:</p>

<ul>

<li><a href="tutorial-t13-cannonfield-cpp.html">tutorial/t13/cannonfield.cpp</a></li>

<li><a href="tutorial-t13-cannonfield-h.html">tutorial/t13/cannonfield.h</a></li>

<li><a href="tutorial-t13-gameboard-cpp.html">tutorial/t13/gameboard.cpp</a></li>

<li><a href="tutorial-t13-gameboard-h.html">tutorial/t13/gameboard.h</a></li>

<li><a href="tutorial-t13-lcdrange-cpp.html">tutorial/t13/lcdrange.cpp</a></li>

<li><a href="tutorial-t13-lcdrange-h.html">tutorial/t13/lcdrange.h</a></li>

<li><a href="tutorial-t13-main-cpp.html">tutorial/t13/main.cpp</a></li>

</ul>

<center><img src="images/t13.png" alt="Screenshot of tutorial thirteen" /></center><p>In this example we start to approach a real playable game with a score. We give <tt>MyWidget</tt> a new name (<tt>GameBoard</tt>) and add some slots.</p>

<p>We put the definition in <tt>gameboard.h</tt> and the implementation in <tt>gameboard.cpp</tt>.</p>

<p>The <tt>CannonField</tt> now has a game over state.</p>

<p>The layout problems in <tt>LCDRange</tt> are fixed.</p>

<h2>Line by Line Walkthrough</h2>

<h3><a href="tutorial-t13-lcdrange-cpp.html">t13/lcdrange.cpp</a></h3>

<pre>  label->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Fixed);</pre>

<p>We set the size policy of the <a href="qlabel.html">QLabel</a> to (<a href="qsizepolicy.html#Policy-enum">Preferred</a>, <a href="qsizepolicy.html#Policy-enum">Fixed</a>). The vertical component ensures that the label won't stretch or shrink vertically; it will stay at its optimal size (its <a href="qwidget.html#sizeHint-prop">sizeHint()</a>). This solves the layout problems observed in Chapter 12.</p>

<h3><a href="tutorial-t13-cannonfield-h.html">t13/cannonfield.h</a></h3>

<p>The <tt>CannonField</tt> now has a game over state and a few new functions.</p>

<pre>  bool gameOver() const { return gameEnded; }</pre>

<p>This function returns <tt>true</tt> if the game is over, <tt>false</tt> if a game is going on.</p>

<pre>  void setGameOver();

void restartGame();</pre>

<p>Here are two new slots: <tt>setGameOver()</tt> and <tt>restartGame()</tt>.</p>

<pre>  void canShoot(bool can);</pre>

<p>This new signal indicates that the <tt>CannonField</tt> is in a state where the <tt>shoot()</tt> slot makes sense. We'll use it below to enable or disable the <b>Shoot</b> button.</p>

<pre>  bool gameEnded;</pre>

<p>This private variable contains the game state; <tt>true</tt> means that the game is over, and <tt>false</tt> means that a game is going on.</p>

<h3><a href="tutorial-t13-cannonfield-cpp.html">t13/cannonfield.cpp</a></h3>

<pre>  gameEnded = false;</pre>

<p>This line has been added to the constructor. Initially, the game is not over (luckily for the player :-).</p>

<pre>  void CannonField::shoot()

{

if (isShooting())

return;

timerCount = 0;

shootAngle = currentAngle;

shootForce = currentForce;

autoShootTimer->start(5);

emit canShoot(false);

}</pre>

<p>We added a new <tt>isShooting()</tt> function, so <tt>shoot()</tt> uses it instead of testing directly. Also, shoot tells the world that the <tt>CannonField</tt> cannot shoot now.</p>

<pre>  void CannonField::setGameOver()

{

if (gameEnded)

return;

if (isShooting())

autoShootTimer->stop();

gameEnded = true;

update();

}</pre>

<p>This slot ends the game. It must be called from outside <tt>CannonField</tt>, because this widget does not know when to end the game. This is an important design principle in component programming. We choose to make the component as flexible as possible to make it usable with different rules (for example, a multi-player version of this in which the first player to hit ten times wins could use the <tt>CannonField</tt> unchanged).</p>

<p>If the game has already been ended we return immediately. If a game is going on we stop the shot, set the game over flag, and repaint the entire widget.</p>

<pre>  void CannonField::restartGame()

{

if (isShooting())

autoShootTimer->stop();

gameEnded = false;

update();

emit canShoot(true);

}</pre>

<p>This slot starts a new game. If a shot is in the air, we stop shooting. We then reset the <tt>gameEnded</tt> variable and repaint the widget.</p>

<p><tt>moveShot()</tt> too emits the new <tt>canShoot(true)</tt> signal at the same time as either <tt>hit()</tt> or <tt>miss()</tt>.</p>

<p>Modifications in CannonField::paintEvent():</p>

<pre>  void CannonField::paintEvent(QPaintEvent * /* event */)

{

100

QPainter painter(this);

101

102

if (gameEnded) {

103

painter.setPen(Qt::black);

104

painter.setFont(QFont("Courier", 48, QFont::Bold));

105

painter.drawText(rect(), Qt::AlignCenter, "Game Over");

106

}</pre>

107

<p>The paint event has been enhanced to display the text "Game Over" if the game is over, i.e., <tt>gameEnded</tt> is <tt>true</tt>. We don't bother to check the update rectangle here because speed is not critical when the game is over.</p>

108

<p>To draw the text we first set a black pen; the pen color is used when drawing text. Next we choose a 48 point bold font from the Courier family. Finally we draw the text centered in the widget's rectangle. Unfortunately, on some systems (especially X servers with Unicode fonts) it can take a while to load such a large font. Because Qt caches fonts, you will notice this only the first time the font is used.</p>

109

<pre>  paintCannon(painter);

110

if (isShooting())

111

paintShot(painter);

112

if (!gameEnded)

113

paintTarget(painter);

114

}</pre>

115

<p>We draw the shot only when shooting and the target only when playing (that is, when the game is not ended).</p>

116

117

<h3><a href="tutorial-t13-gameboard-h.html">t13/gameboard.h</a></h3>

118

<p>This file is new. It contains the definition of the <tt>GameBoard</tt> class, which was last seen as <tt>MyWidget</tt>.</p>

119

<pre>  class QLCDNumber;

120

class CannonField;

121

122

class GameBoard : public QWidget

123

{

124

Q_OBJECT

125

126

public:

127

GameBoard(QWidget *parent = 0);

128

129

protected slots:

130

void fire();

131

void hit();

132

void missed();

133

void newGame();

134

135

private:

136

QLCDNumber *hits;

137

QLCDNumber *shotsLeft;

138

CannonField *cannonField;

139

};</pre>

140

<p>We have now added four slots. These are protected and are used internally. We have also added two <a href="qlcdnumber.html">QLCDNumber</a>s (<tt>hits</tt> and <tt>shotsLeft</tt>) that display the game status.</p>

141

142

<h3><a href="tutorial-t13-gameboard-cpp.html">t13/gameboard.cpp</a></h3>

143

<p>This file is new. It contains the implementation of the <tt>GameBoard</tt> class, which was last seen as <tt>MyWidget</tt>.</p>

144

<p>We have made some changes in the <tt>GameBoard</tt> constructor.</p>

145

<pre>  cannonField = new CannonField;</pre>

146

<p><tt>cannonField</tt> is now a member variable, so we carefully change the constructor to use it.</p>

147

<pre>  connect(cannonField, SIGNAL(hit()),

148

this, SLOT(hit()));

149

connect(cannonField, SIGNAL(missed()),

150

this, SLOT(missed()));</pre>

151

<p>This time we want to do something when the shot has hit or missed the target. Thus we connect the <tt>hit()</tt> and <tt>missed()</tt> signals of the <tt>CannonField</tt> to two protected slots with the same names in this class.</p>

152

<pre>  connect(shoot, SIGNAL(clicked()),

153

this, SLOT(fire()));</pre>

154

<p>Previously we connected the <b>Shoot</b> button's <tt>clicked()</tt> signal directly to the <tt>CannonField</tt>'s <tt>shoot()</tt> slot. This time we want to keep track of the number of shots fired, so we connect it to a protected slot in this class instead.</p>

155

<p>Notice how easy it is to change the behavior of a program when you are working with self-contained components.</p>

156

<pre>  connect(cannonField, SIGNAL(canShoot(bool)),

157

shoot, SLOT(setEnabled(bool)));</pre>

158

<p>We also use the <tt>cannonField</tt>'s <tt>canShoot()</tt> signal to enable or disable the <b>Shoot</b> button appropriately.</p>

159

<pre>  QPushButton *restart = new QPushButton("&New Game");

160

restart->setFont(QFont("Times", 18, QFont::Bold));

161

162

connect(restart, SIGNAL(clicked()), this, SLOT(newGame()));</pre>

163

<p>We create, set up, and connect the <b>New Game</b> button as we have done with the other buttons. Clicking this button will activate the <tt>newGame()</tt> slot in this widget.</p>

164

<pre>  hits = new QLCDNumber(2);

165

shotsLeft = new QLCDNumber(2);

166

QLabel *hitsLabel = new QLabel("HITS");

167

QLabel *shotsLeftLabel = new QLabel("SHOTS LEFT");</pre>

168

<p>We create four new widgets. Note that we don't bother to keep the pointers to the <a href="qlabel.html">QLabel</a> widgets in the <tt>GameBoard</tt> class because there's nothing much we want to do with them. Qt will delete them when the <tt>GameBoard</tt> widget is destroyed, and the layout classes will resize them appropriately.</p>

169

<pre>  QHBoxLayout *topLayout = new QHBoxLayout;

170

topLayout->addWidget(shoot);

171

topLayout->addWidget(hits);

172

topLayout->addWidget(hitsLabel);

173

topLayout->addWidget(shotsLeft);

174

topLayout->addWidget(shotsLeftLabel);

175

topLayout->addStretch(1);

176

topLayout->addWidget(restart);</pre>

177

<p>The number of widgets in the top-right cell is getting large. Once it was empty; now it's full enough that we group together the layout setting for better overview.</p>

178

<p>Notice that we let all the widgets have their preferred sizes, instead putting the stretch just to the left of the <b>New Game</b> button.</p>

179

<pre>  newGame();

180

}</pre>

181

<p>We're all done constructing the <tt>GameBoard</tt>, so we start it all using <tt>newGame()</tt>. Although <tt>newGame()</tt> is a slot, it can also be used as an ordinary function.</p>

182

<pre>  void GameBoard::fire()

183

{

184

if (cannonField->gameOver() || cannonField->isShooting())

185

return;

186

shotsLeft->display(shotsLeft->intValue() - 1);

187

cannonField->shoot();

188

}</pre>

189

<p>This function fires a shot. If the game is over or if there is a shot in the air, we return immediately. We decrement the number of shots left and tell the cannon to shoot.</p>

190

<pre>  void GameBoard::hit()

191

{

192

hits->display(hits->intValue() + 1);

193

if (shotsLeft->intValue() == 0)

194

cannonField->setGameOver();

195

else

196

cannonField->newTarget();

197

}</pre>

198

<p>This slot is activated when a shot has hit the target. We increment the number of hits. If there are no shots left, the game is over. Otherwise, we make the <tt>CannonField</tt> generate a new target.</p>

199

<pre>  void GameBoard::missed()

200

{

201

if (shotsLeft->intValue() == 0)

202

cannonField->setGameOver();

203

}</pre>

204

<p>This slot is activated when a shot has missed the target. If there are no shots left, the game is over.</p>

205

<pre>  void GameBoard::newGame()

206

{

207

shotsLeft->display(15);

208

hits->display(0);

209

cannonField->restartGame();

210

cannonField->newTarget();

211

}</pre>

212

<p>This slot is activated when the user clicks the Restart button. It is also called from the constructor. First it sets the number of shots to 15. Note that this is the only place in the program where we set the number of shots. Change it to whatever you like to change the game rules. Next we reset the number of hits, restart the game, and generate a new target.</p>

213

214

215

<p>This file has just been on a diet. <tt>MyWidget</tt> is gone, and the only thing left is the <tt>main()</tt> function, unchanged except for the name change.</p>

216

217

<h2>Running the Application</h2>

218

<p>The cannon can shoot at a target; a new target is automatically created when one has been hit.</p>

219

<p>Hits and shots left are displayed and the program keeps track of them. The game can end, and there's a button to start a new game.</p>

220

221

<h2>Exercises</h2>

222

<p>Add a random wind factor and show it to the user.</p>

223

<p>Make some splatter effects when the shot hits the target.</p>

224

<p>Implement multiple targets.</p>

225

<p>

226

[Previous: <a href="tutorial-t12.html">Chapter 12</a>]

227

[<a href="tutorial.html">Qt Tutorial</a>]

228

[Next: <a href="tutorial-t14.html">Chapter 14</a>]

229

</p>

230

231

232

233

<td width="40%" align="center"><a href="trademarks.html">Trademarks</a></td>

234

235

</tr></table></div></address></body>

236

</html>

Older »