|
B CUSP 110C – Digital Thinking Homework 12: Simple
Block Breaker |
|
|
Goal: The purpose of this homework is to guide you to create a simple block breaker game with simple animation (ball moving) and player control. Over the weekend you have experienced design and implementation based on your creativity, in this assignment we learn about basic elements in a game design. After this assignment, you will be ready to design your own final video game (or animation)!
To implement a simple block breaker game, we will need to accomplish the following steps:
· Step 1: load an image and create a moving ball
· Step 2: bound the moving ball to inside the game window
· Step 3: create a paddle at the bottom of the screen and allow player control of the paddle
· Step 4: bounce the ball if the paddle and the ball should collide
· Step 5: include one block for the ball to break
This is what (with extra credit) we are about to build (try moving your mouse to control the paddle, and mousePress to reset the game). Let’s begin!
Step 1a: Design: we want to create a ball (an image) and change the location of the ball according to some velocity. This means, we need to have variables representing the position, and velocity of the ball. Now, declare global variables to represent the following:
· The ball:
o Variable name: ball
o Data type: PImage
o Initial value: load image soccer.png (right click, “save image as” to make a copy of this image for your own use)
· Ball position:
o Variable names: posX, posY
o Data type: float
o Initial values:
§ posX = random(100, 300)
§ posY = random(200, 300)
· Ball velocity:
o Variable names: velocityX, velocityY
o Data type: float
o Initial values:
§ velocityX = random(-2, 2)
§ velocityY = random(2, 3)
Step 1b: setup():
· Game window size: 400, 500
· frameRate = 60
· loadImage on soccer.png for the ball.
Step 1c: draw():
· background(200) // gray
· draw ball with image() function at: posX, posY, with size of 30x30
· update posX/Y by velocityX/Y
This is what your program may look like at the end of Step1.
Step 2a: Since the ball is traveling downwards, let’s first check for bottom of the game window, remember that the y-coordinate increases downwards. What we want to do is check and detect when the posY (y position f the ball) is greater than the window height. When this happens, we want to flip the Y-velocity (velocityY) of the ball:
if (posY > 500)
velocityY *= -1;
Put the above statement into your draw() function and test to see your ball will “bounce” from the bottom of the window. Now, think about the other three sides of the game window, check the bounds and flip the corresponding velocity.
Step 2b to Step 2d: work on top, left, and right boundaries of the game window.
This is what your program may look like at the end of Step2. (How do you check for soccer ball boundary rather than the top/left corner)?
Step 3a: create a paddle (rectangle) at the bottom of the screen with: (mouseX, 460), size 60x8. Make sure this paddle is some interesting color (I used red).
This is what your program may look like at the end of Step3 (verify that you can move to change your mouseX to move the paddle horizontally).
Step 4a: Include the collision function (here is the source code to a collision function suitable for our use), copy/pates this function into your homework. Study the definition of this function and see that this function defines seven (7) parameters, first three for the ball, and last four for the paddle:
· First three parameters: ball positionX, ball positionY, and ball size.
o We know, our ball position is defined by (posX, posY), and our ball size is 30
· Last four parameters: paddle positionX, paddle positionY, paddle width and paddle height.
o What are the corresponding values for our paddle?
Step 4b: Call the ballPaddleCollide() function to collide the ball with the paddle and flip the ball’s velocity-Y when collision occurs:
if (ballPaddleCollide( … what are the arguments you want to pass? ))
velocityY *= -1;
This is what your program may look like at the end of Step4 (try moving the paddle to bounce the ball);
Step 5a: Block representation. Blocks are these things that initially we want to draw, but, once it is touched by the ball, we will stop drawing. We will define block size to be 50x10, and in order to support block representation and behavior, for each block, we will need the following global variables:
· Block visible or not:
o Variable name: block1Visible
o Data type: boolean
o Initial value: true (block 1 is visible)
· Block position:
o Variable names: block1X, block1Y // X/Y position of the block
o Data type: float
o Initial value: this can be random:
§ Block1X = random(0, 350)
§ Block1Y = random(50, 200);
Notice, all three variables are necessary to define each additional blocks!
Step 5b: Draw the block (in some interesting color). Now, draws the block in the draw() function only when it is indeed visible :
if (block1Visible) {
rect(block1X, block1Y, 50, 10);
// you would need to test for collision with the ball
// by calling the ballPaddleCollide() function!
}
Run your program and you should see a block somewhere on the screen.
Step 5c: Collide the block with the ball to make it disappear by calling the ballPaddleCollide() function!
if (block1Visible) {
rect(block1X, block1Y, 50, 10);
if (ballPaddleCollide( … what argument should you use here?)) {
block1Visible = false; // don’t want to draw block again!
velocityY *= -1; // flip the y velocity of the ball
}
}
This is what your program may look like at the end of Step5, you can actually “break” the block now!
Wrap up. We have defined a videogame (breaking blocks with a bouncing ball), layout step-by-step design, and follow the steps to implement our game!
Turn In.
1. Exercise 9: Post applet resulting from step-5 to your personal web-site and email Jack the URL to your personal web-page.
2. Homework 12: Turn in the source code to step-5 and e-Submit to the class dropbox. Don’t forget to bring printouts to class. Do not forget to e-submit your image file!
Extra credit. There are almost infinite number of improvements you can do to a block breaker game. Here are a couple of ideas:
· (3pt) Mouse click to re-create the game, recreate a new ball, with a new block. Here is an example of what I mean. (click mouse to see what happens)
· (3pt) Include five (5) blocks instead of just boring one!
· Tell me your ideas and I will tell you how many points it is worth J
