Cannon Duckies











Give a brief summary of the game. What’s the goal? Are there any points? How are they scored?

The goal of cannon duckies is to shoot ducks out of a cannon at balloons for points. The more balloons popped results in more points. Balloons differ in size and color. Small and moving balloons are worth more points while big and static balloons are worth less. The player uses the space bar for two actions in the game. First, the player presses space when he or she wants to stop the cannon from rotating. Then, a moving power bar appears. The player presses space again to indicate how fast the duck should be shot. The duck is then fired from the cannon and will pop any balloon it collides with. The game is over when the player has fired all 5 ducks.

What are the key algorithms and techniques you used in developing your game? How do these algorithms improve your computational runtime or user experience?

Cannon duckies is implemented with some simple algorithms. One implementation is the path of the duck. After the user stops the rotating cannon and selects the power meter, the game knows the angle of the cannon and the initial velocity. With this information we can use the projectile motion equation to calculate the initial x and y velocity. Speed and angle come from the user's input.

xVel = speed * cos(angle)
yVel = speed * sin(angle)

Once we know the x and y velocity, we simply need to update the position of the duck every time the method draw() is called. The x and y position is calculated by appending the velocity. The y velocity changes at each iteration because there is a gravity term to make it feel like the duck is falling. (adding g because the orgin of the canvas is the upper left)

xPos += xVel
yPos += yVel
yVel = sin(angle) + g

These equations were used to make the duck fly through the air. Once the duck falls below 1500px, a new duck is queued up. Another algorithm used in cannon duckies is collision detection. Collision detection was done by checking if any part of the duck crosses any part of a balloon. This was slightly different because the duck was an image. Javascript canvas draws the center of the image at the given x and y coordinates. So the radius must be added or subtracted from the center (front edge vs back edge). The balloons also had a similar problem, where the radius had to be added or subtracted.

From a computational perspective, what are the bottlenecks/limiting factors in your game? If given more time, what algorithmic improvements would you make?

I don’t think there are any data structures or algorithms that are limiting the performance of this game. However, there is a small bug in the game I was not able to fix. Initially, I wanted the duck to shoot out of the tip of the cannon. This turned out to be very difficult since the cannon picture is rotating. So, when the player presses the space bar to stop the cannon, the cannon picture is drawn in a different (rotated) context. The coordinates in the rotated context are not the same as the coordinates in the global context. In order for the duck to look like it was shooting from the tip, the duck needs to start at the global cannon tip coordinates. I was only able to calculate the local context coordinates of the tip of the cannon. Given more time, I would have looked into fixing this bug.

From a design perspective, what are some features you didn't get to? How would you improve your gameplay if given more time?

My initial vision for this game was for it to be level based (similar to angry birds). With different levels the goal would be to clear all the balloons at each level. The levels would get progressively harder, starting out with big and static balloons and progressing towards small and moving balloons. Given the time constraints I decided to randomly generate the balloons to keep the game different each play through. Another improvement would be to add other items in the sky. I wanted to add birds, airplanes, or helicopters that would decrease your score if you hit them. I also wanted confetti to appear after a balloon was popped. Given more time I would have implemented these features.