A Simple Game
The example in Listing 5.9 features a spaceship that can move and shoot. Use the left and right arrow keys to move and the up arrow key to shoot. The application shows delegates in action and how to handle keyboard events.
Listing 5.9. The spaceship game
<canvas height="500">
<resource name="spaceShip" src="spaceShip.jpg"/>
<view>
<simplelayout axis="x" spacing="4"/>
<view bgcolor="silver" width="40" height="40">
<text>1</text>
</view>
<view bgcolor="silver" width="40" height="40">
<text>2</text>
</view>
<view bgcolor="silver" width="40" height="40">
<text>3</text>
</view>
<view bgcolor="silver" width="40" height="40">
<text>4</text>
</view>
<view bgcolor="silver" width="40" height="40">
<text>5</text>
</view>
</view>
<view y="400" bgcolor="black" width="${parent.width}">
<view id="spaceShip" resource="spaceShip" clickable="true"
focusable="true">
<handler name="onkeydown" args="k">
<![CDATA[
if (k == 38) {
var bullet = new LzView(canvas,
{width: 2, height: 5,
bgcolor: green, name: "bullet"});
bullet.setX(this.x + 18);
bullet.setY(400);
bullet.animate("y", -10, 1000, false);
} else if (k == 37 && this.x > 0) {
this.setX(this.x - 6);
} else if (k == 39 && this.x < parent.width) {
this.setX(this.x + 6);
}
]]>
</handler>
</view>
</view>
<handler name="oninit">
LzFocus.setFocus(spaceShip) ;
</handler>
</canvas> |
To test this application, use the following URL:
http://localhost:8080/lps-4.0.x/app05/spaceShip.lzx
Figure 5.5 shows the application.
Figure 5.5. A simple game
The program in Listing 5.9 displays a view that uses the image spaceship.jpg as the resource. Its clickable and focusable attributes are both set to true, so that it can receive keyboard input. The view has its onkeydown wired to the following method:
<handler name="onkeydown" args="k">
<![CDATA[
if (k == 38) {
var bullet = new LzView(canvas,
{width: 2, height: 5,
bgcolor: green, name: "bullet"});
bullet.setX(this.x + 18);
bullet.setY(400);
bullet.animate("y", -10, 1000, false);
} else if (k == 37 && this.x > 0) {
this.setX(this.x - 6);
} else if (k == 39 && this.x < parent.width) {
this.setX(this.x + 6);
}
]]>
</handler>The onkeydown event of an object occurs when the object has the focus and the user presses a keyboard key. It passes the key code as the argument (k). The event handler responds if the key pressed is the up, left, or right arrow. The left and right arrows move the spaceship. The up arrow creates another view on the fly and animates it (animation is discussed in Chapter 7).
Note also, you use the setFocus method of the LzFocus class to make sure that the spaceship view has the focus when the application loads.
<handler name="oninit">
LzFocus.setFocus(spaceShip);
</handler>