숫자 기억 게임 만들기 1일차

지난 번에 콘솔을 이용해서 강아지 그리는 걸 쉽게 했다가 이번에 간단하게나마 게임을 하나 만드려고 하니 머리가 터질 것 같다. 하지만 이런 걸 만들어내지 못하면 개발자라고 할 수 없으니 완성을 목표로 오늘부터 열심히 게임을 만들기 시작했다. 

 

숫자 기억 게임은 시작 버튼을 누르면 나오는 1000~9999 사이의 정수가 3초 뒤 사라진 뒤 해당 랜덤 숫자가 뭐였는지를 입력하고 제출하여 그것이 맞았는지 틀렸는지 확인하는 게임이다. 사용자 입장에서는 매우 쉬운 게임이지만, 만드는 입장에서 초보자인 내가 무사히 구사할 수 있을지 머리가 아찔해진다. 

 

만드는 입장에서 이 게임의 구성요소를 좀 더 자세하게 묘사하자면

 

1. 컨테이너 박스 안에 안에 있는 1개의 타이틀, 1개의 텍스트 박스, 2개의 버튼, 2개의 박스를 알맞게 배치하고 
2. 그 중 2개의 박스에 알맞은 스크립트를 연결해주어야 한다. 
   1. 2개 중 위쪽 박스 안에는 시작 버튼을 누르면 1000~9999 사이의 랜덤한 정수가 나타났다가 3초 뒤 사라지는 스크립트를 짜넣고
   2. 2개 중 아래쪽 박스 안에는 제출 버튼을 누르면 1개의 텍스트 박스 안에 입력한 숫자가 참인지 아닌지 판별하고 결과값을 출력하는 스크립트를 짜넣는다. 

이외에 사용자 편의를 위한 디자인적 개선이나 꾸미기가 가능하지만, 일단 알맞은 스크립트를 작성할 수 있어야 하겠다. 

 

일단 오늘의 스크립트 결과물은 이렇다. 

function generateRandomNumber() {

    math.floor(math.random()*10000);

}

 

function startGame() {

    let number_display = generateRandomNumber;

    setTimeout(delete number_display, 30000);

}

 

function checkNumber(result) {

    if(user-input === generateRandomNumber) {

        alert('정답입니다!');

    } else {

        alert('정답은 +generateRandomNumber+입니다');

    }

}

 

아직은 작동되지 않는 함수들로, 차례로

1. 랜덤한 값 1000*9999 사이의 정수를 생성하는 함수
2. 시작 버튼을 누르면 1에서 생성한 정수를 위쪽 박스에 표시했다가 3초 뒤에 사라지게 하는 함수
3. 제출 버튼을 누르면 텍스트 박스에 입력한 값이 1과 같은지 비교하고 같으면 alert 안에 있는 결과값을 반환하는 함수

이다. 

 

이 중 내가 오늘 처음 써보는 것은 소수점 이하의 값을 내리는 parseInt와 0과 1사이의 랜덤한 값을 생성하는 math.random, 그리고 setTimeout(코드, 지연시간(ms단위))다. delete 또한 오늘 처음 알게 된 것이지만 아직 활용법을 잘 모르겠다. 1의 랜덤한 값을 생성하는 것 자체는 나중에 수정할 수 있다고 쳐도, 아직 2와 3을 구현할 실마리를 찾지 못해 헤매고 있다. 

 

내일은 적어도 2를 성공할 수 있기를 바란다.