Create a Rock Paper Scissors Game using React-Native
Rock, Paper, Scissors is a timeless game that has entertained people of all ages for generations. In this article, we will walk you through the process of creating a Rock Paper Scissors mobile game using React Native. You'll learn how to build a simple yet engaging game that can be played on both Android and iOS devices.
To give you a better idea of what we’re going to create, let’s watch a demo video.
Demo Video
Playground
Note: This Section is to interact with the app which you are going to build.
Step-by-Step Implementation
Step 1: Create a React Native Project
Now, create a project with the following command.
npx create-expo-app app-name --template
Note: Replace the app-name with your app name for example : react-native-demo-app
Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.
It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.
Now go into your project folder, i.e., react-native-demo
cd app-nameProject Structure:
Step 2: Run Application
Start the server by using the following command.
npx expo startThen, the application will display a QR code.
- For the Android users,
- For the Android Emulator, press " a" as mentioned in the image below.
- For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.
- For iOS users, simply scan the QR code using the Camera app .
- If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.
Step 3: Start Coding
Approach / Functionalities:
- Create a UI with buttons for Rock, Paper, and Scissors.
- Create state variables to store playerValue, computerValue, playerScore, and computerScore.
- Attach event handlers to the button Rock, Paper, Scissors to manipulate states.
- Implement a decision function to generate computerValue.
- Implement game logic to determine the winner (player or computer).
- Display the user's choice and the computer's choice.
- Keep track of the user's score and the computer's score.
Let's dive into the code in detail.
- Import libraries: Import required libraries at the top of the file.
// Import useState hook from React for state management
import { useState } from "react";
// Import necessary components from react-native
// Import core components from react-native for building UI
import {
View, // Container component for layout
Text, // Component for displaying text
TouchableOpacity, // Button component for touch interactions
StyleSheet // Utility for creating styles
} from "react-native";
- StyleSheet: Create a StyleSheet to style components like container, title, buttonContainer, etc.
// Styles for the components
const styles = StyleSheet.create({
container: {
flex: 1, // Take full height
justifyContent: "center", // Center vertically
alignItems: "center", // Center horizontally
backgroundColor: "#333", // Dark background
color: "#fff", // Text color
},
title: {
fontSize: 28, // Large font size
marginBottom: 20, // Space below title
color: "#4caf50", // Green color
fontWeight: "bold", // Bold text
textTransform: "uppercase", // Uppercase letters
},
buttonContainer: {
flexDirection: "row", // Arrange buttons in a row
justifyContent: "space-between", // Space between buttons
marginVertical: 20, // Vertical margin
},
button: {
backgroundColor: "#4caf50", // Green background
paddingVertical: 12, // Vertical padding
paddingHorizontal: 20, // Horizontal padding
borderRadius: 8, // Rounded corners
marginHorizontal: 10, // Space between buttons
},
buttonText: {
color: "#fff", // White text
fontSize: 18, // Medium font size
fontWeight: "bold", // Bold text
},
scoreContainer: {
marginTop: 20, // Space above scores
alignItems: "center", // Center align
},
scoreText: {
color: "#fff", // White text
fontSize: 16, // Font size
marginBottom: 10, // Space below each score
textAlign: "center", // Centered text
},
});
- Title Text:
This title explains what the app does. We use the text "Rock, Paper, Scissors Game" to show that the app is to play the Rock, Paper, Scissors Game.
{/* Game title */}
<Text style={styles.title}>
Rock, Paper, Scissors Game
</Text>
- Rock, Paper, Scissors Buttons:
After the title, we have three buttons: Rock, Paper, and Scissors. Each button is created by wrapping a Text component with the words "Rock," "Paper," and "Scissors" with respect to buttons. These are then placed inside a TouchableOpacity component so that the user can click on them. All three buttons are held together in a View component. When the user taps on any button, we call a function called "decision," which contains the game logic.
{/* Buttons for player to choose */}
<View style={styles.buttonContainer}>
// Rock Button
<TouchableOpacity
style={styles.button}
onPress={() => decision("ROCK")} // Player chooses ROCK
>
<Text style={styles.buttonText}>
Rock
</Text>
</TouchableOpacity>
// Paper Button
<TouchableOpacity
style={styles.button}
onPress={() => decision("PAPER")} // Player chooses PAPER
>
<Text style={styles.buttonText}>
Paper
</Text>
</TouchableOpacity>
// Scissors Button
<TouchableOpacity
style={styles.button}
onPress={() => decision("SCISSORS")} // Player chooses SCISSORS
>
<Text style={styles.buttonText}>
Scissors
</Text>
</TouchableOpacity>
</View>
- decision function: This function starts by randomly picking a choice from a list of options for the computer using Math.random and Math.floor. It then sends the player's choice and the computer's choice to logic function.
-The logic function: checks who won by looking at certain conditions in the code. It returns 0 if there's a tie, 1 if the player wins, and -1 if the computer wins.
After that, the state variable is updated based on what the logic function returns.
// State to store player's current choice
const [playerVal, setPlayerVal] = useState(null);
// State to store computer's current choice
const [computerVal, setComputerVal] = useState(null);
// State to store player's score
const [playerScore, setPlayerScore] = useState(0);
// State to store computer's score
const [compScore, setCompScore] = useState(0);
// Function to determine the winner
const logic = (playerVal, computerVal) => {
// If both choices are the same, it's a draw
if (playerVal === computerVal) {
return 0;
// Player wins conditions
} else if (
(playerVal === "ROCK" && computerVal === "SCISSORS") ||
(playerVal === "SCISSORS" && computerVal === "PAPER") ||
(playerVal === "PAPER" && computerVal === "ROCK")
) {
return 1; // Player wins
} else {
return -1; // Computer wins
}
};
// Function to handle player's choice and update state
const decision = (playerChoice) => {
// Array of possible choices
const choices = ["ROCK", "PAPER", "SCISSORS"];
// Randomly select computer's choice
const compChoice =
choices[Math.floor(Math.random() * choices.length)];
// Determine the result using logic function
const val = logic(playerChoice, compChoice);
// If player wins
if (val === 1) {
setPlayerVal(playerChoice); // Update player's choice
setComputerVal(compChoice); // Update computer's choice
setPlayerScore(playerScore + 1); // Increment player's score
// If computer wins
} else if (val === -1) {
setPlayerVal(playerChoice); // Update player's choice
setComputerVal(compChoice); // Update computer's choice
setCompScore(compScore + 1); // Increment computer's score
// If it's a draw
} else {
setComputerVal(compChoice); // Update computer's choice
setPlayerVal(playerChoice); // Update player's choice
}
};
- Display choices and scores:
After that, display choices and scores of player and computer using below code.
{/* Display choices and scores */}
<View style={styles.scoreContainer}>
<Text style={styles.scoreText}>
Your choice: {playerVal}
</Text>
<Text style={styles.scoreText}>
Computer's choice: {computerVal}
</Text>
<Text style={styles.scoreText}>
Your Score: {playerScore}
</Text>
<Text style={styles.scoreText}>
Computer Score: {compScore}
</Text>
</View>
Now, wrap all design code with a View component, return it from the App component, and place all methods and useStates within the App component. Ensure to export the App.
Complete Source Code
App.js:
// Import useState hook from React for state management
import { useState } from "react";
// Import necessary components from react-native
// Import core components from react-native for building UI
import {
View, // Container component for layout
Text, // Component for displaying text
TouchableOpacity, // Button component for touch interactions
StyleSheet // Utility for creating styles
} from "react-native";
// Main App component
const App = () => {
// State to store player's current choice
const [playerVal, setPlayerVal] = useState(null);
// State to store computer's current choice
const [computerVal, setComputerVal] = useState(null);
// State to store player's score
const [playerScore, setPlayerScore] = useState(0);
// State to store computer's score
const [compScore, setCompScore] = useState(0);
// Function to determine the winner
const logic = (playerVal, computerVal) => {
// If both choices are the same, it's a draw
if (playerVal === computerVal) {
return 0;
// Player wins conditions
} else if (
(playerVal === "ROCK" && computerVal === "SCISSORS") ||
(playerVal === "SCISSORS" && computerVal === "PAPER") ||
(playerVal === "PAPER" && computerVal === "ROCK")
) {
return 1; // Player wins
} else {
return -1; // Computer wins
}
};
// Function to handle player's choice and update state
const decision = (playerChoice) => {
// Array of possible choices
const choices = ["ROCK", "PAPER", "SCISSORS"];
// Randomly select computer's choice
const compChoice =
choices[Math.floor(Math.random() * choices.length)];
// Determine the result using logic function
const val = logic(playerChoice, compChoice);
// If player wins
if (val === 1) {
setPlayerVal(playerChoice); // Update player's choice
setComputerVal(compChoice); // Update computer's choice
setPlayerScore(playerScore + 1); // Increment player's score
// If computer wins
} else if (val === -1) {
setPlayerVal(playerChoice); // Update player's choice
setComputerVal(compChoice); // Update computer's choice
setCompScore(compScore + 1); // Increment computer's score
// If it's a draw
} else {
setComputerVal(compChoice); // Update computer's choice
setPlayerVal(playerChoice); // Update player's choice
}
};
// Render UI
return (
<View style={styles.container}>
{/* Game title */}
<Text style={styles.title}>
Rock, Paper, Scissors Game
</Text>
{/* Buttons for player to choose */}
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => decision("ROCK")} // Player chooses ROCK
>
<Text style={styles.buttonText}>
Rock
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => decision("PAPER")} // Player chooses PAPER
>
<Text style={styles.buttonText}>
Paper
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => decision("SCISSORS")} // Player chooses SCISSORS
>
<Text style={styles.buttonText}>
Scissors
</Text>
</TouchableOpacity>
</View>
{/* Display choices and scores */}
<View style={styles.scoreContainer}>
<Text style={styles.scoreText}>
Your choice: {playerVal}
</Text>
<Text style={styles.scoreText}>
Computer's choice: {computerVal}
</Text>
<Text style={styles.scoreText}>
Your Score: {playerScore}
</Text>
<Text style={styles.scoreText}>
Computer Score: {compScore}
</Text>
</View>
</View>
);
};
// Styles for the components
const styles = StyleSheet.create({
container: {
flex: 1, // Take full height
justifyContent: "center", // Center vertically
alignItems: "center", // Center horizontally
backgroundColor: "#333", // Dark background
color: "#fff", // Text color
},
title: {
fontSize: 28, // Large font size
marginBottom: 20, // Space below title
color: "#4caf50", // Green color
fontWeight: "bold", // Bold text
textTransform: "uppercase", // Uppercase letters
},
buttonContainer: {
flexDirection: "row", // Arrange buttons in a row
justifyContent: "space-between", // Space between buttons
marginVertical: 20, // Vertical margin
},
button: {
backgroundColor: "#4caf50", // Green background
paddingVertical: 12, // Vertical padding
paddingHorizontal: 20, // Horizontal padding
borderRadius: 8, // Rounded corners
marginHorizontal: 10, // Space between buttons
},
buttonText: {
color: "#fff", // White text
fontSize: 18, // Medium font size
fontWeight: "bold", // Bold text
},
scoreContainer: {
marginTop: 20, // Space above scores
alignItems: "center", // Center align
},
scoreText: {
color: "#fff", // White text
fontSize: 16, // Font size
marginBottom: 10, // Space below each score
textAlign: "center", // Centered text
},
});
// Export the App component as default
export default App;
