Skip to content

Weather Application using ReactJS

15 Puzzle Game using ReactJS

Last Updated : 25 Jul, 2024

In this article, we will create the 15 Puzzle Game using ReactJS. 15 puzzle game is basically a tile-based game in which there are 16 tiles out of which 1 tile is left empty and the remaining tiles are filled with numbers from 1 to 15 in random order. The user has to arrange all the tiles in numerical order with the rule that they can only move the tile that is a direct neighbor of the empty tile.

In this project, we have basically used React Functional Components and used React hooks like useState, useEffect, etc. The player can drag the tile from its position to a neighboring empty position. The logic of dragging and winning is implemented using JSX.

Let’s have a look at what our final project will look like:

15 Puzzle Game

Technologies Used/Pre-requisites:

Approach:

Containers are Stateful React components (class Based). Components are Stateless React Components (function based). In this project, I have used components (function based) and to make them stateful, I used hooks in ReactJs like useState, useEffect etc.

Project Structure:

folder_structure

Steps:

1. Set up React project using the command

npx create-react-app <name of project>

2. Navigate to the project folder using

cd <name_of_project>

3. Create a folder named "components" for storing the components and a folder named "utils" where we'll create the utility function to randomly create an array of numbers. Inside the "components" folder, add 4 files namely "Game.js", "Puzzle.js", "Tile.js", "Timer.js" and inside the "utils" folder create a file named "shuffleFunction.js".

4. To add tailwindcss in your project, add the following script tag in the "index.html".

<script src="https://cdn.tailwindcss.com"></script>

Write the following code in different files (The name of the files is mentioned in the first line of each code block)

Examples:

index.html: Automatically created file where we need to import the tailwindcss tag.
index.js: Automatically created which React uses for final rendering.
App.js: This file imports the Game component and exports it.
Game.js: This file container the overall logic of the game and all the required components.
Puzzle.js: This file contains the component for the puzzle game.
Tile.js: This file contains two components namely "EmptyTile" and "FilledTile" used inside Puzzle.js to render tiles.
Timer.js: This file contains the logic for the timer and renders the time.
shuffleFunction.js: This file contains the logic for shuffling the array from 1 to 16 where 16th position is empty string and return the shuffled array.

HTML

<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> 	<meta charset="utf-8" /> 	<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 	<meta name="viewport" content="width=device-width, initial-scale=1" /> 	<meta name="theme-color" content="#000000" /> 	<meta 	name="description" 	content="Web site created using create-react-app" 	/> 	<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 	<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 	<title>Project | 15 Puzzle Game</title> 	<script src="https://cdn.tailwindcss.com"></script> </head> <body> 	<noscript>You need to enable JavaScript to run this app.</noscript> 	<div id="root"></div> </body> </html>

JavaScript

// index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App';  const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> 	<App /> </React.StrictMode> );

JavaScript

// App.js import Game from "./components/Game"; export default function App() { return <Game /> }

JavaScript

// Game.js import { useEffect, useState } from "react"; import shuffleArray from "../utils/shuffleFunction"; import Puzzle from "./Puzzle"; import Timer from "./Timer";  export default function Game() { const [shuffledArray, setShuffledArray] = useState(shuffleArray()); const [moves, setMoves] = useState(0); const [time, setTime] = useState(0); const [timerActive, setTimerActive] = useState(false); const [win, setWin] = useState(false);  useEffect(() => { 	if (moves === 1) setTimerActive(true); 	let won = true; 	for (let i = 0; i < shuffledArray.length - 1; i++) { 	const value = shuffledArray[i]; 	if (i == value - 1) continue; 	else { 		won = false; 		break; 	} 	} 	if (won) { 	setWin(true); 	setTimerActive(false); 	} 	return; }, [moves]);  const newGame = () => { 	setMoves(0); 	setTimerActive(false); 	setTime(0); 	setShuffledArray(shuffleArray()); 	setWin(false); };  const dragStart = (e) => e.dataTransfer.setData("tile", e.target.id);  const dragOver = (e) => e.preventDefault();  const dropped = (e) => { 	e.preventDefault(); 	const tile = e.dataTransfer.getData("tile"); 	const oldPlace = Number(document.getElementById(tile).parentElement.id.slice(6)) - 1; 	const newPlace = Number(e.target.id.slice(6)) - 1;  	if (!(Math.abs(oldPlace - newPlace) == 4 || Math.abs(oldPlace - newPlace) == 1)) return;  	const [i, j] = [Math.min(oldPlace, newPlace), Math.max(oldPlace, newPlace)]; 	setShuffledArray([ 	...shuffledArray.slice(0, i), 	shuffledArray[j], 	...shuffledArray.slice(i + 1, j), 	shuffledArray[i], 	...shuffledArray.slice(j + 1), 	]); 	setMoves(moves + 1); };  return ( 	<div className="h-screen flex text-gray-300 bg-gray-950"> 	<div className="mx-auto mt-8"> 		{win && ( 		<div className="rounded-md border-l-4 border-green-500 bg-green-100 p-2 mb-2"> 			<div className="flex items-center justify-center space-x-4"> 			<p className="font-medium text-green-600"> 				HURRAY!! You have won the game  			</p> 			</div> 		</div> 		)} 		<h1 className="text-3xl text-emerald-600 font-bold text-center"> 		GeeksforGeeks 		</h1> 		<h3 className="text-xl font-bold          text-center bg-clip-text          text-transparent bg-gradient-to-r          from-indigo-500 from-10% via-sky-500          via-30% to-emerald-500 to-90%"> 		15 Puzzle Game 		</h3> 		<div className="flex justify-between px-6 mt-2"> 		<p>Moves: {moves}</p> 		<Timer time={time} timerActive={timerActive} setTime={setTime} /> 		</div> 		<Puzzle shuffledArray={shuffledArray}          		dragStart={dragStart}          		dragOver={dragOver} dropped={dropped}/> 		<div className="px-6 mt-4"> 		<button 			onClick={newGame} 			className="text-black font-bold block              bg-gray-900 p-2 rounded w-full              h-full bg-gradient-to-r from-indigo-500              from-10% via-sky-500 via-30% to-emerald-500 to-90%" 		> 			New Game 		</button> 		</div> 	</div> 	</div> ); }

