神経衰弱を写経(Javascript)

ジョイタスネットというサイトを参考にJavascriptで神経衰弱を写経した。

JSによるゲーム制作-(神経衰弱)JSによるゲーム制作-(神経衰弱) | ジョイタスネット

Javascriptは強いのでimportantなどをしないとCSSが当てられないため、使っているとのこと。

２枚揃った時に少しだけ時間をかけて透過して消えていく、というアレンジを加えた。

神経衰弱

サーバーに上げたら挙動がローカルと違っておかしいけど、プリロードの上手いやり方が思いつかなかったので、またその辺りもクリアしつつカードゲームも作りたいと思う。

'use strict';

/*
window.onload=function(){
	function Card(suit,num){
		this.suit=suit;
		this.num=num;
		this.front;
		this.setFront=function(){
			this.front=`${this.suit}${('0'+this.num).slice(-2)}.gif`;
		};
	}
*/

window.onload=function(){
	class Card{
		//コンストラクタ作成
		constructor(suit,num){
			this.suit=suit;
			this.num=num;
			this.front=`${this.suit}${this.num<10?'0':''}${this.num}.gif`;

		}
	}


	//カード配列作成
	const cards=[];
	const suits=['s','d','h','c'];
	for(let i=0;i<suits.length;i++){
		for(let j=1;j<=13;j++){
			let card=new Card(suits[i],j);
			cards.push(card);
		}
	}

	function shuffle(){
		let i=cards.length;
		while(i>0){
			let index=Math.floor(Math.random()*i--);
			let temp=cards[index];
			cards[index]=cards[i];
			cards[i]=temp;
		}
	}

	//シャッフル実行
	shuffle();

	//テーブル作成
	const table=document.getElementById('table');
	for(let i=0;i<suits.length;i++){
		let tr=document.createElement('tr');
		for(let j=0;j<13;j++){
			let td=document.createElement('td');
			let tempCard=cards[i*13+j];
			td.classList.add('card','back');
			td.style.backgroundImage=`url(images/${tempCard.front})`;
			td.onclick=flip;
			td.num=tempCard.num;
			//td.textContent=`${tempCard.suit}:${tempCard.num}`;
			tr.appendChild(td);
		}
		table.appendChild(tr);
	}

	let remain=52;//52枚
	let firstCard=null;
	let flipTimerId=NaN;
	//flipの作成
	function flip(e){
		//let count=0;
		let td=e.target;
		//td.classList.toggle('back');
		if(!td.classList.contains('back') || flipTimerId){
			return;//表のカードをクリックしても何もしない
		}

		td.classList.remove('back');//カードを表にする
		if(firstCard==null){
			firstCard=td;//1枚目だったら今めくったカードをfirstCardに設定
		}
		else{
			//2枚目だったら1枚目と比較して結果を判定する
			if(firstCard.num==td.num){
				//2枚が同じだったときの処理
				
				/*
				firstCard.classList.add('hidden');
				td.classList.add('hidden');
				firstCard=null;
				
				remain-=2;
				showInfo();
				*/

				
				flipTimerId=setTimeout(function(){
					firstCard.classList.add('hidden');
					td.classList.add('hidden');
					flipTimerId=NaN;
					firstCard=null;
					remain-=2;//2枚減らす
					showInfo();//メソッド呼び出し
				},800);
				

			}
			else{

				flipTimerId=setTimeout(function(){
					firstCard.classList.add('back');
					td.classList.add('back');
					flipTimerId=NaN;
					firstCard=null;
				},800);
			}
		}
	}

		const info=document.getElementById('info');
		let time=0;
		let timerId=NaN;
		function showInfo(){
			let msg;
			if(remain>0){
				msg=`残り:${remain}枚`;
			}
			else{
				msg='Crear!!';
				clearInterval(timerId);
			}
			info.textContent=`${msg}(${time}s)`;
		}

		function countStart(){
			timerId=setInterval(()=>{
				time+=1;
				showInfo();
			},1000);
		}
		countStart();

};