Authored by Nonki Takahashi
In Challenge of the Month - August 2013 , there were following two challenges.
Game Challenge
Write a DuckShoot game.
Interface Challenge
Write a fancy Game Opening screen for DuckShoot game - see above.
At that time, I tried only opening. Today, I will introduce new DuckShoot game as Program ID TLR995-2 .
This program has 425 lines. But there are 166 lines that automatically generated by Shapes editor. So actual coded lines are 259.
Main
I added shooting part. But only one duck comes. Because I thought the code becomes complex and worse readable if ducks increases.
1.
' DuckShoot 0.31b
2.
' Copyright (c) 2013-2014 Nonki Takahashi. The MIT License.
3.
'
4.
' History:
5.
' 0.31b 2014-08-01 Sorted subroutines. (TLR995-2)
6.
' 0.3b 2014-07-26 Supported in remote. (TLR995-1)
7.
' 0.2b 2014-07-13 Created a core of shooting. (TLR995-0)
8.
' 0.1a 2013-08-03 Created as DuckShoot opening. (TLR995)
9.
' 0.0 2013-08-03 14:38:49 Shapes generated by Shapes 1.5b.
10.
'
11.
GraphicsWindow
.
Title
=
"DuckShoot 0.31b"
12.
SB_Workaround
(
)
13.
Opening
(
)
14.
GameInit
(
)
15.
GameLoop
(
)
16.
Ending
(
)
Ending
This subroutine calculates score from a number of shoot and a number of hit.
17.
Sub
Ending
18.
Shapes
.
Remove
(
stair
)
19.
If
hit
[
i
]
Then
20.
point
=
1
21.
Else
22.
point
=
0
23.
EndIf
24.
score
=
point
*
110
-
shoot
*
10
25.
GraphicsWindow
.
BrushColor
=
"White"
26.
GraphicsWindow
.
FontSize
=
40
27.
GraphicsWindow
.
DrawText
(
170
,
180
,
"SCORE "
+
score
)
28.
Program
.
Delay
(
500
)
29.
GraphicsWindow
.
DrawText
(
170
,
230
,
"SHOOT "
+
shoot
)
30.
Program
.
Delay
(
500
)
31.
GraphicsWindow
.
DrawText
(
170
,
280
,
"HIT "
+
point
)
32.
Program
.
Delay
(
2000
)
33.
GraphicsWindow
.
FontSize
=
50
34.
GraphicsWindow
.
DrawText
(
170
,
80
,
"GAME OVER"
)
35.
EndSub
Initialization
At this point there is one duck. But for the future, arrays are used instead of single variables for the duck. I decided to use mouse for the operation of the gun, so events for mouse click and move are initialized here.
36.
Sub
GameInit
37.
' Game start
38.
Shapes
.
ShowShape
(
duck
[
1
]
)
39.
mouseDown
=
"False"
40.
GraphicsWindow
.
MouseDown
=
OnMouseDown
41.
GraphicsWindow
.
MouseMove
=
OnMouseMove
42.
Shapes
.
Animate
(
duck
[
1
]
,
gw
,
150
,
3000
)
43.
Program
.
Delay
(
3000
)
44.
i
=
1
45.
hit
[
i
]
=
"False"
46.
a
[
i
]
=
90
47.
x
[
i
]
=
-
dw
48.
yDuck
=
150
49.
y
[
i
]
=
yDuck
50.
Shapes
.
Move
(
duck
[
i
]
,
x
[
i
]
,
y
[
i
]
)
51.
GraphicsWindow
.
PenWidth
=
0
52.
GraphicsWindow
.
BrushColor
=
bgColor
53.
yRS
=
yStair
-
(
yDuck
+
dh
/
2
)
54.
shoot
=
0
55.
EndSub
Main Loop
Last week obstacles are moved in the timer event handler. This time, a duck is moved 4 dots rightward in main loop.
When a player shoots the gun, another duck is drawn under the moving Shapes duck to check hitting. If the target is an ellipse or a rectangle, the hit checking can be calculated from the co-ordinate. But the duck shape is a little difficult for the calculation. So, I used GraphicsWindow.GetPixel() and check the color is the background color or not.
There is a problem on a browser at GetPixel. A browser hangs up and returns no response at GraphicsWindow.GetPixel() after GraphicsWindow.DrawImage(). Program imported into IDE doesn't have this problem. To avoid this problem, I changed this program not to use DrawImage() but to use FillRectangle(), FillTriangle() and FillEllipse() with shape data created by Shapes editor. This workaround works well because the duck drawing was made with Shapes editor.
When the gun hits, the duck image falls down by using Shapes.Zoom(). We can give zoom levels from 0.1 to 20 for this operation. So, be careful not to give smaller value than 0.1. In following subroutine, the zoom level is reduced little by little until 0.1.
I found there is another problem with Shapes.Zoom() in imported program. When the zoom level was smaller than 0.7, the program stopped. At that time, the image of the duck had transparent background. To avoid this issue, I changed the image to have opaque background.
56.
Sub
GameLoop
57.
While
x
[
i
]
<
gw
58.
Program
.
Delay
(
50
)
59.
If
mouseDown
Then
60.
Sound
.
PlayClick
(
)
61.
shoot
=
shoot
+
1
62.
If
silverlight
Then
63.
shX
=
x
[
i
]
64.
shY
=
y
[
i
]
65.
iMin
=
1
66.
iMax
=
10
67.
Shapes_Draw
(
)
68.
Else
69.
GraphicsWindow
.
DrawImage
(
img
,
x
[
i
]
,
y
[
i
]
)
70.
EndIf
71.
color
=
GraphicsWindow
.
GetPixel
(
dx
,
dy
)
72.
GraphicsWindow
.
PenWidth
=
0
73.
GraphicsWindow
.
BrushColor
=
bgColor
74.
GraphicsWindow
.
FillRectangle
(
x
[
i
]
,
y
[
i
]
,
dw
,
dh
)
75.
If
color
<
>
bgColor
Then
76.
hit
[
i
]
=
"True"
77.
EndIf
78.
mouseDown
=
"False"
79.
EndIf
80.
If
hit
[
i
]
Then
81.
If
0
<
a
[
i
]
Then
82.
a
[
i
]
=
a
[
i
]
-
5
83.
cos
=
Math
.
Round
(
Math
.
Sin
(
Math
.
GetRadians
(
a
[
i
]
)
)
*
100
)
/
100
84.
Shapes
.
Zoom
(
duck
[
i
]
,
1
,
Math
.
Max
(
cos
,
0.1
)
)
85.
deltaY
=
yRS
-
yRS
*
cos
86.
y
[
i
]
=
yDuck
+
deltaY
87.
EndIf
88.
EndIf
89.
x
[
i
]
=
x
[
i
]
+
4
90.
Shapes
.
Move
(
duck
[
i
]
,
x
[
i
]
,
y
[
i
]
)
91.
EndWhile
92.
EndSub
Mouse Event Handler (on Click)
This subroutine sets a flag mouseDown and saves the co-ordinate of the mouse. This co-ordinate is used to check that the gun hits the duck in GameLoop().
93.
Sub
OnMouseDown
94.
mouseDown
=
"True"
95.
dx
=
GraphicsWindow
.
MouseX
96.
dy
=
GraphicsWindow
.
MouseY
97.
EndSub
Mouse Event Handler (on Move)
This subroutine moves the sighter depending on the mouse moving. The mouse pointer (the arrow mark) is hided when the mouse is in the window, and is showed when the mouse is out of the window.
98.
Sub
OnMouseMove
99.
mx
=
GraphicsWindow
.
MouseX
100.
my
=
GraphicsWindow
.
MouseY
101.
If
0
<
=
mx
And
mx
<
gw
And
0
<
=
my
And
my
<
gh
Then
102.
Mouse
.
HideCursor
(
)
103.
Shapes
.
Move
(
sighter
,
mx
-
40
,
my
-
40
)
104.
Else
105.
Mouse
.
ShowCursor
(
)
106.
EndIf
107.
EndSub
Opening
This subroutine shows the game title and images of a duck and a sighter. Originally these images were combination of shapes created with Shapes editor. But to make the motion of the images smoother, I converted these shapes data to .png files. The detail about how to convert shapes drawings created by Shapes editor to .png files is described here .
For following two reasons, I used both the image and shapes of the duck. One is for it's eye blink. The other is to avoid the GetPixel issue in browser described above (Main Loop).
108.
Sub
Opening
109.
bgColor
=
"#8B0000"
' DarkRed
110.
stColor
=
"#990000"
' for stair
111.
GraphicsWindow
.
BackgroundColor
=
bgColor
112.
gw
=
598
113.
gh
=
428
114.
GraphicsWindow
.
Width
=
gw
115.
GraphicsWindow
.
Height
=
gh
116.
GraphicsWindow
.
PenWidth
=
0
117.
GraphicsWindow
.
BrushColor
=
bgColor
118.
GraphicsWindow
.
FillRectangle
(
0
,
0
,
gw
,
gh
)
119.
' add duck image
121.
img
=
ImageList
.
LoadImage
(
path
)
122.
If
silverlight
Then
123.
dw
=
246
+
1
124.
dh
=
192
+
2
125.
Else
126.
dw
=
ImageList
.
GetWidthOfImage
(
img
)
127.
dh
=
ImageList
.
GetHeightOfImage
(
img
)
128.
EndIf
129.
duck
[
1
]
=
Shapes
.
AddImage
(
img
)
130.
Shapes
.
Move
(
duck
[
1
]
,
194
,
150
)
131.
Shapes
.
HideShape
(
duck
[
1
]
)
132.
' add stair
133.
GraphicsWindow
.
BrushColor
=
stColor
134.
GraphicsWindow
.
PenWidth
=
0
135.
stair
=
Shapes
.
AddRectangle
(
gw
,
gh
-
yStair
)
136.
yStair
=
Math
.
Round
(
gh
*
2
/
3
)
137.
Shapes
.
Move
(
stair
,
0
,
yStair
)
138.
Shapes
.
HideShape
(
stair
)
139.
' initialize shapes
140.
GraphicsWindow
.
FontName
=
"Trebuchet MS"
141.
GraphicsWindow
.
FontSize
=
50
142.
GraphicsWindow
.
BrushColor
=
"White"
143.
title
=
Shapes
.
AddText
(
"DuckShoot"
)
144.
Shapes
.
Move
(
title
,
170
,
60
)
145.
Shapes_Init
(
)
146.
' add shapes
147.
scale
=
1
148.
angle
=
0
149.
iMin
=
1
150.
iMax
=
10
151.
Shapes_Add
(
)
152.
' add sighter image
154.
sighter
=
Shapes
.
AddImage
(
path
)
155.
Shapes
.
Move
(
sighter
,
250
,
200
)
156.
' Blink start
157.
wait
=
"True"
158.
ems
=
Clock
.
ElapsedMilliseconds
159.
While
wait
160.
Program
.
Delay
(
1000
)
161.
x
=
250
+
(
Math
.
GetRandomNumber
(
50
)
-
25
)
162.
y
=
200
+
(
Math
.
GetRandomNumber
(
50
)
-
25
)
163.
Shapes
.
Move
(
sighter
,
x
,
y
)
164.
Program
.
Delay
(
100
)
165.
Shapes
.
HideShape
(
shape
[
4
]
[
"obj"
]
)
166.
Program
.
Delay
(
100
)
167.
Shapes
.
ShowShape
(
shape
[
4
]
[
"obj"
]
)
168.
If
5000
<
Clock
.
ElapsedMilliseconds
-
ems
Then
169.
wait
=
"False"
170.
EndIf
171.
EndWhile
172.
Shapes
.
ShowShape
(
stair
)
173.
iMin
=
1
174.
iMax
=
10
175.
Shapes_Remove
(
)
176.
Shapes
.
Remove
(
title
)
177.
EndSub
Drawing Shapes
I wrote this subroutine for checking whether the gun shoot hit the duck or not. This subroutine is used only for this purpose so far. But for the future, I wrote this to be as general-purpose as possible. And it has still restrictions as follows.
- not support to draw border
- not support rotation for rectangles and ellipses
This routine is called only when the program is run in browser.
178.
Sub
Shapes_Draw
179.
' Shapes | draw shapes
180.
' param iMin, iMax - shape indices to add
181.
' param shape - array of shapes
182.
' param scale - 1 if same scale
183.
' TODO to draw border line for rectangle, triangle and ellipse
184.
' TODO to rotate rectangle and ellipse (text?)
185.
Stack
.
PushValue
(
"local"
,
x
)
186.
Stack
.
PushValue
(
"local"
,
y
)
187.
Stack
.
PushValue
(
"local"
,
i
)
188.
s
=
scale
189.
For
i
=
iMin
To
iMax
190.
If
shape
[
i
]
[
"pw"
]
>
0
Then
191.
GraphicsWindow
.
PenColor
=
shape
[
i
]
[
"pc"
]
192.
EndIf
193.
If
Text
.
IsSubText
(
"rect|ell|tri|text"
,
shape
[
i
]
[
"func"
]
)
Then
194.
GraphicsWindow
.
BrushColor
=
shape
[
i
]
[
"bc"
]
195.
EndIf
196.
x
=
shX
+
shape
[
i
]
[
"x"
]
*
s
197.
y
=
shY
+
shape
[
i
]
[
"y"
]
*
s
198.
If
shape
[
i
]
[
"func"
]
=
"rect"
Then
199.
GraphicsWindow
.
FillRectangle
(
x
,
y
,
shape
[
i
]
[
"width"
]
*
s
,
shape
[
i
]
[
"height"
]
*
s
)
200.
ElseIf
shape
[
i
]
[
"func"
]
=
"ell"
Then
201.
GraphicsWindow
.
FillEllipse
(
x
,
y
,
shape
[
i
]
[
"width"
]
*
s
,
shape
[
i
]
[
"height"
]
*
s
)
202.
ElseIf
shape
[
i
]
[
"func"
]
=
"tri"
Then
203.
x
[
1
]
=
shX
+
shape
[
i
]
[
"x"
]
*
s
+
shape
[
i
]
[
"x1"
]
*
s
204.
y
[
1
]
=
shY
+
shape
[
i
]
[
"y"
]
*
s
+
shape
[
i
]
[
"y1"
]
*
s
205.
x
[
2
]
=
shX
+
shape
[
i
]
[
"x"
]
*
s
+
shape
[
i
]
[
"x2"
]
*
s
206.
y
[
2
]
=
shY
+
shape
[
i
]
[
"y"
]
*
s
+
shape
[
i
]
[
"y2"
]
*
s
207.
x
[
3
]
=
shX
+
shape
[
i
]
[
"x"
]
*
s
+
shape
[
i
]
[
"x3"
]
*
s
208.
y
[
3
]
=
shY
+
shape
[
i
]
[
"y"
]
*
s
+
shape
[
i
]
[
"y3"
]
*
s
209.
angle
=
shape
[
i
]
[
"angle"
]
210.
If
angle
<
>
0
Then
211.
n
=
3
212.
ox
=
(
x
[
2
]
+
x
[
3
]
)
/
2
213.
oy
=
(
y
[
1
]
+
y
[
2
]
)
/
2
214.
Shapes_RotatePolyline
(
)
215.
EndIf
216.
GraphicsWindow
.
FillTriangle
(
x
[
1
]
,
y
[
1
]
,
x
[
2
]
,
y
[
2
]
,
x
[
3
]
,
y
[
3
]
)
217.
ElseIf
shape
[
i
]
[
"func"
]
=
"line"
Then
218.
x
[
1
]
=
shX
+
shape
[
i
]
[
"x"
]
*
s
+
shape
[
i
]
[
"x1"
]
*
s
219.
y
[
1
]
=
shY
+
shape
[
i
]
[
"y"
]
*
s
+
shape
[
i
]
[
"y1"
]
*
s
220.
x
[
2
]
=
shX
+
shape
[
i
]
[
"x"
]
*
s
+
shape
[
i
]
[
"x2"
]
*
s
221.
y
[
2
]
=
shY
+
shape
[
i
]
[
"y"
]
*
s
+
shape
[
i
]
[
"y2"
]
*
s
222.
If
angle
<
>
0
Then
223.
n
=
3
224.
ox
=
(
x
[
2
]
+
x
[
3
]
)
/
2
225.
oy
=
(
y
[
1
]
+
y
[
2
]
)
/
2
226.
Shapes_RotatePolyline
(
)
227.
EndIf
228.
GraphicsWindow
.
DrawLine
(
x
[
1
]
,
y
[
1
]
,
x
[
2
]
,
y
[
2
]
)
229.
ElseIf
shape
[
i
]
[
"func"
]
=
"text"
Then
230.
If
silverlight
Then
231.
fs
=
Math
.
Floor
(
shape
[
i
]
[
"fs"
]
*
0.9
)
232.
Else
233.
fs
=
shape
[
i
]
[
"fs"
]
234.
EndIf
235.
GraphicsWindow
.
FontSize
=
fs
*
s
236.
GraphicsWindow
.
FontName
=
shape
[
i
]
[
"fn"
]
237.
GraphicsWindow
.
DrawText
(
x
,
y
,
shape
[
i
]
[
"text"
]
)
238.
EndIf
239.
EndFor
240.
i
=
Stack
.
PopValue
(
"local"
)
241.
y
=
Stack
.
PopValue
(
"local"
)
242.
x
=
Stack
.
PopValue
(
"local"
)
243.
EndSub
Polyline Rotation
This subroutine is written for rotating vertices of a triangle. But this subroutine supports more vertices as a polyline or a polygon for general-purpose.
244.
Sub
Shapes_RotatePolyline
245.
' Shapes | rotate polyline
246.
' param n - number of points
247.
' param x, y - array of x and y co-ordinates
248.
' param ox, oy, - center of rotation
249.
' param angle - angle of rotation
250.
Stack
.
PushValue
(
"local"
,
i
)
251.
_a
=
Math
.
GetRadians
(
angle
)
252.
For
i
=
1
To
n
253.
xi
=
(
x
[
i
]
-
ox
)
*
Math
.
Cos
(
_a
)
+
(
y
[
i
]
-
oy
)
*
Math
.
Sin
(
_a
)
254.
yi
=
-
(
x
[
i
]
-
ox
)
*
Math
.
Sin
(
_a
)
+
(
y
[
i
]
-
oy
)
*
Math
.
Cos
(
_a
)
255.
x
[
i
]
=
xi
+
ox
256.
y
[
i
]
=
yi
+
oy
257.
EndFor
258.
i
=
Stack
.
PopValue
(
"local"
)
259.
EndSub
Auto Generated Code
And this program also have following subroutines. These subroutines are generated by Shapes editor 1.5b. So I skip to show these codes. But I listed up brief description for these. There are other subroutines generated by Shapes. But I deleted because they are not called in this program.
- SB_Workaround - determine which workarounds needed or not for running on browser
- Shapes_Add - adds Shapes objects along with the array shape
- Shapes_CalcWidthAndHeight - calculates whole width and height for data in the array shape
- Shapes_Init - sets duck shapes data into an array shape
- Shapes_Move - moves shapes added in Shapes_Add
- Shapes_Remove - removes shapes added in Shapes_Add
As duck shooting game, increasing ducks will make this game more fun. Would you like to challenge?