子供と作ろう！神経衰弱ゲーム【HTML/JavaScript】

先日の長期休暇で子供（中学生）から嬉しいリクエストがありました。
「ゲームを作ってみたい！」というリクエストを受け、子供と楽しく作れるゲームを一緒に実装しました。

その時の教えた流れや、開発言語・ゲーム内容の選定についてご紹介いたします。

開発言語を選定

子供と話していると、以下をイメージしていたようでした。

パソコンでもスマホでも動かしたい
ゆくゆくの拡張は自分で行い、「オリジナルのゲーム」を作りたい
スマホにインストールして友達に見せたいわけでは無い

条件を満たす言語として、「HTML/JavaScript」を選定！
言語の難易度的にもちょうど良く、すぐに動きを確認できるため理解もしやすいかと思いました。

ゲームの内容

一番悩んだのが「ゲームの内容」です。
オリジナリティを出さないと条件に合わなくなりますし、かといって複雑なプログラミングはできません。

じゃんけん、オセロ、テトリス・・・色々考えましたが、どれもピンと来るものがなく、
最終的に「神経衰弱ゲーム」になりました。

自分の「推し」をカード表の画像にすれば、オリジナリティも出せますし、
枚数を増やして難易度を上げることもできるため子供でも拡張できます。

SANACHAN

結局、「推し」を絡めると即決でした（笑）

全体構成

神経衰弱ゲームは、以下のようなファイル構成で開発しました。

 ファイルリスト
/
|- img/
|    |- 0.jpg ～ 4.jpg
|    |- back.jpg
|- index.html
|- sample.js

HTMLとはどんなもの？

ここからはどのように子供に教えていったのか、教え方のポイントを紹介します。
先ずはHTMLからです。ブラウザで実際に表示しながら記述していきました。

文法

HTML の文法は、以下のように伝えると理解しやすいようでした。

「タグ」と呼ばれるマーカーで文字を囲うことにより記述（「開く」タグ～「閉じる」タグ）
「ヘッダー」と「ボディ」に分かれており、それぞれ使えるタグが決まっている
位置・色などのスタイルはCSSで定義する

以上の3点だけです。
以降、使用するタグの意味などを調べながら説明していきました。

SANACHAN

今回は、6種類ほどしかタグを使用しません。

コードと画面の対応

ヘッダー

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>神経衰弱ゲーム</title>
</head>

<head>

<title>神経衰弱ゲーム</title>

</head>

先ずはヘッダー部分です。

2行目は「ここから HTML で書きますよ」というおまじないとだけ伝えました（笑）
3行目は「このゲームのタイトル」で、ブラウザの「タブ」に表示されることを一緒に確認。

ボディ

<body>
<div>
    <div><img src="img/back.jpg" /></div>
</div>
</body>

<body>

<div>

</div>

</body>

今回使用する div タグと img タグを使って、この HTML がどのように表示されるかを
一緒にブラウザで確認しながらタグとエレメントとの紐づけを理解させます。

img タグを含む div をコピペすることで、簡単に画像を羅列できることも教えます。

SANACHAN

Chromeのインスペクター機能を使うと、より理解しやすいようでした。

CSSでスタイリッシュに！

次にスタイルを記述するCSSについてです。

先ほど羅列したカードの裏面の画像は、CSSで「float: left」を指定しないと縦並びになります。
CSSでは、以下のようなポイントを教えました。

CSS はスタイルを記述できる
ID と CLASS という考え方がある
HTML ファイルに直接記述したり、別のファイルで記述して読込むことができる

先ほど記述した HTML のヘッダーに CSS を書き、以下のようにしてカードを並べます。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>神経衰弱ゲーム</title>

    <style>
        #panel {
            width: 910px;
            height: 490px;
        }

        .card {
            width: 180px;
            height: 240px;
            float: left;
        }

        /* 裏の状態 */
        .back {
            background-image: url('img/back.jpg');
            background-size: 180px 240px;
        }
    </style>
</head>
<body>

<div id="panel">
    <div class="card back"></div>
    <div class="card back"></div>
    <div class="card back"></div>
    <div class="card back"></div>
    <div class="card back"></div>
    <div class="card back"></div>
    <div class="card back"></div>
    <div class="card back"></div>
    <div class="card back"></div>
    <div class="card back"></div>
</div>

</body>
</html>

<html>

<head>

<title>神経衰弱ゲーム</title>

<style>

#panel {

width: 910px;

height: 490px;

}

.card {

width: 180px;

height: 240px;

float: left;

}

/* 裏の状態 */

.back {

background-image: url('img/back.jpg');

background-size: 180px 240px;

}

</style>

</head>

<body>

</div>

</body>

</html>

ここでは、以下のポイントについて実感してもらいます。

座標の計算が必要になること
background-image を利用すれば img タグが不要になる場合があること
手書きだとカードを並べる冗長な記述が面倒なこと

SANACHAN

