Lab 3.5: Control Quincy: the Quorum Bunny

Controlling items on the screen

Goals

In this lab, we will learn the following computer science concepts:

  • Creating Objects
  • Using conditional statements

Computer Science Principles Curriculum

  • Big Idea: Algorithms: EU 4.1, LO 4.1.1, EK 4.1.1A, EK 4.1.1C, EK 4.1.1D

Common Core Standards

  • English Language Arts Standards » Science & Technical Subjects: CCSS.ELA-Literacy.RST.9-10.2, CCSS.ELA-Literacy.RST.9-10.3, CCSS.ELA-Literacy.RST.9-10.4, CCSS.ELA-Literacy.RST.9-10.5, CCSS.ELA-Literacy.RST.9-10.6, CCSS.ELA-Literacy.RST.11-12.2, CCSS.ELA-Literacy.RST.11-12.3, CCSS.ELA-Literacy.RST.9-10.1, CCSS.ELA-Literacy.RST.9-10.2, CCSS.ELA-Literacy.RST.9-10.7, CCSS.ELA-Literacy.RST.9-10.8, CCSS.ELA-Literacy.RST.9-10.9
  • Standards For Mathmatical Practice: CCSS.Math.Practice.MP1, CCSS.Math.Practice.MP2, CCSS.Math.Practice.MP5, CCSS.Math.Practice.MP6, CCSS.Math.Practice.MP7, CCSS.Math.Practice.MP8,

Vocabulary

  • Control Structures
  • If Statement
  • Looping
  • Input Manager

Overview

This lab demonstrates how to use key presses on the keyboard to perform some tasks. The task you will perform is to write a program that moves an image of a bunny around the screen upon pressing of the up, down, left, and right arrow keys. Download this zip file for a template to help you get started, or use the IDE below.

Understanding the InputMonitor and KeyboardEvent Libraries

Open the provided template and navigate to the Main.quorum file . Near the top of the file, there are two lines that look like this:

// this line declares an InputMonitor object called "inputMonitor"
InputMonitor inputMonitor
// this line declares a KeyboardEvent object called "keys"
KeyboardEvent keys

These two lines declare the objects you use to determine if a specific key has been pressed on the keyboard. The InputMonitor object knows when a key is pressed down, and the KeyboardEvent object knows which key is pressed down. You use these objects to determine when a key is pressed down and which key is pressed down.

The InputMonitor object has an action called IsKeyPressed that takes a KeyboardEvent object variable and returns a boolean — true if the passed key is pressed, false if not. You need to pass the KeyboardEvent object variable to the IsKeyPressed action, telling the KeyboardEvent object which key you want to check is pressed. This is done with the following code:

Example: Use the InputMonitor and KeyboardEvent object to execute code when a key is pressed.

// This line of code will execute the statement(s) inside the if statement when
// the A key is pressed down.
if inputMonitor:IsKeyPressed(keys:A)
   output "The 'A' Key was pressed!"
end

This line looks a little complicated, so let’s break it down. inputMonitor is the name of our InputMonitor object. We are calling its IsKeyPressed action. Its parameter is a variable that lives in our KeyboardEvent object. The variable is the all-caps representation for the key. For example, "A" represents the A key, "NUM_7" represents the 7 key, and "F2" represents the F2 key. This action returns a boolean which we can use with an if statement to execute code only when that action returns true—i.e., when the key in question is pressed down.

Goal 1: Creating Objects

Navigate to the action called CreateGame on line 36 through line 37. This is where you load the images for your Drawable objects. An Drawable object has already been declared for you, called bunny. Load the image called "media/bunny.png" to theDrawable object.

Activity: Load an image to your Drawable object and add it to the screen.

Recall that to load an image to a Drawable object, we call the Load action, passing the file name of the file we want to load. Once you have your Drawable loaded, you should add it to the game. This is done by calling the Add action with your Drawable as the parameter. Now that you have your Drawable loaded and added to the game, you can begin writing the code to move the image around the screen upon key presses.

Navigate to the action called Update(number seconds) on line 46 through line 47. This action is called on every frame of your game. This is where you write your code to handle the key presses. This action should check whether some keys are pressed down and, if they are, begin the appropriate task for those keys.

Goal 2: Using Conditional Statements

The bunny should move vertically upon pressing of the up or down arrow keys. You need to check whether the up and down arrow keys are pressed. The names of the variables in KeyboardEvent objects that represent the up and down arrow keys are UP and DOWN, respectively.

If the up arrow key is pressed, the bunny should move up the screen. To do this, you need to get the current y-coordinate of the Drawable object by calling the GetY action. The new y-coordinate should be set to the current y-coordinate plus the speed of the Drawable (declared and set earlier in the program) multiplied by the time between frames (the parameter of the Update(number seconds) action in which you are currently writing your code).

Example: Write the code that moves the bunny up when the Up key is pressed.

// this if statement checks when the Up key is pressed
if inputMonitor:IsKeyPressed(keys:UP)
   // this line of code gets the current y position of the bunny
   number y = bunny:GetY()
   // this line calculates the new y position based on the current y
   number newY = y + speed * seconds
   // this line sets the new y position
   bunny:SetY(newY)
end

If the down arrow key is pressed, the bunny should move down the screen. To do this, you need to get the current y-coordinate of the Drawable object by calling the GetY action. The new y-coordinate should be set to the current y-coordinate minus the speed multiplied by the seconds.

Activity: Write the code to move the bunny down the screen if the DOWN key is pressed.

The bunny should move horizontally upon pressing the right or left arrow keys. You need to check whether the left or right arrow keys are pressed. The names of the variables in KeyboardEvent objects that represent the left and right arrow keys are LEFT and RIGHT, respectively.

If the left arrow key is pressed, the bunny should move left across the screen. To do this, you need to get the current x-coordinate of the Drawable object by calling the GetX action. The new x-coordinate should be set to the current x-coordinate minus the speed of the Drawable (declared and set earlier in the program) multiplied by the seconds between frames (the parameter of the Update(number seconds) action in which you are currently writing your code).

Example: Write the code to move the bunny towards the left when the Left key is pressed.

// this if statement checks when the Left key is pressed
if inputMonitor:IsKeyPressed(keys:LEFT)
   // this line gets the current x position
   number x = bunny:GetX()
  // this line calculates the new x position based on the current x
   number newX = x – speed * seconds
  // this line sets the new x position
   bunny:SetX(newX)
end

If the right arrow key is pressed, the bunny should move right across the screen. To do this, you need to get the current x-coordinate of the Drawable object by calling the GetX action. The new x-coordinate should be set to the current x-coordinate plus the speed multiplied by the seconds.

Activity: Write the code to move the bunny towards the right when the RIGHT key is pressed.

You may now compile and run your code. There should be no errors. If there are errors, fix them and try again. You should be able to move the bunny horizontally and vertically around the screen by pressing the appropriate keys.

Bonus Activity! Try experimenting with different keys and moving the bunny in different directions. You might try using the W, D, A, and S buttons. If you ever intend to make an MMORPG you'll need to start here!

Next Tutorial

In the next tutorial, we will discuss Assignment 3.4, which describes how work Key Press Madness - Visual in Quorum..

Go BackNext Tutorial