JavaScript（TypeScript ）で神経衰弱

CSSスプライトとJavaScriptの続きです。
前回のものを少し変更して、トランプの神経衰弱ゲームを試作してみました。初めはスタートボタンを押してからやってみて下さい。

HTML部分

トランプは26枚使っています。
CSSは前回と同じです。
スタートボタンをつけ、span id=”timer”の部分に、経過秒を表示させます。

<link rel="stylesheet" href="https://liveinhope.biz/wp-content/uploads/2017/06/card.css">
<button id="reset">スタート</button>  <span id="timer"></span>

<div style="width:600px;overflow:hidden;">
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
</div>

<script type="text/javascript" src="https://liveinhope.biz/wp-content/uploads/2017/06/card3.js"></script>

</div>

TypeScript

TypeScriptを使う必要はないのですが、JavaScriptのプロトタイプはよくわからない、かつ、JAVA言語的なクラスは多少知っている人にはTypeScriptはおすすめです。
TypeScript はマイクロソフトによって開発されているプログラミング言語で、コンパイルするとJavaScriptになります。

//名前空間で変数が重複しないように
namespace Pelmanism {

    //シャッフル関数はこちらを参照　https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
    function shuffle(array: any) {
        var currentIndex = array.length, temporaryValue, randomIndex;
        while (0 !== currentIndex) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }
        return array;
    }

    //Cardクラス
    class Card {
        suit: string;
        no: number;
        constructor(suit: string, no: number) {
            this.suit = suit;
            this.no = no;
        }
    }

    //Cardのインスタンスを入れる配列
    let arr: any = [];

    //配列にnewを使ってオブジェクトのインスタンスを追加（ハートの1から13まで）
    for (let i = 1; i <= 13; i++) {
        arr.push(new Card("h", i));
    }

    //配列にnewを使ってオブジェクトのインスタンスを追加（スペードの1から13まで）
    for (let i = 1; i <= 13; i++) {
        arr.push(new Card("s", i));
    }

    //正解を数える変数
    let clearCount: number;

    //めくった一枚目のカードを記憶する入れ物
    let memory: any = {
        element: "",
        no: 0
    };

    //setIntervalで使うID
    let timeID: number;

    //経過秒を入れる変数
    let count: number;

    //時間経過の関数
    function timeUp() {
        //カウントアップして
        count++;
        //HTMLに表示
        document.getElementById("timer").innerHTML = count + "秒経過";
    }

    //ボタンを押したらスタート
    function start() {

        //二回目以後
        if (timeID) {
            //タイマーを止める
            clearInterval(timeID);
        }

        //HTMLを変更
        document.getElementById("reset").innerHTML = "リセット";
        //HTMLを変更
        document.getElementById("timer").innerHTML = "";

        //配列をシャッフル
        arr = shuffle(arr);

        //ゼロにする
        clearCount = 0;

        //ゼロにする
        count = 0;

        //タイマー動かす（一秒ごとにtimeUp関数を実行）
        timeID = setInterval(timeUp, 1000);

        //入れ物を空にする
        memory.element = "";

        //setTimeoutで使う裏返す関数
        function returnFunction(element1: any, element2: any) {
            //クラス名を変更
            element1.className = "card ura";
            element2.className = "card ura";
        }

        //イベント登録する関数
        function clickFunction(no: number, element: any) {

            //カードが裏だったら
            if (element.className === "card ura") {

                //先程シャッフルした配列からオブジェクトを取り出す
                let a = arr[no];

                //二枚目のカードの場合
                if (memory.element) {

                    //カードをめくる（クラス名を変更）
                    element.className = "card " + a.suit + a.no;

                    //正解の場合
                    if (memory.no === a.no) {
                        clearCount++;
                        if (clearCount >= 13) {
                            //タイマーを止める
                            clearInterval(timeID);
                            alert("ゲームクリア");
                        }
                    }
                    //不正解の場合
                    else {
                        //setTimeoutで指定した関数に引数を渡す
                        let element1 = element;
                        let element2 = memory.element;
                        //0.5秒後にreturnFunction関数を実行
                        setTimeout(function () {
                            returnFunction(element1, element2);
                        }, 500);
                    }
                    //入れ物を空にする
                    memory.element = "";

                }
                //一枚目のカードの場合
                else {

                    //カードをめくる（クラス名を変更）
                    element.className = "card " + a.suit + a.no;

                    //入れ物に入れる
                    memory.element = element;
                    memory.no = a.no;

                }
            }
        }

        //cardというクラス名が付いている要素群（HTMLCollection）を求める
        let elements = document.getElementsByClassName("card");
        //elementsをループして
        for (let i = 0; i < elements.length; i++) {
            //引数にするために代入
            let no = i;
            let element = elements[i];
            //イベント登録する
            element.addEventListener('click', function () {
                clickFunction(no, element)
            }, false);
            //クラス名を変更
            element.className = "card ura";
        }
    }

    //スタートボタンにイベント登録
    document.getElementById('reset').addEventListener('click', start, false);

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

