کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ایجاد یک بازی پنالتی شوت‌اوت (Penalty Shootout) با استفاده از JavaScript یک پروژه جالب و سرگرم‌کننده است. در این بازی، بازیکن تلاش می‌کند تا توپ را به سمت دروازه شوت کند و دروازه‌بان سعی می‌کند توپ را مهار کند. در ادامه، نحوه ساخت یک بازی پنالتی شوت‌اوت همراه با کد منبع آن توضیح داده می‌شود.
### ویژگی‌های بازی پنالتی شوت‌اوت
1. **شوت کردن به سمت دروازه**: بازیکن با فشردن کلید «Space» شوت می‌کند.
2. **دروازه‌بان**: دروازه‌بان به‌صورت تصادفی در سمت راست یا چپ دروازه قرار می‌گیرد.
3. **امتیازدهی**: بازیکن می‌تواند امتیاز کسب کند و تعداد شوت‌های موفق را مشاهده کند.
4. **پایان بازی**: بعد از تعدادی شوت مشخص، بازی به پایان می‌رسد و امتیاز نهایی نمایش داده می‌شود.
### ساختار فایل‌های پروژه
برای ساخت این بازی، به فایل‌های زیر نیاز داریم:
1. `index.html` - برای ساختار صفحه.
2. `style.css` - برای استایل‌دهی صفحه.
3. `script.js` - برای منطق بازی با استفاده از JavaScript.
### ۱. فایل HTML (`index.html`)
این فایل ساختار صفحه اصلی بازی را ایجاد می‌کند:
```html
بازی پنالتی شوت‌اوت
بازی پنالتی شوت‌اوت
```
### ۲. فایل CSS (`style.css`)
این فایل برای استایل‌دهی و زیباسازی ظاهر بازی استفاده می‌شود:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
.container {
max-width: 400px;
margin: auto;
text-align: center;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.game-area {
position: relative;
width: 100%;
height: 200px;
border: 2px solid #333;
overflow: hidden;
background: #a3d5a3;
}
.goalkeeper {
position: absolute;
width: 50px;
height: 80px;
background-color: #ff0000;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.ball {
position: absolute;
width: 30px;
height: 30px;
background-color: #000;
border-radius: 50%;
bottom: 20px;
left: calc(50% - 15px);
transition: bottom 0.5s, left 0.5s;
}
```
### ۳. فایل JavaScript (`script.js`)
این فایل شامل منطق بازی با استفاده از JavaScript است:
```javascript
let score = 0;
let attempts = 0;
const maxAttempts = 5;
let gameActive = false;
document.getElementById('startBtn').addEventListener('click', startGame);
document.addEventListener('keydown', shoot);
function startGame() {
score = 0;
attempts = 0;
gameActive = true;
document.getElementById('score').innerText = 'امتیاز: 0';
document.getElementById('message').innerText = '';
document.querySelector('.ball').style.bottom = '20px';
moveGoalkeeper();
}
function shoot(event) {
if (event.code === 'Space' && gameActive) {
attempts++;
const ball = document.querySelector('.ball');
ball.style.bottom = '100px'; // شوت به سمت بالا
const goalkeeperPosition = document.querySelector('.goalkeeper').style.left;
const ballPosition = parseInt(ball.style.left) + 15; // وسط توپ
setTimeout(() => {
if (goalkeeperPosition === '' || (ballPosition < parseInt(goalkeeperPosition) || ballPosition > parseInt(goalkeeperPosition) + 50)) {
score++;
document.getElementById('score').innerText = 'امتیاز: ' + score;
document.getElementById('message').innerText = 'گل!';
} else {
document.getElementById('message').innerText = 'دروازه‌بان گرفت!';
}
ball.style.bottom = '20px'; // برگرداندن توپ
if (attempts >= maxAttempts) {
endGame();
} else {
moveGoalkeeper();
}
}, 500);
}
}
function moveGoalkeeper() {
const goalkeeper = document.querySelector('.goalkeeper');
const randomPosition = Math.random() * 100; // موقعیت تصادفی دروازه‌بان
goalkeeper.style.left = randomPosition + '%';
}
function endGame() {
gameActive = false;
document.getElementById('message').innerText = 'بازی تمام شد! امتیاز نهایی: ' + score;
}
```
### نحوه اجرای پروژه
1. سه فایل `index.html`، `style.css` و `script.js` را در یک پوشه قرار دهید.
2. فایل `index.html` را در مرورگر خود باز کنید.
3. بر روی دکمه "شروع بازی" کلیک کنید.
4. با فشردن کلید «Space»، شوت کنید و ببینید که آیا گل می‌زنید یا خیر.
5. پس از پنج شوت، امتیاز نهایی نمایش داده می‌شود.
### نتیجه‌گیری
این بازی پنالتی شوت‌اوت یک پروژه ساده و سرگرم‌کننده است که می‌تواند به شما کمک کند تا مهارت‌های خود در JavaScript و توسعه وب را تقویت کنید. میتوانید این پروژه را با افزودن ویژگی‌های جدید مانند صدای شوت، تغییرات در طراحی گرافیکی، یا افزودن مراحل مختلف گسترش دهید. این پروژه یک نقطه شروع عالی برای یادگیری و تفریح است!
| صفحه قابل مشاهده:
دانلود پروژه بازی پنالتی شوت‌اوت (Penalty Shootout) با استفاده از JavaScript می‌باشد
