50
This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong. Title Algebra maze Author(s) Kwok, Sui Yan (郭瑞焮) Citation Kwok, S. Y. (2017). Algebra maze (Outstanding Academic Papers by Students (OAPS), City University of Hong Kong). Issue Date 2017 URL http://dspace.cityu.edu.hk/handle/2031/92 Rights This work is protected by copyright. Reproduction or distribution of the work in any format is prohibited without written permission of the copyright owner. Access is unrestricted.

Algebra maze

Embed Size (px)

Citation preview

This document is downloaded from Outstanding Academic Papers by Students

(OAPS), Run Run Shaw Library, City University of Hong Kong.

Title Algebra maze

Author(s) Kwok, Sui Yan (郭瑞焮)

Citation Kwok, S. Y. (2017). Algebra maze (Outstanding Academic Papers by Students (OAPS), City University of Hong Kong).

Issue Date 2017

URL http://dspace.cityu.edu.hk/handle/2031/92

Rights This work is protected by copyright. Reproduction or distribution of the work in any format is prohibited without written permission of the copyright owner. Access is unrestricted.

!16CS071!

!Algebra!Maze!

!

(Volume!1!of!1)!

!Student!Name! :! Kwok!Sui!Yan!

:! CS!4514!

! !

! !

! !

:!:!!!!!!

Dr.!Tan!Chee!Wei!

Dr.!Li!Shuai!Cheng!

Programme!Code!!

!

!

Supervisor!1st!Reader!2nd!Reader! :! Prof.!Li!Qing!

Department!of!Computer!Science!

BSCCS!Final!Year!Project!Report!! ! ! 2016S2017!

For!Official!Use!Only!

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

1

Abstract

Everyone has different pace in learning. In order to suit the needs of different learner,

personalized learning is believed to cater for different learning styles. “Gaming to learn” can

be a way to achieve personalized learning in an innovative and attractive way. The Algebra

Maze is one of the examples of “Gaming to learn”. It visualized Math in an attractive and

fascinating way in order to arouse student’s interest in Math, and to assist their learning in

algebra. The game is now in an early stage of development and is lacking in levels and

variety. The players may easily lose their interest in the game. What’s more, it may even out

of compete with others educational game in the market. Therefore, it is important to advance

the game. In this project, a new function and automation in maze generation were added.

Trap is the new feature added. It makes the game more challenging and fascinating, and

encourages students to think more. Moreover, there are 10 levels of auto-generated maze

added into the game now. The maze in these levels looks different every time when players

access them. It adds in variety and randomness into the game.

Acknowledgement

I have to give my heartfelt gratitude to my supervisor, Dr. Tan Chee Wei, for his endless

guidance and support. He has provided me with many idea, advice and information, such that

I could have some direction for the project. Also, he always cares about my project progress

and ask me if I need any help. What’s more, he suggested and encouraged me trying to apply

for different sponsorship or scholarship for the project.

Last but not least, I have to appreciate and give thanks to Peter, Yu Pei-Duo, who is also

taking part in the Algebra Gamification Project. He provided me with the idea and method of

working out the trap function.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

2

Table of Contents

Abstract ..................................................................................................................................... 1

Acknowledgement .................................................................................................................... 1

List of Figures ........................................................................................................................... 4

List of Tables ............................................................................................................................ 5

1 Introduction ...................................................................................................................... 6

1.1 Background .......................................................................................................................... 6

1.2 Motivation ............................................................................................................................ 6

1.3 Problem Definition .............................................................................................................. 7

1.4 Problem Significance ........................................................................................................... 7

1.5 Objective ............................................................................................................................... 8

1.6 Scope ..................................................................................................................................... 8

2 Literature Review ............................................................................................................ 9

2.1 Basic Background Information of the Algebra Maze ...................................................... 9

2.2 Major Alternatives ............................................................................................................ 10

2.3 Comparison ........................................................................................................................ 15

2.4 Current Status and Limitation ......................................................................................... 15

2.5 Graph Search Algorithm .................................................................................................. 16

2.5.1 Terminology and Graph Illustration ................................................................................ 16

2.5.2 Greedy Algorithm ........................................................................................................... 18

2.5.3 Dijkstra’s Algorithm ....................................................................................................... 19

2.5.4 A* Algorithm .................................................................................................................. 20

3 Methodology ................................................................................................................... 21

3.1 Consideration Criteria ...................................................................................................... 21

3.2 Comparison of Algorithm ................................................................................................. 22

3.2.1 Advantage and Drawback of Greedy Algorithm ............................................................. 22

3.2.2 Advantage and Drawback of Dijkstra’s Algorithm ......................................................... 23

3.2.3 Advantage and Drawback of A* Algorithm.................................................................... 24

3.2.4 Number of Nodes Expansion .......................................................................................... 25

3.3 Algorithm Selection ........................................................................................................... 26

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

3

4 Design .............................................................................................................................. 27

4.1 Graph Used ........................................................................................................................ 27

4.2 New Features: Trap ........................................................................................................... 28

4.3 Maze Auto-generation ....................................................................................................... 33

4.4 Movement Button Generation .......................................................................................... 33

5 Implementation .............................................................................................................. 34

5.1 Trap .................................................................................................................................... 34

5.2 Maze Auto-generation ....................................................................................................... 35

5.2.1 Automation in Maze Generation ..................................................................................... 35

5.2.2 Automation in Movement Buttons Generation ............................................................... 36

6 Result and Discussion .................................................................................................... 40

6.1 Trap Function .................................................................................................................... 40

6.2 Maze Auto-generation Function ....................................................................................... 41

6.3 Improvement for Future Development ............................................................................ 42

6.3.1 Obstacle Positioning ........................................................................................................ 43

6.3.2 Maze Appearance ............................................................................................................ 43

6.3.3 Minimum Number of Moves ........................................................................................... 44

7 Conclusion ...................................................................................................................... 44

8 Reference ........................................................................................................................ 45

9 Appendix ......................................................................................................................... 47

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

4

List of Figures

Figure 2-1 App icon of Algebra Maze ....................................................................................... 9

Figure 2-2 Screen capture of level 15 (Left Most), level 17 (Middle) and level 18 (Right most)

of the Algebra Maze on mobile device .............................................................................. 9

Figure 2-3 Screen capture of level 20 (Left) and level 35 (Right) of the Algebra Maze on

Android mobile device ..................................................................................................... 10

Figure 2-4 App icon of DragonBox Algebra 5+ (Left) and DragonBox Algebra 12+ (Right) 11

Figure 2-5 Image of DragonBox Algebra 5+ in Mac App Store [8] ....................................... 11

Figure 2-6 Screen capture of DragonBox Algebra 5+ walkthrough video on YouTube [9] ... 12

Figure 2-7 Image of DragonBox Algebra 5+ in Mac App Store [8] ...................................... 12

Figure 2-8 App icon of Wuzzit Trouble .................................................................................. 13

Figure 2-9 Screen Capture of Wuzzit Trouble (Botany Lab) Puzzle 7 (Left) and Puzzle 9

(Right) in BrainPOP ......................................................................................................... 13

Figure 2-10 Screen capture of Wuzzit Trouble (Invention Room Puzzle 6) in BrainPOP ...... 14

Figure 2-11 Graph example ..................................................................................................... 17

Figure 2-12 Starting point and goal of example 1 of different algorithm ................................ 18

Figure 2-13 Starting point and goal of example 2 of different algorithm ................................ 18

Figure 2-14 Greedy Algorithm example 1 ............................................................................... 19

Figure 2-15 Greedy Algorithm example 2 ............................................................................... 19

Figure 2-16 Dijkstra's Algorithm example 1 ........................................................................... 20

Figure 2-17 Dijkstra's Algorithm example 2 ........................................................................... 20

Figure 2-18 A* Algorithm example 1 ...................................................................................... 20

Figure 2-19 A* Algorithm example 2 ...................................................................................... 20

Figure 3-1 Comparison cases ................................................................................................... 22

Figure 3-2 Greedy Algorithm in case 1 ................................................................................... 22

Figure 3-3 Greedy Algorithm in case2 .................................................................................... 23

Figure 3-4 Dijkstra's Algorithm in case 2 ................................................................................ 23

