대탈출2 희망연구소 게임 만들기(javascript)

✔ 계기

• 좋아하는 예능 중 하나인 대탈출을 보던 중 "어 저 게임 정도면 만들어볼 수도 있겠다."라는 생각이 들었다.
• 그리고 한 3월에 만들었던건데 그 당시 다른 자격증공부하느라 코딩을 손놓은지 좀 되서 불안한 마음에 다시 한 번 가볍게 손풀고 기억들 더듬고자 했다!

❓ 희망연구소 게임과 다른점

• 게임을 테스트해봐야하는데, 혼자서는 하기에 너무 어려워서,,^^
  난이도를 선택할 수 있는 부분을 추가했다.
• 난이도가 '하'일 때, 칸 수가 적어서 인지 맞춰야하는 색깔이 칸에 하나도 배치가 안되어있는 경우가 있어 그럴 시, 다시 섞는 과정을 추가함.

🏁 게임 방법

👆. 난이도를 선택한 후 게임을 시작한다.
✌. 순서대로 나오는 색깔들을 기억한다.
✌+👆. 마지막 칸까지 보여진 뒤, 하얀색 화면 뒤에 나오는 맞춰야하는 컬러를 확인!
✌+✌. 그 컬러가 있었던 위치를 모두 찾아낸다.

📺 화면

- html과 css 지식이 많이 부족해 UI 허접함주의,,^^

✏ index.js

$(document).ready(function(){
	var levelBtn = $(".levelBtn");
	var levelName ="";
	
	/* 버튼 색상 초기화 */
	$("button:not(#start)").css("background-color","#dcdcdc");


	$('#high').click(function(){
		$("#high").addClass("click");
		$("#medium").removeClass("click");
		$("#low").removeClass("click");
		$('.click').css("background-color","#828282");
		$("button:not(.click):not(#start)").css("background-color","#dcdcdc");
		levelName = "high";
	});
	$('#medium').click(function(){
		$("#medium").addClass("click");
		$("#high").removeClass("click");
		$("#low").removeClass("click");
		$('.click').css("background-color","#828282");
		$("button:not(.click):not(#start)").css("background-color","#dcdcdc");
		levelName = "medium";
	});
	$('#low').click(function(){
		$("#low").addClass("click");
		$("#medium").removeClass("click");
		$("#high").removeClass("click");
		$('.click').css("background-color","#828282");
		$("button:not(.click):not(#start)").css("background-color","#dcdcdc");
		levelName = "low";
	});
	
	$('#start').click(function(){
		if($(".levelBtn").hasClass("click")){
			location.replace("gameContent.html?lavelName="+ levelName);
		}
		else{
			alert("난이도를 선택 후 시작해주세요.");
		}
	});
})

✏ gameContent.js

$(document).ready(function(){
	/**
		난이도 파악
	 */
	var level = document.location.href.split("=")[1];
	
	
	/*
		난이도 별 초기화면 세팅
	*/
	//난이도에 따른 컬러 갯수 선택과 행과 열 배치
	var colorType, vertical, horizon;
	switch(level){
		case "high":
			colorType = 4;
			horizon = 4, vertical = 5;
			break;
		case "medium":
			colorType = 3;
			horizon = 3, vertical = 4;
			break;
		case "low":
			colorType = 2;
			horizon = 2, vertical = 2;
			break;
		default:
			
	}
	
	var pick = Number.parseInt(Math.random()*colorType); // 맞춰야하는 색깔 선정
	var trClone = $(".trSection:first").clone();
	var tdClone = $(".tdSection:first").clone();
	var i = 0, answer = 0;
	
	for(i; i < vertical; i++){
		$(".tdSection:first").hide();
		var trClone2 = trClone.clone();
		for(var j = 0; j < horizon; j++){
			var tdClone2 = tdClone.clone();
			var random = Number.parseInt(Math.random()*colorType);
			tdClone2.data("rand",random);
			if(random === pick){
				answer++;
			} 
			trClone2.append(tdClone2);
		}
		trClone2.children(":eq(0)").addClass("hide");
		$("#table").append(trClone2);
	}
	$(".trSection:first").addClass("hide");
	
	//초기 화면 세팅 후 본격적인 게임 시작
	if(i == vertical){
		randColorView();
	}
	
	/*
		EVENT SECTION
	*/
	$('.home').click(function(){
		location.replace("gameIndex.html");
	});
	$('.restart').click(function(){
		location.reload();
	});
	
	/*
		함수 SECTION
	*/
	function randColorView(){
		var colorTd = $(".trSection:gt(0)>.tdSection").not(".hide");
		var totalNum = colorTd.length;
		
		for(var z = 0 ; z < totalNum; z++){
			(function(x){
			    setTimeout(function(){
					colorTd.css("background-color","#ffffff");
					colorMatch(Number($(colorTd[x]).data("rand")), $(colorTd[x]));
					if(x >= totalNum-1){
						after();
					}
		    }, 200*x);
		  })(z);
		}
		
		function after(){
			setTimeout(function(){
				//맞춰야하는 색상이 칸에 없을 때 재배치
				if(answer === 0){
					alert("일치하는 색상이 없어 다시 섞겠습니다.");
					location.reload();
				}
				
				//맞춰야하는 색상이 칸에 있을 때 칸 색 초기화
				colorMatch(pick,colorTd);
				choice(colorTd);
			}, 200);
		}
	}
	
	function choice(td){
		var cnt = 0;
		setTimeout(function(){
			td.css("background-color","#ffffff");
			
			td.click(function(){
				if($(this).data("rand") == pick){
					colorMatch(Number($(this).data("rand")), $(this));
					cnt++;
					if(cnt === answer){
						$("#pop").removeClass("hide");
						$("h1").text("SUCCESS");
						td.off('click');
					}
				}else{
					colorMatch("fail", $(this));
					$("#pop").removeClass("hide");
					$("h1").text("FAIL");
					td.off('click');
				}
			});
		}, 300);
	}
	
	function colorMatch(num, td){
		switch(num){
			case 0:
				td.css("background-color","#FF4500");
				break;
			case 1:
				td.css("background-color","#FFFF00");
				break;
			case 2:
				td.css("background-color","#00FF00");
				break;
			case 3:
				td.css("background-color","#1E90FF");
				break;
			default :
				td.css("background-color","#000000");
				break;		
		}
	}
});

💛 나중에 추가해야될 점들 💛

1. firebase이용해 랭킹알 수 있게 하는 것
2. 힌트 기능
3. UI보충