JavaScript 산수 게임 완전 정리

 

 

Web Development · JavaScript

JavaScript 산수 게임

산수 문제 채점, 난수 문제 생성, 해상도 확인 예제를 한 흐름으로 정리합니다.

시작 오늘 분석할 코드

원본 코드는 고정 산수 문제를 채점하는 버전에서 시작해, 자동으로 문제를 생성하는 버전으로 확장됩니다. 마지막에는 screen 객체로 해상도를 확인하는 보조 예제도 포함됩니다.

function calc() { let total = 0; let qArray = document.getElementsByClassName("question"); let aArray = document.getElementsByClassName("answer"); for (let i = 0; i < qArray.length; i++) { let question = qArray[i].innerHTML; let correctAnswer = Math.floor(eval(question)); let userAnswer = aArray[i].value; if (userAnswer == "" || isNaN(userAnswer)) { qArray[i].style.textDecoration = "line-through"; } else if (parseInt(userAnswer) == correctAnswer) { total += 1; qArray[i].style.textDecoration = "none"; } else { qArray[i].style.textDecoration = "line-through"; } } document.getElementById("score").innerHTML = total; } function makeExpression() { let number1 = Math.floor(Math.random() * 20) + 1; let number2 = Math.floor(Math.random() * 20) + 1; let op = Math.floor(Math.random() * 4); }

getElementsByClassName같은 class를 가진 요소 목록을 가져옵니다.

eval문자열을 코드처럼 실행해 식을 계산합니다.

Math.floor소수점을 버려 정수로 만듭니다.

Math.random0 이상 1 미만 난수를 만듭니다.

parseInt문자열을 정수로 변환합니다.

screen사용자 화면 장치 정보를 담습니다.

---

1 예제의 목표

이 예제는 산수 문제를 화면에 보여주고, 사용자가 입력한 답을 채점합니다. 두 번째 버전에서는 문제를 난수로 자동 생성하고 다시 버튼으로 새 문제를 만들 수 있습니다.

문제 표시

→

답 입력

→

채점

→

점수 출력

---

2 문제와 답 배열 가져오기

getElementsByClassName은 같은 class를 가진 요소들을 배열처럼 모아 줍니다. 문제 칸은 question, 답 입력 칸은 answer class로 묶습니다.

코드	대상	역할
qArray	.question	산수식이 들어 있는 td 목록
aArray	.answer	사용자 답 input 목록
qArray[i]	i번째 문제	식 읽기와 줄긋기 처리
aArray[i]	i번째 답	입력값 읽기

---

3 eval로 식 계산하기

원본은 문제 칸의 innerHTML에 들어 있는 5*6, 7+5*3 같은 문자열을 eval로 계산합니다.

eval은 문자열을 코드로 실행하므로 사용자 입력을 직접 넣으면 위험합니다. 이 예제에서는 문제 문자열을 코드가 직접 만들기 때문에 학습용으로만 이해합니다.

식	eval 결과	설명
5*6	30	곱셈 계산
7+5*3	22	곱셈 우선순위 적용
35-7	28	뺄셈 계산
9/2	4.5	나누기 결과는 소수 가능

---

 

반응형

 

4 Math.floor가 필요한 이유

두 번째 버전은 나누기 문제도 만들기 때문에 결과가 소수가 될 수 있습니다. 원문 안내처럼 나누기 결과는 정수로 처리하려고 Math.floor를 사용합니다.

eval(question)

9/2의 결과는 4.5처럼 소수가 될 수 있습니다.

Math.floor(eval(question))

소수점을 버려 4처럼 정수 답으로 비교합니다.

---

5 사용자 답 검증

답이 비어 있거나 숫자가 아니면 틀린 것으로 처리하고, 문제에 줄을 긋습니다. 숫자 답이면 정답과 비교합니다.

조건	판정	화면 처리
userAnswer == ""	답 없음	line-through
isNaN(userAnswer)	숫자 아님	line-through
parseInt(userAnswer) == correctAnswer	정답	줄 제거
그 외	오답	line-through

---

6 점수 계산 흐름

total은 맞은 문제 수를 저장합니다. 반복문이 끝난 뒤 score span에 total을 넣어 화면에 표시합니다.

1

total 초기화채점할 때마다 0에서 다시 시작합니다.

2

각 문제 채점문제 배열과 답 배열을 같은 index로 비교합니다.

3

정답이면 증가맞은 경우 total에 1을 더합니다.

4

화면 반영score 요소에 최종 점수를 출력합니다.

---

7 난수 문제 생성

Math.random()은 0 이상 1 미만의 난수를 만듭니다. 여기에 20을 곱하고 floor를 적용한 뒤 1을 더하면 1부터 20까지의 정수를 만들 수 있습니다.