Figure 3-5 Dijkstra's Algorithm in case 1 ................................................................................ 24

Figure 3-6 A* Algorithm in case 1 .......................................................................................... 24

Figure 3-7 A* Algorithm in case 2 .......................................................................................... 24

Figure 3-8 Comparison of all algorithm (Greedy, Dijkstra's and A* Algorithm) in case 1 .... 25

Figure 3-9 Comparison of all algorithm (Greedy, Dijkstra's and A* Algorithm) in case 2 ... 25

Figure 3-10 Comparison of all algorithm (Greedy, Dijkstra's and A* Algorithm) in case 3 . 25

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

5

Figure 4-1 Node-edge graph used in this project ..................................................................... 27

Figure 4-2 Obstacle in graph .................................................................................................... 27

Figure 4-3 Maze 1 (Left most), Maze 2 (Second left), Maze 3 (Second right) and Maze 4

(Right most) ..................................................................................................................... 28

Figure 4-4 Maze 1 – Maze with multiple paths ....................................................................... 28

Figure 4-5 Maze 2 – Maze with only 1 path ............................................................................ 29

Figure 4-6 Maze 3 – Maze with traps and left-right buttons ................................................... 29

Figure 4-7 Maze 3 – Maze with traps and up-down buttons ................................................... 29

Figure 4-8 Walkthrough of Maze 3 ......................................................................................... 30

Figure 4-9 Maze 4 – Maze with traps and one dead-end ......................................................... 31

Figure 4-10 Walkthrough of Maze 4 (Being trapped) ............................................................. 31

Figure 4-11 Walkthrough of Maze 4 ....................................................................................... 32

Figure 5-1 Image of the trap .................................................................................................... 34

Figure 5-2 Illustration of continuous row and column in the shortest path ............................. 36

Figure 5-3 Illustration of direction function with shortest path array graph ............................ 37

Figure 5-4 Three sides of the starting point and goal are blocked ........................................... 38

Figure 5-5 Unsolvable situation when up and down buttons are of the same number ............ 39

Figure 5-6 Unsolvable situation when the buttons value are not the same .............................. 39

Figure 6-1 Screen capture of the new level before the trap triggers ........................................ 40

Figure 6-2 Screen capture of the new level after the trap triggers ........................................... 40

Figure 6-3 Several auto-generated maze of level 51 ............................................................... 41

Figure 6-4 Several auto-generated maze of level 52 ............................................................... 41

Figure 6-5 Several auto-generated maze of level 53 ............................................................... 42

Figure 6-6 Several auto-generated maze of level 60 ............................................................... 42

Figure 6-7 Auto-generated maze which has uneven distribution of obstacles ........................ 43

Figure 6-8 Random generated obstacles .................................................................................. 43

List of Tables

Table 3-1 Comparison between 3 cases among the 3 algorithm (Greedy, Dijkstra's and A*

Algorithm)........................................................................................................................ 26

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

6

1 Introduction

1.1 Background

Everyone learns differently. Not everyone can learn best by just sitting inside the classroom,

listening to the teacher and memorizing all the stuff. Some may need practice, some may

need interactive feedback, or some may need self-exploration. In order to cater to different

learning style, personalized learning is believed to be a way out.

Personalized learning means tailor-made learning for each student. Gamification in learning

can be used in personalized learning. It allows individual learning pace and flexible learning

schedule. Some students may learn very quickly, while some may learn a bit slower than the

others. In the game, all of them can find their own comfortable pace.

As the Internet service is getting common, people can easily get access to the Internet, it

makes personalized learning possible too. Students can get access to the game online at home

or in class with teacher guidance. Gaming and teaching can combine to work together, which

is a kind of blended learning [1]. Not only does the Internet platform help personalized

learning, mobile platform can also be a very good platform for personalized learning too.

People can download it easily by just one click in the Google Play Store or the App Store.

And people can reach out to their smart phone easily, such that they can learn anywhere and

anytime, on train or at home. Therefore, developing an educational game on mobile platform

or web platform can be a very good and convenient way to achieve personalized learning.

1.2 Motivation

Mathematics is an inseparable part in our life. From buying an apple to building a shopping

mall, all involve Mathematics. Being good at Mathematics is definitely an advantage for the

young ones. Therefore, it is important to cultivate the next generation and raise their interest

in Mathematics.

Motivation and engagement is believed to a way to encourage one’s performance. Playing

games to learn is a way to increase students’ motivation and engagement in learning [2] and

may possibly enhance their performance in a subject.

Nowadays, schools offer some platform for students to play games for learning, such as E-

class. In US, many schools and teachers use gaming as a way to teach. BrainPOP is one of

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

7

the famous platforms for educational games, and it is growing more popular than before.

Stanford University has been working on the idea of “Gaming to learn” for nearly a decade.

Their public courses, Education’s Digital Future held by the Graduate School of Education

have also put their focus on “Gaming to learn”. [3] There is also study showed that deploying

educational game in class can dramatically increase students’ number sense. [4] We can

foresee that gaming to learn is a big trend, and may further develop into a greater aspect in

the near future.

As a beneficiary of Mathematics educational game, I strongly believe that gaming can

efficiently foster students learning and studying. Therefore, I would like to take part in the

Algebra Gamification project in order to help developing the Mathematics educational game,

which may assist the younger ones in learning Mathematics and help cultivating our next

generation. Lastly, to let them understand the fun of Mathematics, and enjoy it.

1.3 Problem Definition

The Algebra Maze developed is a very good realization of gamification for personalized

learning. Teachers can deploy it to teach students, or parents can guide their children in

playing the game. Also, students can learn Math at their own pace. However, the game is still

in an early stage of development, with not too many levels and is not challenging enough,

students may finish playing the game in a short period of time. Also, they may get bored after

playing several times, as all the mazes are hard-coded. So, the aim of this project is to add in

new feature and maze auto-generation function, in order to make it more attractive and

challenging.

1.4 Problem Significance

The Algebra Maze currently is lacking in levels. Students may complete the whole game

within a short period of time. Also, the current levels may not be enough for them to learn

algebra thoroughly. What’s more, all the stages are all hard-coded and invariable, which

means they will be the same every time when the players play it. Without variety, players

may lose their interest after playing the game for several times. Moreover, the game is not

challenging enough, players may get bored after playing the levels currently available, and

end up with giving up the game. Most importantly, the game may be outcompeted by the

other Math game in the market now if the game does not have new feature and levels.

Therefore, it is important to add more levels and new feature into the Algebra Maze.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

8

1.5 Objective

This project aims at assisting in the development of the Algebra Maze to teach young

students Mathematics and assist them in learning algebra. Students will be learning in an

interesting way, which may arouse their interest in Mathematics.

The Algebra Maze of the Algebra Gamification Project is under continuous and on-going

development. Its development does not end with this Final Year Project. During the whole

Algebra Gamification Project, some primary and secondary school students will be invited to

play the games and the result data will be collected. Also, the games will be published on

Google Play Store, to collect feedbacks from real users. In order to maximize the

effectiveness of learning through the game, some modification on the game leveling may be

carried out after the analysis of the collected data, such that the game may set at a more

suitable level for primary school students or junior secondary school students.

For the time being, there are two games developed by the team, and they are Algebra Maze

and Algebra Game. And in this Final Year Project, new feature and maze auto-generation

function will be added on top of the original game. By adding the advanced feature and

variation to the game, it will then be more challenging and fascinating, thereby achieving the

aims of assisting students’ algebra learning and arousing their interest in Mathematics.

1.6 Scope

The scope of this Final Year Project is assisting in the game design and development of the

Algebra Maze, which includes contributing design ideas and assisting software development

of the game. The new feature is added up on top of the original game. There is advanced

level with the new feature, in which player may step on the traps on map to toggle the

movement-control buttons. Also, maze auto-generation function is added, such that in some

stages, the maze looks different every time the player plays it.

The project aim is to add some variety into the game, in order to make the game more

interesting and challenging. The game program is developed under Unity Game Engine

environment.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

9

2 Literature Review

Before moving on, it is better to know some background information first. In this section,

some information of the Algebra Maze and the alternatives in the market and knowledge

about the algorithm research is mentioned in order to provide some basic understanding

before moving on to the remaining parts.

2.1 Basic Background Information of the Algebra Maze

Before looking at the major alternatives in the market, let’s take a quick look at the Algebra

Maze.

Figure 2-1 App icon of Algebra Maze

It is available on Android Google Play Store, and Facebook. It is rated 4.0 in Play Store.

There are 100 to 500 installations [5]. Algebra Maze is one of the games under the Algebra

Gamification Project. For more details of the project, please refer to the project homepage:

http://www.algebragamification.com.

The game is about learning to solve algebra equation through playing the maze. There are

fixed buttons for movement, like moving upwards or downwards, to control the character

movement in order to reach the goal of the maze (the chest box). By solving the equation, the

character can reach the chest box (the goal) and move to next stage.

Figure 2-2 Screen capture of level 15 (Left Most), level 17 (Middle) and level 18 (Right most) of the Algebra Maze on mobile

device

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

10

In the later stages, the difficulties level will then increase. For example, the chest box may be

hidden, such that players have to think harder to solve it. Or the players have to get the key

first before reaching the chest box. And some moving zombies are added in later stages in

order to make the game more fascinating to children.

Figure 2-3 Screen capture of level 20 (Left) and level 35 (Right) of the Algebra Maze on Android mobile device

2.2 Major Alternatives

There are some educational games about Math learning in the market. In order to make the

Algebra Maze more advance, some of these games are observed before starting the project.

Simple analysis and comparison have been done between them and the Algebra Maze, as to

understand their way to success and their strength over the others. Two popular and

successful games have been picked for comparison, and they are from DragonBox Algebra

and Wuzzit Trouble.

DragonBox [6]

DragonBox offers some commercial educational games for learning Mathematics, such as

DragonBox Numbers, DragonBox Algebra 5+ and DragonBox Algebra 12+ etc..

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

11

DragonBox Algebra 5+ and DragonBox Algebra 12+ [7]:

Figure 2-4 App icon of DragonBox Algebra 5+ (Left) and DragonBox Algebra 12+ (Right)

DragonBox Algebra 5+ and DragonBox Algebra 12+ have won some awards during 2012 to

2014. DragonBox Algebra 5+ is claimed to suit young children, which covers addition,

multiplication and division. Even if the player is as young as 5 years old, he/she can still

handle it. While DragonBox Algebra 12+ is an advanced version of the previous one, with

more difficult equations and more levels, and covers more algebra topics. Both games appear

in many different platform, like Apple App Store, Apple Mac App Store, Google Play Store,

Microsoft Windows Store etc..

Both of the game used drag-and-drop as the playing method. Players have to drag the correct

elements to the correct sides.

As seen in Figure 2-5 and Figure 2-6, the game interface divided into 2-half, which

represented the left and right hand sides of an equation. And players need to drag the

elements at the bottom to the correct sides in order to solve the problem. Through solving the

problem, player can learn some basic concept of algebra.

Figure 2-5 Image of DragonBox Algebra 5+ in Mac App Store [8]

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

12

Figure 2-6 Screen capture of DragonBox Algebra 5+ walkthrough video on YouTube [9]

After playing for some times, the game will look more alike to an equation, with numerator,

denominator and multiplication operator.

And in some later stages, the elements will turn into numbers or unknown, like “a” or “b”, as

shown in Figure 2-7 below.

Figure 2-7 Image of DragonBox Algebra 5+ in Mac App Store [8]

The game first teaches the children with some simple idea of algebra, and then visualizes

them into images and cartoons, such that it appears more attractive and appealing to young

children. And the difficulties move up bit by bit, such that the player can follow the pace and

learn gradually. In the later stages, the elements will be replaced by numbers and unknown.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

13

However, the technique and the idea to solve the problem is the same as that learn in the

earlier stages. Such that player can use the skills and techniques learned in the previous

stages to solve the numerical algebra.

It symbolizes numbers and unknowns into graphics and images, such that it makes algebra

looks friendlier to children and easily accepted by them. Also, it delivers a message to

children that, numbers and unknowns are just symbolic meaning, it can be replaced by other

things like the images or cartoons.

Wuzzit Trouble [10]

Figure 2-8 App icon of Wuzzit Trouble

Wuzzit Trouble is a Mathematics educational game developed by BrainQuake. The game is

available in Apple App Store, Google Play Store, Amazon and BrainPOP. It focuses on

training children addition, subtraction and multiplication. A study done by Stanford

University showed that 120 hours of game playing of Wuzzit Trouble can leads to dramatic

Math learning result [4].

Figure 2-9 Screen Capture of Wuzzit Trouble (Botany Lab) Puzzle 7 (Left) and Puzzle 9 (Right) in BrainPOP

The idea of the game is to free the Wuzzits from a locked cage by solving the problem. Just

turn the small gear to spin the large gear and get the keys, then the Wuzzit can be freed.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

14

The number on the small gear represents how much it turns the large gear each time. For

example, 10 on the small gear means the large gear will move to the mark 10 or 55,

depending on whether the player spins it in clockwise or anti-clockwise motion. In each stage,

the game will show the desirable numbers of moves, the less is the best. If player can solve

the problem with the fewest moves, it can get a 3-star achievement in that stage. And in the

later stages, the problem will be much challenging, with more gear to turn in order to solve

the problems.

Figure 2-10 Screen capture of Wuzzit Trouble (Invention Room Puzzle 6) in BrainPOP

Players have to use addition, subtraction and multiplication in order to solve the problems. It

can also train the number sense of the children.

The idea of calculation is visualized by the large gear, where some marks are there. And the

difficulty level goes up stage after stage. Players have to think deeper to solve the problem. It

motivates children to think and to learn.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

15

2.3 Comparison

The Algebra Maze and DragonBox Algebra games mostly focus in algebra learning, while

the Wuzzit Trouble is more like a Math training which strengthens children calculation and

Math sense.

While so many of the educational games in the market are quiz-based, these two games

mentioned above teach and train children in Mathematics with visualized concept and

graphical representations, which is the same as the Algebra Maze in this project. All of these

games are trying to make Math different from what it looks like in traditional textbooks by

using cartoons and graphics. They all are more appealing and attractive to children when

compares to the words and numbers they used to work on in textbooks, exercises and

worksheets.

Though all of these games visualize Math, the way of visualization is not quite the same. For

DragonBox Algebra 5+ and DragonBox Algebra 12+, the layout of the game is very close to

an equation, such as the left and right hand sides. However, both Algebra Maze and Wuzzit

Trouble visualize Math in a spatial fashion. For the Algebra Maze, it visualizes algebra into a

2-dimensional landscape, with X and Y-axis, which resembles a coordinate system of algebra.

And for the Wuzzit Trouble, it visualizes calculation into a 2-dimensional cyclic space, which

is the gear. Both of the Algebra Maze and Wuzzit Trouble conceptualize Math in a 2-

dimensional level.

2.4 Current Status and Limitation

For the DragonBox Algebra games, it won quite many awards during 2012 to 2014 [11]. And

they are quite popular in Google Play Store, with approximately 10 thousand installations for

both DragonBox Algebra 5+ and DragonBox Algebra 12+. And both games are rated 4.7

stars in the Play Store [7] [12]. Though they are marked at a quite high price, it is still popular.

However, for Wuzzit Trouble, it has nearly 100 installations in Google Play Store, and rated

3.8 stars [13], which is less than that of DragonBox game.

The reason maybe because of the playing method in Wuzzit Trouble is more or less the same

over the whole game. The layout, the way to solve the problem and the strategy in each stage

is very similar. Player can find the formula to win, which means once the player figured out

how to solve one question, they can use this technique throughout the whole game. However,

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

16

there is more variation in playing method in the DragonBox Algebra games, players have to

think again the way to solve the equation in each level. What’s more, the Math concepts

included in Wuzzit Trouble are less than that in DragonBox Algebra 12+ and the Algebra

Maze.

For the Algebra Maze, it has around 100 installations and rated 4.0 stars in the Play Store [5].

As it is still in an early stage of development, so the numbers of level are still lacking and the

variation of game play is still not so many. Therefore, in this project, I am going to add up

some stages with new features into the game, in order to make it more challenging and make

the players think more during the game play.

2.5 Graph Search Algorithm

As all the stages in the maze is hard-coded, players may find it not interesting after playing

for several times. Therefore, maze auto-generation can solve this problem and make the game

looks different each time in some stages. In maze auto-generation, the maze would be

randomly generated, such that it looks unfamiliar to the players. However, a randomly

generated maze may not guarantee a solution, which means there may not be any possible

path to the goal. In order to solve this problem, the game program should be able to search

through the maze and see if there is any possible solution to the goal. Therefore, a graph

search algorithm is needed to ensure that there is at least one path to the goal. In this section,

different kinds of popular graph search algorithm will be introduced.

2.5.1 Terminology and Graph Illustration

Before introducing different algorithm, let’s take a look at some terminology that will be used

afterwards.

Graph [14]:

Graph in here means a set of nodes and edges in which the edges connect nodes together.

Weighted graph [14]:

On a weighted graph, there is a weight on each edge. The weight of an edge is the cost of

crossing that edge.

Heuristic [14]:

Heuristic is an estimated value of how far away the node is from the goal ignoring the

obstacles in between.

Open list (or frontier) [15]:

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

17

A set of nodes that may be expanded soon. In each iteration time, the algorithm will pick up

one of the node in the open list and expand it. The expanded nodes will be put into the closed

list, while the nodes being expanded from the expanded node will be put into the open list.

Closed list:

A set of nodes that have been explored, and will not be expand anymore.

In the upcoming sections, graphs of 8x8 dimensions are used for illustration. The graphs are

generated using the java program, Maze (version: 4.1.1), created by Nikos Kanargias (from

Hellenic Open University) in 2013 [16]. The starting point is marked in red, and the goal is

marked in green. The path found by the corresponding algorithm is marked in yellow. While

the deep blue colored grids are the frontier (nodes in the open list that are not expanded), and

the light blue colored grids are the nodes in the closed list (nodes that have been expanded).

The obstacles are represented by the black girds. An example is shown in Figure 2-11.

Figure 2-11 Graph example

All the graph examples of different algorithms will take the same starting point and goal. For

the first example in all algorithms will take [6, 1] (in the format of [row, column] counting

from 0 to 7) as starting point (marked in red). And [1, 6] is set as the goal (marked in green).

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

18

Figure 2-12 Starting point and goal of example 1 of different algorithm

In the second example, [4, 3] is set as the starting point (marked in red), while [0, 7] is set as

the goal (marked in green).

Figure 2-13 Starting point and goal of example 2 of different algorithm

2.5.2 Greedy Algorithm

Greedy Algorithm (or Greedy Best-Search Algorithm) is an easily implemented algorithm

which calculates a heuristic value during the search and pick up the node with the smallest

heuristic in each iteration [17]. That means the Greedy Algorithm picks up the node that is

closest to the goal each time until it reaches the goal [17]. This algorithm is simple and fast to

implement. It is suitable to use when there is little or no obstacles in the graph.

In the following 8x8 graph (Figure 2-14), Greedy Algorithm only expands 10 nodes to reach

the goal, and it takes a direction towards the goal. In another example in Figure 2-15, only 8

nodes are expanded.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

19

Figure 2-14 Greedy Algorithm example 1 Figure 2-15 Greedy Algorithm example 2

2.5.3 Dijkstra’s Algorithm

Dijkstra’s Algorithm, also known as Uniform-Cost Search [18]. This algorithm does not only

solve the shortest path on a weighted graph, but also take the cost of traversal into

consideration to give a shortest path with the minimum cost [17]. Once, there is no negative

weight on the graph, a shortest path can be guaranteed by the Dijkstra’s Algorithm [17]. The

algorithm first searches from the starting point, and labels the searched node with the cost

from the starting point [19]. All the searched nodes with labelled cost will be put into the

open list. It picks up the node with the label of smallest cost in each iteration, and put it into

the closed list. Once a node is put into a closed list, it will not be checked again. If the

algorithm finds another edge which can give a lower cost to a labelled node, it will then

update the label on that node to the lower cost from another edge. This step is known as

relaxation [19]. It is suitable to use the Dijkstra’s Algorithm when the weight of edges is not

the same in the graph.

Two example of how Dijkstra’s Algorithm works is showed on Figure 2-16 and Figure 2-17.

59 and 63 nodes are expanded respectively in the following 2 graphs which is almost all the

nodes in the graph. And the algorithm expanded in all direction from the starting point.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

20

Figure 2-16 Dijkstra's Algorithm example 1 Figure 2-17 Dijkstra's Algorithm example 2

2.5.4 A* Algorithm

A* Algorithm works like a combination of both Dijkstra’s Algorithm and Greedy Algorithm

[17]. It guarantees a shortest path solution, and works fast. It considers not only the heuristic,

h(n), but also considers the cost from the starting point, g(n). The Algorithm uses a cost

function f(n) = g(n) + h(n) to calculate the cost, where n is the node that is on focus, g(n) is

the cost from starting point to node n and h(n) is the estimated heuristic of how far away the

node n is from the goal [17]. In each iteration, the algorithm picks the node with the smallest

f(n) values and expand it. If h(n) is 0, only g(n) takes part, the algorithm works like Dijkstra’s

Algorithm. If h(n) is very high, such that g(n) is negligible when compare to h(n), the A*

Algorithm works like Greedy Algorithm [20]. The A* Algorithm finds the shortest path by

backtracking from the goal to the starting point.

The algorithm expanded 35 nodes in Figure 2-18 and expanded 24 nodes in Figure 2-19. The

algorithm expanded in direction favoring the goal, at the same time searches the surrounding

nodes widely.

Figure 2-18 A* Algorithm example 1 Figure 2-19 A* Algorithm example 2

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

21

3 Methodology

The solution of the algorithm would be used as a reference for setting the value in the

movement buttons. Therefore, a suitable algorithm should be chosen to suit the situation of

the project. By comparing the different algorithms mentioned above, A* algorithm was

chosen to use. The reason for choosing A* algorithm is that it does not only consider the

heuristic, but also guarantee a shortest path. No one single algorithm is perfect at all times

and suitable for all situations, as a result, in the following section, the drawbacks of all the

algorithms will be discussed.

3.1 Consideration Criteria

Before analyzing the advantages and drawbacks of different algorithms, let’s clarify the

criteria for choosing the algorithm. The consideration criteria for choosing the algorithm

include:

1) Solution Quality

An algorithm that can guarantee an optimal solution among all the other possible solutions

would be first considered, which means an algorithm that can give a shortest path would be

prioritize higher than the algorithm that cannot.

Why shortest path matters?

There are, of course, more than one path can reach the goal, but the shortest path guarantees

the quickest way. And the shortest path can be used to analyze the minimum numbers of

moves, and which is very useful for later analysis of game data or future development. As the

game development will be continued later on, the future development is also under

consideration in this project. The shortest path might be reusable in the future development.

What’s more, seeing the Wuzzit Trouble mentioned in the previous section, it also counts the

number of moves and suggests a minimum number to encourage students to think of a way to

solve the problem in the quickest way.

2) Number of nodes expanded

The fewer nodes the algorithm expands, the less space and time it spends on searching. The

algorithm that expands fewer nodes would be considered as a more suitable algorithm.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

22

3.2 Comparison of Algorithm

In order to do fair comparison on each algorithm, the graph used for comparison among

different algorithms will be the same (having the same starting point, goal and obstacles).

The following 3 cases will be used for comparison (Figure 3-1):

Case 1: A line-of-sight from starting point to goal

Case 2: The starting point and goal are blocked by obstacles

Case 3: All the 3 algorithms can find the shortest path but expanded different numbers of

nodes

Figure 3-1 Comparison cases

3.2.1 Advantage and Drawback of Greedy Algorithm

Considering the following map (Figure 3-2), the path from the starting point (marked in red)

to the goal (marked in green) is obviously a line-of-sight path (marked in yellow), as there is

no obstacle (marked in black) in between them. So, the algorithm can easily figure out the

shortest path in a very short time.

Figure 3-2 Greedy Algorithm in case 1

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

23

The advantage of Greedy Algorithm is that it works fast [17]. It works best when there is no

obstacle in between the starting point and the goal. However, the algorithm does not

guarantee a shortest path. In the following figure (Figure 3-3), the path found (marked in

yellow) is not the shortest. As the algorithm considers only the heuristic value and ignores the

obstacles [14], it goes towards the goal and realizes that the path is blocked, then, it chooses

another node which has the smallest heuristic, at the same time, is possible to walk [17].

Figure 3-3 Greedy Algorithm in case2

Firstly, it does not give an optimal solution. Also, it is obvious that a real human player

would not take the path in a way like the Greedy Algorithm does in this case, as the player

can see the obstacle blocks the way up. Therefore, using the path found by the Greedy

Algorithm as a reference to set the movement buttons would not be practical enough.

3.2.2 Advantage and Drawback of Dijkstra’s Algorithm

The Advantage of Dijkstra’s Algorithm is that it takes the cost of traversal into consideration.

Also, it gives an optimal solution (shortest path). In case 2, the algorithm avoided going

upwards to the blocked wall and directly go to the right hand side.

Figure 3-4 Dijkstra's Algorithm in case 2

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

24

Dijkstra’s Algorithm works best in situation when the weight of edges should be taking into

consideration. It can generate a shortest and lowest cost path [18]. However, the Dijkstra’s

Algorithm expanded a lot of nodes each time. In case 1 (shown in Figure 3-5), where the path

is a line-of-sight, the algorithm expanded widely. It expanded nearly half of the map which

cost more time than the Greedy Algorithm does.

Figure 3-5 Dijkstra's Algorithm in case 1

3.2.3 Advantage and Drawback of A* Algorithm

As the A* Algorithm combines both Greedy Algorithm and Dijkstra’s Algorithm [17], it

works like a balance between two of them. The algorithm does not only consider the heuristic

but also delivers an optimal solution. In both case 1 (Figure 3-6) and case 2 (Figure 3-7), the

A* Algorithm provided a shortest path.

Figure 3-6 A* Algorithm in case 1 Figure 3-7 A* Algorithm in case 2

However, the main drawback of A* Algorithm is that it is not space friendly. As the

algorithm has the entire open list and closed list [21].

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

25

3.2.4 Number of Nodes Expansion

In case 1, a line-of-sight from starting point to goal is clearly shown (Figure 3-8).

Figure 3-8 Comparison of all algorithm (Greedy, Dijkstra's and A* Algorithm) in case 1

In case 2, the starting point and goal are blocked by obstacles (Figure 3-9).

Figure 3-9 Comparison of all algorithm (Greedy, Dijkstra's and A* Algorithm) in case 2

In case 3, all the algorithm found the shortest path, but expanded different numbers of nodes

(Figure 3-10).

Figure 3-10 Comparison of all algorithm (Greedy, Dijkstra's and A* Algorithm) in case 3

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

26

Case 1 Case 2 Case 3

Nodes

Expanded

Steps to

the goal

Nodes

Expanded

Steps to

the goal

Nodes

Expanded

Steps to

the goal

Greedy Algorithm 5 5 16 16 9 9

Dijkstra’s Algorithm 21 5 27 12 24 9

A* Algorithm 5 5 24 12 12 9

Table 3-1 Comparison between 3 cases among the 3 algorithm (Greedy, Dijkstra's and A* Algorithm)

In case 1, all of the algorithm can figure out the shortest path which takes 5 steps. For Greedy

Algorithm and A* Algorithm, only 5 nodes are expanded in order to reach the goal. But for

Dijkstra’s Algorithm, 21 nodes are expanded, which is nearly four times of the other two

algorithms.

In case 2, Greedy Algorithm expanded the least nodes, but it travelled a longer distance to

reach the goal. It takes 16 steps while the other two takes only 12 steps. For Dijkstra’s

Algorithm and A* Algorithm, both of them expanded more than 20 nodes, for which A*

Algorithm expanded a little bit less than that of Dijkstra’s Algorithm.

In case 3, all of the algorithms figured out the shortest path. All of the algorithms gave a

solution with only 9 steps, but the number of nodes expanded is different. Greedy Algorithm,

again, expanded the least number of nodes. While A* Algorithm expanded half the number

of nodes expanded by Dijkstra’s Algorithm.

3.3 Algorithm Selection

Though the Greedy Algorithm works fast and expands the fewest nodes. However, it does not

guarantee a shortest path. The path generated may not resemble the path that a real human

player may take. Therefore, it is not a suitable algorithm to be used in this situation, as the

path generated will be used as a reference for setting the value on the movement buttons.

Both the Dijkstra’s Algorithm and A* Algorithm can generate a shortest path solution. But

for Dijkstra’s Algorithm, it expands more nodes than A* Algorithm does. Also, in the project,

the weight of all edges is the same, so, the weight evaluation feature of Dijkstra’s Algorithm

is not under consideration.

Though the A* Algorithm is memory demanding, the map in the project is only 8x8 large (64

grids), which is not a very large number. The memory usage would not be very huge.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

27

Therefore, A* Algorithm is a more suitable algorithm in this situation when comparing to

Greedy Algorithm and Dijkstra’s Algorithm. A* Algorithm generates a shortest path and

expands a moderate number of nodes, which suits the 2 criteria mentioned above.

4 Design

This section is going to explain the brief idea of the function design. Before going to the

design idea, the graph used in the project is illustrated. After that, the maze trap feature

design will be explained with detailed image illustration. The design idea of maze auto-

generation is put at the end of this section.

4.1 Graph Used

In this project, graph is represented in grids, in which each grid resembles a node and the link

between each node is an edge bridging them [14]. See the below Figure 4-1, the blue points

represent nodes and the green lines represents edges.

Figure 4-1 Node-edge graph used in this project

For any obstacle in the map, there will be no edges linking it [14]. Shown in Figure 4-2

below:

Figure 4-2 Obstacle in graph

Also, in this project, the weight of all edges is 1, and all edges are undirected.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

28

4.2 New Features: Trap

In order to make the game more challenging, such that players can learn thoroughly, new

feature will be added.

In this project, new features will be added-in on top of the original Algebra Maze, such that

there will be more levels and with higher difficulty.

Some traps will be added onto the map, such that when player step on it, the buttons for

movement control will toggle, either from left-right to up-down, or from up-down to left-

right.

There are 4 types of mazes will be mention in the following parts:

Figure 4-3 Maze 1 (Left most), Maze 2 (Second left), Maze 3 (Second right) and Maze 4 (Right most)

Maze 1:

The original maze in the game is like the one shown in Figure 4-4, with the starting point

marked as blue, and the goal marked as yellow. And the orange squares represent the walls

and obstacles. There are two paths (red path and green path) that the player can take in order

to reach the goal.

Figure 4-4 Maze 1 – Maze with multiple paths

Maze 2:

After that, a more difficult one is to limit the numbers of path the player can take.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

29

By adding some obstacle, indicated by the light blue square in Figure 4-5, the player can only

use one path (red path) to reach the goal. The difficulty level of Maze 2 is higher than that of

Maze 1.

Figure 4-5 Maze 2 – Maze with only 1 path

Maze 3:

By adding some traps in the map, the difficulty level will then further increase. Players need

to think thoroughly how to overcome them and reach the goal.

The circles in Figure 4-6 represent the traps. In the very beginning, there are only 2

movement control buttons, left and right buttons. When the player step on the traps, the

movement control buttons will then toggle to up and down buttons, shown in Figure 4-7.

Figure 4-6 Maze 3 – Maze with traps and left-right buttons Figure 4-7 Maze 3 – Maze with traps and up-down buttons

If the player continues to move in the maze, and steps on another trap again, the up-down

buttons will then toggle back to left-right buttons, like the one in Figure 4-6.

The player can take one path (red path) only in this map too, which is shown in Figure 4-8.

The difficulty level of Maze 3 (maze with traps and only 1 path) is considered to be as

difficult as Maze 2 (maze with only 1 path, Figure 4-5).

In order to show the whole game play clearly, the full step of reaching the goal in Maze 3 is

shown in the following and in Figure 4-8:

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

30

Step 1: Player takes 2 steps to the left and 1 step to the right. Player steps on the trap. The

left-right buttons toggle to up-down buttons.

Step 2: Player takes 2 steps to downwards and 1 step upwards. Player steps on the trap. The

up-down buttons toggle to left-right buttons.

Step 3: Player takes 2 steps to the right, 1 step to the left and 2 steps to the right. Player steps

on the trap. The left-right buttons toggle to up-down buttons.

Step 4: Player takes 2 steps downwards, 2 steps downwards, 1 step upwards and 2 steps

downwards. Player steps on the trap. The up-down buttons toggle to left-right buttons.

Step 5: Player takes 1 step to the left and 1 step to the left. Player reaches the goal.

Figure 4-8 Walkthrough of Maze 3

Maze 4:

After that, the difficulty level can then be further increase by adding a dead-end in the map.

Which means, when player steps on the dead-end, he/she will be trapped in that position,

cannot move anymore. The player either loses the game or has to retry it. The dead-end is

highlighted in light blue in the Figure 4-9 below.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

31

Figure 4-9 Maze 4 – Maze with traps and one dead-end

The following steps (Figure 4-10) show how the player may be trapped in the dead-end.

Step 1: Player takes 2 steps to the right and 1 step to the left. Player steps on the trap. The

left-right buttons toggle to up-down buttons.

Step 2: Player takes 2 steps downwards and 1 step upwards. Player steps on the trap. The up-

down buttons toggle to left-right buttons.

Step 3: Player takes 2 steps to the right. Player steps on the trap. The left-right buttons toggle

to up-down buttons. Then player is trapped in the dead-end.

Figure 4-10 Walkthrough of Maze 4 (Being trapped)

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

32

Though Maze 4 looks similar to Maze 3, but it is harder than Maze 3.

To reach the goal, the player has to walk like this (Figure 4-11):

Step 1: Player takes 2 steps to the right and 1 step to the left. Player steps on the trap. The

left-right buttons toggle to up-down buttons.

Step 2: Player takes 2 steps downwards and 1 step upwards. Player steps on the trap. The up-

down buttons toggle to left-right buttons.

Step 3: Player takes 1 step to the left (indicated in blue line), 2 steps to the right and 2 steps to

the right. Player steps on the trap. The left-right buttons toggle to up-down buttons.

Step 4: Player takes 2 steps downwards, 2 steps downwards, 1 step upwards and 2 steps

downwards. Player steps on the trap. The up-down buttons toggle to left-right buttons.

Step 5: Player takes 1 step to the left and 1 step to the left. Player reaches the goal.

Figure 4-11 Walkthrough of Maze 4

The difficulty level of the 4 maze: Maze 4 > Maze 3 = Maze 2 > Maze 1.

By leveling up the maze gradually from Maze 1 to Maze 4, the Algebra Maze will become

more challenging and requires the player to think more. Also, the playing method will be

more diverse.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

33

4.3 Maze Auto-generation

In order to make the game more attractive, some more stages are needed. Also, if all the

levels are fixed, players may memorize the answer to the game, and they may not have to

think of the answer. Besides, players may find it bored and may lose their interest in the game.

Therefore, automation in maze generation is needed.

To make a maze, firstly, we need some obstacles or walls to block some way. The obstacles

were designed to randomly put into the maze, as the maze needed to look unfamiliar and

different each time when the player accesses the same level.

However, too much random obstacles may make the maze unsolvable. Therefore, the number

of obstacles should be set at an optimal value, not too many or too few.

After setting the obstacles, the starting point and the goal should be set too. The position of

the starting point and the goal could also be randomly picked, but they should keep a distance

from each other, otherwise the maze would be too easy to solve.

Having the starting point, goal and a set of obstacles, the maze is set up. However, as all the

positions are randomly generated, the maze may be unsolvable. An algorithm is needed to

check if there is at least one solution for it. As mentioned in the section before, A* Algorithm

was chosen to use in this project. If the algorithm can provide the shortest path, then the maze

is solvable.

4.4 Movement Button Generation

After having a solvable maze, the buttons should be set. The values of the buttons should be

set at an optimum value such that the player can reach the goal, and at the same time do not

need to press the buttons so many times.

The shortest path would be used to analyze the optimum value of the buttons. The length of

all rows and columns in the shortest path would be stored in an array. The minimum length

value of all rows and columns would be used to set the buttons value, in such a way that the

player can be ensured to be able to reach the goal.

If all the values on the buttons are set to the minimum value, the buttons may always be 1

step, then the player may have to press the buttons many times to reach the goal. To avoid

this situation, the direction of each row and column in the shortest path would be considered

also. So, for each direction, the buttons value would set to its corresponding minimum value

found in the shortest path. Then even if the minimum value of the rightwards row is 1, the

left buttons can still be set to other values depending on the leftwards minimum row value.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

34

5 Implementation

After knowing the brief design idea of the functions, let’s take a look at the detailed

implementation of the functions. There are 2 parts in this section, one is the trap function

implementation, the other one is the implementation of the maze auto-generation.

5.1 Trap

After creating a trap image, then the image is added into the asset of the project file and a

prefab is created for it.

Figure 5-1 Image of the trap

A new key-and-value pair is added into the hash table of every level in the map array, which

is to identify what kind of buttons should be displayed in that level. If the Boolean value in of

“showAll” is true, then all the buttons will be displayed in the very beginning. And if

“showAll” is false and either “showLeftRight” or “showUpDown” is true, the corresponding

buttons will be activated and shown in the beginning, while the rest of the movement buttons

will be deactivated. Also, when there are only two buttons, they have to be centered. So, the

position of each buttons is stored in the system when it first ran, such that they can be used

later on throughout the whole game.

As the trap is supposed to be activated only when the player character steps and stays on it,

the original OnTriggerEnter2D() function cannot be used, otherwise, whenever the player

character got past the trap, the movement buttons will then be changed. OnTriggerStay2D()

should be used instead, as the movement buttons have to be changed only when the character

stays on top of the trap. Moreover, in order to prevent the trap is being activated when the

player character just pass by it, the position of the player character and the trap should be

checked. Once they are overlapping at the exact same position, the trap will be activated.

When the character steps on the trap, the system will check which buttons are now being an

active-self, then deactivate them, at the time, activate the other two movement buttons and

center them in the mid-way.

However, the OnTriggerStay2D() function will run endlessly once the condition fulfilled, so

there will be a non-stop trigger of the trap. In order to prevent the movement buttons

changing restlessly, a counter is set to limit the number of trigger. After the character leave

the trap, the OnTriggerExit2D() function will then reset the counter to zero.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

35

5.2 Maze Auto-generation

The maze auto-generation was mainly divided into 2 parts: automation in maze generation

and automation in movement buttons generation.

5.2.1 Automation in Maze Generation

The maze is mainly randomly generated, in order to look unfamiliar to the players. Obstacles

were initially randomly picked from the list of obstacle for each level. The number of

obstacles set in the maze is (maze size – 2) / 3, which is (64 – 2)/3. Because the map is of 8x8,

so, its size is 64, and the starting point and the goal should be excluded, therefore minus 2 in

the formula. After rounding off, the number of obstacles is 20. The random picked position

for each obstacle would then be stored in a 2D array list, and at the same time, the position

was marked in the local map array. The starting point and the ending point position were also

randomly picked. All the random generated position were checked by the program function

isEmpty() to see if the position had been occupied or not, in order to ensure no overlapping of

obstacles or starting point and ending point. What’s more, to prevent the starting and ending

point placing too close to each other, their distance was checked before the ending point

marked onto the map array. If their distance was smaller than 5, then the maze would be

regenerated using the same steps above.

After randomly generating the position of obstacles, starting and ending point, the A*

Algorithm was used to check if there is any possible solution exist in the random generated

map. The A* Algorithm used in the project is developed by Jatin Thakur in Java [22]. The

Java code was converted into C# code such that it can be run in Unity Environment. A little

modification had been done on the A* Algorithm source code to make it returns a 2D array of

the shortest path found, instead of just printing it out on console. After supplying the graph

information to the A* Algorithm, like the position of the starting and ending point and the

obstacle array, the algorithm would then be able to solve the graph, and returns the shortest

path if there is any. If no shortest path exists in the random map, the map would be

regenerated by repeating the procedures above. The returned array of shortest path was stored

in an array. As the returned shortest path is a path starting from the goal (backtracking was

used to find the path), it is not in ascending order. So, the original shortest path returned

would be sorted ascendingly according to the row and column (row first, then column). Both

the sorted and unsorted shortest path would be used later in the program.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

36

5.2.2 Automation in Movement Buttons Generation

After that, the movement buttons values were to be generated according to the shortest path.

In order to analyze what is the optimum value for the movement buttons, the shortest path

should be examined according to row and column respectively. For left and right buttons,

only rows in the shortest path should be considered; for up and down buttons, columns

should be considered. In the program, the position of each node was represented in row and

column pair. In the format of row first, then column, counting from 0 to 7, as there are 8 row

and column in total (E.g. [row number, column number]). First of all, the program loops

through the sorted shortest path array, and see if there are any continuous row in the shortest

path array. The following figure (Figure 5-2) illustrates what is continuous row or continuous

column in the shortest path. The purple rectangles mark all the continuous rows in the

shortest path, and the orange circles mark all the continuous columns in the shortest path.

Mind that one row in the maze can contain more than one continuous row, like the first row

of the following maze, it contains 2 separate continuous rows.

Figure 5-2 Illustration of continuous row and column in the shortest path

A function, checkBlockWithinInterval(), was used to check if there is any obstacle in

between a path, to see if the path is continuous or not. If any continuous row in the sorted

shortest path was found, it would be stored in an ArrayList. The ArrayList, minList, was used

to store the column value of the starting node and ending node, plus, the length of that

continuous row. After that, the minList was stored into the rowArray ArrayList, together with

the row value of the starting node and the direction of that continuous row. The direction was

firstly initialized to be -1 in here, and would be calculated in the later part.

For finding the continuous column, the implementation would be the same as the

implementation above, only the checking conditions and the value used to calculate length

were different. For continuous row finding, the row value was checked to see if the two

nodes are on the same row, and vice versa for column. If the two nodes are sharing the same

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

37

column value, they are on the same column. Also, to find a continuous row, the column value

was used to calculate the length of the row. But for column, the row value was used to

calculate the length instead. For example, a continuous row is starting from node [0, 0] to

node [0, 3], the length of the row is (3-0) which is 3. In here, the column value “0” and “3”

was used to calculate the length.

As the direction depends on the sequence of walking from nodes to nodes, the unsorted

shortest path was used to find the direction. The shortest path returned from the A*

Algorithm is a path traveling from the goal to the starting point, as it used backtracking to

solve the path. Therefore, the direction is considered from the perspective of the goal, which

is reverse of the player walking direction. The program looped through the unsorted path to

look for the nodes that constructed the continuous rows found before. By comparing the row

and column value stored in the rowArray and that of the unsorted shortest path array, the

position of all the continuous row in the unsorted path array can be found. After finding the

continuous row in the unsorted path array, the program would examine the index of the

starting nodes and the ending nodes of it. If the index of the starting nodes is smaller than that

of the ending nodes, the direction is rightwards, otherwise, the direction is leftwards. For

example (Figure 5-3), a path array [0, 5] [0, 6] [0, 7] [1, 7] [2, 7] was returned by the A*

Algorithm (marked in yellow). Since the returned shortest path is backtracked from the goal,

therefore, the goal is on [0, 5] (marked in green) and the starting point is on [2, 7] (marked in

red). A continuous row [0, 5] [0, 6] [0, 7] was there in the path (marked by the purple

rectangle). The starting node of the continuous path is [0, 5] and the ending nodes is [0, 7]

(both are marked with the orange spot). The index of the starting node in the shortest path

array is 0, while the index of the ending node in the shortest path array is 2. The index of the

starting node is now smaller than that of the ending node. Therefore the direction here is

rightwards, when traveling from the goal.

Figure 5-3 Illustration of direction function with shortest path array graph

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

38

The implementation for upward and downward direction is the same, only the index used for

examination is different.

After finding the continuous row, column and all of their direction, the minimum length was

picked to set the buttons for the corresponding direction of movement.

Special situation:

In some special situation, the buttons value needed to be set carefully.

Situation 1:

When the shortest path is just a straight row or straight column, only 2 buttons would be used

to reach the goal, either up and down (for straight column) or left and right (for straight row),

so, the other 2 buttons would be set to value of 1.

In some situation, the starting point or the goal was blocked on 3 sides by obstacles or

boundaries, which means there is only one way out. For example, Figure 5-4.

Figure 5-4 Three sides of the starting point and goal are blocked

A function, checkSurrounding(), was used to check if the starting point and the goal were

blocked on the 3 sides. The function returns an integer to indicate which side is not blocked

by obstacles or boundaries. “1”, “2”, “3” and “4” are corresponding to top, right, down and

left, these numbers indicate which side on the node is not blocked. After knowing which side

is not blocked, the program would search for the rowArray or the colArray to find the

minimum length in it, at the same time, and assign the value to the button in the direction

same as the unblocked side. This step ensured the player can get out of the starting point or

reach the goal even if there is one-way out or one-way in.

Situation 2:

Sometimes, the up and down buttons or the left and right buttons share the same value and is

bigger than 1, the player may not be able to reach the goal. For example, both up and down

buttons are set to be 2 steps (Figure 5-5). As the downwards steps should be 3, the player

cannot reach the goal by stepping 2 step downwards.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

39

Figure 5-5 Unsolvable situation when up and down buttons are of the same number

In this case, one of the buttons would be set at a value different from the other one.

Situation 3:

However, in some cases, even if the button values of opposite direction were set differently,

the player still cannot reach the goal. For example:

Figure 5-6 Unsolvable situation when the buttons value are not the same

To solve the problem, the buttons of two opposite directions were set to be one even number

and one odd number.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

40

6 Result and Discussion

After implementing the 2 functions, some screenshots of the product are shown in this section.

Also, some possible future improvement is mentioned at the last.

6.1 Trap Function

When player character steps on the trap, the movement buttons will then be altered either

from up and down to left and right, or from left and right to up and down. For example:

Before the player character steps on the trap, the buttons are left and right only (Figure 6-1).

Figure 6-1 Screen capture of the new level before the trap triggers

After the player character steps on the trap, the buttons will toggle into up and down buttons

(Figure 6-2).

Figure 6-2 Screen capture of the new level after the trap triggers

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

41

6.2 Maze Auto-generation Function

The maze after level 50 is now automatically generated. A few examples of the auto-

generated maze below showing that the maze generated is different each time even for the

same level.

Level 51:

Figure 6-3 Several auto-generated maze of level 51

Level 52:

Figure 6-4 Several auto-generated maze of level 52

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

42

Level 53:

Figure 6-5 Several auto-generated maze of level 53

Level 60:

Figure 6-6 Several auto-generated maze of level 60

6.3 Improvement for Future Development

Right now, the game features and leveling is reinforced. However, there is still some room

for improvement in order to make it more prior to the other games in the market. There are a

few improvements can be done in the future development. As mentioned before, the game

will undergo continuous development, these improvements can be done in the near future.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

43

6.3.1 Obstacle Positioning

The obstacle position now is all randomly generated. Though the maze orientation looks

different from time to time, sometimes the distribution of obstacles may be uneven. Some

obstacles may be densely populated on one side of the maze. For example, the obstacles in

the following maze are populated on the top (Figure 6-7).

Figure 6-7 Auto-generated maze which has uneven distribution of obstacles

If the obstacles are distributed unevenly, the player character and the goal may be placed very

close to each other without obstacles in between and the path would be very simple.

Therefore, the obstacles positioning should be formulated in the future development, such

that they would be positioned to separate the player character and the goal.

6.3.2 Maze Appearance

The obstacles are now the same in one level, but that may not look nice. However, if all the

obstacles are randomly picked, the maze may look messy and unorganized (Figure 6-8). A

formula should be designed for picking the obstacles in order to avoid the situation.

Figure 6-8 Random generated obstacles

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

44

6.3.3 Minimum Number of Moves

Considering some advantages of the other Mathematic educational game in the market now,

there are some function that can be added into the Algebra Maze. The number of moves

count function in the Wuzzit Trouble is a very good example to learn from. The function

encourages player to think of a quicker way to solve the problem. The minimum number of

moves might be implemented by analyzing the shortest path. As long as the information of

the buttons and the path is available, the number of moves may be calculated.

7 Conclusion

Personalized Learning can cater for different people’s learning needs and styles.

Gamification in learning is a kind of personalized learning. There are some educational

games on the market applied gamification for learning, such as the DragonBox Algebra

games and the Wuzzit Trouble. The game, Algebra Maze is also a realization of “gaming to

learn”. However, the game is lacking in stages and variety before. Players may get bored

easily, therefore, enhancement is needed. This project added in new feature and more stages

into the game, such that it became more challenging and interesting.

The trap function was added to the game, such that the movement buttons toggle when the

player character steps on it. This function encourages the players to think more when playing

the game. The auto-generation feature added in variety to the game. Player cannot finish th

game just by memorizing the answer got from last play, which enhancing the user learning

experience throughout the game.

There is a need of graph search algorithm in order to achieve maze auto-generation. After

analyzing different algorithms, for example, Greedy Algorithm and Dijkstra’s Algorithm, for

path finding, A* Algorithm was chosen. As the algorithm can guarantee a shortest path

solution, if there is any, and expands a moderate number of nodes. Having the algorithm to

generate the shortest path, the movement buttons value can then be set according to the

shortest path length and direction.

In order to make the game more advance and competitive, improvement is still needed. The

obstacle positioning can be improved by even distribution. And the appearance of the auto-

generated maze can also be improved to make it more decent. Also, after learning from other

games in the market, some feature can be added into the game, like the counting of minimum

moves.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

45

8 Reference

[1] Glossary of Education Reform, "BLENDED LEARNING," Glossary of Education Reform ,

29 August 2013. [Online]. Available: http://edglossary.org/blended-learning/. [Accessed 29

October 2016].

[2] D. S. Wendy Hsin-Yuan Huang, "A Practitioner’s Guide To Gamification Of Education," 10

December 2013. [Online]. Available:

http://inside.rotman.utoronto.ca/behaviouraleconomicsinaction/files/2013/09/GuideGamificati

onEducationDec2013.pdf. [Accessed 1 April 2017].

[3] R. F. MacKay, "Playing to learn: Can gaming transform education?," Stanford Graduate

School Of Education, 1 March 2013. [Online]. Available:

https://ed.stanford.edu/news/playing-learn-can-gaming-transform-education. [Accessed 15

September 2016].

[4] C. M. Holly Pope, "Wuzzit Trouble: The Influence of a Digital Math Game on Student

Number Sense," International Journal of Serious Games, vol. 2, no. 4, pp. 5-22, October

2015.

[5] Google, "Google Play," [Online]. Available:

https://play.google.com/store/apps/details?id=hk.edu.cityu.cs.LaiChunKiu.AlgrebraGame&hl

=en. [Accessed 29 October 2016].

[6] DragonBox, [Online]. Available: http://dragonbox.com/products. [Accessed 29 October

2016].

[7] Google, "Google Play," [Online]. Available:

https://play.google.com/store/apps/details?id=com.wewanttoknow.DragonBoxPlus.

[8] Apple, "iTunes Preview," [Online]. Available: https://itunes.apple.com/us/app/dragonbox-

algebra-5/id522069155?mt=8. [Accessed 29 October 2016].

[9] Google, "DragonBox Chapter03 - video game walkthrough," [Online]. Available:

https://www.youtube.com/watch?v=_kl3eaOr2yM&t=49s. [Accessed 29 October 2016].

[10] BrainQuake, [Online]. Available: http://www.brainquake.com. [Accessed 29 October 2016].

[11] DragonBox, "Press and Awards," [Online]. Available: http://dragonbox.com/about/press-and-

awards. [Accessed 29 October 2016].

[12] Google, "Google Play," [Online]. Available:

https://play.google.com/store/apps/details?id=com.wewanttoknow.DragonBox2. [Accessed 29

October 2016].

[13] Google, "Google Play," [Online]. Available:

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

46

https://play.google.com/store/apps/details?id=com.brainquake.wuzzittrouble. [Accessed 29

October 2016].