最後の「面倒」という感覚をもってもらうことがポイント。

JavaScriptで動きを付ける

最後は JavaScript で動きを付けていきます。
神経衰弱ゲームを作っているので、ここが一番の肝になります。

SANACHAN

そして、一番説明が難しい部分でもあります。

カードを並べる

先ほど「面倒」と体感した部分の自動化から始めます。

<body>

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

</body>

<body>

</div>

</body>

var maxPair = 5;

window.onload = function(){
    var panel = document.getElementById('panel');
    for (i = 0; i < (maxPair * 2); i++) {
        var div = document.createElement('div');
        div.className = 'card back';
        panel.appendChild(div);
    }
}

var maxPair = 5;

window.onload = function(){

var panel = document.getElementById('panel');

for (i = 0; i < (maxPair * 2); i++) {

var div = document.createElement('div');

div.className = 'card back';

panel.appendChild(div);

}

SANACHAN

ここで「for ループ」について学びます。

カードをシャッフル

var maxPair = 5;

window.onload = function(){
    var arr = [];

    for (var i = 0; i < maxPair; i++){
        arr.push(i);
        arr.push(i);
    }

    shuffle(arr);

    var panel = document.getElementById('panel');
    for (i = 0; i < (maxPair * 2); i++) {
        var div = document.createElement('div');
        div.className = 'card back';
        div.number = arr[i];
        panel.appendChild(div);
    }
}

function shuffle(arr) {
    var n = arr.length;
    var temp, i;

    while (n) {
        i = Math.floor(Math.random() * n--);
        temp = arr[n];
        arr[n] = arr[i];
        arr[i] = temp;
    }
    return arr;
}

var maxPair = 5;

window.onload = function(){

var arr = [];

for (var i = 0; i < maxPair; i++){

arr.push(i);

}

shuffle(arr);

var panel = document.getElementById('panel');

for (i = 0; i < (maxPair * 2); i++) {

var div = document.createElement('div');

div.className = 'card back';

div.number = arr[i];

panel.appendChild(div);

}

function shuffle(arr) {

var n = arr.length;

var temp, i;

while (n) {

i = Math.floor(Math.random() * n--);

temp = arr[n];

arr[n] = arr[i];

arr[i] = temp;

}

return arr;

}

最初の for ループで、配列に 0～4 の数字を 2 つずつ格納します。
shuffle という関数を用意して中身をシャッフルし、カード1枚を表示する div の number にセット。
後ほど、この number に従って表の画像をセットします。

シャッフルのアルゴリズムはネットで検索し、ここでは「配列要素の入れ替え方」だけを教えます。

クリック動作の追加

最後の仕上げ、カードをクリックした際の動作を実装します。
先ずは、クリックした際にカードの表面を表示する動作を追加します。

function turn(e){
    var div = e.target;

    // 裏向きのカードをクリックした場合
    if (div.innerHTML == '') {
        div.className = 'card';
        div.innerHTML = '<img src="img/' + div.number + '.jpg" />';
    }else{
        // 数字が表示されているカードは return
        return;
    }
}

function turn(e){

var div = e.target;

// 裏向きのカードをクリックした場合

if (div.innerHTML == '') {

div.className = 'card';

div.innerHTML = '<img src="img/' + div.number + '.jpg" />';

}else{

// 数字が表示されているカードは return

return;

}

先ほどカードの div エレメントに保存した number を使って、
innerHTML を使って内部に img タグのエレメントを作成します。

更にここでは、

1枚目と2枚目の区別
1枚目と2枚目が一致していた場合の動作
1枚目と2枚目が一致していなかった場合の動作

を実装する必要があります。条件分岐 if 文を教えます。

// 1枚目の処理
if (flgFirst) {
    cardFirst = div;
    flgFirst = false;

// 2枚目の処理
} else {
    // 数字が1枚目と一致する場合
    if (cardFirst.number == div.number) {
        backTimer = setTimeout(function() {
            div.className = 'card finish';
            cardFirst.className = 'card finish';
            backTimer = NaN;
        }, 500);

    // 一致しない場合
    } else {  
        backTimer = setTimeout(function() {
            div.className = 'card back';
            div.innerHTML = '';
            cardFirst.className = 'card back';
            cardFirst.innerHTML = '';
            cardFirst = null;
            backTimer = NaN;
        }, 500);
    }

    flgFirst = true;
}

// 1枚目の処理

if (flgFirst) {

cardFirst = div;

flgFirst = false;

// 2枚目の処理

} else {

// 数字が1枚目と一致する場合

if (cardFirst.number == div.number) {

backTimer = setTimeout(function() {

div.className = 'card finish';

cardFirst.className = 'card finish';

backTimer = NaN;

}, 500);

// 一致しない場合

} else {

backTimer = setTimeout(function() {

div.className = 'card back';

div.innerHTML = '';

cardFirst.className = 'card back';

cardFirst.innerHTML = '';

cardFirst = null;

backTimer = NaN;

}, 500);

}

flgFirst = true;

}

SANACHAN

タイマーを使って一致判定を確定させています。

完成したプログラム

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>神経衰弱ゲーム</title>
    <script type="text/javascript" src="sample.js"></script>

    <style>
        #panel {
            width: 910px;
            height: 490px;
        }

        .card {
            width: 180px;
            height: 240px;
            float: left;
            cursor: pointer;
        }

        /* 裏の状態 */
        .back {
            background-image: url('img/back.jpg');
            background-size: 180px 240px;
        }

        /* 終了時 */
        .finish {
            cursor: default;
        }
    </style>
</head>
<body>

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

</body>
</html>

<html>

<head>

<title>神経衰弱ゲーム</title>

<style>

#panel {

width: 910px;

height: 490px;

}

.card {

width: 180px;

height: 240px;

float: left;

cursor: pointer;

}

/* 裏の状態 */

.back {

background-image: url('img/back.jpg');

background-size: 180px 240px;

}

/* 終了時 */

.finish {

cursor: default;

}

</style>

</head>

<body>

</div>

</body>

</html>

var backTimer;
var flgFirst = true;
var cardFirst;
var maxPair = 5;

window.onload = function(){
    var arr = [];

    for (var i = 0; i < maxPair; i++){
        arr.push(i);
        arr.push(i);
    }

    shuffle(arr);

    var panel = document.getElementById('panel');
    for (i = 0; i < (maxPair * 2); i++) {
        var div = document.createElement('div');
        div.className = 'card back';
        div.number = arr[i];
        div.onclick = turn;
        panel.appendChild(div);
    }
}

function shuffle(arr) {
    var n = arr.length;
    var temp, i;

    while (n) {
        i = Math.floor(Math.random() * n--);
        temp = arr[n];
        arr[n] = arr[i];
        arr[i] = temp;
    }
    return arr;
}

function turn(e){
    var div = e.target;

    // カードのタイマー処理が動作中
    if (backTimer)
        return;

    // 裏向きのカードをクリックした場合
    if (div.innerHTML == '') {
        div.className = 'card';
        div.innerHTML = '<img src="img/' + div.number + '.jpg" />';
    }else{
        // 数字が表示されているカードは return
        return;
    }

    // 1枚目の処理
    if (flgFirst) {
        cardFirst = div;
        flgFirst = false;

    // 2枚目の処理
    } else {
        // 数字が1枚目と一致する場合
        if (cardFirst.number == div.number) {
            backTimer = setTimeout(function() {
                div.className = 'card finish';
                cardFirst.className = 'card finish';
                backTimer = NaN;
            }, 500);

        // 一致しない場合
        } else {  
            backTimer = setTimeout(function() {
                div.className = 'card back';
                div.innerHTML = '';
                cardFirst.className = 'card back';
                cardFirst.innerHTML = '';
                cardFirst = null;
                backTimer = NaN;
            }, 500);
        }

        flgFirst = true;
    }
}

var backTimer;

var flgFirst = true;

var cardFirst;

var maxPair = 5;

window.onload = function(){

var arr = [];

for (var i = 0; i < maxPair; i++){

arr.push(i);

}

shuffle(arr);

var panel = document.getElementById('panel');

for (i = 0; i < (maxPair * 2); i++) {

var div = document.createElement('div');

div.className = 'card back';

div.number = arr[i];

div.onclick = turn;

panel.appendChild(div);

}

function shuffle(arr) {

var n = arr.length;

var temp, i;

while (n) {

i = Math.floor(Math.random() * n--);

temp = arr[n];

arr[n] = arr[i];

arr[i] = temp;

}

return arr;

}

function turn(e){

var div = e.target;

// カードのタイマー処理が動作中

if (backTimer)

return;

// 裏向きのカードをクリックした場合

if (div.innerHTML == '') {

div.className = 'card';

div.innerHTML = '<img src="img/' + div.number + '.jpg" />';

}else{

// 数字が表示されているカードは return

return;

}

// 1枚目の処理

if (flgFirst) {

cardFirst = div;

flgFirst = false;

// 2枚目の処理

} else {

// 数字が1枚目と一致する場合

if (cardFirst.number == div.number) {

backTimer = setTimeout(function() {

div.className = 'card finish';

cardFirst.className = 'card finish';

backTimer = NaN;

}, 500);

// 一致しない場合

} else {

backTimer = setTimeout(function() {

div.className = 'card back';

div.innerHTML = '';

cardFirst.className = 'card back';

cardFirst.innerHTML = '';

cardFirst = null;

backTimer = NaN;

}, 500);

}

flgFirst = true;

}

おわりに

いかがでしたでしょうか。

唐突なリクエストで作り始めたゲームですが、カード表の画像を「推し」にすることで
ゴールに向かって一緒に楽しめました。

SANACHAN

説明や準備を含めてざっと、６時間くらいでした。