Create a Click Shape Game with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a click shape game with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app click-shape-game

with NPM to create our React project.

Create the Click Shape Game

To create the click shape game, we write:

import React, { useState } from "react";

export default function App() {
  const [score, setScore] = useState(0);
  const [circleX, setCircleX] = useState();
  const [circleY, setCircleY] = useState();
  const [timer, setTimer] = useState();

  const onClick = () => {
    setScore((s) => s + 1);
  };

  const start = () => {
    const timer = setInterval(() => {
      setCircleX(Math.floor(Math.random() * window.innerWidth));
      setCircleY(Math.floor(Math.random() * (window.innerHeight - 50) + 50));
    }, 2000);
    setTimer(timer);
  };

  const end = () => {
    clearInterval(timer);
    setScore(0);
    setCircleX(undefined);
    setCircleY(undefined);
  };

  return (
    <div className="App">
      <style>
        {`
        .circle {
          border: 1px solid black;
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        `}
      </style>
      <button onClick={start}>start game</button>
      <button onClick={end}>end game</button>
      <p>score: {score}</p>
      {circleX && circleY && (
        <div
          className="circle"
          style={{
            position: "absolute",
            top: `${circleY}px`,
            left: `${circleX}px`
          }}
          onClick={onClick}
        >
          &nbsp;
        </div>
      )}
    </div>
  );
}

We have the score , circleX , circleY and timer states.

score has the player’s score.

circleX and circleY has the x and y coordinates of the top left corner of the circle.

timer has the timer that’s run to let us set circleX and circleY to random numbers to let us display the circle at random locations.

Next, we define the onClick function to increase the score.

start calls setInterval to run the timer to set circleX and circleY every 2 seconds.

We call setTimer to set timer so that we call clearInterval on it later to end the game.

The end function calls clearInterval to clear the timer and reset all the other states to the initial values.

Below that, we have the style tag to make the circle class have the border-radius properties to make a div become a circle.

The buttons let us start or end the game when we click the buttons.

Then we display the score below that.

And then we display the circles by setting the circleX and circleY as the values of top and left .

We pass the onClick function to the onClick prop to let us increase the score when we click on a circle.

Conclusion

We can create a click shape game easily with React and JavaScript.