مرجع تخصصی پروژه ها و فایل ها

جزئیات محصول

دانلود پروژه ساخت بازی 2048 با استفاده از ReactJS

دانلود پروژه ساخت بازی 2048 با استفاده از ReactJS

قیمت: 80,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

 کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش  سایر  بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد


ساخت بازی 2048 با استفاده از ReactJS یک پروژه جذاب و آموزشی است که به شما امکان می‌دهد تا با مفاهیم برنامه‌نویسی وب، مدیریت وضعیت و استفاده از مفاهیم ریاضی آشنا شوید. در این پروژه، هدف بازی ترکیب اعداد مشابه برای رسیدن به عدد 2048 است. در ادامه، نحوه ساخت این بازی و کد منبع آن ارائه شده است.
 
### توضیحات پروژه:
بازی 2048 شامل یک صفحه مربعی است که در آن اعداد به طور تصادفی ظاهر می‌شوند. کاربر با استفاده از کلیدهای جهت‌دار می‌تواند اعداد را جابجا کرده و ترکیب کند تا به عدد 2048 برسد.
 
### ویژگی‌های اصلی پروژه:
1. **تولید اعداد تصادفی**: در هر بار حرکت، عدد جدیدی در صفحه ظاهر می‌شود.
2. **ترکیب اعداد**: اعداد مشابه می‌توانند با هم ترکیب شوند.
3. **پیشرفت بازی**: امتیاز بازیکن محاسبه و نمایش داده می‌شود.
4. **بازی دوباره**: امکان راه‌اندازی دوباره بازی پس از پایان آن.
 
### کد منبع نمونه:
 
#### ۱. ایجاد پروژه React
ابتدا یک پروژه جدید React با استفاده از Create React App بسازید:
```bash
npx create-react-app game-2048
cd game-2048
```
 
#### ۲. کد `App.js`
فایل `App.js` را با کد زیر جایگزین کنید:
 
```javascript
import React, { useState, useEffect } from 'react';
import './App.css';
 
const getEmptyBoard = () => Array(4).fill().map(() => Array(4).fill(0));
 
const App = () => {
  const [board, setBoard] = useState(getEmptyBoard());
  const [score, setScore] = useState(0);
  const [gameOver, setGameOver] = useState(false);
 
  const newGame = () => {
    setBoard(getEmptyBoard());
    setScore(0);
    setGameOver(false);
    addRandomNumber();
    addRandomNumber();
  };
 
  const addRandomNumber = () => {
    const emptyCells = [];
    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 4; j++) {
        if (board[i][j] === 0) {
          emptyCells.push({ x: i, y: j });
        }
      }
    }
 
    if (emptyCells.length > 0) {
      const { x, y } = emptyCells[Math.floor(Math.random() * emptyCells.length)];
      const newBoard = [...board];
      newBoard[x][y] = Math.random() < 0.5 ? 2 : 4;
      setBoard(newBoard);
    }
  };
 
  const handleKeyPress = (event) => {
    if (gameOver) return;
    switch (event.key) {
      case 'ArrowUp':
        move('up');
        break;
      case 'ArrowDown':
        move('down');
        break;
      case 'ArrowLeft':
        move('left');
        break;
      case 'ArrowRight':
        move('right');
        break;
      default:
        break;
    }
  };
 
  const move = (direction) => {
    let newBoard = [...board];
    let moved = false;
 
    const mergeTiles = (rowOrCol) => {
      for (let i = 0; i < rowOrCol.length; i++) {
        if (rowOrCol[i] === 0) return;
        for (let j = i + 1; j < rowOrCol.length; j++) {
          if (rowOrCol[j] === 0) continue;
          if (rowOrCol[i] === rowOrCol[j]) {
            newBoard[i] = rowOrCol[i] * 2;
            setScore((prevScore) => prevScore + rowOrCol[i] * 2);
            rowOrCol[i] = 0;
            moved = true;
            break;
          }
          break;
        }
      }
    };
 
    if (direction === 'left' || direction === 'right') {
      for (let i = 0; i < 4; i++) {
        const row = newBoard[i];
        const originalRow = [...row];
        if (direction === 'left') {
          mergeTiles(row);
        } else {
          row.reverse();
          mergeTiles(row);
          row.reverse();
        }
        if (JSON.stringify(originalRow) !== JSON.stringify(row)) {
          moved = true;
        }
      }
    } else {
      for (let j = 0; j < 4; j++) {
        const col = newBoard.map(row => row[j]);
        const originalCol = [...col];
        if (direction === 'up') {
          mergeTiles(col);
        } else {
          col.reverse();
          mergeTiles(col);
          col.reverse();
        }
        for (let i = 0; i < 4; i++) {
          newBoard[i][j] = col[i];
        }
        if (JSON.stringify(originalCol) !== JSON.stringify(col)) {
          moved = true;
        }
      }
    }
 
    if (moved) {
      setBoard(newBoard);
      addRandomNumber();
    }
 
    checkGameOver(newBoard);
  };
 
  const checkGameOver = (newBoard) => {
    const hasEmptyCells = newBoard.some(row => row.includes(0));
    const canMerge = newBoard.some((row, i) => row.some((cell, j) => {
      if (i < 3 && cell === newBoard[i + 1][j]) return true;
      if (j < 3 && cell === row[j + 1]) return true;
      return false;
    }));
 
    if (!hasEmptyCells && !canMerge) {
      setGameOver(true);
    }
  };
 
  useEffect(() => {
    newGame();
  }, []);
 
  useEffect(() => {
    window.addEventListener('keydown', handleKeyPress);
    return () => {
      window.removeEventListener('keydown', handleKeyPress);
    };
  }, [board, gameOver]);
 
  return (
   
     

بازی 2048

     
امتیاز: {score}
     
        {board.map((row, rowIndex) => (
         
            {row.map((cell, colIndex) => (
             
                {cell !== 0 ? cell : ''}
             
            ))}
         
        ))}
     
      {gameOver && (
       
         

بازی تمام شد!

         
       
      )}
   
  );
};
 
export default App;
```
 
