یک بازی اسلات ماشین در جاوا اسکریپت وانیلی ایجاد کنید

چیزی که ما کدگذاری می کنیم

در اینجا نسخه ی نمایشی به پایان رسیده است، تا به شما ایده ای از آنچه ایجاد می کنیم ارائه دهیم:

با رابط کاربری شروع کنید

ما با ایجاد رابط شروع می کنیم. این یک طرح مینیمال خواهد بود که دارای تعادل (چقدر اعتبار برای بازی است) و سه حلقه است.

ظرف کلی اول است، بنابراین یک را اضافه کنید عنصر در فایل html شما

1

 
 class="slot-machine">

2

3

در یک جدید یک را اضافه کنید برای عنوان و الف برای نمایش تعادل

1

 class="header">

2

    Classic Slots

3

    
 class="balance">Balance: $1000

4

مسلما مهمترین بخش بازی اسلات ماشین قرقره ها هستند. قرقره ها موقعیت های عمودی در یک شکاف هستند که هنگام شروع بازی به اطراف می چرخند. a اضافه کنید عنصری که حاوی قرقره ها باشد.

1

 
 class="reels-container">

2

3

 
 />

ظرف دارای سه قرقره خواهد بود که هر حلقه دارای سه علامت است. ما از ایموجی ها برای این موارد استفاده می کنیم، بنابراین از هر چیزی که دوست دارید استفاده کنید:

1

 class="reels-container">

2

    
 class="reel">

3

      
 class="symbol">🍒

4

      
 class="symbol">🔔

5

      
 class="symbol">🍋

6

7

    
 class="reel">

8

      
 class="symbol">🍒

9

      
 class="symbol">🔔

10

      
 class="symbol">🍋

11

12

    
 class="reel">

13

      
 class="symbol">🍒

14

      
 class="symbol">🔔

15

      
 class="symbol">🍋

16

17

در آخر، ما به دکمه شروع بازی نیاز داریم و یک پیام GOOD LUCK با علامت نمایش داده می شود برچسب زدن

1

 class="controls">

2

     class="spin_btn">SPIN

3

    
 class="message">Good Luck!

4

سبک بازی اسلات ماشین

با تکمیل ساختار، بیایید به آن یک ظاهر طراحی کنیم. برای عنوان شیک به یک فونت سفارشی از Google Fonts به اضافه فونت دیگری برای پیام ها نیاز داریم.

در فایل CSS خود، این را در بالا اضافه کنید.

1

import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");

2

@import url(\'https://fonts.googleapis.com/css2?family=Ultra&display=swap\');

در مرحله بعد، از flex برای تراز کردن همه چیز در مرکز، افقی و عمودی استفاده کنید. همچنین، فونت جهانی و رنگ پس زمینه را اضافه کنید.

1

body {

2

    background: #121212;

3

    display: flex;

4

    justify-content: center;

5

    align-items: center;

6

    height: 100vh;

7

    font-family: "DM Mono", monospace;

8

}

این سبک های اضافی را اضافه کنید تا مطمئن شوید که محتوای سرصفحه به طور مناسبی استایل بندی شده اند و تمام محتوا تراز شده است.

1

.slot-machine {

2

    text-align: center;

3

  }

4

  .header {

5

    margin-bottom: 20px;

6

    padding: 10px;

7

  }

8

  .header h1 {

9

    font-family: "Ultra", serif;

10

    font-size: 6em;

11

    line-height: .9;

12

    margin: 0;

13

    color: #ebb701;

14

    max-width: 10ch;

15

  }

16

  .header p {

17

    font-size: 1.2em;

18

    margin-top: 10px;

19

    color: white;

20

  }

تا اینجا ما این را داریم:

مرحله بعدی اضافه کردن سبک به حلقه ها برای ایجاد سه ستون است:

1

.reels-container {

2

    display: flex;

3

    justify-content: center;

4

    align-items: center;

5

    height: 60%;

6

  }

7

  .reel {

8

    display: block;

9

    width: 130px;

10

    height: 210px;

11

    background-color: #3a3a3a;

12

    border-radius: 15px;

13

    overflow: hidden;

14

    margin: 0 10px;

15

    box-shadow: 0px 14px 15px -5px rgba(0,0,0,0.3) inset,

16

      1px -14px 15px -5px rgba(0,0,0,0.3) inset;

17

    border: 2px solid rgba(255,255,255,0.2);

18

    position: relative;

19

  }

در استایل های بالا اضافه کرده ایم نمایش: فلکس روی محفظه قرقره که تضمین می کند قرقره ها با ستون ها هماهنگ هستند. علاوه بر این، ما برای وسط قرقره ها استفاده کرده ایم justify-content: center; و align-items: center;.

برای هر قرقره، عرض و ارتفاع سفارشی و چند ویژگی دیگر مانند box-shadow, background-color, و border-radius تا جذاب تر شود

ما نیز تعدادی را اضافه کرده ایم margin برای اطمینان از فاصله قرقره ها در ظرف.

نمادها دارای سبک های زیر خواهند بود.

1

.symbol {

2

    font-size: 3em;

3

    height: 1.5em;

4

    opacity: 0.6;

5

  }

در نهایت، این استایل ها را برای دکمه SPIN و عنصر حاوی پیام GOOD LUCK اضافه کنید.

1

.controls .btn {

2

  margin: 3em 0 1em 0;

3

  }

4

.controls .message {

5

  font-size: 1.5em;

6

  color: #ebb701;

7

  }

عناصر را با DOM دریافت کنید

تمام عناصر DOM که نیاز به دستکاری دارند را دریافت کنید. در بالای فایل JS خود این کد را اضافه کنید.

1

const reels = document.querySelectorAll(".reel");

2

const spinButton = document.querySelector(".spin_btn");

3

const messageDisplay = document.querySelector(".message");

4

const reelSound = document.getElementById("reelSound");

5

const winSound = document.getElementById("winSound");

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

1

let reelStates = (

2

  ("🍒", "🍒", "🍒", "🍋", "🍋", "🍉"),

3

  ("🍒", "🍋", "🍋", "🍉", "🍒", "7️⃣"),

4

  ("🍒", "7️⃣", "🍋", "🍒", "🍓", "🍋")

5

);

از آرایه، می توانید ببینید که برخی از نمادها بیشتر از بقیه ظاهر می شوند، این عمدی برای افزایش احتمال برنده شدن است. هر بار که بازیکنی بخواهد این بازی را انجام دهد، موجودی اولیه 1000 دلار خواهد بود و هر زمان که دستگاه اسلات را بچرخاند، مبلغ 10 دلار از موجودی آنها کسر می شود.

این متغیرهای اولیه را تعریف کنید.

1

let spinning = false;

2

let balance = 1000;

3

let betAmount = 10;

ما همچنین یک متغیر اضافه کرده ایم spinning که پیگیری می کند که آیا بازی در حال چرخش است یا خیر. مقدار اولیه روی false تنظیم می شود (یعنی نمی چرخد).

برای به روز رسانی موجودی باقیمانده، یک تابع به نام ایجاد کنید updateBalanceDisplay() و کد زیر را اضافه کنید این تابع پس از هر چرخش فراخوانی می شود.

1

function updateBalanceDisplay() {

2

  const balanceDisplay = document.querySelector(".balance");

3

  balanceDisplay.textContent = `Balance: $${balance}`;

4

}

برای شرط بندی یا چرخش بازی، ابتدا باید بررسی کنیم که موجودی کافی است، یعنی موجودی باید بیشتر از مقدار شرط باشد. اگر موجودی بیش از مبلغ شرط باشد، بازیکن فرصتی برای ادامه بازی خواهد داشت. در غیر این صورت پیام را نمایش خواهیم داد "موجودی کافی برای شرط بندی وجود ندارد!".

یک تابع به نام ایجاد کنید placeBet() و این کد را اضافه کنید:

1

function placeBet() {

2

  if (balance >= betAmount) {

3

    balance -= betAmount;

4

    updateBalanceDisplay();

5

6

  } else {

7

    alert("Not enough balance to place a bet!");

8

  }

9

}

یک شنونده رویداد را به دکمه چرخش وصل کنید، به طوری که وقتی کاربر روی دکمه کلیک می کند، آن را فعال کند placeBet() تابع این placeBet() تابع تعادل را به روز می کند و منطق چرخش و برنده شدن را مدیریت می کند.

در حال حاضر، placeBet() تابع فقط تعادل را به روز می کند، ما بقیه منطق را بعداً به روز خواهیم کرد.

قرقره ها را بچرخانید

مهمترین ویژگی دستگاه اسلات قابلیت چرخاندن قرقره است. در حال حاضر سه ستون داریم که هر ستون شامل 3 علامت است. منطق چرخش شامل تزریق نمادهای جدید به هر قرقره، زمانی که چرخش شروع می شود، خواهد بود. یک برد با تطبیق سه نماد در یک ردیف مشخص می شود.

برای تعیین چرخش چرخه یعنی اینکه قرقره قبل از توقف چند بار بچرخد، از این فرمول استفاده می کنیم.

1

const spinCount = 10 + Math.floor(Math.random() * 5);

یک تابع جدید به نام ایجاد کنید spinReel و فرمول را در بالای تابع اضافه کنید. این تابع را خواهد گرفت reel و index به عنوان پارامتر

1

function spinReel(reel, index) {

2

  const spinCount = 10 + Math.floor(Math.random() * 5);

3

4

  }

برای تعیین نقطه شروع، از 0 شروع می کنیم، این مقدار تا مقدار 1 افزایش می یابد spinCount رسیده است. مقدار اولیه را با استفاده از currentSpin و آن را روی 0 قرار دهید. این مقدار با هر چرخش افزایش می یابد تا زمانی که به مقدار آن برسیم spinCount.

1

function spinReel(reel, index) {

2

  const spinCount = 10 + Math.floor(Math.random() * 5);

3

  let currentSpin = 0;

4

}

برای اطمینان از چرخش قرقره ها در فواصل مختلف، ما از آن استفاده می کنیم setInterval() تابع، که یک تابع مشخص شده را به طور مکرر پس از یک بازه زمانی معین اجرا می کند.

برای دستیابی به افکت چرخشی، هر آرایه را از آن دریافت می کنیم realStates (یک آرایه بعدی) و مکان های عناصر را با هم عوض کنید. در همان زمان، عناصر به DOM اضافه می شوند و از این رو یک توهم چرخشی ایجاد می کنند.

یک تابع به نام ایجاد کنید spinReel، اضافه کنید spinCount متغیر، مقداردهی اولیه currentSpin به 0 رسیده و یک بازه زمانی ایجاد کنید که هر 50 میلی ثانیه اجرا شود.

1

function spinReel(reel, index) {

2

  const spinCount = 10 + Math.floor(Math.random() * 5);

3

  let currentSpin = 0;

4

  console.log(spinCount);

5

  const interval = setInterval(() => {}, 50 + index * 50);

6

}

هر آرایه در reelStates آرایه شامل 6 نماد است. برای ایجاد توهم چرخش، آخرین آیتم آرایه را می گیریم و آن را به ابتدا می بریم (یعنی آخرین عنصر را به جلو می چرخانیم).

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

کد داخل را به روز کنید setInterval() مطابق شکل زیر عمل کنید.

1

  const interval = setInterval(() => {

2

    console.log(reelStates(index));

3

    reelStates(0).unshift(reelStates(0).pop());

4

    reel.innerHTML = "";

5

    reelStates(index).forEach((symbol) => {

6

      const symbolDiv = document.createElement("div");

7

      symbolDiv.classList.add("symbol");

8

      symbolDiv.textContent = symbol;

9

      reel.appendChild(symbolDiv);

10

    });

11

    currentSpin++;

12

13

  }, 50 + index * 50);

14

}

