룰
- 4자리수만 입력가능
- 4자리수에서 중복은 없어요
- 4자리수에서 같은 정답하고 같은 값이 있을 경우 "🟡"
값이 같고 자릿수도 같을 경우 "🟢" - 기회는 총 10번
4자리모두 "🟢"가 나오거나, 10번의 기회가 끝나면 게임은 끝
Code
const input = document.querySelector("input");
const numberForm = document.querySelector(".number_form");
const numberList = document.querySelector(".user__number-list");
const correct = document.querySelector(".correct_number")
const answer = document.querySelector(".answer")
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
correct_number = []
answer_number_list = []
// 선택한 숫자를, 리스트에서 제거
const numberPickUp = (number) => {
numbers = numbers.filter(value => value !== number)
correct_number.push(number)
}
// 4자리의 숫자 정하기
const createAnswerNumber = () => {
const first = numbers[Math.floor(Math.random() * numbers.length)];
numberPickUp(first)
const second = numbers[Math.floor(Math.random() * numbers.length)];
numberPickUp(second)
const third = numbers[Math.floor(Math.random() * numbers.length)];
numberPickUp(third)
const fourth = numbers[Math.floor(Math.random() * numbers.length)];
numberPickUp(fourth)
return correct_number
}
// 같은 숫자가 있는지 확인하고 값추가
const paintNumber = number => {
answer_number = []
compare_number_list = []
const li = document.createElement("li")
const span = document.createElement("span")
const h1 = document.createElement("h1")
li.appendChild(span)
li.appendChild(h1)
first = Math.floor(number / 1000)
second = Math.floor(number / 100) - (first * 10)
third = Math.floor(number / 10) - (first * 100) - (second * 10)
fourth = number - (first * 1000) - (second * 100) - (third * 10)
answer_number.push([first, second, third, fourth])
for (let i = 0; i < answer_number[0].length; i++) {
for (let j = i + 1; j < answer_number[0].length; j++) {
if (answer_number[0][i] === answer_number[0][j]) {
alert("같은 숫자는 입력 안되요~")
handleSubmit()
}
}
}
for (let i = 0; i < correct_number.length; i++) {
for (let j = 0; j < correct_number.length; j++) {
if (correct_number[i] === answer_number[0][j]) {
if (i === j) {
compare_number_list.push("🟢")
} else {
compare_number_list.push("🟡")
}
}
}
}
span.innerText = answer_number
h1.innerText = compare_number_list
numberList.appendChild(li)
const numberObject = {
text: number,
}
answer_number_list.push(numberObject)
if (compare_number_list[0] === "🟢" && compare_number_list[1] === "🟢" && compare_number_list[2] === "🟢" && compare_number_list[3] === "🟢") {
alert("정답이에요")
input.classList.add("hiding")
answer.classList.remove("hiding")
}
if (answer_number_list.length === 10) {
input.classList.add("hiding")
answer.classList.remove("hiding")
}
}
//정답은 미리 추가 해놓음.
correct.innerText = createAnswerNumber()
//정답 콘솔에 노출
console.log(correct_number)
//핸들, form event 추가
numberForm.addEventListener("submit", handleSubmit = e => {
e.preventDefault();
const currentValue = input.value
if (currentValue / 1000 < 1 || currentValue / 10000 > 1) {
alert("4자리 숫자를 입력해주세요!")
handleSubmit()
}
paintNumber(currentValue);
})
정답 정하는 방법
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
correct_number = []
answer_number_list = []
const numberPickUp = (number) => {
numbers = numbers.filter(value => value !== number)
correct_number.push(number)
}
const createAnswerNumber = () => {
const first = numbers[Math.floor(Math.random() * numbers.length)];
numberPickUp(first)
const second = numbers[Math.floor(Math.random() * numbers.length)];
numberPickUp(second)
const third = numbers[Math.floor(Math.random() * numbers.length)];
numberPickUp(third)
const fourth = numbers[Math.floor(Math.random() * numbers.length)];
numberPickUp(fourth)
return correct_number
}numberPickUp 함수는 중복숫자를 제거 해주는 기능이고,
CreateAnswerNumber 함수에서
numbers에 있는 숫자들을 골라준다.
고르 numberPickUp 함수를 통해 숫자를 numbers에서 제거
correct_number를 리턴
이렇게 4자리 숫자를 만들어준다.
input값 가져오기
numberForm.addEventListener("submit", handleSubmit = e => {
e.preventDefault();
const currentValue = input.value
if (currentValue / 1000 < 1 || currentValue / 10000 > 1) {
alert("4자리 숫자를 입력해주세요!")
handleSubmit()
}
paintNumber(currentValue);
})HTML에서 form에 submit해주는 이벤트를 발생시키고,
이 이벤트를 설정해주는 handle을 이용
여기서 4자리 숫자만 입력 받기위해서
if를 이용해 범위를 정해준다.
값 HTML에 나타내기
우선 첫부분부터 보면,
answer_number = []
compare_number_list = []
const li = document.createElement("li")
const span = document.createElement("span")
const numberId = numbers.length + 1
li.appendChild(span)
first = Math.floor(number / 1000)
second = Math.floor(number / 100) - (first * 10)
third = Math.floor(number / 10) - (first * 100) - (second * 10)
fourth = number - (first * 1000) - (second * 100) - (third * 10)
answer_number.push([first, second, third, fourth])
일단 정답을 나타내는 부분은 ul에서 li를 추가해서 나타내는 방법을 사용했다.
4자리 숫자를 입력하게 되면
[ 1000자릿수, 100의 자릿수, 10의 자릿수, 1의 자릿수]
이렇게 넣기위해 나누어주어서 각각의 값을 리스트에 넣어주었다.
이렇게 만들어진 리스트자체를 하나의 리스트에 넣어 버림.
입력받은 값 중복체크
for (let i = 0; i < answer_number.length; i++) {
for (let j = i + 1; j < answer_number.length; j++) {
if (answer_number[i] === answer_number[j]) {
alert("같은 숫자는 입력 안되요~")
handleSubmit()
}
}
}그 이후에는 받아온 숫자중에서 중복값이 있나 확인하기 위해서
n[0] => n[1], n[2], n[3]
n[1] => n[2], n[3]
...
이런식으로 비교하기 위해서 for문을 사용해 값을 체크 해줬다.
alert를 띄우는 방식으로 진행
Strike와 Ball 확인
for (let i = 0; i < correct_number.length; i++) {
for (let j = 0; j < correct_number.length; j++) {
if (correct_number[i] === answer_number[0][j]) {
if (i === j) {
compare_number_list.push("🟢")
} else {
compare_number_list.push("🟡")
}
}
}
}어쩌피 둘다 길이가 4인 리스트이기 때문에 비교하기 위해서
하나의 리스트의 길이로 비교를 해주었다.
answer_number에는 리스트자체를 넣어주었기 때문에, [0]을 넣어서
리스트안의 리스트 값을 확인해줌.
값이 같으면 "B"을 표시 거기에 자리도 같다면 "S"를 표시해줌
정답 체크
span.innerText = answer_number
h1.innerText = compare_number_list
numberList.appendChild(li)
const numberObject = {
text: number,
}
answer_number_list.push(numberObject)
if (compare_number_list[0] === "🟢" && compare_number_list[1] === "🟢" && compare_number_list[2] === "🟢" && compare_number_list[3] === "🟢") {
alert("정답이에요")
input.classList.add("hiding")
answer.classList.remove("hiding")
}
if (answer_number_list.length === 10) {
input.classList.add("hiding")
answer.classList.remove("hiding")
}
}텍스트를 넣어주고, 총 10번의 기회가 있기때문에
id를 부여해주어서 id가 0이 될때 게임을 멈추게 할려 했는데,
길이로 해도 괜찮아서 일단은 둘다 넣었습니다
id ===10으로 체크해도 괜찮고, 길이로 해도 둘다 가능
["🟢","🟢","🟢","🟢"]를 체크하려고 맨 처음에는
if(compare_number_list === ["🟢","🟢","🟢","🟢"]{}이런식으로 가능하지 않을까해서 시도 해봤는데 안되서 하나하나 비교를해주어서
게임을 끝내는 방향으로 잡고,
숫자가 정확하게 일치하거나, 10번희 기회가 모두 끝나게되면
게임은 끝입니다.
끝! 🚀
졌다....
고칠거
Strike랑 ball 의 위치가 숫자의 위치와 일치해서
맞추기 쉬운듯 하다.....
쉬운거 취소...
strike일 경우에는 앞쪽에, ball은 뒤쪽에 올 수 있게 바꿔봐야겟다.
딸기검 -본캐🐒 , 김준형 - 현실 본캐 🐒