#### ۳. کد `App.css`
فایل `App.css` را برای استایل بازی به صورت زیر تنظیم کنید:
 
```css
body {
  font-family: Arial, sans-serif;
  background-color: #faf8ef;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
 
.game {
  text-align: center;
}
 
.grid {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-gap: 10px;
  margin: 20px auto;
}
 
.row {
  display: contents;
}
 
.cell {
  width: 100px;
  height: 100px;
  background-color: #eee4da;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  color: #776e65;
  border-radius: 5px;
}
 
.cell-2 {
  background-color: #eee4da;
}
 
.cell-4 {
  background-color: #ede0c8;
}
 
.cell-8 {
  background-color: #f2b179;
}
 
.cell-16 {
  background-color: #f59563;
}
 
.cell-32 {
  background-color: #f67c5f;
}
 
.cell-64 {
  background-color: #f67c5f;
}
 
.cell-128 {
  background-color: #f9e79f;
  color: white;
}
 
.cell-256 {
  background-color: #f39c12;
  color: white;
}
 
.cell-512 {
  background-color: #e67e22;
  color: white;
}
 
.cell-1024 {
  background-color: #d35400;
  color: white;
}
 
.cell-2048 {
  background-color: #c0392b;
  color: white;
}
 
.score {
  font-size: 1.5rem;
  margin: 10px 0;
}
 
.game-over {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 20px;
  border-radius: 10px;
}
```
 
### نحوه اجرای پروژه:
1. به دایرکتوری پروژه بروید:
   ```bash
   cd game-2048
  
 
 ```
2. برنامه را با دستور زیر اجرا کنید:
   ```bash
   npm start
   ```
 
### نتیجه‌گیری:
این پروژه یک بازی 2048 ساده است که به شما کمک می‌کند تا با مفاهیم پایه‌ای React، مدیریت وضعیت و روش‌های برنامه‌نویسی بازی آشنا شوید. شما می‌توانید با اضافه کردن ویژگی‌های جدید مانند صداها، انیمیشن‌ها یا بهبود طراحی، این بازی را گسترش دهید.
| صفحه قابل مشاهده: دانلود پروژه ساخت بازی 2048 با استفاده از ReactJS می‌باشد