G54MDP GROUP COURSEWORK WHACK - A - MOUSE

Chunxiao Ni psxcn1@nottingham.ac.uk Chun-Chang.Wang psxccw@nottingham.ac.uk Yuma Yanagisawa psxyy5@nottingham.ac.uk

Introduction
Whack-a-mouse is a classic game, which is simple but addictive and popular for many generations. As well as other games such as Gluttonous Snake, LinkGame. One feature of this type of game is they tend to have a shorter game cycle. Users (players) they do not have to spend much time for a round of the game, so they are able to play the game at some scattered time, such as commuting or waiting people. This type of game is popular among different age groups of people. Certainly it is also applicable whenever someone wants to kill the time. In this work, we aim to make the game more attractive visually and more interesting to play. We mainly described the concept of UI design, the functionality implemented, the key application components used and the structure of the code in this report. Some unsolved problems were presented in the last.

About The Design

Since there are more than one games of this type existing in the market, we tried to make our game different from others. ! UI - Since this is a game, the first emphasis should be the UI design. It was original and done by Photoshop. Whack-a-mouse was defined as a joyful, lively game, thus we made the UI style bright and lovely using a color assortment of light blue, green, yellow and pink. We replaced the typical mole with a cute cartoon

character Hamtaro which is a guinea pig. The scenario and process still followed the mainstream, with which players are familiar. ! Sounds - Secondly, we used a variety of sound effects in this game. Due to the limited resource, the files of sounds were selected and downloaded from the Internet. The sounds were mainly sorted in two types, for backgrounds and events. Background music was embedded in the home page and game pages. Special sound effects were trigged in the events of whacking mice and obtaining special items. ! Haptic In order to provide a richer user experience, the game include a vibration feature. Vibration is triggered by only whack on a wrong mouse, which will also lose 3 points of score. At the beginning, we would like to set vibration with each triggered events (when whack items). However, we awarded that this approach will cause numbness of users after they played few rounds of game, so we decided to set the vibration on certain event.

The Process of Game and Functionality

Back to home page

Click Back

Instruction Page Replay

Home page Game Page Pause Resume Back to home page

Result Page

Pause Page

When the game launches, the home page shows. In the home page (Figure 1), players can choose to see the instruction first or play the game directly. The instruction page (Figure 2) appears when How to play clicked. As seen in the page, there are three types of mice. The pink mouse is special, because hit on her can cause a reduction of 3 points in score. The clock, wing and peanut are special items. Their functions are: Clock: The remaining time minute 5 seconds Wing: The mice show up and disappear faster Peanut: The mice stay up longer

Figure 1. Home page

Figure 2. Instruction page

After knowing how to play this game, click Back to return to home page. By clicking play, the game starts (see Figure 3). Mice pop up from the holes randomly. As the remaining time decreases, more mice will come out. In this page, players can turn on/off the background music and sound effects by tapping mute button. The pause button allows players to pause or continue the game.

Figure 3. Game page

Figure 4. Result page

When the time becomes 0, the games ends. The result page (Figure 4) shows the final score and the top three records. Click menu to go back to the home page and click replay to start the game again.

Key Components of Application

After doing some research and read the developer reference, we come to a conclusion that to use thread and handler to update the UI would be the best way to implement the app, since it might work more efficient than AsyncTask in this setting. When GameActivity is created, a new thread will be created. The thread sent handler messages to the handlers when it runs. There are four handlers response for updating images, timer and score. The handlers update the UI according to the received message. Thread may cause memory leak due to its uncontrollable life circle, Thus we must ensure all threads are destroyed when the task finished. The method we use is setting a thread as a daemon thread, which is different from user thread (non-daemon). It's mostly just 'ported' from regular Java, where a process could not 'exit' normally when non-daemon thread is running, but it does not matter how many

running daemon threads exist. When the process is killed, all the daemon threads would finish. Another way to kill a thread was to allow it to finish itself. Using onDestroy() was not safe. Then we used a flag in while loop , which was in run(). When the flag became false, the process jumped out the loop and run(), and the thread ended itself.

Structure of The Code

In order to implement a good coding practice, each bit of code were place in the appropriate activity based on the function of the code. This enabled us to separate task easily during the development. In this application, according to the function of code three activities were created, which are: ! MainActivity, ! GameActivity, ! ResultActivity, ! DBHelper ! GridPack. Intents were used to switching and bundles were used to send variables between activities. MainActivity is where the application starts. The main function of this activity is to show the instruction page of the game and provide a start point for the game. It extends the activity class and performs simple tasks, such as change layout and play background music. GameActivity provides the logic of the game. Therefore game logic related codes were placed in this activity. GameActivity extends the activity and implements onClickListener, so we can use functions provided by activity class to manipulate the UI status, attributes and control the lifecycle of the game. In this activity, a daemon thread was used to automatically update UI, such as the motions of mouse, time

left and score earned. An onClickListener was deployed to monitor the button pressed, so that the application can make appropriate response. In this activity is where section the vibration feature implemented. To implement the vibration, the user permission should be specify in the manifest file, so that the app able to use vibration function. ResultActivity works with DBHelper closely, this main function of this activity is to add a new score record to the database and display the top three scores and new score sent form GameActivity via bundle. In order to extract DB logic from game logic, a DBHelper was created as a mediator to handle all interaction between database and activities. According to the actions required, DBHelper provides function such as, insert, update, and select. The GridPack served as a function like JAVA bean to packing attributes of each image of games view and associate with GameActivity.

Unsolved Problem
We encountered many technical difficulties during the development. Among them, the layout of UI components was the biggest difficulty we faced, and we were not managed to find a once and for all solution for this issue. We made a compromise in this problem, which almost likely meet our expectation. As we know, there are different sizes of screen of mobile devices. What we aimed to do was to adapt the UI of our game to most of the existing android devices. However, this task was not so easy as we thought. It was known that the components should be generated dynamically in code, if we wanted the components fit in diverse resolutions. Since we could obtain the screen resolution parameters via the code and locate the components in proportion. But we got more problems when using this method. We

had different image buttons (the mice), they were not located with regularity. And the buttons were of different style. These conditions required a block of code. Then we chose to set the components statically in XML file. Then came the problem that the graphics went in different places in different devices. We tried different layouts and failed. Due to the limited time, we have to leave it like this. But we will still seek for the solution when we have time.

Peer Assessment
Chun-Chang, Wang In this group work, my tasks were mainly on the designing the structure of the application, solving difficulties that we encountered in the development and optimize the code. Since the work was conducted near the end of this semester, we didnt have many face-to-face meetings, instead of that we communicated through SMS or message software, since we separate the tasks well, so we can work independently pretty well. Over all this is a pleasant group work experience.

Chunxiao Ni We three had discussions before started. And we reached an agreement on what kind of application to develop for the coursework and what functions to be implemented. I designed the UI and colleted the sounds for the game. And I created a class in which the main functions of the game were implemented. Wang helped me to refine it and he bound it to the structure as Gameactivity. I mainly focused on the solutions for the problems caused by the thread and and layout. Yuma were also helpful in the wholse process. Anyway, i was happy with the group.