Semester Project Report Mobile Application for Online Surakarta Battle

Transcription

1 Semester Project Report Mobile Application for Online Surakarta Battle COMP4342 Mobile Computing Department of Computing The Hong Kong Polytechnic University CHAU Tsz Ling D FU Kuo-Hao, D GU Jinshan, D MA Mingyu Derek, D MA Zhenyuan, D April 20,

2 Contents 1 Introduction 4 2 User Manual Activity Diagram Installation Guide Account Registration Account Sign In First Sign In Remember Sign In Recover Password Main Page User Profile View User Profile Update User Profile Leader Board View All Users Locations View Rules Game Create Game Session Join Game Session Game Participation Stop the Game Restart the Game System Structure Database Database Structure Local End

3 3.2.1 User Management Module Leader Board Module Game Logic Module Game Synchronization Implementation 17 5 Testing Strategies and Results Reliability Robustness Job Division 19 7 Conclusion 19 3

4 1 Introduction In this project, we have designed an online mobile game named Surakarta for Android platform. It is an Indonesian strategy board game for two players and describes a unique method of capture pieces. The goal of Surakarta is to capture as many as possible pieces of the opponent and the winner will be the one left more pieces on the board. The source code of this application is available at: 1 User can use an Android phone as client side to play the game and Firebase as server side. They should connect to the Internet to using the Firebase and then the data transmission and update can be work on the real-time database. When opening the game, users should sign up or sign in with their account (they can use Google account directly) first. They can create a new game room or just join an existing room then play the game. Also, there is a leader board to show how well other users play the game. 2 User Manual 2.1 Activity Diagram The activity diagram is demonstrated in following Figure Installation Guide This part indicates how to install the application on your mobile devices. - Recommended version: Android The README includes installation guide, functions, screenshots and so on. It is available at 4

5 Figure 1: Activity diagram 1. Go to URL and download the.apk file: apk 2. Install the APK on mobile device. 3. Grant all permissions needed by APK. 5

6 2.3 Account Registration For registration yourself as a new user, perform the following steps: 1. Input your Input your first name and last name. 3. Input your password (at least 6 characters). 4. Click "Save" button to submit your registration form. 2.4 Account Sign In First Sign In If you are not registered, please refer to Section 2.3. After registration, the instructions of log in are listed below and the UI is shown in Figure 2: 1. Input your registered Input your password. 3. Click "Sign In" button Remember Sign In If you are not registered, please refer to Section 2.3. If you have signed in before, you can choose your account to sign in. 1. Choose the account you want to sign in. 2. Input your password for authentication. 3. Click "Sign In" button. 2.5 Recover Password In case you are not able to login with your registered account, please follow the steps below: 6

7 Figure 2: Sign In 1. Click "Trouble signing in". 2. Input your Click "Send" and wait for an to reset the password. 2.6 Main Page After logging in successfully, you will see the main page. The main page is divided to three sessions: 1) Viewing profile, 2) Game participation, 3) Link to leader board, locations of players and rules. The UI is shown in Figure 3. 7

8 Figure 3: Main page for navigation 2.7 User Profile View User Profile By clicking "View Profile" button, you can view your personal profile including name, , gender, age, score, wins and losses in this page. The UI is shown in Figure Update User Profile In the same page of viewing your profile. You can choose to edit your personal information such as gender and age. The steps of updating your account information are shown as below: 1. Click on the field you want to update. 2. Input your information for this field. 8

9 Figure 4: User Profile Page 3. Click "Update" button. 4. "Update Successfully" is shown if your update is successful. 2.8 Leader Board After "Leader Board" is clicked in the main page, a table of ranking between different players is shown, followed by their "name", "score", "wins" and "losses". The UI is shown in Figure View All Users Locations After clicking "Locations of Players" button, you can view a map with numerous red pins. Each red pin represents one player. The pointing area of the pin is the location of the corresponding player. You will be able to see 9

10 Figure 5: Leader Board the registered , wins and losses numbers of the player after clicking on the red pin. It is shown in Figure View Rules If you are not familiar with Surakarta, you can view the rules under the "Learn Rules" button. "Goal", "General Turns and Rules", "Moves" and "Demo Videos" are included in this page Game There are two ways for you to start a Surakarta game. You can decide to create a game session or to join a game session. 10