JavaScript

// Puzzle.js  import { FilledTile, EmptyTile } from "./Tile";  export default function Puzzle({ shuffledArray, dragOver, dragStart, dropped }){ 	return ( 		<div className="grid grid-cols-4 gap-8 mt-6 px-6 rounded"> 		{shuffledArray.map((value, index) => { 		if (value === "") 			return ( 			<EmptyTile dragOver={dragOver} dropped={dropped} index={index} /> 			); 		return ( 			<FilledTile index={index} value={value} dragStart={dragStart} /> 		); 		})} 	</div> 	) }

JavaScript

// Tile.js  export function FilledTile({index, value, dragStart}) { return ( 	<div 	id={`place-${index + 1}`} 	className={ 		"shadow w-20 h-20 rounded " + 		(index == value - 1 		? "bg-gradient-to-r from-pink-500 to-yellow-500" 		: "bg-gray-900") 	} 	> 	<p 		id={`tile-${value}`} 		draggable="true" 		onDragStart={dragStart} 		className="fw-bold text-xl          grid grid-cols-1 place-items-center          w-20 h-20 rounded cursor-pointer          hover:bg-gray-800" 	> 		{value} 	</p> 	</div> ); }  export function EmptyTile({dragOver, dropped, index}) { return ( 	<div 	onDragOver={dragOver} 	onDrop={dropped} 	id={`place-${index + 1}`} 	className="bg-gray-900 shadow w-20 h-20 rounded" 	></div> ); }

JavaScript

// Timer.js  import { useEffect } from "react";  export default function Timer({ time, setTime, timerActive }) { useEffect(() => { 	let interval = null; 	if (timerActive) 	interval = setInterval(() => { 		setTime((time) => time + 1); 	}, 1000); 	else clearInterval(interval); 	return () => { 	clearInterval(interval); 	}; }, [timerActive]);  return <p>Time: {time}s</p>; }

JavaScript

// shuffleFunction.js  export default function shuffleArray() { let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, ""]; for (let i = array.length - 1; i > 0; i--) { 	let j = Math.floor(Math.random() * (i + 1)); 	[array[i], array[j]] = [array[j], array[i]]; } return array; }

Steps to run the application:

1. Type the following command in the terminal:

npm start

2. Open the following URL in the web browser:

http://localhost:3000/

Output:

Weather Application using ReactJS

mycodenotein

Improve

Article Tags :

Similar Reads

BMI Calculator Using React

In this article, we will create a BMI Calculator application using the ReactJS framework. A BMI calculator determines the relationship between a person's height and weight. It provides a numerical value that categorizes the individual as underweight, normal weight, overweight, or obese. Output Previ

Create Rock Paper Scissor Game using ReactJS

In this article, we will create Rock, Paper, Scissors game using ReactJS. This project basically implements class components and manages the state accordingly. The player uses a particular option from Rock, Paper, or Scissors and then Computer chooses an option randomly. The logic of scoring and win

Create a Form using React JS

Creating a From in React includes the use of JSX elements to build interactive interfaces for user inputs. We will be using HTML elements to create different input fields and functional component with useState to manage states and handle inputs. Prerequisites:Functional ComponentsJavaScript ES6JSXPr

Create a Random Joke using React app through API

In this tutorial, we'll make a website that fetches data (joke) from an external API and displays it on the screen. We'll be using React completely to base this website. Each time we reload the page and click the button, a new joke fetched and rendered on the screen by React. As we are using React f

Nutrition Meter - Calories Tracker App using React

GeeksforGeeks Nutrition Meter application allows users to input the name of a food item or dish they have consumed, along with details on proteins, calories, fat, carbs, etc. Users can then keep track of their calorie intake and receive a warning message if their calorie limit is exceeded. The logic

Currency converter app using ReactJS

In this article, we will be building a very simple currency converter app with the help of an API. Our app contains three sections, one for taking the user input and storing it inside a state variable, a menu where users can change the units of conversion, and finally, a display section where we dis

Lap Memory Stopwatch using React

Stopwatch is an application which helps to track time in hours, minutes, seconds, and milliseconds. This application implements all the basic operations of a stopwatch such as start, pause and reset button. It has an additional feature using which we can keep a record of laps which is useful when we

Typing Speed Tester using React

In this article, we will create a Typing Speed Tester that provides a random paragraph for the user to type as accurately and quickly as possible within a fixed time limit of one minute. This application also displays the time remaining, counts mistakes calculates the words per minute and characters

Number Format Converter using React

In this article, we will create Number Format Converter, that provides various features for users like to conversion between decimal, binary, octal and hexadecimal representations. Using functional components and state management, this program enables users to input a number and perform a range of c

Create a Password Validator using ReactJS

Password must be strong so that hackers can not hack them easily. The following example shows how to check the password strength of the user input password in ReactJS. We will use the validator module to achieve this functionality. We will call the isStrongPassword function and pass the conditions a