Escape Game | UNIHIKER Tutorial: Learn Python with Graphical Programming for Beginners 05
Escape Game, as the name suggests, is a game in which players must use their wits to escape from a locked room by finding clues and unlocking the door with the key to get out of danger. Do you want to give it a try? In this lesson, we will be creating an escape game and experiencing a different kind of gaming journey with UNIHIKER.
Goal
Set up the game scene: utilize various images to set up the scene of the escape game and hide the key under the rug.
Define the game mechanics: players need to find the key hidden in the furniture and move the key to the position of the door lock to open the door.
Get to Know
1. The comparison operators and logical operators
2. The concepts of variables and global variables in programs
3. The conditional statement structure in programs
4. The cursor on the UNIHIKER screen
5. How to use make an image move with the cursor on UNIHIKER screen
Software: Mind+
Download address: https://www.mindplus.cc
Hands-on Practice
Designing an Escape Game is challenging, but you will find it easy to implement as long as the logic is sorted out. The implementation of the game mainly involves setting up a game scene and defining the game mechanics.
Task 1: Set up the game scene
First, we need to display different images such as the background, door, and rug images at specified locations on the UNIHIKER screen, and hide the key under the rug.
Task 2: Define the game mechanics
Then, we will learn how to move images with the touch cursor on the screen, then find the key, move it to the door lock position, and open the door to complete the game.
Task 1: Set up the game scene
1. Hardware Connection
Connect UNIHIKER to the computer via a USB cable.
2. Software Preparation
Open Mind+, and complete the software preparation according to the figure below.
3. Write a Program
(1) Split game scene
To facilitate operation, we can divide the game scene into four parts (as shown in the figure below): the background, door, rug, and key.
Next, we need to analyze the location of each image on the screen, then use a dashed rectangle to outline the image and mark a red dot to indicate the coordinates (X, Y) point of each image on the UNIHIKER screen.
Import the required images from the image resource file into the project.
Basically, we need to set up the scene mainly by displaying the images at different positions. So this task is focused on operating images. Do you remember the command for displaying images on the UNIHIKER screen? Yes, it is Object name shows image at X0Y0.
The first image to display on the screen is the background image. To do so, we can add the image display command under the Python main program start.
Note: In the program, the name of the image to be shown should be consistent with the name of the image in the project file.
(2) Scale the images
You may notice that you can only see part of the background image instead of the full image on the screen after running the program above, that's because the UNIHIKER screen is smaller than the image in size. The screen size is 240*320 while the image size is 896*1109.
There are two ways to display the full image on the UNIHIKER screen:
1. Resize the image to 240*320 on an image processing software
2. Add the command The number parameter High of the update object name is under the image display command to scale the image.
However, it seems that the right part of the image displayed on the UNIHIKER screen is still different from that of the original one. Why can't the image be fully displayed on the screen even after we have resized it?
Here, the conversion formula for scaling the image displayed on the UNIHIKER is: scaling ratio = original image height/UNIHIKER screen height.
In this case, the image height is 1109 and the screen height is 320. Substitute the values into the formula and we can get a scaling ratio of 1109/320, which is approximately 3.5 times. This means that the entire image should be scaled down by a factor of 3.5. So its width becomes 896/3.5=256. As a result, the scaled-down image size is about 256*320. However, the UNIHIKER screen size is only 240*320, so a small part of the image on the right will be cut off.
Then you can set the door, lock, and rug images in the same way. The complete code is as follows.
4. Run the Program
Click Run and see the display effect on the UNIHIKER screen.
Task 2: Define the game mechanics
1. Write a Program
We have set up the game scene and hidden the key under the rug in the last task. What we are going to do next is to define the rule for the game, which is to find the key, move it to the position of the door lock, and unlock the door.
(1) Make the key appear
We want the key hidden underneath to appear when the rug is clicked. So, the rug image is the trigger object, and we need to add a click callback function to it. Triggering a callback function by clicking on an image is similar to triggering it by clicking on a button, as both actions are performed by clicking on the screen. To enable an image to trigger the callback function, we need to create a callback function name for the image object, which can be done using the command The click callback function name of the object name is button_click1.
Clicking on the rug image triggers the action which moves the rug to the right by 50 to reveal the key. And the block The number parameter x of the update object name rug is 50 will be used here.
Note: The click callback function of the object name is button_click1 block should be used with When the click callback function button_click1 is triggered, and the callback function name should be the same.
(2) Mouse cursor on the UNIHIKER screen
How can we move the key? In fact, clicking on an image and clicking a button on the screen both use the mouse cursor function of the UNIHIKER. So we can also move the key using the cursor. The command for controlling the cursor is When a mouse move event is received, return coordinates XY. The parameters in the command are shown in the figure below.
Now we want to move the key with the cursor, so how to do it? Well, we can make the key move along with the cursor by changing the key's coordinates to the cursor's, which can be done using the command The number parameter y of the update object name is. The specific implementation method is shown below.
(3) How are wins determined in the game?
There is always a criterion for determining victory in the game, and in this "Escape game", you need to move the key to the door lock position, then the door opens and you win. The question here is where the key needs to be positioned for the door to open. To figure this out, let's analyze the position of the door lock on the UNIHIKER screen.
The door lock is located at around y-coordinate 150-200 on the UNIHIKER screen. If the key's y-coordinate falls within this range, then execute the commands Remove Object door and Remove Object key.
To determine the key's position, we need to use the comparison operators ">" and "
(4) Improve the game
All functions of the game have been implemented roughly, but there is still a bug: the key will appear when any position on the screen is clicked. This is because the "mouse move event" and "click callback function" programs are not being executed in the correct order. As a result, the "mouse move event" is executed once the screen is clicked even if the rug is not triggered during the game.
To address this issue, we can create a new variable to determine whether the program should be executed. Here we create a variable named "flag" to serve this purpose.
Note: For information about "variables", please see the Knowledge Base.
The complete program is shown below:
2. Run the Program
Click Run to run the program, and then you can start playing the game. The key will only appear when you click on the rug, and then you need to drag the key to the position of the door lock. When the key is in the right position, the door will open and the game will be completed.
3. Have a Try
We've learned how to move the key, but the program only implements the movement of the key's y-coordinate. And we can only move the key up and down instead of left and right. Now, let's try modifying the program and making the key able to move up, down, left, and right when triggered by the cursor.
Knowledge Base
1. Operator
In programming, an operator is a symbol or keyword that is used to perform an operation on one or more operands. For example, in "3 + 2", the operands are 3 and 2, and the operator is "+". In Mind+, there are roughly six types of operators: arithmetic operator, bitwise operator, comparison operator, logical operator, length operator, and conditional operator.
In this lesson, we have used comparison and logical operators, so we will focus on these two types of operators.
Comparison operators are used in programs to determine the relative size of constants, variables, or expressions and determine their relationship to each other. These operators return true or false based on the comparison result.
The comparison operator ">", if variable Y is greater than 150, returns true, otherwise, it returns false.
The comparison operator "
The comparison operator "=", if the variable flag is equal to 1, returns true, otherwise, it returns false.
Logical operators are used to perform logical operations, and they also return two results, true and false. There are three logical operators, namely "AND", "OR", and "NOT", as shown in the figure below:
We can see from the blocks that the logical operators "AND" and "OR" require two operands to perform a logical operation, so they are also called binary operators. The logical operator "NOT" is called a unary operator and only takes one operand.
The logical operator "AND" returns true only when both operands are true, otherwise, it returns false. For example, when Y=180, at this time Y>150 and Y
The logical operator "OR" returns true as long as one of the operands is true. When both operands are false, the operation result is false. The logical operator "OR" expresses the same meaning as the word "or" we use in our daily life.
The logical operator "NOT" takes only one operand and negates its value. When the operand is true, the logical operation result is false, and vice versa.
2. Concept of Variables and Global Variables
What are variables? For the sake of better understanding, we can think of a variable as a box, and assigning a value to a variable is like putting something into this box. Variables can be repeatedly assigned, which means that the things in the box can be taken out and replaced with something else.
The command blocks above are used to assign values to the variable flag repeatedly. The first assignment puts the number 0 into the empty box named flag, so the value of the flag is 0. The second takes out 0 and puts the number 1 into it, changing the value of the flag to 1.
Note: When creating a new variable, it is important to strictly follow the variable naming convention.
(1) Variable names are generally composed of numbers, letters, and underscores.
(2) Variable names cannot include words that already have a special meaning in Python, such as True, False, def, if, elif, else, import, etc.
(3) Variable names cannot contain special characters (\ ` ~ ! @ # $ % ^ & * ( ) + < > ? : , . / ; ' [ ]).
(4) It is best to use a name that reflects its purpose.
What are global variables? Global variables are variables that are defined outside of any function or loop in a program and can be accessed and modified by any part of the program. Once a global variable is defined, its value can be used in other functions or loops until the program ends. However, if you want to modify the value of a global variable inside a function or loop, you need to explicitly declare the variable as "global" within that function or loop. This tells the program that you intend to modify the global variable within the local scope of that function or loop. Otherwise, the program will create a new local variable with the same name, which will not affect the value of the global variable.
Variables are also called local variables, which can only be used in the function or loop where they are located and end with the function or loop. Place a variable in the global command, then it is defined as a global variable.
In the Task 2 program, the variable flag appears in three blocks: Python main program start, When the click callback function is triggered, and When a mouse move event is received, return coordinates XY. But why is it defined as global in When the click callback function button_click is triggered?
The reason is as follows. Assigning the variable "flag" to 0 after Python main program start command is simply to initialize it, so there's no need to define it as a global variable. But in the function When the click callback function button_click is triggered, we must change the variable by assigning it a new value of 1, so we do need to define it as a global variable in this callback function. And in the function When a mouse move event is received, return coordinates XY, we only used the value of the variable flag without modifying it, there's no need to define it as global.
3. Conditional Statement
Conditional statements are used to evaluate a given condition during program execution and determine which operation to perform based on the result (true or false). This can alter the program's execution flow and enable different functions. The condition to be evaluated is also known as an expression, which can be either a comparison or a logical operation.
A nested conditional statement is used when you need to use a conditional statement inside another one. In this case, the inner conditional statement will be executed only if the outer one is determined to be true.
4. Command Learning
Challenge
Setting up the game scene is a straightforward process that involves displaying different images at various positions on the UNIHIKER screen and resizing them as necessary. Now, let's apply the clock and keychain image from the image resource file to the game scene and increase the game's difficulty level. For instance, we can put a clock on the wall and conceal the correct key behind it, while placing a bunch of wrong keys on the cabinet next to the door to mislead players.
Escape Game.rar Table of Contents for this Tutorial Series：
03 Journey to the West Stage Play
12 Vital Capacity Data Visualization