[14] A. S. Steve Mussmann, "Graph Search Algorithms," [Online]. Available:

http://cs.stanford.edu/people/abisee/gs.pdf. [Accessed 26 March 2017].

[15] A. M. David Poole, "3.4 A Generic Searching Algorithm," [Online]. Available:

http://artint.info/html/ArtInt_51.html. [Accessed 30 March 2017].

[16] N. Kanargias, 2013. [Online]. Available:

https://www.dropbox.com/sh/3tl3vmsd8ebxo24/AAD4956aplKTSvAki1CYHoria/Version%2

04.1.1%20%28English%29?dl=0. [Accessed 25 February 2017].

[17] A. Patel, "Introduction to A*," [Online]. Available:

http://theory.stanford.edu/~amitp/GameProgramming/AStarComparison.html. [Accessed 26

March 2017].

[18] ARTIFICIAL INTELLIGENCE, "UNIFORM-COST SEARCH ALGORITHM," 18

December 2009. [Online]. Available: http://intelligence.worldofcomputing.net/ai-

search/uniform-cost-search.html#. [Accessed 26 March 2009].

[19] V. Indriasari, "DESIGN OF A DATA MODEL AND ALGORITHM FOR TIME-

DEPENDENT SHORTEST PATHS," ProQuest LLC (2015), Ann Arbor, 2015.

