个人中心
gpt4 book ai didi

Javascript if 语句问题，以及如何在 jquery 中验证颜色

转载 作者：行者123 更新时间：2023-11-28 03:14:46 25 4
gpt4 key购买 nike

我正在编写一个井字游戏。规则是一样的，有一个红色玩家和一个蓝色玩家。唯一不同的是玩家的第四步，他们的第一个盒子会变回白色，所以每个玩家最多只能有三个标记的盒子(红色或蓝色)。

这是我的 html 代码:

    <html>
    <head>
      <link type="text/css" rel="stylesheet" href="game.css"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script type="text/javascript" src="game1.js" ></script>
      <title> TicTacToe </title>
    </head>
  <center>
    <body>
      <h1> Tic Tac Toe! </h1>
      <table>
        <tr>
          <td><canvas id = "canvas1" onclick="canvasClicked(1)"></canvas></td>
          <td><canvas id = "canvas2" onclick="canvasClicked(2)"></canvas></td>
          <td><canvas id = "canvas3" onclick="canvasClicked(3)"></canvas></td>
        </tr>
        <tr>
          <td><canvas id = "canvas4" onclick="canvasClicked(4)"></canvas></td>
          <td><canvas id = "canvas5" onclick="canvasClicked(5)"></canvas></td>
          <td><canvas id = "canvas6" onclick="canvasClicked(6)"></canvas></td>
        </tr>
        <tr>
          <td><canvas id = "canvas7" onclick="canvasClicked(7)"></canvas></td>
          <td><canvas id = "canvas8" onclick="canvasClicked(8)"></canvas></td>
          <td><canvas id = "canvas9" onclick="canvasClicked(9)"></canvas></td>
        </tr>
      </table>

      <button type="button" id = "reset">Reset</button>

    </body>
  </center>

</html>

随附的 Javascript:

//Global variables
var winningCombinations= [[1,2,3], [4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9],[1,5,9],[3,5,7]];
var turn = 0;
var theCanvas;
var c;
var d;
var y;
var playerRed;
var playerBlue;
var color;

//instanciate Arrays
window.onload=function(){

    playerRed = new Array();
    playerBlue = new Array();

}

//Game methods
function canvasClicked(canvasNumber){
    theCanvas = "canvas" + canvasNumber;
    c = document.getElementById(theCanvas);

    if (c.style.color = "white") {
        if (turn%2 == 0){
            //c.style.background = "red"; // red goes first, start at turn=0
            $("#" + theCanvas).css("background-color", "red");
            playerRed.push(canvasNumber); // adds canvas id to array
        }
        else {
            $("#" + theCanvas).css("background-color", "blue");
            playerBlue.push(canvasNumber); 
        }
    }

    //either color has 3 colors on the board, change the least recent back 
    //to white, as per the rules
    if (turn%2 == 0) {
        if (playerRed.length > 3){
            theCanvas = "canvas" + playerRed[0];
            //d = document.getElementById(theCanvas);

            $("#" + theCanvas).css("background-color", "white");
            playerRed.shift();
        }
    }
    else {
        if (playerBlue.length > 3){
            theCanvas = "canvas" + playerBlue[0];
            //d = document.getElementById(theCanvas);

            $("#" + theCanvas).css("background-color", "white");
            playerBlue.shift();
        }
    }

    //check if game is won, first sets currentPlayer
    var currentPlayer;
    if (turn%2 == 0) {
        currentPlayer = playerRed.slice();
    }
    else {
        currentPlayer = playerBlue.slice();
    }

    //Loops through the winngingCombo's and compares them to that of 
    //Current player's. If they are ==, then alert and give option to reset
    if (currentPlayer.length == 3){
        for (var i = 0; i < winningCombinations.length; i++){
            if (are_arrs_equal(winningCombinations[i], currentPlayer)){

                if (turn%2 == 0){ //setting color, for the alert() below
                    color = "Red";
                }
                else {
                    color = "Blue";
                }
                alert(color + " Won!");
                playAgain();
            }
        }
    }
    //increment turn #
    turn++;
}

//jquery reset function, uses reset function from below
$(document).ready(function(){
    $("button").click(function(){
        playAgain();
    });
});

//reset function
function playAgain() {
    y = confirm("Reset?");

    if (y == true) {
        alert("Lets play again!");
        location.reload(true);
    }
    else {
        alert("fine");
    }
}

//compares two arrays, even checks for type! 
function are_arrs_equal(arr1, arr2){
    return arr1.sort().toString() === arr2.sort().toString()
}

我有一个 css 文件，但它很小，只是将 Canvas 定义为背景为“白色”。

我的问题是:在 javascript 代码中，我的第一个 if 语句对于函数 canvasClicked 是不正确的:

if (c.style.color = "white") {

我觉得应该是

if (c.style.color == "white") {

它适用于单个 = 但当我将其设置为双等于 == 时却不起作用，这是为什么？ (此外，它在 if (c.style.color = white) 中检查什么？是检查它有颜色，还是将其设置为白色？两者都有？)当它只有一个=，它不是检查它是白色的，所以我可以点击它一次，让它变成红色，然后再次点击它变成蓝色。 == 不应该发生这种情况；但是使用 == Canvas 只是保持白色。

此外，我正在尝试实现 jQuery，所以我想将第一个 if 语句进一步更改为:

$(document).ready(function(){
    $("canvas").click(function(){
        if ($(this).css("background-color) == "white"){

但是，我没有成功，我也试过:

if ($(this).css("background-color) == "rgb(256, 256, 256)"){

同样没有成功。我添加了一个 alert($(this).css("background-color)) 以确保我点击了各个 Canvas (看起来我是因为警报/弹出框确实出现在之后单击)，但似乎从未调用 if 语句。我认为这可能与 if 语句不起作用有关。

如有任何反馈/建议，我们将不胜感激。此外，对代码其他部分的任何建议也很好。谢谢。

最佳答案

在调查该问题时，我发现您的语句“c.style.color”或“c.style.backgrounColor”总是返回空值。这就是您的 if 条件无法正常工作的原因。

您只需像下面那样在您的 if 条件中再添加一个 OR 语句，它就可以正常工作。

   if (c.style.backgroundColor == "white" || c.style.backgroundColor == "") {
}

谢谢，如果对您有帮助，请标示正确

关于Javascript if 语句问题，以及如何在 jquery 中验证颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28715871/

25 4 0
文章推荐： html - 如何在网格中错开照片？
文章推荐： javascript - 自动登录表单的 HTML 文件
文章推荐： c++ - 找不到 -lglut 但已安装 freeglut3-dev
文章推荐： css - 如何删除汉堡菜单右侧的空白区域
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com