早朝5時に「神経衰弱」をやりたくなって、、、
気持ちを落ち着けたいときや集中力を高めたいときには「神経衰弱」に限る。
大事な勝負前の昔からの習慣だ。
一人でやる神経衰弱だから、ルールはちょっと独特だ。52枚のトランプを、まずは表向きに全部並べる。
「ズルすんなよっ！」
というツッコミが聞こえてきそうだが、勝負する相手がいるのでもないから、それほどの問題はないと思っている。その一度表向きに並べたトランプをすべて裏返してからゲームスタートだ。裏返すタイミングは自由で、じっくり暗記してからで良い。要するに記憶力ゲームなのだ。
ルールはまぁ数字を揃えるだけの、いわゆる「神経衰弱」なのだけど、一つだけオリジナルのルールがある。
・ミスしたら最初からやり直し！
このローカルルールが結構シビレル。
部活の大会とか、入試とか、とにかく大事な勝負の朝にやるルーティーンだからなおさらだ。下手したら入試に遅刻する。
で、、、、、。
昔懐かしい「神経衰弱」をやりたくなったのだけれど、どうやらわが家にはトランプがない、、、という。カードマジック用に購入したヤツがあると思ったのだけれど((+_+))
、、、、、。
という「神経衰弱ゲーム」をプログラミングしようと思ったきっかけでした。
どうせなら、プログラミング動画の続編として、前回は使わなかった配列なんかも使った解説動画に仕上げようかしら。
神経衰弱ゲームをプレイする
よかったら、まずは完成した「神経衰弱ゲーム」をプレイしてみてください。
動画で書いたコードに少しだけ変更を加えていますが、大きく異なる何かはありません。
【 神経衰弱をやってみる 】
↑↑↑コチラからプレイ！
ちなみに、、、動画はコチラ↓↓↓ 。
今回書いた神経衰弱のコード
今回のコードは(も？)HTML、CSS、JavaScriptをそれぞれ別のファイルに記述しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>神経衰弱</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>神経衰弱💦</h2>
<div id="result">TIME:</div>
<div id="field"></div>
<script src="script.js"></script>
</body>
</html>@charset "UTF-8";
h2{
font-size:50px;
margin:0 0 0 10px;
color:blue;
}
.card{
width:60px;
height:90px;
border:1px solid;
float:left;
border-radius:7px;
text-align:center;
font-size:25px;
font-weight:bold;
line-height:90px;
}
#field{
width:440px;
height:380px;
}
.back{
background-image:url("card2.png");
background-size:cover;
}
#result{
margin:0 0 0 10px;
font-size:20px;
font-weight:bold;
}
.comp{
opacity:0;
}// 変数の宣言
let startTime;
let timer, setTimer;
let tryCount = 0;
let firstClick = true;
let firstCard;
let compUnit = 0;
window.onload = firstScript();
// カードの表示とゲームスタート
function firstScript(){
let beforeArray = [];
let afterArray = [];
for(let i=0; i<13; i++){
let sub = ["A","2","3","4","5","6","7","8","9","10","J","Q","K"];
beforeArray.push("♠"+sub[i]);
beforeArray.push("<span style='color:red'>♥</span>"+sub[i]);
}
for(let i=0; i<26; i++){
let r = Math.floor(Math.random()*beforeArray.length);
afterArray.push(beforeArray[r]);
beforeArray.splice(r, 1);
}
let field = document.getElementById("field");
for(let i=0; i<26; i++){
let div = document.createElement("div");
div.className = "card back";
div.cardFace = afterArray[i];
div.innerHTML = "";
div.onclick = turn;
field.appendChild(div);
}
startTime = new Date();
timer = setInterval(drawResult, 1000);
}
// 経過時間と回数を表示する関数
function drawResult(){
let nowTime = new Date();
let time = Math.floor((nowTime-startTime)/1000);
let result = document.getElementById("result");
let str = "TIME: " + time + "秒 TRY: " + tryCount + "回";
result.innerHTML = str;
}
// カードがクリックされたときの関数
function turn(e){
if(setTimer){return;}
let choiceCard = e.target;
if(choiceCard.innerHTML==""){ //カードが裏向きだったら
choiceCard.className = "card";
choiceCard.innerHTML = choiceCard.cardFace;
}else{return;} //表向きなら何もしない
if(firstClick==true){ //カードが裏向きで更に1枚目のクリックなら
firstCard = choiceCard;
firstClick = false;
}else{ //カードが裏向きで更に2枚目のクリックなら
tryCount++;
if(firstCard.cardFace.substr(-1)==choiceCard.cardFace.substr(-1)){
compUnit++;
setTimer = setTimeout(function(){ //setTimeout(実行する関数, 何ミリ秒後);
choiceCard.className = "card comp";
firstCard.className = "card comp";
if(compUnit==13) clearInterval(timer);
setTimer = null;
}, 500);
}else{
setTimer = setTimeout(function(){
choiceCard.className = "card back";
firstCard.className = "card back";
choiceCard.innerHTML = "";
firstCard.innerHTML = "";
setTimer = null;
}, 500)
}
firstClick = true;
}
}