CSSスプライトとJavaScriptの続きです。
前回のものを少し変更して、トランプの神経衰弱ゲームを試作してみました。初めはスタートボタンを押してからやってみて下さい。
HTML部分
トランプは26枚使っています。
CSSは前回と同じです。
スタートボタンをつけ、span id=”timer”の部分に、経過秒を表示させます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<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> |
TypeScript
TypeScriptを使う必要はないのですが、JavaScriptのプロトタイプはよくわからない、かつ、JAVA言語的なクラスは多少知っている人にはTypeScriptはおすすめです。
TypeScript はマイクロソフトによって開発されているプログラミング言語で、コンパイルするとJavaScriptになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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を読み込んで使用します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 = {})); |