颜色猜谜游戏

提问者：小点点

我正在尝试创建一个RGB颜色猜谜游戏。我想有3个级别容易，中等和硬。当玩家选择简单，我想要3个方块显示，如果他们想要中等，我想要6个方块，硬应该有9个方块。我有这个代码，但我有麻烦，当我选择中或硬9方块上来。还有，在我的。html文件中的div id=“container”中，有没有更好的方法来编写逻辑，而不是仅仅输入9次？还有一个问题，你能写出一个有3个以上条件的三元运算符吗？或者，编写if/else语句会更容易，还是嵌套的三进制语句也会更容易？

我不是在寻找答案，我是在寻找能给我指明正确方向的人。

谢谢你抽出时间。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Color Game</title>
    <link rel="stylesheet" type="text/css" href="colorgame.css">
</head>
<body>
<h1>The Amazing
<br>
    <span id="colorDisplay">RGB</span>
<br>    
    Color Game
</h1>

<div id="stripe">
    <button id="reset">New Colors</button>
    <span id="message"></span>  
    <button class="mode selected">Easy</button>
    <button class="mode">Medium</button>
    <button class="mode">Hard</button>
</div>

    <div id="container">

        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
<script type="text/javascript" src="colorgame.js"></script>
</body>
</html>

CSS

body {
    background-color: #232323;
    margin: 0;
    font-family: "Montserrat", "Avenir";
}

.square {
    width: 30%;
    background: purple;
    padding-bottom: 30%;
    float: left;
    margin: 1.66%;
    border-radius: 15%;
    transition: background 0.6s;
    -webkit-transition: background 0.6s;
    -moz-transition: background 0.6s;
}

#container {
    margin: 20px auto;
    max-width: 600px;
}

h1 {
    text-align: center;
    line-height: 1.1;
    font-weight: normal;
    color: white;
    background: steelblue;
    margin: 0;
    text-transform: uppercase;
    padding: 20px 0;
}

#colorDisplay {
    font-size: 200%;
}

#message {
    display: inline-block;
    width: 20%;
}
#stripe {
    background: white;
    height: 30px;
    text-align: center;
    color: black;
}

.selected {
    color: white;
    background: steelblue;
}

button {
    border: none;
    background: none;
    text-transform: uppercase;
    height: 100%;
    font-weight: 700;
    color: steelblue;
    letter-spacing: 1px;
    font-size: inherit;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    outline: none;
}

button:hover {
    color: white;
    background: lightblue;
}

var numSquares = 9;
var colors = [];
var pickedColor;
var squares = document.querySelectorAll('.square');
var colorDisplay = document.getElementById('colorDisplay');
var messageDisplay = document.querySelector('#message');
var h1 = document.querySelector('h1');
var resetButton = document.querySelector('#reset');
var modeButtons = document.querySelectorAll('.mode');

init();

function init() {
    setupModeButtons();
    setupSquares();
    reset();
}

function setupModeButtons() {
    for (var i = 0; i < modeButtons.length; i++) {
        modeButtons[i].addEventListener('click', function() {
            modeButtons[0].classList.remove('selected');
            modeButtons[1].classList.remove('selected');
            modeButtons[2].classList.remove('selected');
            this.classList.add('selected');

            this.textContent === 'Easy' ? (numSquares = 3) : (numSquares = 9);

            reset();
        });
    }
}

function setupSquares() {
    for (var i = 0; i < squares.length; i++) {
        //add click listeners to squares
        squares[i].addEventListener('click', function() {
            //grab color of clicked square
            var clickedColor = this.style.backgroundColor;
            //compare color to picked color
            if (clickedColor === pickedColor) {
                messageDisplay.textContent = 'Correct!';
                resetButton.textContent = 'Play Again?';
                changeColors(clickedColor);
                h1.style.backgroundColor = clickedColor;
            } else {
                this.style.backgroundColor = '#232323';
                messageDisplay.textContent = 'Try Again';
            }
        });
    }
}

function reset() {
    colors = generateRandomColors(numSquares);
    //pick new random color from array
    pickedColor = pickColor();
    //change colorDisplay to match picked color
    colorDisplay.textContent = pickedColor;
    resetButton.textContent = 'New Colors';
    messageDisplay.textContent = '';
    //change colors of squares
    for (var i = 0; i < squares.length; i++) {
        if (colors[i]) {
            squares[i].style.display = 'block';
            squares[i].style.backgroundColor = colors[i];
        } else {
            squares[i].style.display = 'none';
        }
    }
    h1.style.backgroundColor = 'steelblue';
}
resetButton.addEventListener('click', function() {
    reset();
});

function changeColors(color) {
    //loop through all sqaures
    for (var i = 0; i < squares.length; i++) {
        //change each color to match given color
        squares[i].style.backgroundColor = color;
    }
}

function pickColor() {
    var random = Math.floor(Math.random() * colors.length);
    return colors[random];
}

function generateRandomColors(num) {
    //make an array
    var arr = [];
    //repeat num times
    for (var i = 0; i < num; i++) {
        //get random color and push into arr
        arr.push(randomColor());
    }
    //return that array
    return arr;
}

function randomColor() {
    //pick a "red" from 0-255
    var r = Math.floor(Math.random() * 256);
    //pick a "green" from 0-255
    var g = Math.floor(Math.random() * 256);
    //pick a "blue" from 0-255
    var b = Math.floor(Math.random() * 256);
    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

共1个答案

匿名用户

我有这个代码，但我有麻烦，当我选择中或硬9方块上来。

是的，由于您的三元条件被写成this.textcontent==='Easy'，所以会发生这种情况？（numSquares=3）:（numSquares=9）；如果TextContent容易，它将numSquares取为3，如果它不容易（中等或困难），则numSquares将取为9。

为了解决这个问题，我想你可以下一个三值条件，或者只是写一个if else块。

还有，在我的。html文件中的div id=“container”中，有没有更好的方法来编写逻辑，而不是仅仅输入9次？

我刚刚对Javascript进行了一些实验，所以我不确定，但我猜您将不得不将它写出9次:（如果我说错了，请纠正我，但是您需要一个模板引擎，比如ejs，通过编写一次并将其放入循环中来呈现这样的东西！