はじめに
この記事は DMM WEBCAMP Advent Calendar 2019 25日目の記事です。
みなさん、今日はまちにまったクリスマスです！
いかがお過ごしでしょうか?
...あ、そうなんですね！！
そんなみなさんに暇をつぶせるゲームを作ってみました！^^
作ったもの
私が作ったのは「ドブルゲーム」というゲームをWeb上であそべるものです。
jQueryを使って簡単に作成してみました！
こちらからどうぞ！スマホでもできるようになっています。
基本ルール
一つのカードに 8 枚の図柄があります。カードを 2 つ比べると、一つだけ図柄が揃っている部分があります。それら>を早く見つけられるかの瞬発力ゲームになっています。
ref: https://boku-boardgame.net/dobble
ボタンを押すと8枚*2 の画像が出てきます。その中に一つだけ被っている画像があります。
その画像をタップすると、クリア時間が出てきます。(自分の最高記録です)
リセットを押すと繰り返し遊べます。
環境
macOS Catalina 10.15.1
jQuery 3.4.1
コード解説
全コードは以下のリポジトリに書いてあります。
https://github.com/saezurucrow/dobble-site
ここではゲームの流れにそって解説していきます。
(なかなかのクソコードですので指摘等ございましたらコメントにていただけると幸いです。)
初期設定
const startTime = performance.now();
$('.text').text("");
$('.start').hide();
performance.now()でその時間のタイムスタンプを記録します。
$('.start').hide();でボタンを隠しています。
順番を設定
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/)
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;
}
画像表示
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に追加しています。
クリアした時の処理
$('.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の知識で、作れるのはとてもおもしろいですよね。
皆さんも是非作ってみください！
まだまだ実装していない機能(そもそも画像がすくない、ランキング機能、タイマーの表示等)があるので、時間があればボチボチ追加していきたいと思います。