|Sign Up to vote for this article|
Create a tic tac toe game using Google's Android framework.
This tutorial assumes that you already have the Android SDK, you are using Eclipse, and you have the Android plugin for Eclipse.
Eclipse Android plugin
We are going to create a very simple tic tac toe application. This will be a single player game played against the "computer".
Now that you have all the tools installed, the first thing we need to do is create an Android project. In Eclipse select File > New > project. Expand the Android folder, select "Android Project", and click next.
In the project name field enter "TicTacToe".
In package enter your domain in reverse order (i.e. com.jasonhoule.game).
For activity enter "TicTacToe".
In the application name field enter "Tic Tac Toe" and click Finish.
Eclipse has now created a basic Android project with the necessary files. If you wanted to you could actually run this application as it is right now. It won't do anything but lets give it a try anyway. This will expose us to the Android emulator.
In the Run menu choose "Run Configurations...".
Click on Android Application in the left panel. Click the new button (looks like a blank page with a +) to create a new run configuration.
Click browse and choose our TicTacToe project and click ok.
We can leave the default settings for everything for now. Click apply and run.
The Android emulator will start. This may take a minute because the OS must start and Eclipse will then install the application. If the phone is locked when it starts press the menu button. Our application should automatically start once it is installed.
You can see that there is not much to the application yet but it is running. You should see "Tic Tac Toe" in the applications title bar as well as "Hello World, TicTacToe" on the screen. You have created an Android Hello World program without ever writing a single line of code.
Hello world is nice and all but we want a game. Lets go back into Eclipse and start working on our app. You can leave the emulator running.
If you expand the TicTacToe project you will see our usual Java src folder, the Android Library, an assets folder, a res folder, and the AndroidManifest.
Expand the res folder and the values folder. Open strings.xml. If you do not see the source click on the strings.xml tab. Here you will see where the "Hello World, TicTacToe" came from. This is also where our application name is defined. This is what is displayed in the title bar when the application is running. Lets delete the first line ("Hello World...") since we do not need it. Save and close the strings.xml file.
Expand the layout folder and open main.xml. Again, click the main.xml tab if you do not see the source. The layout of our application will be defined in this file. With the Android framework you can either create your layout programatically or within XML files such as this one.
In the main.xml file you can see that we have a LinearLayout defined and within that layout there is a single TextView which simply displayed the Hello World string which we just removed from the strings.xml file.
Delete everything from the main.xml except for the xml declaration. Before we can start defining our layout we need to know what it is going to look like. We obviously need a tic tac toe board. So we will need to create a grid of buttons to be the game board. There should be three columns and three rows. We should probably also have some sort of informational area to let the user know what is going on. Our layout will look something like the following:
Everything can be aligned relative to something else in this layout so that is exactly what we will do. We will create a relative layout.
In the main.xml file add the following:
We have declared the android name space, set the width, and the height. Now we need to create our game board which actually consists of nine buttons and a text view to display the status. Edit the main.xml file.
We now have nine buttons and a text view. We have assigned each of the items an id so we can access them in our code. We have also layed out everything so it is relative to something else. The layout_toLeftOf attributes and the layout_alignTop attributes reference other objects in our layout so everything should be positioned just right. We have also defined default text for our status dialogue.
In the Eclipse editor choose Run > run. If prompted to select a way to run, choose to run as an Android application. Take a look at the console. You can see that Eclipse will install your application on the emulator and then start it for you. Go back to the Emulator and you should now see your new layout, buttons, text field, and all. Easy enough, right? Now lets make it work.
In the src directory expand your package and you will see two java classes.
R.java is a generated file which you will never need to edit. This file is simply Androids way of hooking your resources into the Java code.
R.java file. You can see a class created for the buttons we just created as well as our layout, assets, and the values in the
R.java file and open
TicTacToe.java file. This is the heart of our application. Think of this as our Main class. When the application is run the
onCreate() method in this class is called. In this method we can see a call to
setContentView() with a parameter "
R.layout.main". This is our
main.xml file which we just created.
Lets add a few fields to our TicTacToe.java class.
The next thing we will do is create a method to check and see anyone has won. It may seem like an odd place to start but there are a limited number of ways to win a tic tac toe game. Also, this is the entire point of our application. What is a game if there is no way to win?
Add the following method to the TicTacToe.java class.
Good, now we have a way to test for a winner. If you are having trouble grasping the board and buttons maps think of it as the following. The first number is the row in our board, the second number is the column. The board map holds the status of our squares. We need to know who the square belongs to. If it is the users then we will give it a value of 0. If it is the computers it will have a value of 1. If it is empty then the value is 2.
To create our AI we will add an inner class which will allow us access to our game board variables. Add the following to the TicTacToe.java class.
Now we have a smart computer player. Press ctrl-shift-O to fix any missing import statements.
So, what are we missing? We still need to know what to do when a button is clicked and our board and buttons arrays are still empty. Let's hanlde the button press first. To do this we will create another inner class which will implement the OnClickListener interface. The reason we will create an inner class rather than an anonymous inner class is to avoid repetition. When we execute our initialization code we can loop through and pass our position in the array to the constructor of our listener. Add the following to the TicTacToe.java class.
Fix any missing import statements.
Now we have to set up the initial game board. We need to give default values to our board array and add the buttons to the buttons array. We also need to create our AI player and clear the status message. Add the following to
Now that we have the
init() method to set up our board we will need to call it from the
onCreate() method. Add the
init() call as follows.
In Eclipse choose Run > Run and if prompted choose as Android application. Eclipse will package the application and install it on the Emulator. Go ahead and give it a try. We now have a working tic tac toe game. It works great but there is one little problem. Once the game is done, thats it.
We need to create a way for the user to start a new game. We will do this by adding this option to the context menu. To do this we need to override the onCreateOptionsMenu method of the Activity class. We also need to add an onOptionsItemSelected method to handle the menu item being selected. Add the following to the TicTacToe.java class.
Fix your imports (ctrl-shift-O) and run the application. When you click the menu button we now have an option to start a new game. I got kind of lazy and sloppy with the onOptionsItemSelected method. There should be a switch in there or some other check to see which item was selected from the menu but since we only have a single item I did not bother to do that check but remember that for the future!
And there we have a Tic Tac Toe game. Have fun with it.
This article, along with any associated source code and files, is licensed under A Public Domain dedication
Location: United States
Sign up to post message on the article message board!