[20] A. Patel, "Heuristics," [Online]. Available:

http://theory.stanford.edu/~amitp/GameProgramming/Heuristics.html. [Accessed 26 March

2016].

[21] ARTIFICIAL INTELLIGENCE, "A STAR ALGORITHM," 19 December 2009. [Online].

Available: http://intelligence.worldofcomputing.net/ai-search/a-star-

algorithm.html#.WN_WeFKB2Rs. [Accessed 26 March 2017].

[22] J. Thakur, "A* Shortest Path Finding Algorithm Implementation in Java," 8 February 2015.

[Online]. Available: http://www.codebytes.in/2015/02/a-shortest-path-finding-algorithm.html.

[Accessed 25 February 2017].

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

47

9 Appendix

Monthly Progress Log:

October:

In October, I have spent most of my time in learning Unity Game Engine.

I have went through some of the tutorial videos on the Unity web:

https://unity3d.com/learn/tutorials, for example, the Interface & Essential, Scripting, 2D UFO

Tutorial etc.. I have been learning how to use Unity and the programming language C#.

Also, I have spent some time in researching for the Math games right now in the market, and

play some of them, to do comparison.

Moreover, I have spent some time in doing the Interim Report 1.

November:

In November, I spent some times in understanding the code of the Algebra Maze, and try to

