HTML CSS Javascriptでアタック25を作る

勉強

最近HP制作に興味を持ち、HTML, CSS, Javascriptの基礎を学びました。
こちらの最強の3目並べAIをブラウザで作成するという記事を見て、なるほどと思い、似たようなゲームを作る決心を。

そこで構想を練っていて、いい感じに似たようなゲームを作れないかと構想を練って思いついたのが、アタック25。
(というか、ちょうど数十人向けの余興を考えなくてはいけない状況になってしまっていまして…)

作成したものはこちら！
即興で作った割には良い出来だったかなと！

以下、作成したHTML、CSS、Javascriptとその説明になります。

全体の構成

まず、全体のイメージとして、以下のイメージを適当に考えました。

左に25マス配置し、右側に問題文とチーム分け・チームの得点を記載するスペースを配置します。

詳しくは以下述べていきますが、25マスの作成などは、上記の3目並べをベースに作成できますね。

HTMLの作成

作成したHTMLファイルは以下になります。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Attack25</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="allitembox">
    <!-- 左側 Attack25の25マスの作成 -->
    <div class="attack25">
      <div class="grid">
        <div class="cell"><p class="Qnumber">1</p></div>
        <div class="cell"><p class="Qnumber">2</p></div>
        <div class="cell"><p class="Qnumber">3</p></div>
        <div class="cell"><p class="Qnumber">4</p></div>
        <div class="cell"><p class="Qnumber">5</p></div>
        <div class="cell"><p class="Qnumber">6</p></div>
        <div class="cell"><p class="Qnumber">7</p></div>
        <div class="cell"><p class="Qnumber">8</p></div>
        <div class="cell"><p class="Qnumber">9</p></div>
        <div class="cell"><p class="Qnumber">10</p></div>
        <div class="cell"><p class="Qnumber">11</p></div>
        <div class="cell"><p class="Qnumber">12</p></div>
        <div class="cell"><p class="Qnumber">13</p></div>
        <div class="cell"><p class="Qnumber">14</p></div>
        <div class="cell"><p class="Qnumber">15</p></div>
        <div class="cell"><p class="Qnumber">16</p></div>
        <div class="cell"><p class="Qnumber">17</p></div>
        <div class="cell"><p class="Qnumber">18</p></div>
        <div class="cell"><p class="Qnumber">19</p></div>
        <div class="cell"><p class="Qnumber">20</p></div>
        <div class="cell"><p class="Qnumber">21</p></div>
        <div class="cell"><p class="Qnumber">22</p></div>
        <div class="cell"><p class="Qnumber">23</p></div>
        <div class="cell"><p class="Qnumber">24</p></div>
        <div class="cell"><p class="Qnumber">25</p></div>
      </div>
    </div>
    <!-- 右側の作成 -->
    <div class="QuestionAndTeam">
      <!-- 問題文の作成 -->
      <div class="QuestionContainer">
        <ol class="ul_Question">
          <li><img src="question1.PNG"></li>
          <li><img src="question2.PNG"></li>
          <li><img src="question3.PNG"></li>
        </ol>
        <!-- 問題文送り用のボタン作成 -->
        <button id="prev">«</button>
        <button id="next">»</button>
      </div>
      <!-- チーム分け/得点表示 -->
      <div class="TeamContainer">
        <div class="Team TeamRed">
          <ul>
            <li>苗字　名前A</li>
            <li>苗字　名前B</li>
            <li>苗字　名前C</li>
            <li>苗字　名前D</li>
          </ul>
          <div class="count" id="num_red">0</div>
        </div>
        <div class="Team TeamBlue">
          <ul>
            <li>苗字　名前E</li>
            <li>苗字　名前F</li>
            <li>苗字　名前G</li>
            <li>苗字　名前H</li>
          </ul>
          <div class="count" id="num_blue">0</div>
        </div>
        <div class="Team TeamGreen">
          <ul>
            <li>苗字　名前I</li>
            <li>苗字　名前J</li>
            <li>苗字　名前K</li>
            <li>苗字　名前L</li>
            </ul>
          <div class="count" id="num_green">0</div>
          </div>
        <div class="Team TeamWhite">
          <ul>
            <li>苗字　名前M</li>
            <li>苗字　名前N</li>
            <li>苗字　名前O</li>
            <li>苗字　名前P</li>
          </ul>
          <div class="count" id="num_white">0</div>
        </div>
      </div>
    </div>
  </div>
  <script src="main.js"></script>
</body>
</html>

以上で全ての要素を配置できました。次にcssでそれぞれの要素の位置、大きさを決めていきます。

CSSの作成

作成したCSSファイルは以下です。

body {padding: 32px;}
.allitembox {
  width: 1800px;
  height: 900px;
  background: white;
  display: flex;
}
.QuestionAndTeam {
  width: 900px;
  height: 900px;
}

/* --------------------- */
/* Attack25のマス目表示 */
/* --------------------- */
.attack25 {
  width: 800px;
  height: 800px;
  margin: 50px;
  background: red;
}
.grid{
  display: grid;
  grid-template-columns: 160px 160px 160px 160px 160px;
}
.cell {
  width: 160px;
  height: 160px;
  border: 1px solid black;
  text-align: center;
  background-color: gray;
  font-size: 50px;
}
.cell_white {background-color: white;}
.cell_red {background-color: red;}
.cell_blue {background-color: blue;}
.cell_green {background-color: green;}
.cell_gray {background-color: gray;}
.Qnumber {vertical-align: middle; user-select: none;}

/* --------------------- */
/*       問題文          */
/* --------------------- */
.QuestionContainer {
  width: 100%;
  height: 600px;
  border: 2px solid black;
  overflow: hidden;
  position: relative;
  user-select: none;
}
ol {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  transition: transform .3s;
}
li {height: 100%; min-width: 100%;}
li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#prev, #next {
  position: absolute;
  transform: translateY(-1000%);
  border: none;
  background: rgba(0, 0,0,.8);
  color: #fff;
  font-size: 24px;
  padding: 0 8px 4px;
  cursor: pointer;
}
#prev:hover, #next:hover {opacity: 0.8;}
#prev {left: 0;}
#next {right: 0;}
.hidden {display: none;}

/* --------------------- */
/* チーム分け/得点表示   */
/* --------------------- */
.TeamContainer {
  width: 900px;
  height: 300px;
  display: flex;
  user-select: none;
}
.Team {
  margin: 20px 10px 0px;
  width: 200px;
  height: 280px;
  border: solid;  
}
.count {
  width: 80px;
  height: 80px;
  font-size: 48px;
  margin-left: 50px;
  margin-top: 40px;
  text-align: center;
}
.TeamRed {background: rgb(255,0,0,0.7);}
.TeamBlue {background: rgb(0,0,255,0.65);}
.TeamGreen {background: rgb(0,255,0,0.6);}
.TeamWhite {background: white;}

このHTMLとCSSで全体の作成は完了です。これだけで結構それっぽくなって満足感が得られます。

次に、Javascriptを使って
1. 各マスにクリックで色を付ける
2. マスの色の数の取得
3. 問題文スクロール
を実装していきます！

Javascriptの実装

作成したファイルは以下になります。

'use strict';

{
  const next = document.getElementById('next');
  const prev = document.getElementById('prev');
  const ol = document.querySelector('ol');
  const slides = ol.children;
  let currentIndex = 0;
 
  function updateButtons() {
    next.classList.remove('hidden')
    prev.classList.remove('hidden');
    if (currentIndex === 0) {
      prev.classList.add('hidden');
    }
    if (currentIndex === slides.length - 1) {
      next.classList.add('hidden')
    }
  }

  // スライドを動かす設定
  function moveSlides() {
    const slideWidth = slides[0].getBoundingClientRect().width;
    ol.style.transform = `translateX(${-1*slideWidth * currentIndex}px)`;
  }

  // ボタンそれぞれにスライドの効果を実装
  updateButtons();
  next.addEventListener('click', () => {
    currentIndex++;
    updateButtons();
    moveSlides();
  });
  prev.addEventListener('click', () => {
    updateButtons();
    currentIndex--;
    moveSlides();
  });
}

{
  let cell_color = new Array(25).fill(0);
  // cell: 色のついたセルに関する配列
  const cell = document.getElementsByClassName('cell');

  for (let i = 0; i < cell.length; i++) {
    // マス目のクリックにイベントを設定
    cell[i].addEventListener('click', () => {
      cell_color[i] = cell_color[i]+1;
      cell[i].classList.remove('cell_white');
      cell[i].classList.remove('cell_red');
      cell[i].classList.remove('cell_blue');
      cell[i].classList.remove('cell_green');
      cell[i].classList.remove('cell_gray');
      if (Math.floor(cell_color[i] % 5) === 0) {cell[i].classList.add('cell_gray')}
      if (Math.floor(cell_color[i] % 5) === 1) {cell[i].classList.add('cell_red')}
      if (Math.floor(cell_color[i] % 5) === 2) {cell[i].classList.add('cell_blue')}
      if (Math.floor(cell_color[i] % 5) === 3) {cell[i].classList.add('cell_green')}
      if (Math.floor(cell_color[i] % 5) === 4) {cell[i].classList.add('cell_white');}
      let count_red = 0;
      let count_blue = 0;
      let count_green = 0;
      let count_white = 0;
      for (let j = 0; j < cell.length; j++) {
        // j番目のcellの配列の色を確認して、対応する色のカウントを増やす
        if (cell[j].classList[1] === "cell_red") {count_red++;}
        if (cell[j].classList[1] === "cell_blue") {count_blue++;}
        if (cell[j].classList[1] === "cell_green") {count_green++;}
        if (cell[j].classList[1] === "cell_white") {count_white++;}
      }
      // 色の個数を得点に設定
      document.getElementById('num_red').textContent = String(count_red);
      document.getElementById('num_blue').textContent = String(count_blue);
      document.getElementById('num_green').textContent = String(count_green);
      document.getElementById('num_white').textContent = String(count_white);
    });
  }
}

以上のjavascriptを実装することで、上記の3つの動的動作を実装することができます。

HTML, CSS, Javasrciptを使ったAttack25の作成は以上になります。
実装方法に関するコメントやより簡潔なコードの書き方などのコメントをいただけると大変うれしいです。

コメント

タイトルとURLをコピーしました