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:

rock paper scissors

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.

project structure

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: