需要幫助完成我必須制作彩色游戲的學校作業

Question

我的任務是使用 javascript 制作一個彩色游戲，我不知道如何完成它。 分配的前提是有 4 個帶有隨機 colors 的框，用戶必須單擊與頂部框匹配的底部三個之一。 我還有一個問題，其中一個框並不總是匹配。

我沒有嘗試太多，因為我不知道從哪里開始，我的編碼經驗很少。

 var box1 = document.getElementById("box1"); box1.style.height = "150px"; box1.style.width = "150px"; var box2 = document.getElementById("box2"); box2.style.height = "150px"; box2.style.width = "150px"; box2.style.position = "relative"; box2.style.top = "100px"; var box3 = document.getElementById("box3"); box3.style.height = "150px"; box3.style.width = "150px"; box3.style.position = "relative"; box3.style.bottom = "50px"; box3.style.left = "150px"; var box4 = document.getElementById("box4"); box4.style.height = "150px"; box4.style.width = "150px"; box4.style.position = "relative"; box4.style.bottom = "200px"; box4.style.left = "300px"; function box1Color() { var x = Math.floor(Math.random() * 256); var y = Math.floor(Math.random() * 256); var z = Math.floor(Math.random() * 256); var bgColor = "rgb(" + x + "," + y + "," + z + ")"; box1.style.backgroundColor = bgColor; } function box2Color() { var x = Math.floor(Math.random() * 256); var y = Math.floor(Math.random() * 256); var z = Math.floor(Math.random() * 256); var bgColor = "rgb(" + x + "," + y + "," + z + ")"; box2.style.backgroundColor = bgColor; } function box3Color() { var x = Math.floor(Math.random() * 256); var y = Math.floor(Math.random() * 256); var z = Math.floor(Math.random() * 256); var bgColor = "rgb(" + x + "," + y + "," + z + ")"; box3.style.backgroundColor = bgColor; } function box4Color() { var x = Math.floor(Math.random() * 256); var y = Math.floor(Math.random() * 256); var z = Math.floor(Math.random() * 256); var bgColor = "rgb(" + x + "," + y + "," + z + ")"; box4.style.backgroundColor = bgColor; } var init = (function() { box1Color(); box2Color(); box3Color(); box4Color(); }());

 <h1>Fargespill v.1</h1> <h3>Klikk på boksen nedenfor som matcher denne boksens farge </h3> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div id="box4"></div>

預期的結果應該是底部 3 個框之一匹配，當您單擊匹配的那個時，您會收到正確的警報。

Answer 1

為了讓它工作，我首先添加了一個小腳本，它選擇一個介於 0 和 3 之間的隨機數。這個數字將是與問題顏色相同的框。

correctBox = Math.floor(Math.random() * 3)+1;

在創建問題的顏色時，我將其保存在一個變量中，以便在正確答案上使用該顏色。 我還必須添加代碼來檢查它是否必須在盒子上應用正確的顏色。

function box1Color() {
    if(correctBox == 1){
        box1.style.backgroundColor = questionBgColor;
    }else{
        var x = Math.floor(Math.random() * 256);
        var y = Math.floor(Math.random() * 256);
        var z = Math.floor(Math.random() * 256);
        var bgColor = "rgb(" + x + "," + y + "," + z + ")";
        box1.style.backgroundColor = bgColor;
    }
}

然后我在 css 中添加了一個邊框，以便您可以更好地看到更輕的 colors。

.box{
    box-sizing: border-box;
    border: 3px solid black;
}

我向每個框添加了 onclick 屬性，這將觸發 JavaScript function 來檢查答案。
Html：

<div id="box1" class="box" onclick="boxClicked(1);"></div>

JS：

function boxClicked(boxNum){
    if(boxNum == correctBox){
        //answer correct
        score++;//add one to score
        document.getElementById("score").innerText = score;
    }else{
        //wrong answer
        score--;//remove one from score
        document.getElementById("score").innerText = score;
    }
    newQuestion();
}

就是這樣，這是一個片段

 var correctBox; var score = 0; var question = document.getElementById("question"); question.style.height = "150px"; question.style.width = "150px"; var box1 = document.getElementById("box1"); box1.style.height = "150px"; box1.style.width = "150px"; box1.style.position = "relative"; box1.style.top = "100px"; var box2 = document.getElementById("box2"); box2.style.height = "150px"; box2.style.width = "150px"; box2.style.position = "relative"; box2.style.bottom = "50px"; box2.style.left = "150px"; var box3 = document.getElementById("box3"); box3.style.height = "150px"; box3.style.width = "150px"; box3.style.position = "relative"; box3.style.bottom = "200px"; box3.style.left = "300px"; var questionBgColor; function boxClicked(boxNum){ if(boxNum == correctBox){ //answer correct score++;//add one to score document.getElementById("score").innerText = score; }else{ //wrong answer score--;//remove one from score document.getElementById("score").innerText = score; } newQuestion(); } function questionColor() { var x = Math.floor(Math.random() * 256); var y = Math.floor(Math.random() * 256); var z = Math.floor(Math.random() * 256); questionBgColor = "rgb(" + x + "," + y + "," + z + ")"; question.style.backgroundColor = questionBgColor; } function box1Color() { if(correctBox == 1){ box1.style.backgroundColor = questionBgColor; }else{ var x = Math.floor(Math.random() * 256); var y = Math.floor(Math.random() * 256); var z = Math.floor(Math.random() * 256); var bgColor = "rgb(" + x + "," + y + "," + z + ")"; box1.style.backgroundColor = bgColor; } } function box2Color() { if(correctBox == 2){ box2.style.backgroundColor = questionBgColor; }else{ var x = Math.floor(Math.random() * 256); var y = Math.floor(Math.random() * 256); var z = Math.floor(Math.random() * 256); var bgColor = "rgb(" + x + "," + y + "," + z + ")"; box2.style.backgroundColor = bgColor; } } function box3Color() { if(correctBox == 3){ box3.style.backgroundColor = questionBgColor; }else{ var x = Math.floor(Math.random() * 256); var y = Math.floor(Math.random() * 256); var z = Math.floor(Math.random() * 256); var bgColor = "rgb(" + x + "," + y + "," + z + ")"; box3.style.backgroundColor = bgColor; } } function newQuestion(){ correctBox = Math.floor(Math.random() * 3)+1; questionColor(); box1Color(); box2Color(); box3Color(); } newQuestion();

 .box{ box-sizing: border-box; border: 3px solid black; }

 <h1>Fargespill v.1</h1> <h3>Klikk på boksen nedenfor som matcher denne boksens farge </h3> <div> Your current score is: <span id="score">0</span> </div> <div id="question" class="box"></div> <div id="box1" class="box" onclick="boxClicked(1);"></div> <div id="box2" class="box" onclick="boxClicked(2);"></div> <div id="box3" class="box" onclick="boxClicked(3);"></div>

這里也是 jsfiddle 頁面的鏈接： https://jsfiddle.net/Etibi/9hzg0vnb/