11 Figure 6: Users Map Create Game Session You can create a new game by clicking "Create" button in the main page. If it is successful, you will be directed to a game page to play the Surakarta Join Game Session Another way to start a game is to join a game session by choosing one of the sessions from the available session list on the main page. Just by clicking the "Session Number", you will be directed to the game page to play the Surakarta. 11

12 Game Participation You can move your chess only if "It s your turn" is shown on screen. Otherwise, you are not able to move the chess until your competitor finishes his/her turn. The game board is shown in Figure 7. Figure 7: Game Board Stop the Game If you want to quit the game and calculates the "Score", "Wins" and "Losses" of that round, click the "stop" button Restart the Game If you want to quit the game without calculating the "Score", "Wins" and "Losses", click the "restart" button. 12

13 3 System Structure 3.1 Database For the simplicity and stability of the back end, we use Firebase as our database. Firebase is a mobile and web application development platform supported by Google. It provides authentication services as well as JSON format real-time database. Using the provided JavaScript library, we can connect to Firebase on client side and directly read and update the database Database Structure We store the user profile in Firebase database as JSON format. Using this format all the data are stored as objects. There are two major parts: "leaderboard" object includes user profiles; "battle" object includes current battle information. The detailed database structure is shown as below (Figure 8): 3.2 Local End User Management Module Users can register and sign in using these s. We use a simple interface for both operation. An user will be asked for the nickname and the password when he/she sign in for the first time. This is regarded as registration, and this will be stored in Firebase together with other user information. Once an user signs in to our game, he/she can view and update user profile, such as nickname, gender, age, etc. The profile also includes user s score and battle records (number of wins and losses). We use Firebase SDKs to manage user authentication. The authentication part is separated from database in backend. Once an is registered, an uid will be randomly generated and associated with this . And we use this uid as the unique key to store and retrieve user s profile in database. 13

14 Figure 8: Database structure and explanation Users , uid and hashed password are stored using Firebase authentication services. Other information such as gender and age are stored in database. For safety reasons, we can authenticate users password through Firebase SDKs, but we cannot access user s hashed password in the backend Leader Board Module We have a leaderboard where the users can check the scores of the top players in the game, as well as their own score. This way the user can easily compare his scores to the best players in the game, and also try to reach the top of 14

15 the leaderboard. We utilize the Firebase Database to grab this data of all users in real time. Every user has a score, or rank, and that is used to calculate their position on the leaderboard. Everytime a match is finished, two user s rank will be compared and a new rank will be calculated based on the game result. For example, if A and B are playing a game and A has a significantly higher score than B, then A is expected to win more often than B is. If A loses to B, then A will lose a larger amount of his score as compared to if he wins because A has a higher score Game Logic Module To implement game logic, several functions are implemented. They are: Turn Control: control input authorization and change turns for the user Available Piece Detection: when user drag a piece, available moves positions should be shown to the users One of the most difficult part of this project is to design a algorithm to detect available capture opportunities. According to the rule of the game, there are two types of possible moves: 1. Normal move: move to up/down/left/right with 1 distance 2. Capture move: the piece can capture to eat any pieces going through the rings at the four corners. Thus designing algorithms for detecting possible capture moves fast and accurately is a challenge. We designed and implemented a divide-and-conquer algorithm to detect those moves as shown in following Algorithm 1. 15

16 Algorithm 1: Search Available Capture Moves Result: available captures positions list 1 initsearchposition = list of all four posts around this selected piece; 2 for each piece in initsearchposition do 3 while does not find some piece in this path do 4 if some piece is at this position then 5 if this piece is from my side then 6 search of this direction stops since some piece blocks the 7 else path; 8 if this path already go through a loop at the four corners then 9 this is a possible capture move; 10 end 11 end 12 else 13 continue to next one under the same direction; 14 end 15 end 16 end Game Synchronization We utilize Google Firebase Real-time Database to achieve real-time board positions synchronization with only few milliseconds delay. Each round, after user drop their pieces on the board, then the JavaScript program will loop through all the pieces to find the differences of the pieces location. Then the changes will be uploaded to cloud. For each client, it keeps a web socket connection with the Firebase server to receive real-time changes on the board. So whenever a user update their board positions on the cloud, client side of his/her competitor can grab the latest update in real-time. During 16

