jQueryで簡単に暇つぶしゲームを作ってみた

# はじめに

この記事は DMM WEBCAMP Advent Calendar 2019 25日目の記事です。

みなさん、今日はまちにまった**クリスマス**です！
いかがお過ごしでしょうか?

<br>
<br>
<br>

...あ、そうなんですね！！

そんなみなさんに暇をつぶせるゲームを作ってみました！^^

# 作ったもの

私が作ったのは「**ドブルゲーム**」というゲームをWeb上であそべるものです。

jQueryを使って簡単に作成してみました！

こちらからどうぞ！スマホでもできるようになっています。

https://saezurucrow.github.io/dobble-site/

### 基本ルール

>*一つのカードに 8 枚の図柄があります。カードを 2 つ比べると、一つだけ図柄が揃っている部分があります。それら>を早く見つけられるかの瞬発力ゲームになっています。*
>ref: https://boku-boardgame.net/dobble 

ボタンを押すと8枚*2 の画像が出てきます。その中に一つだけ被っている画像があります。
<img width="303" alt="スクリーンショット 2019-12-24 17.35.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258797/bed720c0-e2b9-ee54-8172-f895c98101e3.png">

その画像をタップすると、クリア時間が出てきます。(自分の最高記録です)
<img width="309" alt="スクリーンショット 2019-12-24 17.38.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258797/cab5bf83-e816-33aa-3cae-7fffb255a301.png">

リセットを押すと繰り返し遊べます。

# 環境

macOS Catalina 10.15.1
jQuery 3.4.1

# コード解説

全コードは以下のリポジトリに書いてあります。
https://github.com/saezurucrow/dobble-site

ここではゲームの流れにそって解説していきます。
(なかなかのクソコードですので指摘等ございましたらコメントにていただけると幸いです。)

## 初期設定

```javascript
  const startTime = performance.now();
  $('.text').text("");
  $('.start').hide();
```

`performance.now()`でその時間のタイムスタンプを記録します。
`$('.start').hide();`でボタンを隠しています。

## 順番を設定


```javascript
  function board_set() {
    const board = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
    array = shuffle(board);
    let board_1 = []
    let board_2 = []
    for (let j = 0; j <= 6; j++) {
      board_1.push(array[j])
      board_2.push(array[j + 7])
    }
    same = board[14]
    board_1.push(same)
    board_2.push(same)
    board_1 = shuffle(board_1);
    board_2 = shuffle(board_2);
    return {
      board_1,
      board_2
    }
  }
```
`board_set()`内に画像をランダムに表示するための配列を設定します。(ここもうちょっと綺麗にしたいなあ)

アルゴリズムとしては、1〜15までの配列(`board`)を用意し、それらをシャッフルしてボード用の2つの配列(      `board_1,board_2`)に前から一つずつpushしていきます。

最後の配列の数字を被ってる数字('same')として、ボード用の配列にそれぞれpushします。

再度シャッフルして完成です。

シャッフルする関数に関しては下に記述してあります。
(ref:https://www.suzu6.net/posts/91-js-random-array/)

```javascript
  function shuffle(array) {
    for (let i = array.length - 1; i >= 0; i--) {
      let rand = Math.floor(Math.random() * (i + 1));
      // 配列の数値を入れ替える
      [array[i], array[rand]] = [array[rand], array[i]]
    }
    return array;
  }
```

## 画像表示

```javascript
  let {
    board_1,
    board_2
  } = board_set();

  for (let k = 0; k <= 7; k++) {
    $('.board_1').append('<img class="img_' + board_1[k] + '" src="img/' + board_1[k] + '.png"></img>');
    $('.board_2').append('<img class="img_' + board_2[k] + '" src="img/' + board_2[k] + '.png"></img>');
  }
```

ここでは、`class="board_1,2"`それぞれにimg要素をHTMLに追加しています。

## クリアした時の処理

```javascript
  $('.img_' + same).on("click", function () {
    const endTime = performance.now();
    const time = Math.round((endTime - startTime) / 100) / 10;
    $('.text').text(time + "秒でクリア！");
    for (let k = 0; k <= 7; k++) {
      $('.board_1').empty();
      $('.board_2').empty();
    }
    $('.start').show()
    $('.start').text("リセット");
  });
```

`$('.img_' + same)`で被っている画像を特定しています。

もう一度`performance.now();`をして終わりの時間から最初の時間を引いた値を解くのにかかった時間にしています。
具体的には、かかった時間はめちゃくちゃ小数点以下の数字はあるので、roundで四捨五入して、最後の10で割ることによって小数点第一位までを表示しています。
(`const time = Math.round((endTime - startTime) / 100) / 10;`)

`.empty()`で画像をいったん削除し、その後、リセット処理をしています。


# 終わりに

50行ちょっとで、簡単なゲームを作成することができました。
またクリスマスで定番のパーティゲームと聞いたので、こりゃ作るしかないと思いました。
少しのjQueryの知識で、作れるのはとてもおもしろいですよね。
皆さんも是非作ってみください！

まだまだ実装していない機能(そもそも画像がすくない、ランキング機能、タイマーの表示等)があるので、時間があればボチボチ追加していきたいと思います。