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.
Preview Image:
Prerequisites / Technologies Used:
- Node.js and npm (Node Package Manager)
- React Native CLI
- An Android or iOS emulator or a physical device for testing
Steps to Create the Project:
Step 1: Create a new React Native project:
npx create-expo-app RockPaperScissors
Step 2: Navigate to the project folder:
cd RockPaperScissors
Project Structure:
App.js: The entry point of the app.
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 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.
Example: Code:Here’s a simplified example of a Rock, Paper, Scissors game component in React Native:
Step 3: Open App.js file, open it and paste the source code into it.
Javascript
// App.js import React, { useState } from "react" ; import { View, Text, TouchableOpacity, StyleSheet } from "react-native" ; const App = () => { const [playerVal, setPlayerVal] = useState( null ); const [computerVal, setComputerVal] = useState( null ); const [playerScore, setPlayerScore] = useState(0); const [compScore, setCompScore] = useState(0); const logic = (playerVal, computerVal) => { if (playerVal === computerVal) { return 0; } else if ( (playerVal === "ROCK" && computerVal === "SCISSORS" ) || (playerVal === "SCISSORS" && computerVal === "PAPER" ) || (playerVal === "PAPER" && computerVal === "ROCK" ) ) { return 1; } else { return -1; } }; const decision = (playerChoice) => { const choices = [ "ROCK" , "PAPER" , "SCISSORS" ]; const compChoice = choices[Math.floor(Math.random() * choices.length)]; const val = logic(playerChoice, compChoice); if (val === 1) { setPlayerVal(playerChoice); setComputerVal(compChoice); setPlayerScore(playerScore + 1); } else if (val === -1) { setPlayerVal(playerChoice); setComputerVal(compChoice); setCompScore(compScore + 1); } else { setComputerVal(compChoice); setPlayerVal(playerChoice); } }; return ( <View style={styles.container}> <Text style={styles.title}> Rock, Paper, Scissors Game </Text> <View style={styles.buttonContainer}> <TouchableOpacity style={styles.button} onPress={() => decision( "ROCK" )} > <Text style={styles.buttonText}> Rock </Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={() => decision( "PAPER" )} > <Text style={styles.buttonText}> Paper </Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={() => decision( "SCISSORS" )} > <Text style={styles.buttonText}> Scissors </Text> </TouchableOpacity> </View> <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> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center" , alignItems: "center" , backgroundColor: "#333" , color: "#fff" , }, title: { fontSize: 28, marginBottom: 20, color: "#4caf50" , fontWeight: "bold" , textTransform: "uppercase" , }, buttonContainer: { flexDirection: "row" , justifyContent: "space-between" , marginVertical: 20, }, button: { backgroundColor: "#4caf50" , paddingVertical: 12, paddingHorizontal: 20, borderRadius: 8, marginHorizontal: 10, }, buttonText: { color: "#fff" , fontSize: 18, fontWeight: "bold" , }, scoreContainer: { marginTop: 20, alignItems: "center" , }, scoreText: { color: "#fff" , fontSize: 16, marginBottom: 10, textAlign: "center" , }, }); export default App; |
Step 4: Go to the Terminal and type the following command to run the react native application.
npx expo start
To run on Android:
npx react-native run-android
To run on Ios:
npx react-native run-ios
Output: