Go to Qiita Advent Calendar 2024 Top
LoginSignup
Naoki23
@Naoki23 (早稲田 直輝)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

jQueryでアタック25のようなタイルの集まりを表示したい

Discussion

Closed

JavaScriptjQuery

解決したいこと

jQueryでアタック25のようなWebアプリをつくっています。
ですが、jQueryどころかJavaScriptも初心者なので画面に5x5のタイルを表示する方法がわかりません。
そのタイルをC++の2次元配列のような感覚で状態を管理したいのですがいい方法はありますか。

持っている知識

ProgateのJavaScript,jQueryのコースはすべてやっています

0
yuzuru2
@yuzuru2

参考画像

Attack25-panel5-2.png

モック

無題.png

色がちょい濃いかな

ソース

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Naoki23</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-CuOF+2SnTUfTwSZjCXf01h7uYhfOBuxIhGKPbfEJ3+FqH/s6cIFN9bGr1HmAg4fQ"
      crossorigin="anonymous"
    />
    <style>
      .panel {
        width: 70px;
        height: 60px;
        border: 2px solid black;
        font-size: 40px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="d-flex flex-wrap">
      <div class="panel" style="background: green">1</div>
      <div class="panel" style="background: blue">2</div>
      <div class="panel" style="background: green">3</div>
      <div class="panel" style="opacity: 0.5; background: gray">4</div>
      <div class="panel" style="opacity: 0.5; background: gray">5</div>
    </div>

    <div class="d-flex flex-wrap">
      <div class="panel" style="background: red">6</div>
      <div class="panel" style="background: blue">7</div>
      <div class="panel" style="background: blue">8</div>
      <div class="panel" style="background: red">9</div>
      <div class="panel">10</div>
    </div>

    <div class="d-flex flex-wrap">
      <div class="panel" style="background: blue">11</div>
      <div class="panel" style="background: blue">12</div>
      <div class="panel" style="background: red">13</div>
      <div class="panel" style="background: blue">14</div>
      <div class="panel">15</div>
    </div>

    <div class="d-flex flex-wrap">
      <div class="panel" style="opacity: 0.5; background: gray">16</div>
      <div class="panel" style="background: blue">17</div>
      <div class="panel" style="background: blue">18</div>
      <div class="panel" style="background: green">19</div>
      <div class="panel">20</div>
    </div>

    <div class="d-flex flex-wrap">
      <div class="panel" style="opacity: 0.5; background: gray">21</div>
      <div class="panel" style="background: blue">22</div>
      <div class="panel" style="background: blue">23</div>
      <div class="panel" style="background: red">24</div>
      <div class="panel" style="background: yellow">25</div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-popRpmFF9JQgExhfw5tZT4I9/CI5e2QcuUZPOVXb1m7qUmeR2b50u+YFEYe1wgzy"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
1Like
non_cal
@non_cal

attack25.jpg

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<style>
.panel-row {
  display: flex;
}
.panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 60px;
  font-weight: bold;
  font-size: 30px;
  border: 2px solid black;
}
.panel-row:not(:last-child) .panel {
  border-bottom: 0;
}
.panel:not(:last-child) {
  border-right: 0;
}

.green {
  background: linear-gradient(#6dd337, #358a1e);
}
.white {
  background: linear-gradient(#f5f5f5, #c0c0c0);
}
.red {
  background: linear-gradient(#e4243a, #9e0f1d);
}
.blue {
  background: linear-gradient(#1990ff, #2264a1);
}
.gray {
  background: linear-gradient(#5f5f5f, #7b7b7b);
}
</style>

<div id="attack25-panel"></div>

<script>
var PANEL_ROW = 5;
var PANEL_COLUMN = 5;

var panelState = [];
for (var row = 0; row < PANEL_ROW; row++) {
  panelState.push([]);
  for (var col = 0; col < PANEL_COLUMN; col++) {
    panelState[row].push(null);
  }
}

function updatePanel() {
  var html = '';
  for (var row = 0; row < panelState.length; row++) {
    html += '<div class="panel-row">';
    for (var col = 0; col < panelState[row].length; col++) {
      var color = panelState[row][col] || "gray";
      html += '<div class="panel ' + color + '">' + (row * PANEL_COLUMN + col + 1) + '</div>';
    }
    html += '</div>';
  }
  $("#attack25-panel").html(html);
}

function setPanel(number, color) {
  var number = number - 1;
  var row = Math.floor(number / PANEL_COLUMN);
  var col = number % PANEL_COLUMN;
  panelState[row][col] = color;
  updatePanel();
}

updatePanel();

/* 例 */
setPanel(1, "red");
setPanel(7, "white");
setPanel(19, "blue");
setPanel(23, "green");
setPanel(24, "green");
setPanel(25, "green");
</script>

グローバル変数使ったりDOMを文字列で作ってたりして綺麗ではない上にjQueryをほぼ使ってないですが、なるべくシンプルに平易に書くとこんな感じでしょうか。
（どういう環境か分からなかったのでES5で書いてますが、できるならconstとか使った方がいいです）

状態はpanelStateに[["red",null,"white",null,null],...]という形で入っています。

setPanel()でpanelStateの変更と画面の更新を行います。

画面更新（updatePanel()）の度にpanelStateに従って#attack25-panelの中身を一から書き直すコードになっています。
パフォーマンス的には微妙ですが、この程度の描画なら問題ないでしょう。

あとこのままだとsetPanel(26, "red")とかやると死にます:innocent:

1Like
Naoki23
@Naoki23

yuzuru2さん、non_calさんありがとうございます。
パネルの状態管理がしやすそうだったのでnon_calさんが作ってくださったコードを元に開発を進めようと思います。
本当にありがとうございます。

0Like

Your answer might help someone💌

LoginSign Up