بیایید کد بالا را تجزیه کنیم: به عنوان مثال برای index = 0:

• reelstates(index).pop() آخرین عنصر در اولین آرایه را حذف می کند(("🍒"، "🍒"، "🍒"، "🔔"، "🍋"، "🍉") ) و آن را برمی گرداند. آخرین عنصر در این مورد است "🍉. اکنون reelStates(index) تنها 5 مورد دارد.
• reelStates(index).unshift() عنصر برگشتی را اضافه می کند ("🍉) بازگشت به آرایه در ابتدای آرایه. این فرآیند حذف و افزودن عناصر به آرایه هر 50 میلی ثانیه به اضافه یک مقدار تلنگر اضافی بر اساس شاخص حلقه اتفاق می افتد.
• پس از به روز رسانی هر آرایه، DOM را نیز برای شبیه سازی افکت چرخش به روز می کنیم. سپس مقدار چرخش را افزایش می دهیم و یک چرخش بی نهایت ایجاد می کنیم.

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

کد را به صورت زیر به روز کنید:

1

function spinReel(reel, index) {

2

  const spinCount = 10 + Math.floor(Math.random() * 5);

3

  let currentSpin = 0;

4

  console.log(spinCount);

5

  const interval = setInterval(() => {

6

    reelStates(index).unshift(reelStates(index).pop());

7

    reel.innerHTML = "";

8

    reelStates(index).forEach((symbol) => {

9

      const symbolDiv = document.createElement("div");

10

      symbolDiv.classList.add("symbol");

11

      symbolDiv.textContent = symbol;

12

      reel.appendChild(symbolDiv);

13

    });

14

    currentSpin++;

15

    if (currentSpin >= spinCount) {

16

      clearInterval(interval);

17

      if (index === reels.length - 1) {

18

        spinning = false;

19

20

21

      }

22

    }

23

  }, 50 + index * 50);

24

}

این spinReel() عملکرد فقط برای یک حلقه کار می کند. به جای اینکه تابع را سه بار فراخوانی کنید، یک تابع به نام ایجاد کنید spinReels که تمام قرقره ها را می چرخاند.

1

function spinReels() {

2

    if (spinning) return;

3

    spinning = true;

4

    reelSound.play();

5

    messageDisplay.textContent = "Spinning.........";

6

    reels.forEach((reel, index) => {

7

      spinReel(reel, index);

8

    });

9

  }

در این تابع، ابتدا بررسی می کنیم که آیا قرقره ها از قبل با متغیر چرخش در حال چرخش هستند یا خیر. اگر قرقره ها در حال چرخش باشند، هیچ اقدام دیگری رخ نخواهد داد و عملکرد به نقطه باز می گردد. اگر قرقره ها در حال چرخش هستند، متغیر چرخش را روی true تنظیم می کنیم، یک پیام نمایش می دهیم و تمام قرقره ها را می چرخانیم در حالی که reelSound صدا در حال پخش است که نشان می دهد قرقره ها در حال چرخش هستند.

در placeBet() تابع، تماس بگیرید spinReels() به گونه ای عمل کنید که وقتی دکمه کلیک می شود، قرقره ها شروع به چرخش می کنند.

1

function placeBet() {

2

    if (balance >= betAmount) {

3

      balance -= betAmount;

4

      updateBalanceDisplay();

5

      spinReels();

6

    } else {

7

      alert("Not enough balance to place a bet!");

8

    }

9

  }

برای پیروزی بررسی کنید

در یک ماشین اسلات، اگر بازیکنی نمادها را پشت سر هم مطابقت دهد، بازی یک برد محسوب می شود. بیایید این منطق را پیاده کنیم. پس از توقف قرقره ها، نمادهای نمایش داده شده در حال حاضر برای 2 ردیف اول را دریافت می کنیم، سپس بررسی می کنیم که آیا یک جفت مطابق در سراسر صفحه وجود دارد یا خیر. اگر مسابقه ای پیدا شد، موجودی را به روز می کنیم و صدای برنده را پخش می کنیم.

با این حال، اگر هیچ علامت منطبقی در یک ردیف رخ ندهد، ما پیامی را نشان خواهیم داد که کاربر را به تلاش مجدد تشویق می کند.

1

function checkWin() {

2

  const (reel1, reel2, reel3) = reelStates.map((reel) => reel(0));

3

  const (reel4, reel5, reel6) = reelStates.map((reel) => reel(1));

4

5

  if (

6

    (reel1 === reel2 && reel2 === reel3) ||

7

    (reel4 === reel5 && reel5 === reel6)

8

  ) {

9

    const payout = betAmount * 5;

10

    balance += payout;

11

    console.log("win");

12

    winSound.play();

13

    messageDisplay.textContent = " ";

14

  } else {

15

    messageDisplay.textContent = "Try Again";

16

  }

17

  updateBalanceDisplay();

18

}

را به روز کنید spinReel() عملکرد بنابراین checkWin() تابع پس از توقف چرخش قرقره ها فراخوانی می شود.

1

function spinReel(reel, index) {

2

//......

3

if (currentSpin >= spinCount) {

4

      clearInterval(interval);

5

      if (index === reels.length - 1) {

6

        spinning = false;

7

        reelSound.pause();

8

        reelSound.currentTime = 0;

9

        checkWin();

10

      }

11

    }

12

    //........

13

 }

و ما تمام شدیم! در اینجا چیزی است که ما ساخته ایم:

مراحل بعدی

برای بهتر کردن برنامه دستگاه اسلات، یک ردیاب امتیازدهی اضافه کنید تا بالاترین امتیاز را پیگیری کنید. همچنین می توانید انیمیشن هایی را برای تجربه کاربر جذاب تر اضافه کنید. لذت ببرید!