CSE120 Sp17 Assignment - Controlling Elli

Goals

• Control the motion of Elli via user interaction!
• Learn how to use keyCode to decipher specific keyboard presses.
• Learn how to detect the proximity of two objects.

Controlling Elli

Recall that we used separate seven-element arrays to store the x-coordinate (elliX[]), y-coordinate (elliY[]), and color for each segment of Elli's body. These fully describe the rendering -- display on the screen -- of the worm.

Recall also that to move Elli, the segment positions are shifted left in the arrays by one element and the head is updated to a new position. This means that the segments all follow the head, and by controlling the position of Elli's head, we control his entire body's motion!

Step 1: Variables for Elli's Motion

Looking at your completed Arrays and Elli lab, which lines of code caused Elli to move diagonally downward? Instead of always changing by a fixed amount in both x- and y-directions, we can replace these with variables that will change based on which direction we want Elli to head in.

For now, create appropriately-named variables to control Elli's motion at the top of your program and initialize them to the fixed numbers you just replaced. Run your updated program now and Elli should behave just as it did before.

Step 2: React to Cursor Keys

Take a minute to read the reference page for keyCode. This can be found by going to [Help --> Reference] in Processing, and then clicking on the keyCode link on that website that opens, which can found under the heading "Keyboard."

Set up a keyPressed() function similar to the example given in the reference page. Your program should execute different lines of code based on the key pressed to change the direction that Elli travels in:

• If the key is not CODED, then do nothing.
• What should your variables be changed to if the user presses UP? DOWN LEFT? RIGHT?
• Do your variable initializations need to be changed?

Translate your answers to the questions above into code changes in your program. Try out your updated program to verify that you can now make Elli travel in FOUR different directions.

Step 3: Adding Diagonals

Now we want to allow Elli to travel in eight directions (North, NorthEast, East, SouthEast, South, SouthWest, West, NorthWest), but we only have four direction buttons (UP, RIGHT, DOWN, LEFT)! We will need to decide how to change directions based on the key pressed and the current direction Elli is traveling. Some starter questions:

• If Elli is currently traveling North, what should happen if the user presses RIGHT?
• If Elli is currently traveling North, what should happen if the user presses DOWN?
• If Elli is currently traveling NorthWest, what should happen if the user presses DOWN?

A perfectly acceptable option for some of these scenarios might "do nothing" or "ignore that button press."

We are leaving the choice of control scheme to you, so think CAREFULLY about how you want this to work before you start changing your code. Elli MUST be able to travel in all eight directions. Make sure to describe your control scheme in a block comment at the top of your program (and in your portfolio) so that other users will know how to control Elli!

Try out your updated program to verify that you can now make Elli travel in EIGHT different directions using a control scheme that makes intuitive sense.

Step 4: Elli Feeds on Apples

Write a function apple() that draws a 40x40 red ellipse at the integer location (appleX, appleY). A simple ellipse will suffice, but feel free to draw a fancy apple if you'd like to. The apple should be assigned to a random location on your canvas.

Now write a function meet() that determines whether or not Elli's head is close enough to eat the apple. We will accomplish this by checking whether the coordinates of Elli's head are close to the coordinates of the apple. "Close" is tested by subtracting the coordinates and seeing if their absolute difference is small:

if ( abs( elliX[6] - appleX ) < 25 &&     // are the x values close?
     abs( elliY[6] - appleY ) < 25 ) {    // are the y values close?
     // then eat the apple
}

meet() should be called from draw(). When Elli eats an apple, a new one should appear in a new random location.

Step 5: Fix Elli [OPTIONAL]

Elli is a little weird because the positions of the ellipses are specified from the upper left corner of their bounding box, not the center, so our code's definition of being "close" enough to eat an apple doesn't really match up with our expectations.

Read about ellipseMode() in the references. Go back and change the ellipseMode() and then correct for the sizes of the body segments and apples to make a more realistic-looking "Snake" game.

Step 6: Keep Score [OPTIONAL]

Tally up the number of apples that Elli has eaten since the program started running!

• How will you store the current score?
• How will you display the current score on the drawing canvas?
• What if you wanted to have a "Reset Score" button/key?
• How might you implement multiple apples at once?