✅ 첫번째 토이프로젝트와 마찬가지로 블로그 를 참고하여 두번째 게임을 만들었다.
- 게임 기본 요구 사항
- N x M 의 화면에 하나만 다른 글자로 채워서 보여준다.
- 해당 게임의 정답 글자 위치는 매번 달라져야 한다
- 정답 글자를 선택하면 다음 stage로 넘어간다.
- 아니면 실패 메시지를 띄우고 종료한다.
✅ 구현 기능
1. 기본 동작
2. 시간 초과
✅ 랜덤으로 위치 설정.
// 처음 작성한 코드
function shuffle() {
for(let i = 0; i < array.length; i ++) {
const randomNum = Math.floor(Math.random() * (i));
const temporary = array[i];
array[i] = array[randomNum];
array[randomNum] = temporary;
}
return array;
}input value 값들을 배열로 받아와서 다시 랜덤하게 순서를 섞는 방법을 생각했다. 하지만 random 함수가 랜덤 값이 균일하게 나오지 않을 수 있다는 문제가 있기에 최대한 균일하게 발생되는 피셔 예이츠 알고리즘을 사용하였다.
그럼에도 불구하고, 똑같은 랜덤 값이 발생하는 문제로 인해 가끔 '먽' 글자가 여러개 출력되는 경우가 발생했다. 랜덤 정렬을 처음 사용해 보는 나는 간단해 보이는 이 문제의 해결방법을 찾기 위해 한참 헤멧다.ㅠㅠ 그러던 중에 랜덤 숫자를 하나만 받아오면 중복 발생을 걱정할 필요가 없다는 생각이 들었고, 랜덤 값을 한번만 발생 시키고, 배열 인덱스 값과 랜덤 값이 같을 때 '먽'을 입력하는 방법으로 바꿔주어, 문제점을 해결하였다!
function shuffle() {
let randomNum = Math.floor(Math.random() * 16);
for(let i = 0; i < 16; i++)
{
if(i == randomNum) {
array[i]="먽";
}
else {
array[i]='멵';
}
}
printArray();
}✅ setInterval , clearInterval
시간초과가 될 경우, 게임이 종료되는 기능을 구현하기 위해 타이머 함수를 사용하였다. setTimeout 과 차이점은 setTimeout 은 일정 시간이 지난 후 함수를 실행하지만, setInterval 일정 시간 간격으로 함수를 반복하여 실행한다. 나의 경우에는 7초동안 함수를 실행하기때문에, setInterval 를 사용하여 구현하였고, clearInterval 를 사용하여, '멵' 을 눌렀을 때, 시간이 정지되도록 하였다.
참고사이트
✅ 느낀 점
게임 기본 요구 사항에 따라 완성하였지만, 아쉽게도 난이도 상승은 구현하지 못했다.😥
여러 자료를 찾아보았지만, 아직까지 구현방법에 대한 감이 안 오는 부분이다. 추후에 구현하여 업데이트 할 예정이다. 마지막으로 나처럼 자바스크립트를 입문하는 단계이신 분들에게는 토이프로젝트를 해보는 것을 적극 추천한다!
