کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا چند نمونه از بازی‌های ساده‌ای که با استفاده از **HTML** و **JavaScript** ساخته شده‌اند، معرفی می‌شوند. این پروژه‌ها شامل کد منبع و توضیحات مربوط به هر بازی هستند.
### 1. بازی **شکار مار** (Snake Game)
#### کد HTML:
```html
بازی مار
```
#### کد JavaScript (`snake.js`):
```javascript
const canvas = document.getElementById('snakeGame');
const ctx = canvas.getContext('2d');
const box = 20;
let snake = [{ x: 9 * box, y: 9 * box }];
let direction = '';
let food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowLeft' && direction !== 'RIGHT') {
direction = 'LEFT';
} else if (event.key === 'ArrowUp' && direction !== 'DOWN') {
direction = 'UP';
} else if (event.key === 'ArrowRight' && direction !== 'LEFT') {
direction = 'RIGHT';
} else if (event.key === 'ArrowDown' && direction !== 'UP') {
direction = 'DOWN';
}
});
function draw() {
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < snake.length; i++) {
ctx.fillStyle = (i === 0) ? 'green' : 'white';
ctx.fillRect(snake[i].x, snake[i].y, box, box);
}
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, box, box);
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (direction === 'LEFT') snakeX -= box;
if (direction === 'UP') snakeY -= box;
if (direction === 'RIGHT') snakeX += box;
if (direction === 'DOWN') snakeY += box;
if (snakeX === food.x && snakeY === food.y) {
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
} else {
snake.pop();
}
let newHead = {
x: snakeX,
y: snakeY
};
if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
clearInterval(game);
alert('بازی تمام شد!');
}
snake.unshift(newHead);
}
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;
}
let game = setInterval(draw, 100);
```
### 2. بازی **2048**
#### کد HTML:
```html
بازی 2048
```
#### کد CSS (`style.css`):
```css
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
background-color: #faf8ef;
font-family: Arial, sans-serif;
}
#gameContainer {
text-align: center;
}
#gridContainer {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 5px;
}
.cell {
width: 100px;
height: 100px;
background-color: #eee4da;
text-align: center;
line-height: 100px;
font-size: 24px;
color: #776e65;
}
```
#### کد JavaScript (`2048.js`):
```javascript
const gridContainer = document.getElementById('gridContainer');
const restartBtn = document.getElementById('restartBtn');
let board = Array.from(Array(4), () => Array(4).fill(0));
function drawBoard() {
gridContainer.innerHTML = '';
board.forEach(row => {
row.forEach(cell => {
const div = document.createElement('div');
div.className = 'cell';
div.textContent = cell ? cell : '';
gridContainer.appendChild(div);
});
});
}
function generateNumber() {
const emptyCells = [];
board.forEach((row, rIndex) => {
row.forEach((cell, cIndex) => {
if (cell === 0) emptyCells.push({ r: rIndex, c: cIndex });
});
});
if (emptyCells.length) {
const { r, c } = emptyCells[Math.floor(Math.random() * emptyCells.length)];
board[r][c] = Math.random() < 0.9 ? 2 : 4;
}
}
function restartGame() {
board = Array.from(Array(4), () => Array(4).fill(0));
generateNumber();
generateNumber();
drawBoard();
}
restartBtn.addEventListener('click', restartGame);
document.addEventListener('keydown', (event) => {
// پیاده‌سازی حرکت و ترکیب اعداد
});
restartGame();
```
### 3. بازی **پرنده شاد** (Flappy Bird)
#### کد HTML:
```html
بازی پرنده شاد
```
#### کد JavaScript (`flappyBird.js`):
```javascript
const canvas = document.getElementById('flappyBird');
const ctx = canvas.getContext('2d');
let bird = {
x: 50,
y: 150,
width: 20,
height: 20,
gravity: 0.5,
lift: -10,
velocity: 0
};
let pipes = [];
let frame = 0;
function drawBird() {
ctx.fillStyle = 'yellow';
ctx.fillRect(bird.x, bird.y, bird.width, bird.height);
}
function drawPipes() {
ctx.fillStyle = 'green';
pipes.forEach(pipe => {
ctx.fillRect(pipe.x, 0, pipe.width, pipe.top);
ctx.fillRect(pipe.x, canvas.height - pipe.bottom, pipe.width, pipe.bottom);
});
}
function update() {
bird.velocity += bird.gravity;
bird.y += bird.velocity;
if (bird.y + bird.height >= canvas.height) {
bird.y = canvas.height - bird.height;
bird.velocity = 0;
}
if (bird.y < 0) {
bird.y = 0;
}
if (frame % 90 === 0) {
let top = Math.random() * (canvas.height / 2);
let bottom = canvas.height - top - 100;
pipes.push({ x: canvas.width, top, bottom, width: 30 });
}
pipes.forEach(pipe => {
pipe.x -= 2;
});
if (pipes.length && pipes[0].x < -pipes[0].width) {
pipes.shift();
}
}
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBird();
drawPipes();
update();
frame++;
requestAnimation
Frame(gameLoop);
}
document.addEventListener('keydown', () => {
bird.velocity += bird.lift;
});
gameLoop();
```
### 4. بازی **آتش و آب** (Fire and Water)
#### کد HTML:
```html
بازی آتش و آب
```
#### کد JavaScript (`fireWater.js`):
```javascript
const canvas = document.getElementById('fireWaterGame');
const ctx = canvas.getContext('2d');
let player = {
x: 50,
y: 350,
width: 20,
height: 20,
color: 'blue',
jump: -15,
gravity: 0.5,
velocity: 0
};
let fire = { x: 300, y: 350, width: 20, height: 20, color: 'red' };
function drawPlayer() {
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
}
function drawFire() {
ctx.fillStyle = fire.color;
ctx.fillRect(fire.x, fire.y, fire.width, fire.height);
}
function update() {
player.velocity += player.gravity;
player.y += player.velocity;
if (player.y + player.height >= canvas.height) {
player.y = canvas.height - player.height;
player.velocity = 0;
}
if (player.y < 0) {
player.y = 0;
}
if (player.x < fire.x + fire.width && player.x + player.width > fire.x && player.y < fire.y + fire.height && player.y + player.height > fire.y) {
alert('شما با آتش برخورد کردید!');
resetGame();
}
}
function resetGame() {
player.x = 50;
player.y = 350;
player.velocity = 0;
}
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawFire();
update();
requestAnimationFrame(gameLoop);
}
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowUp') {
player.velocity += player.jump;
}
});
gameLoop();
```
### نتیجه‌گیری
این پروژه‌ها نمونه‌هایی از بازی‌های ساده‌ای هستند که میتوانید با استفاده از HTML و JavaScript بسازید. میتوانید با اضافه کردن ویژگی‌های جدید، طراحی بهتری و بهبود گیم‌پلی، این بازی‌ها را گسترش دهید. این بازی‌ها به شما کمک می‌کند تا با مفاهیم برنامه‌نویسی در جاوااسکریپت، تعاملات کاربری و طراحی بازی‌ها آشنا شوید.
| صفحه قابل مشاهده:
دانلود پروژه بازی **شکار مار* می‌باشد
