How to Build a Rock Paper Scissor Game in Android Studio?
Rock Paper Scissor (which is also called Stone Paper Scissor) is a hand game and played between two people, in which each player simultaneously forms one of three shapes. The winner of the game is decided as per the below rules:
- Rock vs Paper -> Paper wins.
- Rock vs Scissor -> Rock wins.
- Paper vs Scissor -> Scissor wins.
In this game, the user will be asked to make choice and according to the choice of user and computer and then the result will be displayed along with the choices of both computer and user. In this article, we will be building Rock Paper Scissor Game in Android Studio using Kotlin and XML.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.
Step 2: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.LinearLayoutCompat android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:text="Rock Paper Scissors" android:textColor="@color/black" android:textSize="34dp" android:textStyle="bold" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:paddingTop="10dp" android:text="Computer" android:textColor="@color/teal_200" android:textSize="30dp" android:textStyle="bold" /> <ImageView android:id="@+id/computer_move_img" android:layout_width="match_parent" android:layout_height="120dp" android:src="@drawable/question_mark" /> <TextView android:id="@+id/winner_tv" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:paddingTop="10dp" android:paddingBottom="10dp" android:text=" " android:textColor="#F11010" android:textSize="30dp" /> <ImageView android:id="@+id/user_move_img" android:layout_width="match_parent" android:layout_height="120dp" android:src="@drawable/question_mark" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:text="Player" android:textColor="@color/teal_200" android:textSize="30dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:id="@+id/rock_btn" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/stone_icons" /> <ImageView android:id="@+id/paper_btn" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/paper_icon" /> <ImageView android:id="@+id/scissors_btn" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/scissors_icons" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="10dp" android:text="Player Score" android:textColor="@color/black" android:textSize="20sp" /> <TextView android:id="@+id/player_score" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="10dp" android:text="0" android:textColor="@color/black" android:textSize="20sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="10dp" android:text="Computer Score" android:textColor="@color/black" android:textSize="20dp" /> <TextView android:id="@+id/computer_score" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="10dp" android:text="0" android:textColor="@color/black" android:textSize="20sp" /> </LinearLayout> <android.support.v7.widget.LinearLayoutCompat android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <Button android:id="@+id/restart_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:backgroundTint="#ED7716" android:text="Restart Game" android:textColor="@color/white" /> </android.support.v7.widget.LinearLayoutCompat></android.support.v7.widget.LinearLayoutCompat> |
After writing this much code our UI looks like this:
Step 3: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
Kotlin
import android.support.v7.app.AppCompatActivityimport android.os.Bundleimport kotlinx.android.synthetic.main.activity_main.*import kotlinx.android.synthetic.main.activity_main.view.*class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) restart_btn.setOnClickListener { clear_score() } // when player click on scissor icon. scissors_btn.setOnClickListener { // set the image of user move to scissors user_move_img.setImageDrawable(getResources().getDrawable(R.drawable.scissors)); // choose a random number between 1 to 3. val computer_move = (1..4).random() // 4 is not included. // 1 denotes "Rock" // if value of computer move is 1 it means computer has chosen Rock // 2 denotes "Paper" // if value of computer move is 2 it means computer has chosen paper // 3 denotes "Scissors" // if value of computer move is 1 it means computer has chosen Scissors if (computer_move == 1) { // set the image of computer move to rock computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.rock)); // rock beats scissors. winner_tv.text = "Computer has won" // increase the computer score val cscore: Int = computer_score.text.toString().toInt() + 1 computer_score.text = cscore.toString() } else if (computer_move == 2) { // set the image of computer move to paper computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.paper)); // scissors beats paper winner_tv.text = "Player has won" // increase the player score val pscore: Int = player_score.text.toString().toInt() + 1 player_score.text = pscore.toString() } else { // set the image of computer move to scissors computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.scissors)); // both user move and computer move are "scissors" winner_tv.text = "Draw" } } // when player clicks on paper icon paper_btn.setOnClickListener { // set the image of player move to paper user_move_img.setImageDrawable(getResources().getDrawable(R.drawable.paper)); val computer_move = (1..4).random() // 1 denotes "Rock" // if value of computer move is 1 it means computer has chosen Rock // 2 denotes "Paper" // if value of computer move is 2 it means computer has chosen paper // 3 denotes "Scissors" // if value of computer move is 1 it means computer has chosen Scissors if (computer_move == 1) { // set the image of computer move to rock computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.rock)); // paper beats rock winner_tv.text = "Player has won" // increase count of player score val pscore: Int = player_score.text.toString().toInt() + 1 player_score.text = pscore.toString() } else if (computer_move == 2) { // set the image of computer move to paper computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.paper)); // both user move and computer move are "paper" winner_tv.text = "Draw" } else { // set the image of computer move to scissors computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.scissors)); // scissors beats paper winner_tv.text = "Computer has won" // increase the computer score val cscore: Int = computer_score.text.toString().toInt() + 1 computer_score.text = cscore.toString() } } // when player click on rock icon. rock_btn.setOnClickListener { // set the image of user move to rock user_move_img.setImageDrawable(getResources().getDrawable(R.drawable.rock)); val computer_move = (1..4).random() // 1 denotes "Rock" // if value of computer move is 1 it means computer has chosen Rock // 2 denotes "Paper" // if value of computer move is 2 it means computer has chosen paper // 3 denotes "Scissors" // if value of computer move is 1 it means computer has chosen Scissors if (computer_move == 1) { // set the image of computer move to rock computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.rock)); // both user and computer moves are rock winner_tv.text = "Draw" } else if (computer_move == 2) { // set the image of computer move to paper computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.paper)); // paper beats rock winner_tv.text = "Computer has won" // increase the computer score val cscore: Int = computer_score.text.toString().toInt() + 1 computer_score.text = cscore.toString() } else { // set the image of computer move to scissors computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.scissors)); // rock beats scissors winner_tv.text = "Player has won" // increase the count of player val pscore: Int = player_score.text.toString().toInt() + 1 player_score.text = pscore.toString() } } } private fun clear_score() { // set the computer and player score to 0 computer_score.text = "0" player_score.text = "0" winner_tv.text = "" // set the images of computer move and user move to "Question mark image". user_move_img.setImageDrawable(getResources().getDrawable(R.drawable.question_mark)); computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.question_mark)); }} |
Output: Now run your app and see the output of the app.
Get the complete Project from here.
Please Login to comment...