0
سبد دانلود 0

تگ های موضوع ساخت بازی سنگ کاغذ قیچی در جاوا اسکریپت

ساخت بازی سنگ، کاغذ، قیچی در جاوا اسکریپت: راهنمای کامل و جامع


بازی سنگ، کاغذ، قیچی (Rock, Paper, Scissors) یکی از قدیمی‌ترین و محبوب‌ترین بازی‌های ساده است که در سراسر جهان شناخته شده است. این بازی، با قوانین بسیار ساده، اما در عین حال جذاب، توانسته است جایگاه خاصی در دل میلیون‌ها نفر پیدا کند. توسعه نسخه دیجیتال این بازی در محیط وب، با استفاده از جاوا اسکریپت، یکی از پروژه‌های رایج و مفید برای یادگیری برنامه‌نویسی است. در ادامه، به صورت جامع و مفصل، تمامی مراحل ساخت این بازی را بررسی می‌کنیم، از طراحی اولیه گرفته تا پیاده‌سازی و بهبودهای احتمالی.

هدف از توسعه بازی سنگ، کاغذ، قیچی در جاوا اسکریپت


هدف اصلی، ایجاد یک بازی تعاملی است که کاربران بتوانند به راحتی و با سرعت، بازی را انجام دهند. این بازی باید کاربرپسند باشد، شامل رابط کاربری جذاب و واکنش سریع باشد. همچنین، باید منطق بازی به گونه‌ای باشد که نتیجه تصادفی و عادلانه باشد، و کاربر بتواند نتیجه را به راحتی درک کند. در ضمن، پیاده‌سازی این بازی، فرصت مناسبی است تا مفاهیم مهم و پایه‌ای جاوا اسکریپت، مانند DOM، رویدادها، تصادفی‌سازی و کنترل جریان برنامه، تمرین شوند.

طراحی اولیه و ساختار بازی


در ابتدا، باید تصمیم بگیریم که چه عناصری در بازی وجود داشته باشد. برای این پروژه، عناصر اصلی عبارتند از:
- رابط کاربری (UI): شامل دکمه‌هایی برای انتخاب سنگ، کاغذ و قیچی، و قسمت نمایش نتیجه.
- منطق بازی: شامل تشخیص برنده، ثبت امتیاز و ارائه پیام نهایی.
- تصادفی‌سازی: انتخاب تصادفی رایانه، برای اطمینان از عدالت بازی.
- رویدادها: کلیک بر روی دکمه‌ها، برای شروع بازی.
در ادامه، با ساختار اولیه HTML شروع می‌کنیم، سپس استایل CSS و در نهایت، منطق جاوا اسکریپت را اضافه می‌کنیم.

کد HTML: ساختار پایه


html  

<!DOCTYPE html>

<html lang="fa">

<head>

    <meta charset="UTF-8" />

    <title>سنگ، کاغذ، قیچی در جاوا اسکریپت</title>

    <link rel="stylesheet" href="style.css" />

</head>

<body>

    <h1>بازی سنگ، کاغذ، قیچی</h1>

    <div id="game-container">

        <button id="rock">سنگ</button>

        <button id="paper">کاغذ</button>

        <button id="scissors">قیچی</button>

    </div>

    <div id="result">

        <p>نتیجه بازی اینجا نمایش داده می‌شود.</p>

        <p>نمره شما: <span id="player-score">0</span></p>

        <p>نمره کامپیوتر: <span id="computer-score">0</span></p>

    </div>

    <script src="script.js"></script>

</body>

</html>

در این ساختار، سه دکمه برای انتخاب کاربر و بخش نمایش نتیجه و امتیاز قرار دارد.

استایل CSS: ظاهر زیبای بازی


css  

body {

    font-family: 'Tahoma', sans-serif;

    text-align: center;

    margin: 50px;

}
#game-container {

    margin: 20px 0;

}
button {

    padding: 10px 20px;

    margin: 0 10px;

    font-size: 18px;

    cursor: pointer;

    border-radius: 8px;

    border: none;

    background-color: #3498db;

    color: #fff;

    transition: background-color 0.3s;

}
button:hover {

    background-color: #2980b9;

}
#result {

    margin-top: 30px;

    font-size: 20px;

}

این استایل، ظاهر جذابی به دکمه‌ها و بخش نتیجه می‌دهد و تجربه کاربری را بهبود می‌بخشد.

کد جاوا اسکریپت: منطق بازی و رویدادها


حالا نوبت به نوشتن منطق بازی در فایل `script.js` می‌رسد. در ادامه، مراحل مختلف پیاده‌سازی آورده شده است:
javascript  

// انتخاب عناصر صفحه  

const rockBtn = document.getElementById('rock');