do some updates. Some updates are under progress. As I have try out some codes but does

not work, so I have to figure out why it does not work.

Also, I have spent some time in designing the auto-generation method. I have research on

Catalan number. Though I have difficulties in understanding Catalan number, I found

information of teaching how to count the number of possible path in a given area. However, I

do not quite get the co-relation between the number of possible path and the way to find a

path. What's more, I have read and understand the paper work of equation generation given

by my FYP adviser.

At the time beginning, I have come up with a very simple and preliminary idea of maze auto-

generation, but that is still very rough and not a good design, so I have to think of how to

improve it. Also, after the brief design of the algorithm, I am thinking that I may have to look

at some research on Claude Shannon maze-solving mouse and some other path finding

algorithm to see if these information help.

December:

In December, I have updated the the game as the following:

1. I have changed a bit of the map and the clues in level 11 such that the game is not that

boring.

2. I have made the chest visible when player reaches the box. (not only some coins coming

out now.)

3. I have changed a bit of the map and clues in level 13, 17, 22, 23, 25.

4. The hero will now hold the key after it gets the key.

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong

48

January:

In January, I spent time on the following aspect:

- work on the trap function

- testing on the functionality of the new function

- study on auto-generation

February:

In February, I spent time on:

- implementing the maze-automation

- revising the design of maze-automation after trying to implement the old design

- working on interim report

March:

In March, I spent time on:

- implementing and optimizing the maze auto-generation function

- testing and debugging the maze auto-generation function

- the final report

_____________________________________________________________________________________________________________________________________________________ This document is downloaded from Outstanding Academic Papers by Students (OAPS), Run Run Shaw Library, City University of Hong Kong