//名前空間で変数が重複しないように

namespace Pelmanism {

//シャッフル関数はこちらを参照　https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array

function shuffle(array: any) {

var currentIndex = array.length, temporaryValue, randomIndex;

while (0 !== currentIndex) {

randomIndex = Math.floor(Math.random() * currentIndex);

currentIndex -= 1;

temporaryValue = array[currentIndex];

array[currentIndex] = array[randomIndex];

array[randomIndex] = temporaryValue;

}

return array;

}

//Cardクラス

class Card {

suit: string;

no: number;

constructor(suit: string, no: number) {

this.suit = suit;

this.no = no;

}

//Cardのインスタンスを入れる配列

let arr: any = [];

//配列にnewを使ってオブジェクトのインスタンスを追加（ハートの1から13まで）

for (let i = 1; i <= 13; i++) {

arr.push(new Card("h", i));

}

//配列にnewを使ってオブジェクトのインスタンスを追加（スペードの1から13まで）

for (let i = 1; i <= 13; i++) {

arr.push(new Card("s", i));

}

//正解を数える変数

let clearCount: number;

//めくった一枚目のカードを記憶する入れ物

let memory: any = {

element: "",

no: 0

};

//setIntervalで使うID

let timeID: number;

//経過秒を入れる変数

let count: number;

//時間経過の関数

function timeUp() {

//カウントアップして

count++;

//HTMLに表示

document.getElementById("timer").innerHTML = count + "秒経過";

}

//ボタンを押したらスタート

function start() {

//二回目以後

if (timeID) {

//タイマーを止める

clearInterval(timeID);

}

//HTMLを変更

document.getElementById("reset").innerHTML = "リセット";

//HTMLを変更

document.getElementById("timer").innerHTML = "";

//配列をシャッフル

arr = shuffle(arr);

//ゼロにする

clearCount = 0;

//ゼロにする

count = 0;

//タイマー動かす（一秒ごとにtimeUp関数を実行）

timeID = setInterval(timeUp, 1000);

//入れ物を空にする

memory.element = "";

//setTimeoutで使う裏返す関数

function returnFunction(element1: any, element2: any) {

//クラス名を変更

element1.className = "card ura";

element2.className = "card ura";

}

//イベント登録する関数

function clickFunction(no: number, element: any) {

//カードが裏だったら

if (element.className === "card ura") {

//先程シャッフルした配列からオブジェクトを取り出す

let a = arr[no];

//二枚目のカードの場合

if (memory.element) {

//カードをめくる（クラス名を変更）

element.className = "card " + a.suit + a.no;

//正解の場合

if (memory.no === a.no) {

clearCount++;

if (clearCount >= 13) {

//タイマーを止める

clearInterval(timeID);

alert("ゲームクリア");

}

//不正解の場合

else {

//setTimeoutで指定した関数に引数を渡す

let element1 = element;

let element2 = memory.element;

//0.5秒後にreturnFunction関数を実行

setTimeout(function () {

returnFunction(element1, element2);

}, 500);

}

//入れ物を空にする

memory.element = "";

}

//一枚目のカードの場合

else {

//カードをめくる（クラス名を変更）

element.className = "card " + a.suit + a.no;

//入れ物に入れる

memory.element = element;

memory.no = a.no;

}

//cardというクラス名が付いている要素群（HTMLCollection）を求める

let elements = document.getElementsByClassName("card");

//elementsをループして

for (let i = 0; i < elements.length; i++) {

//引数にするために代入

let no = i;

let element = elements[i];

//イベント登録する

element.addEventListener('click', function () {

clickFunction(no, element)

}, false);

//クラス名を変更

element.className = "card ura";

}

//スタートボタンにイベント登録

document.getElementById('reset').addEventListener('click', start, false);

}

JavaScript部分

TypeScriptから生成されたJavaScriptです。
実際このJavaScriptを読み込んで使用します。

//名前空間で変数が重複しないように
var Pelmanism;
(function (Pelmanism) {
    //シャッフル関数はこちらを参照　https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
    function shuffle(array) {
        var currentIndex = array.length, temporaryValue, randomIndex;
        while (0 !== currentIndex) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }
        return array;
    }
    //Cardクラス
    var Card = (function () {
        function Card(suit, no) {
            this.suit = suit;
            this.no = no;
        }
        return Card;
    }());
    //Cardのインスタンスを入れる配列
    var arr = [];
    //配列にnewを使ってオブジェクトのインスタンスを追加（ハートの1から13まで）
    for (var i = 1; i <= 13; i++) {
        arr.push(new Card("h", i));
    }
    //配列にnewを使ってオブジェクトのインスタンスを追加（スペードの1から13まで）
    for (var i = 1; i <= 13; i++) {
        arr.push(new Card("s", i));
    }
    //正解を数える変数
    var clearCount;
    //めくった一枚目のカードを記憶する入れ物
    var memory = {
        element: "",
        no: 0
    };
    //setIntervalで使うID
    var timeID;
    //経過秒を入れる変数
    var count;
    //時間経過の関数
    function timeUp() {
        //カウントアップして
        count++;
        //HTMLに表示
        document.getElementById("timer").innerHTML = count + "秒経過";
    }
    //ボタンを押したらスタート
    function start() {
        //二回目以後
        if (timeID) {
            //タイマーを止める
            clearInterval(timeID);
        }
        //HTMLを変更
        document.getElementById("reset").innerHTML = "リセット";
        //HTMLを変更
        document.getElementById("timer").innerHTML = "";
        //配列をシャッフル
        arr = shuffle(arr);
        //ゼロにする
        clearCount = 0;
        //ゼロにする
        count = 0;
        //タイマー動かす（一秒ごとにtimeUp関数を実行）
        timeID = setInterval(timeUp, 1000);
        //入れ物を空にする
        memory.element = "";
        //setTimeoutで使う裏返す関数
        function returnFunction(element1, element2) {
            //クラス名を変更
            element1.className = "card ura";
            element2.className = "card ura";
        }
        //イベント登録する関数
        function clickFunction(no, element) {
            //カードが裏だったら
            if (element.className === "card ura") {
                //先程シャッフルした配列からオブジェクトを取り出す
                var a = arr[no];
                //二枚目のカードの場合
                if (memory.element) {
                    //カードをめくる（クラス名を変更）
                    element.className = "card " + a.suit + a.no;
                    //正解の場合
                    if (memory.no === a.no) {
                        clearCount++;
                        if (clearCount >= 13) {
                            //タイマーを止める
                            clearInterval(timeID);
                            alert("ゲームクリア");
                        }
                    }
                    else {
                        //setTimeoutで指定した関数に引数を渡す
                        var element1_1 = element;
                        var element2_1 = memory.element;
                        //0.5秒後にreturnFunction関数を実行
                        setTimeout(function () {
                            returnFunction(element1_1, element2_1);
                        }, 500);
                    }
                    //入れ物を空にする
                    memory.element = "";
                }
                else {
                    //カードをめくる（クラス名を変更）
                    element.className = "card " + a.suit + a.no;
                    //入れ物に入れる
                    memory.element = element;
                    memory.no = a.no;
                }
            }
        }
        //cardというクラス名が付いている要素群（HTMLCollection）を求める
        var elements = document.getElementsByClassName("card");
        var _loop_1 = function (i) {
            //引数にするために代入
            var no = i;
            var element = elements[i];
            //イベント登録する
            element.addEventListener('click', function () {
                clickFunction(no, element);
            }, false);
            //クラス名を変更
            element.className = "card ura";
        };
        //elementsをループして
        for (var i = 0; i < elements.length; i++) {
            _loop_1(i);
        }
    }
    //スタートボタンにイベント登録
    document.getElementById('reset').addEventListener('click', start, false);
})(Pelmanism || (Pelmanism = {}));

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

//名前空間で変数が重複しないように

var Pelmanism;

(function (Pelmanism) {

//シャッフル関数はこちらを参照　https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array

function shuffle(array) {

var currentIndex = array.length, temporaryValue, randomIndex;

while (0 !== currentIndex) {

randomIndex = Math.floor(Math.random() * currentIndex);

currentIndex -= 1;

temporaryValue = array[currentIndex];

array[currentIndex] = array[randomIndex];

array[randomIndex] = temporaryValue;

}

return array;

}

//Cardクラス

var Card = (function () {

function Card(suit, no) {

this.suit = suit;

this.no = no;

}

return Card;

}());

//Cardのインスタンスを入れる配列

var arr = [];

//配列にnewを使ってオブジェクトのインスタンスを追加（ハートの1から13まで）

for (var i = 1; i <= 13; i++) {

arr.push(new Card("h", i));

}

//配列にnewを使ってオブジェクトのインスタンスを追加（スペードの1から13まで）

for (var i = 1; i <= 13; i++) {

arr.push(new Card("s", i));

}

//正解を数える変数

var clearCount;

//めくった一枚目のカードを記憶する入れ物

var memory = {

element: "",

no: 0

};

//setIntervalで使うID

var timeID;

//経過秒を入れる変数

var count;

//時間経過の関数

function timeUp() {

//カウントアップして

count++;

//HTMLに表示

document.getElementById("timer").innerHTML = count + "秒経過";

}

//ボタンを押したらスタート

function start() {

//二回目以後

if (timeID) {

//タイマーを止める

clearInterval(timeID);

}

//HTMLを変更

document.getElementById("reset").innerHTML = "リセット";

//HTMLを変更

document.getElementById("timer").innerHTML = "";

//配列をシャッフル

arr = shuffle(arr);

//ゼロにする

clearCount = 0;

//ゼロにする

count = 0;

//タイマー動かす（一秒ごとにtimeUp関数を実行）

timeID = setInterval(timeUp, 1000);

//入れ物を空にする

memory.element = "";

//setTimeoutで使う裏返す関数

function returnFunction(element1, element2) {

//クラス名を変更

element1.className = "card ura";

element2.className = "card ura";

}

//イベント登録する関数

function clickFunction(no, element) {

//カードが裏だったら

if (element.className === "card ura") {

//先程シャッフルした配列からオブジェクトを取り出す

var a = arr[no];

//二枚目のカードの場合

if (memory.element) {

//カードをめくる（クラス名を変更）

element.className = "card " + a.suit + a.no;

//正解の場合

if (memory.no === a.no) {

clearCount++;

if (clearCount >= 13) {

//タイマーを止める

clearInterval(timeID);

alert("ゲームクリア");

}

else {

//setTimeoutで指定した関数に引数を渡す

var element1_1 = element;

var element2_1 = memory.element;

//0.5秒後にreturnFunction関数を実行

setTimeout(function () {

returnFunction(element1_1, element2_1);

}, 500);

}

//入れ物を空にする

memory.element = "";

}

else {

//カードをめくる（クラス名を変更）

element.className = "card " + a.suit + a.no;

//入れ物に入れる

memory.element = element;

memory.no = a.no;

}

//cardというクラス名が付いている要素群（HTMLCollection）を求める

var elements = document.getElementsByClassName("card");

var _loop_1 = function (i) {

//引数にするために代入

var no = i;

var element = elements[i];

//イベント登録する

element.addEventListener('click', function () {

clickFunction(no, element);

}, false);

//クラス名を変更

element.className = "card ura";

};

//elementsをループして

for (var i = 0; i < elements.length; i++) {

_loop_1(i);

}

//スタートボタンにイベント登録

document.getElementById('reset').addEventListener('click', start, false);

})(Pelmanism || (Pelmanism = {}));