const paperBtn = document.getElementById('paper');

const scissorsBtn = document.getElementById('scissors');
const playerScoreSpan = document.getElementById('player-score');

const computerScoreSpan = document.getElementById('computer-score');

const resultParagraph = document.querySelector('#result p:nth-child(1)');
let playerScore = 0;

let computerScore = 0;
// لیست گزینه‌ها  

const options = ['سنگ', 'کاغذ', 'قیچی'];
// تابع برای انتخاب تصادفی گزینه کامپیوتر  

function getComputerChoice() {

    const randomIndex = Math.floor(Math.random() * options.length);

    return options[randomIndex];

}
// تابع برای تعیین نتیجه  

function determineWinner(playerChoice, computerChoice) {

    if (playerChoice === computerChoice) {

        return 'تساوی';

    }

    if (

        (playerChoice === 'سنگ' && computerChoice === 'قیچی') ||

        (playerChoice === 'کاغذ' && computerChoice === 'سنگ') ||

        (playerChoice === 'قیچی' && computerChoice === 'کاغذ')

    ) {

        return 'بازیکن برنده';

    } else {

        return 'کامپیوتر برنده';

    }

}
// تابع برای بروزرسانی امتیاز و نمایش نتیجه  

function updateScores(winner) {

    if (winner === 'بازیکن برنده') {

        playerScore++;

    } else if (winner === 'کامپیوتر برنده') {

        computerScore++;

    }

    playerScoreSpan.textContent = playerScore;

    computerScoreSpan.textContent = computerScore;

}
// رویداد کلیک برای دکمه‌ها  

function handlePlayerChoice(choice) {

    const computerChoice = getComputerChoice();

    const winner = determineWinner(choice, computerChoice);
// نمایش نتیجه  

    if (winner === 'تساوی') {

        resultParagraph.textContent = `هر دو گزینه ${choice} است. تساوی!`;

    } else if (winner === 'بازیکن برنده') {

        resultParagraph.textContent = `شما ${choice} را انتخاب کردید و کامپیوتر ${computerChoice} را. برنده شدید!`;

    } else {

        resultParagraph.textContent = `شما ${choice} را انتخاب کردید و کامپیوتر ${computerChoice} را. باختید!`;

    }
// بروزرسانی امتیاز  

    updateScores(winner);

}
// افزودن رویدادها  

rockBtn.addEventListener('click', () => handlePlayerChoice('سنگ'));

paperBtn.addEventListener('click', () => handlePlayerChoice('کاغذ'));

scissorsBtn.addEventListener('click', () => handlePlayerChoice('قیچی'));

در این کد، هر زمان کاربر یکی از دکمه‌ها را فشار دهد، بازی آغاز می‌شود، و نتیجه و امتیازات بروزرسانی می‌گردد. از تصادفی‌سازی، مقایسه گزینه‌ها و کنترل جریان بسیار خوب استفاده شده است.

نکات مهم و نکات پیشرفته


در این مرحله، این پروژه پایه‌ای است، اما می‌توان آن را توسعه داد. مثلا، می‌توان:
- اضافه کردن بازی‌های چندنفره: برای رقابت آنلاین.
- ایجاد بخش راهنمای بازی: توضیحات قوانین.
- اضافه کردن انیمیشن‌ها: برای جذاب‌تر کردن رابط کاربری.
- ذخیره نتایج در لوکال استورج: برای پیگیری امتیازات بلندمدت.
- اضافه کردن صدا: برای واکنش‌های بازی.
در کنار این، می‌توانید کد را به صورت مدولار ساخت، از کلاس‌ها استفاده کنید، و از فریمورک‌هایی مانند React یا Vue بهره ببرید. اما نکته مهم، تمرین و تکرار است، به همین دلیل، این پروژه، نقطه شروع عالی برای یادگیری جاوا اسکریپت و توسعه بازی‌های کوچک است.

جمع‌بندی


در این مقاله، به صورت کامل و جامع، ساخت بازی سنگ، کاغذ، قیچی در جاوا اسکریپت را شرح دادیم. از طراحی اولیه، ساخت ساختار HTML، استایل CSS، تا پیاده‌سازی منطق بازی در جاوا اسکریپت، هر بخش به دقت مورد بررسی قرار گرفت. این پروژه، یک نمونه عالی برای تمرین مفاهیم پایه‌ای برنامه‌نویسی و توسعه وب است که می‌تواند به عنوان پایه برای ساخت پروژه‌های پیچیده‌تر مورد استفاده قرار گیرد. با تمرین بیشتر و افزودن امکانات جدید، می‌توان آن را به یک بازی کامل و جذاب تبدیل کرد.
---
Error, Try Again
مشاهده بيشتر