자바스크립트로 숫자 기억 게임을 만들어 보는 실습을 진행하였다.
그림 예제)
- 시작 버튼을 누르면 1000~9999 숫자가 무작위로 나타남.
- 3초 뒤 숫자가 다시 사라짐.
- 사용자는 입력칸에 숫자를 입력하여 제출 버튼을 통해 정답 유무 확인
- 정답인 경우 '정답입니다!' 노출
- 오답인 경우 '오답입니다. 정답은 {숫자}입니다.' 노출
1. 틀 만들기
일단 숫자 기억 게임 UI 부분을 HTML+CSS로 비슷하게 구현해보았다.
나는 바탕을 연한 하늘색으로 채우기 위해 background와 card 부분을 클래스로 나누었다.
card 안에 있는 text는 별도로 스타일을 지정해주었고, 버튼은 사용자 입력을 받는 그룹으로 나누어서 .inputgroup > button {...} 으로 클래스를 별도로 지정하여 스타일을 맞추어 줬다.
(구현)
<style>
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #e9f8ff;
z-index: -1;
}
.card {
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 3px 0px gray;
width: 500px;
height: 300px;
margin: 300px auto auto auto;
padding: 50 auto 50px auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.inputgroup {
margin: 20px auto 20px auto;
}
.inputgroup > button {
background-color: #f7f7f7;
border-color: darkgray;
width: 60px;
height: 40px;
border-radius: 5px;
}
.inputgroup>input {
border-radius: 5px;
border-color: darkgray;
width: 250px;
height: 40px;
}
#title {
font-size: 30px;
font-weight: bold;
color: #383838;
margin-bottom: 20px;
}
#mynumber {
font-size: 25px;
font-weight: bold;
color: #383838;
}
#myresult {
font-weight: bold;
color: #383838;
}
</style><body>
<div class="background">
<div class="card">
<text id="title">숫자 기억 게임</text>
<div id="created_number">
</div>
<div class="inputgroup">
<input type="text" id="inputNumber" style="margin-right:20px" placeholder="숫자를 입력하세요.">
<button onclick="createNumber()">시작</button>
<button onclick="checkNumber()">제출</button>
</div>
<div id="box_result">
</div>
</div>
</div>
</body>부트스트랩으로 가져와서 사용해도 되지만 직접 틀부터 스타일을 만들어 보고 싶어서 가져오진 않았다.
2. 시작 기능 구현
시작 버튼을 누르면 랜덤 숫자를 받아서 입력그룹 위에 해당 숫자를 출력해주어야 한다.
시작 버튼 인라인 이벤트 함수명은 createNumber() 로 지정해 주었다.
(흐름)
1. 인풋그룹 위 공간에 텍스트를 비운다 (여러 번 눌렀을 때 중첩 노출 방지)
emptyNumber();
2. 랜덤 숫자를 받아 변수에 담는다
created_number = Math.floor(Math.random() * 9000) + 1000;
3. 임시 html 바디를 선언 및 정의한다
let temp_html = ``;
temp_html = `<p id="m ynumber">${created_number}</p>`;
4. 원하는 태그 id 값에 임시 html 바디를 append 한다
$('#created_number').append(temp_html);
5. 3초가 지나면 사라지도록 한다
setTimeout(emptyNumber, 3000);
Math.random()
: 0~1 사이의 랜덤 인수를 반환하는 함수
setTimeout()
: 특정 시간이 지난 다음에 코드를 실행하는 함수,
setTimeout(실행할 것, timer) 로 작성한다.
중요한 것은 첫 번째 파라미터가 함수인 경우 함수명만 들어가고 괄호는 들어가지 않는다는 것.
(구현)
function createNumber() {
emptyNumber();
number = Math.floor(Math.random() * 9000) + 1000; // 1000~9999 숫자 랜덤 생성
let temp_html = ``;
temp_html = `<p id="mynumber">${number}</p>`;
$('#created_number').append(temp_html);
setTimeout(emptyNumber, 3000); // 3초가 지나면 생성된 숫자를 삭제한다.
}
function emptyNumber() {
$('#created_number').empty();
}3. 정답 확인 기능 구현
이제 입력칸에 숫자를 적고 제출 버튼을 누르면 최근에 생성된 번호와 일치하는지 확인 후 결과를 노출해줘야 한다.
(흐름)
1. 제출 버튼을 입력하면 입력공간에 있는 데이터를 받아온다.
let inputNumber = $('#inputNumber').val();
2. 임시 html 바디 선언
let temp_html = ``;
3. 받아온 입력 데이터와 최근에 생성된 숫자와 비교한다.
if (inputNumber == created_number) {...}
4-1. 일치하는 경우 정답 결과를 임시 html 바디에 정의
temp_html = `<p id="myresult">정답입니다!</p>`;
4-2. 일치하지 않는 경우 오답 결과 임시 html 바디에 정의
temp_html = `<p id="myresult">오답입니다! 정답은 ${created_number} 입니다!</p>`;
5. 원하는 태그 id에 임시 html 바디 append
$('#box_result').append(temp_html);
(구현)
function checkNumber() {
$('#box_result').empty();
let inputNumber = $('#inputNumber').val();
let temp_html = ``;
if (inputNumber == created_number) {
temp_html = `<p id="myresult">정답입니다!</p>`;
}
else {
temp_html = `<p id="myresult">오답입니다! 정답은 ${created_number} 입니다!</p>`;
}
$('#box_result').append(temp_html);
}4. 결과
가장 최근에 출력된 숫자를 맞추는 간단한 숫자 기억 게임이다.
내일은 여기서 몇개 추가해볼 예정이다.
-
숫자 기억 게임 기록을 저장
1-1. 제출한 경우 정답, 오답 확인하여 저장
1-2. 제출하지 않은 경우 오답으로 저장 -
시작을 누른 뒤 숫자가 사라지기 전에 다시 시작을 누른 경우
2-1. 숫자가 사라질때까지 기다려달라는 안내 추가
2-2. 안내 추가 및 새로운 숫자가 생성되지 않도록 구현 -
제출은 게임 당 한번만 가능하도록 수정
3-1. 제출 이후 한번 더 제출하는 경우 이미 제출하여 새로 게임을 시작하도록 안내 출력
3-2. 제출을 눌러도 기록이 저장되지 않도록 구현