17 the transmission between the client side and the server database, only the part changes will be transmitted to save network bandwidth and lessen delay. After the client side receive the changes from other side, the JavaScript program will loop through current positions locally to find the normal or capture move made in this round. Then automatic event will be made to trigger the eventlistener to simulate somebody is moving those pieces. 4 Implementation The primary tool used for this project is Firebase by Google. We primarily use Firebase for all our backend functionalities like database, user authentication, analytics, and some functionalities testing. When we want to grab data out of Firebase we can just include a simple line of code like this in our Javascript script: f i r e b a s e. database ( ). r e f (" t a b l e /"+primarykey+"/ a t t r i b u t e "). once (" value ", f u n c t i o n ( snapshot ) That allows us to grab the data out of the Firebase Database from the respective table with the respective key and attributes as a snapshot, which is a special object that contains data from a Database. 5 Testing Strategies and Results We use different testing strategies in different stages. In the preliminary stage, we use simulator to test our application. Since we develop web application first and transfer it to phone application, we first implement the web version of our game. In this phase, it is more convenient to use Chrome to test the functionality. And Chrome also provides phone simulator, so we can develop our application based on mobile phone screen size. After we achieve 17

18 the functionality requirements, we need to modify our application to adapt to mobile devices. By installing PhoneGap on both PC and Android device, we can deploy the application on computer and play it on mobile phone via PhoneGap connection. In this way we can make sure that it can be played on real mobile devices. At last, we generate the APK file and install our application on mobile phone. And we conduct a number of testings covering different cases to avoid unexpected bugs. The major criteria of testing results are reliability and robustness. We are confidence that our application performance good in both aspects through different testings. 5.1 Reliability For an online PvP game, it is important to make sure that the game status are updated on time, so the game status on two players phone are exactly the same. Since Firebase provides real-time database, we do not need to use typical HTTP requests to access the database, which may result in conflicts when updating the data. Firebase will synchronize data for any connected device within milliseconds whenever the database are updated. In our tests we used two phones connecting to the same game session and played it. And we found that once we move the chess using one phone, the game status (chess piece place on the board) updated immediately on the other phone. We have also conducted some tests at different location (two players are far away), and the response time is quite satisfying. Two phones at slow 2G connection is also used to tested the on-line battle function, and the delay is also hard to detect. 5.2 Robustness Our game can be played smoothly when the network is stable. However, this is not always the case. There are a number of cases that may cause the user 18

19 go off-line. For instance, the user may enter the lift while playing, which will cause network disconnection. It is also common that a user force quits the application and discard the ongoing game. To handle special connection issues on client side, we implemented and tested following functions to handle connection error and provide smooth gaming experience. If the server didn t detect upload from a user of the battle within certain period, then the server will consider this user has gone off-line and notice his/her competitor that the other user is gone, please start a new game. If a user quits the application or leave the battle session because of wrong operations, when he/she come back to the main navigation page, he/she can still choose to continue the previous battle going on. The game will continue in this case. But to continue, the user must come back to the session within a certain time period, otherwise the system will consider this user as off-line user and end the battle. 6 Job Division CHAU Tsz Ling: user manual, documentation, design architecture FU Kuo-Hao: server-client interaction, leader-board design GU Jinshan: server-client interaction, user login design, user profile page MA Mingyu: game logic, battle sync, create database and connection, set up server, web to Android conversion MA Zhenyuan: GUI design, game board design, mobility support 7 Conclusion After implementation and testing, the Surakarta game can be successfully run on any Android platform phone without runtime error. Due to the time 19

20 limit, we just ensure the performance of both client and server side. We hope that we could put on the game on Google Store or even ios platform and AppStore, and design a better GUI and a smoother interaction method of the game. 20