[Javascript]デジタル野球ゲームを作る

ルール＃ルール＃

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関数で
数字の中から数字を選ぶ.
「均一な数値PickUp」関数を使用して、数値から数値を削除します.
正しいnumberを返します
こうして4桁の数字を作る

入力値

numberForm.addEventListener("submit", handleSubmit = e => {
    e.preventDefault();
    const currentValue = input.value
    if (currentValue / 1000 < 1 || currentValue / 10000 > 1) {
        alert("4자리 숫자를 입력해주세요!")
        handleSubmit()
    }
    paintNumber(currentValue);

})

HTMLはフォームにコミットされたイベントを刺激します.
handleを使用してこのイベントを設定する
ここには4桁しか入力しません.
ifを用いて範囲を決定する.

値HTMLに表示

まず第1部から見ると、

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文を用いて値をチェックした.
アラームを起動するように行う

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のリストなので比較のため
1つのリストの長さで比較した.
リスト自体がresert 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の位置は数字の位置と一致しています.
推測しやすいようですが...
簡単なキャンセル...
ストライクでしたら前のボールに変えて後ろのボールにします