کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا چند بازی کلاسیک با استفاده از JavaScript به همراه کد منبع آن‌ها معرفی شده است. این پروژه‌ها می‌توانند برای یادگیری اصول برنامه‌نویسی و ایجاد بازی‌های وب جالب باشند.
### 1. **بازی مار (Snake Game)**
بازی مار یکی از بازی‌های کلاسیک است که در آن بازیکن کنترل یک مار را بر عهده دارد و باید آن را طوری حرکت دهد که به میوه‌ها برسد و طولش افزایش یابد.
#### HTML
```html
بازی مار
بازی مار
امتیاز: 0
```
#### CSS
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.snake-game {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
```
#### JavaScript
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const box = 20;
let snake = [{ x: 9 * box, y: 9 * box }];
let direction = 'RIGHT';
let food = {
x: Math.floor(Math.random() * 20) * box,
y: Math.floor(Math.random() * 20) * box
};
let score = 0;
document.addEventListener('keydown', directionControl);
function directionControl(event) {
if (event.keyCode === 37 && direction !== 'RIGHT') direction = 'LEFT';
else if (event.keyCode === 38 && direction !== 'DOWN') direction = 'UP';
else if (event.keyCode === 39 && direction !== 'LEFT') direction = 'RIGHT';
else if (event.keyCode === 40 && direction !== 'UP') direction = 'DOWN';
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x === array[i].x && head.y === array[i].y) {
return true;
}
}
return false;
}
function drawGame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw the food
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, box, box);
// Draw the snake
for (let i = 0; i < snake.length; i++) {
ctx.fillStyle = (i === 0) ? 'green' : 'lightgreen';
ctx.fillRect(snake[i].x, snake[i].y, box, box);
ctx.strokeStyle = 'black';
ctx.strokeRect(snake[i].x, snake[i].y, box, box);
}
// Snake head position
let snakeX = snake[0].x;
let snakeY = snake[0].y;
// Move the snake
if (direction === 'LEFT') snakeX -= box;
if (direction === 'UP') snakeY -= box;
if (direction === 'RIGHT') snakeX += box;
if (direction === 'DOWN') snakeY += box;
// Check if the snake eats the food
if (snakeX === food.x && snakeY === food.y) {
score++;
document.getElementById('score').textContent = `امتیاز: ${score}`;
food = {
x: Math.floor(Math.random() * 20) * box,
y: Math.floor(Math.random() * 20) * box
};
} else {
// Remove the tail
snake.pop();
}
// Add new head
let newHead = { x: snakeX, y: snakeY };
// Game over conditions
if (snakeX < 0 || snakeX >= canvas.width || snakeY < 0 || snakeY >= canvas.height || collision(newHead, snake)) {
clearInterval(game);
alert('بازی تمام شد! امتیاز شما: ' + score);
return;
}
snake.unshift(newHead);
}
let game = setInterval(drawGame, 100);
function restartGame() {
score = 0;
document.getElementById('score').textContent = `امتیاز: ${score}`;
snake = [{ x: 9 * box, y: 9 * box }];
direction = 'RIGHT';
food = {
x: Math.floor(Math.random() * 20) * box,
y: Math.floor(Math.random() * 20) * box
};
clearInterval(game);
game = setInterval(drawGame, 100);
}
```
---
### 2. **بازی 2048**
بازی 2048 یک بازی پازل معروف است که در آن بازیکن سعی می‌کند با ترکیب کاشی‌ها به عدد 2048 برسد.
#### HTML
```html
بازی 2048
بازی 2048
امتیاز: 0
```
#### CSS
```css
body {
font-family: Arial, sans-serif;
background-color: #faf8ef;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.game-container {
text-align: center;
}
#board {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 10px;
margin: 20px auto;
}
.tile {
width: 100px;
height: 100px;
background-color: #eee4da;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
color: #776e65;
border-radius: 5px;
}
```
#### JavaScript
```javascript
const board = document.getElementById('board');
const scoreDisplay = document.getElementById('score');
let score = 0;
let tiles = [];
// Initialize the board
function initBoard() {
tiles = [];
score = 0;
scoreDisplay.textContent = `امتیاز: ${score}`;
board.innerHTML = '';
for (let i = 0; i < 16; i++) {
const tile = document.createElement('div');
tile.classList.add('tile');
board.appendChild(tile);
tiles.push(tile);
}
generateTile();
generateTile();
}
// Generate a new tile
function generateTile() {
const emptyTiles = tiles.filter(tile => !tile.textContent);
const randomIndex = Math.floor(Math.random() * emptyTiles.length);
const randomTile = emptyTiles[randomIndex];
randomTile.textContent = Math.random() < 0.9 ? 2 : 4;
updateTileColors();
}
// Update tile colors based on their values
function updateTileColors() {
tiles.forEach(tile => {
const value = tile.textContent;
tile.style.backgroundColor = getColor(value);
});
}
// Get color based on tile value
function getColor(value) {
if (!value) return '#eee4da';
switch (parseInt(value)) {
case 2: return '#eee4da';
case 4: return '#ede0c8';
case 8: return '#f2b179';
case 16: return '#f59563';
case 32: return '#f67c5f';
case 64: return '#f7633b';
case 128: return '#edcf72';
case 256: return '#edcc61';
case 512: return '#edc850';
case 1024: return '#edc53f';
case 2048: return '#edc22e';
default: return '#3c3a32';
}
}
// Handle keydown events
document.addEventListener('keydown', event => {
if (event.key === 'ArrowUp') {
moveTiles('up');
} else if (event.key
=== 'ArrowDown') {
moveTiles('down');
} else if (event.key === 'ArrowLeft') {
moveTiles('left');
} else if (event.key === 'ArrowRight') {
moveTiles('right');
}
});
// Move tiles in a direction
function moveTiles(direction) {
let moved = false;
// Implement logic to move tiles and combine them based on the direction
if (moved) {
generateTile();
}
}
// Restart the game
function restartGame() {
initBoard();
}
initBoard();
```
### نتیجه‌گیری
این بازی‌ها نمونه‌هایی از پروژه‌های کلاسیک هستند که می‌توانند به شما کمک کنند تا مهارت‌های برنامه‌نویسی خود را تقویت کنید. میتوانید این پروژه‌ها را گسترش دهید یا ویژگی‌های جدیدی به آن‌ها اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه بازی کلاسیک مار با استفاده از JavaScript می‌باشد
