需要帮助完成我必须制作彩色游戏的学校作业

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/