見出し画像

【JavaScript】スロットゲームをプログラミングで作成(当たり演出①)

エンジニアの休日

今回は、以前JavaScriptで作成したゲームに当たり演出を追加しました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>スロットゲーム</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" media="screen" href="style.css">
  </head>
  <body>
    <div class="slot">
      <div id="slot-frame">
        <ul class="reels">
          <li class="reel" data-val="franky"><img src="img/franky.png"></li>
          <li class="reel" data-val="luffy"><img src="img/luffy.png"></li>  <!-- index 7 -->
          <li class="reel" data-val="nami"><img src="img/nami.png"></li>   <!-- index 6 -->
          <li class="reel" data-val="zoro"><img src="img/zoro.png"></li>   <!-- index 5 -->
          <li class="reel" data-val="usopp"><img src="img/usopp.png"></li>  <!-- index 4 -->
          <li class="reel" data-val="sanji"><img src="img/sanji.png"></li>  <!-- index 3 -->
          <li class="reel" data-val="robin"><img src="img/robin.png"></li>  <!-- index 2 -->
          <li class="reel" data-val="chopper"><img src="img/chopper.png"></li><!-- index 1 -->
          <li class="reel" data-val="franky"><img src="img/franky.png"></li> <!-- index 0 初期値 -->
          <li class="reel" data-val="luffy"><img src="img/luffy.png"></li>
        </ul>
        <ul class="reels">
          <li class="reel" data-val="sanji"><img src="img/sanji.png"></li>
          <li class="reel" data-val="robin"><img src="img/robin.png"></li>
          <li class="reel" data-val="zoro"><img src="img/zoro.png"></li>
          <li class="reel" data-val="luffy"><img src="img/luffy.png"></li>
          <li class="reel" data-val="nami"><img src="img/nami.png"></li>
          <li class="reel" data-val="usopp"><img src="img/usopp.png"></li>
          <li class="reel" data-val="chopper"><img src="img/chopper.png"></li>
          <li class="reel" data-val="franky"><img src="img/franky.png"></li>
          <li class="reel" data-val="sanji"><img src="img/sanji.png"></li> <!-- index 0 初期値 -->
          <li class="reel" data-val="robin"><img src="img/robin.png"></li>
        </ul>
        <ul class="reels">
          <li class="reel" data-val="robin"><img src="img/robin.png"></li>
          <li class="reel" data-val="sanji"><img src="img/sanji.png"></li>
          <li class="reel" data-val="luffy"><img src="img/luffy.png"></li>
          <li class="reel" data-val="usopp"><img src="img/usopp.png"></li>
          <li class="reel" data-val="chopper"><img src="img/chopper.png"></li>
          <li class="reel" data-val="franky"><img src="img/franky.png"></li>
          <li class="reel" data-val="nami"><img src="img/nami.png"></li>
          <li class="reel" data-val="zoro"><img src="img/zoro.png"></li>
          <li class="reel" data-val="robin"><img src="img/robin.png"></li> <!-- index 0 初期値 -->
          <li class="reel" data-val="sanji"><img src="img/sanji.png"></li>
        </ul>
        </div>
      </div>
    </div>
    <div id="hit">
    </div>
    <div>
      <button type="button" class="stop-btn" data-val="0" disabled="true"></button>
      <button type="button" class="stop-btn" data-val="1" disabled="true"></button>
      <button type="button" class="stop-btn" data-val="2" disabled="true"></button>
    </div>
    <div>
      <button type="button" id="start-btn">ゲームスタート</button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>
body {
    text-align: center;
    padding: 0;
    margin: 0;
    background-color: antiquewhite;
}
ul {
    list-style: none;
}
.slot {
    width: 90%;
    height: 500px;
    overflow: hidden;
    margin: auto;
    margin-top: 10px;
    border: solid 1px #333;
    background-color: aliceblue;
}
#slot-frame {
    height: 500px;
    position: relative;
    overflow: hidden;
    border: solid 1px #333;
}
.reels {
    width: 31%;
    position: absolute;
}
.reels:nth-child(1) {
    left: 0;
}
.reels:nth-child(2) {
    left: 33%;
}
.reels:nth-child(3) {
    right: 0;
}
.reel {
    height: 270px;
}
.reel img {
    display: block;
    margin: auto;
    height: 270px;
}
.stop-btn {
    display: inline-block;
    padding: 35px 35px;
    margin-top: 10px;
    margin: 10px 70px;
    background-color: rgb(237, 23, 23);
    border-bottom: solid 4px #627295;
    border-radius: 60px;
}
.stop-btn:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;
}
#start-btn {
    display: inline-block;
    padding: 20px 40px;
    background-color: rgb(215, 97, 0);
    color: #FFF;
    border-bottom: solid 4px #627295;
    border-radius: 10px;
    font-size: 30px;
}
#start-btn:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;
}
#hit{
    position: absolute;
    top: 90px;
    width: 100%;
    background-color: rgba(237, 233, 137, 0.7);
}
#hit_message{
    position: absolute;
    top: 100px;
    font-size: 80px;
    color: red;
    font-weight: bold;
}body {
    text-align: center;
    padding: 0;
    margin: 0;
    background-color: antiquewhite;
}
ul {
    list-style: none;
}
.slot {
    width: 90%;
    height: 500px;
    overflow: hidden;
    margin: auto;
    margin-top: 10px;
    border: solid 1px #333;
    background-color: aliceblue;
}
#slot-frame {
    height: 500px;
    position: relative;
    overflow: hidden;
    border: solid 1px #333;
}
.reels {
    width: 31%;
    position: absolute;
}
.reels:nth-child(1) {
    left: 0;
}
.reels:nth-child(2) {
    left: 33%;
}
.reels:nth-child(3) {
    right: 0;
}
.reel {
    height: 270px;
}
.reel img {
    display: block;
    margin: auto;
    height: 270px;
}
.stop-btn {
    display: inline-block;
    padding: 35px 35px;
    margin-top: 10px;
    margin: 10px 70px;
    background-color: rgb(237, 23, 23);
    border-bottom: solid 4px #627295;
    border-radius: 60px;
}
.stop-btn:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;
}
#start-btn {
    display: inline-block;
    padding: 20px 40px;
    background-color: rgb(215, 97, 0);
    color: #FFF;
    border-bottom: solid 4px #627295;
    border-radius: 10px;
    font-size: 30px;
}
#start-btn:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;
}
#hit{
    position: absolute;
    top: 90px;
    width: 100%;
    background-color: rgba(237, 233, 137, 0.7);
}
#hit_message{
    position: absolute;
    top: 100px;
    font-size: 80px;
    color: red;
    font-weight: bold;
}
let sec = 500;          //スロットのリール回転速度(実行毎秒数)
let stopReelFlag = [];  //スロットのリール停止フラグ
let reelCounts = [];    //どの画像をどの位置にさせるか
let slotFrameHeight;    //フレームの大きさ
let slotReelsHeight;    //リール(画像)全体の大きさ
let slotReelItemHeight; //リール(画像)1個の大きさ
let slotReelStartHeight;//画像の初期値
let slot_pattern = [];
let hit_img;
let hit = document.getElementById("hit");
let slot_frame = document.getElementById("slot-frame"); 
let reel = document.getElementsByClassName("reel");
let reels = document.getElementsByClassName("reels");
let start_btn = document.getElementById("start-btn");
let stop_btn = document.getElementsByClassName("stop-btn");
let Slot = {
  init: function() {
    stopReelFlag[0] = stopReelFlag[1] = stopReelFlag[2] = false;
    reelCounts[0] = reelCounts[1] = reelCounts[2] = 0;
  },
  start: function () {
    Slot.init();
    for (let index = 0; index < 3; index++) {
      Slot.animation(index);
    }
  },
  stop: function (i) {
    stopReelFlag[i] = true;
    if (stopReelFlag[0] && !stopReelFlag[1] && !stopReelFlag[2]){
      slot_pattern.push(reels[0].children[8 - reelCounts[0]].getAttribute('data-val'));
    } else if (stopReelFlag[0] && stopReelFlag[1] && !stopReelFlag[2]) {
      slot_pattern.push(reels[1].children[8 - reelCounts[1]].getAttribute('data-val'));
    } else if (stopReelFlag[0] && stopReelFlag[1] && stopReelFlag[2]) {
      slot_pattern.push(reels[2].children[8 - reelCounts[2]].getAttribute('data-val'));
    }
    if (stopReelFlag[0] && stopReelFlag[1] && stopReelFlag[2]) {
      start_btn.removeAttribute("disabled");
      if(slot_pattern.every(value => value === slot_pattern[0])){
        hit_img = slot_pattern[0];
        Slot.hit();
      };
      slot_pattern = [];
    }
  },
  hit: function(){
    let hit_message;
    if (hit_img == "chopper"){
      hit_message = "タ、タヌキじゃねーよっ";
    } 
    hit_img = document.querySelectorAll(`[data-val="${hit_img}"]`);
    hit_img = hit_img[1].innerHTML;
    setTimeout(()=>{
      hit.innerHTML = hit_img;
      hit.innerHTML += `<span id='hit_message'>${hit_message}</span>`;
    }, 1000);
    setTimeout(() => {
      hit.innerHTML = "";
    }, 5000);
  },
  resetLocationInfo: function () {
    slotFrameHeight = slot_frame.offsetHeight;
    slotReelsHeight = reels[0].offsetHeight;
    slotReelItemHeight = reel[0].offsetHeight;
    slotReelStartHeight = -slotReelsHeight;
    slotReelStartHeight = slotReelStartHeight + slotFrameHeight
                             - (slotFrameHeight / 2) + slotReelItemHeight * 3 / 2;
    for (let i = 0; i < reels.length; i++){
      reels[i].style.top = String(slotReelStartHeight) + "px";
    }
  },
  animation: function (index) {
    if (reelCounts[index] >= 8) {
      reelCounts[index] = 0;
    }
    $('.reels').eq(index).animate({
      'top': slotReelStartHeight + (reelCounts[index] * slotReelItemHeight)
    }, {
      duration: sec,
      easing: 'linear',
      complete: function () {
        if (stopReelFlag[index]) {
          return;
        }
        reelCounts[index]++;
        Slot.animation(index);
      }
    });
  },
};
window.onload = function () {
  Slot.init();
  Slot.resetLocationInfo();
  start_btn.addEventListener("click", function(e){
    e.target.setAttribute("disabled", true)
    Slot.start();
    for(let i = 0; i < stop_btn.length; i++){
      stop_btn[i].removeAttribute("disabled");
    }
  });
  for(let i = 0; i < stop_btn.length ; i++ ){
    stop_btn[i].addEventListener("click", function (e) {
      Slot.stop(e.target.getAttribute('data-val'));
    })
  }
};

この記事が気に入ったらサポートをしてみませんか？