코드	범위	의미
Math.random()	0 이상 1 미만	기본 난수
* 20	0 이상 20 미만	범위 확대
Math.floor(...)	0부터 19	정수화
+ 1	1부터 20	0 제외
Math.floor(Math.random()*4)	0부터 3	연산자 선택 번호

---

8 switch로 연산자 고르기

난수 op 값이 0, 1, 2, 3 중 하나로 나오면 switch 문에서 +, -, *, / 중 하나로 바꿉니다.

op	operator	문제 예시
0	+	8+3
1	-	8-3
2	*	8*3
3	/	8/3

---

9 다시 버튼이 하는 일

다시 버튼은 새 문제를 만들 뿐 아니라 이전 채점 흔적을 초기화합니다. 문제의 줄긋기를 없애고, 답 입력칸을 비우고, 점수를 0으로 되돌립니다.

A

새 식 생성number1, operator, number2를 합쳐 question에 넣습니다.

B

줄긋기 제거textDecoration을 none으로 되돌립니다.

C

답 비우기input value를 빈 문자열로 만듭니다.

D

점수 초기화score를 0으로 표시합니다.

---

10 screen 해상도 확인

보조 예제는 screen.width와 screen.height를 읽어 해상도가 기준보다 낮으면 alert를 띄웁니다.

조건	의미	결과
screen.width < 1280	화면 너비 부족	경고 가능
screen.height < 1024	화면 높이 부족	경고 가능
||	둘 중 하나만 참이어도 참	alert 실행
onload	페이지 로드 시 실행	자동 확인

---

11 자주 하는 실수

실수	증상	해결
eval에 사용자 입력 사용	보안 위험이 생깁니다.	코드가 만든 식만 계산하거나 파서를 따로 둡니다.
parseInt 없이 비교	문자열과 숫자 비교가 헷갈립니다.	입력값을 숫자로 바꿉니다.
답칸 초기화 누락	새 문제에 이전 답이 남습니다.	aArray[i].value를 비웁니다.
점수 초기화 누락	다시 버튼 후 이전 점수가 남습니다.	score를 0으로 되돌립니다.
screen을 viewport로 착각	브라우저 창 크기와 맞지 않습니다.	screen과 window 크기를 구분합니다.

---

12 복습 체크리스트

체크	통과 기준
문제 배열	question class 요소들을 가져올 수 있습니다.
답 배열	answer class 입력값을 읽을 수 있습니다.
eval	문자열 식 계산과 위험성을 함께 설명합니다.
Math.floor	나누기 결과를 정수로 바꾸는 이유를 압니다.
Math.random	1부터 20까지 난수를 만드는 흐름을 설명합니다.
screen	해상도 확인 예제의 조건문을 이해합니다.

---

13 테스트 케이스

케이스	입력	예상
정답	정확한 숫자	점수 1 증가, 줄 없음
오답	틀린 숫자	점수 변화 없음, 줄긋기
빈 답	빈 문자열	오답 처리
문자 입력	abc	isNaN 조건으로 오답 처리
다시 버튼	클릭	문제와 답, 점수 초기화
해상도 조건	작은 화면	alert 표시 가능

---

14 디버깅 포인트

산수 게임은 문제 배열과 답 배열의 index가 맞아야 합니다. 한쪽 요소 개수가 달라지면 같은 번호끼리 비교하는 구조가 깨질 수 있습니다.

확인	콘솔 예시	의미
문제 개수	console.log(qArray.length)	채점할 문제 수를 확인합니다.
답 개수	console.log(aArray.length)	입력칸 수가 문제 수와 같은지 봅니다.
현재 식	console.log(question)	eval에 들어가는 문자열을 확인합니다.
정답	console.log(correctAnswer)	계산 결과가 예상과 같은지 봅니다.
사용자 답	console.log(userAnswer)	input value가 제대로 읽히는지 확인합니다.
총점	console.log(total)	반복문 안에서 점수가 누적되는지 봅니다.

1

배열 길이 확인question과 answer 요소 개수가 같은지 먼저 봅니다.

2

식 확인innerHTML에 실제 산수식이 들어 있는지 확인합니다.

3

정답 확인eval과 Math.floor 결과를 콘솔에서 비교합니다.

4

화면 표시 확인score span과 줄긋기 스타일이 갱신되는지 봅니다.

---

핵심 한 줄 요약

calc문제 배열과 답 배열을 같은 index로 비교해 점수를 계산합니다.

makeExpression난수와 switch로 새 산수식을 만들고 입력 상태를 초기화합니다.

screenscreen 객체는 화면 해상도 같은 장치 정보를 확인할 때 사용합니다.

Tags

#JavaScript#산수게임#eval#Math.floor#Math.random#getElementsByClassName#parseInt#screen#DOM#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, 산수게임, eval, Math.floor, Math.random, getElementsByClassName, parseInt, screen, DOM, 티스토리