JS이용한 간단한 게임 만들기

0부터 입력한 값으로 범위를 구하고 내가 예측한 번호를 입력한 후 PLAY를 누르면 

내가 고른 번호는 고정되고 컴퓨터 번호는 play를 누를 때마다 랜덤으로 바뀐다. 

만약 내가 고른 번호와 컴퓨터가 고른 번호가 같다면 you won!으로 바뀐다. 

 

코딩 한 순서 

 

HTML

1) 범위를 입력하는 input창은 최대 범위를 입력하는 것이라 max라는 id값을 넣어주고 숫자만 입력할 거라 type은 number로 해준다. 

 

2) Play라는 버튼을 누르면 submit이 되면서 실행되야 하기 때문에 form태그 안에 넣어주고 받아올 수 있도록 GuessingArea라는 id값을 넣어주고 입력할 수 있도록 input을 넣어준다. 버튼을 누르면 Result div안에 있는 span에 내가 고른 번호와, 컴퓨터가 선택한 번호 그리고 결과를 나타나게 해줄 것이다. 

 

JS

 

3) 

먼저 필요한 form , max, result을 받아올 수 있도록 id요소를 받아오는 getElementById를 사용하여 요소를

받아온다. 

 

4) 

 

play라는 function안에다가 브라우저가 초기화되는 동작을 막기 위해 preventDefault()메소드를 사용한다. 

 

5) 

form태그 안에 있는 input값을 받아와 MyNum에 넣어주고 parseInt함수를 이용하여 숫자로 바꾸어 준다. 

 

🔥parseInt(string, radix);

함수 구문은 이러하며 String을 radix진수로 변환해준다. 10을 입력하여 10진수로 바뀌어 변환한다.

만약 글자를 숫자로 변환할 수 없다면 NaN을 리턴한다. 

 

ComputerNum은 입력한 최대값 안에서 랜덤으로 값을 정할 수 있도록 한다. 

 

🔥Math.ceil함수는 주어진 숫자중 가장 크거나 같은 숫자 중 가장 작은 수를 integer로 변환해준다. 

🔥Math.random()함수는 0부터 1까지의 수를 랜덤으로 추출한다. 따라서 입력한 최대값을 곱한 후 소수점을 없애기 위해 Math.ceil함수를 이용해 깔끔한 정수로 만들어 준다. 

 

6) 

 

혹시나 값을 입력하지 않을 시 바로 함수를 탈출할 수 있게 해준다. 

 

7) 

querySelector로 span값을 받아와 어떻게 결과가 나타나는 지 써준다. 

 

8) 

버튼을 누르면 play함수가 실행될 수 있도록 해준다. 

 

 

전체 JS코드 

결과

같아질 경우 you lost에서 you won으로 바뀌는 것을 볼 수 있다. 

 

🤣

이해가 부족하여 실패한 코드 

HTML 

JS

이해가 부족하여 무조건 querySelector를 남발하며 값을 받아오려 했으나 전혀 받아지지 않았다.   

이렇게 무식하게 무조건 아이디를 받아오는 것이 아니라 form의 id를 가지고 오면 그 변수안에 있는 input을 가져오고 

언제 .value을 사용하여 값을 가져오는 지 알게 되었다.