jquery 如何根据JavaScript-jQ的条件和随机值检测每个表的左块或右块并为其着色

qmelpv7a  于 2023-02-18  发布在  jQuery
关注(0)|答案(1)|浏览(74)
setInterval(function () {
                for (var i = 1; i <= 5; i++) {
                    var number = 1 + Math.floor(Math.random() * 100);

                    var getNum = $('#res' + i).html(number);
                    if (getNum.html() >= 50) {
                        $('#res' + i + 'mult').html("right");
                        var num = 1;
                        for (var j = 1; j <= 6; j++) {
                            $("#row" + num++ + "-" + 2).css("background-color", 'red');
                        }

                    } else {
                        var num2 = 1;
                        $('#res' + i + 'mult').html("left");
                        $("#row" + num2++ + "-" + num2).css("background-color", 'yellow');
                    }

                }
            },
            1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1</title>
    <script src="../!Needs/jquery.min.js"></script>
    <style>
        body {
            font-size: 20px;

        }

        table {
            width: 200px;

        }

        #shapedive {
            height: 500px;
            border-radius: 30pt;

        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>
            <table id="bigTable" border="1" style="text-align: center;">
                <tr>
                    <td style="font-weight: bold">Pin</td>
                    <td style="font-weight: bold">Number</td>
                    <td style="font-weight: bold">Direction</td>
                </tr>
                <tr>
                    <td class=pin>1</td>
                    <td id="res1"></td>
                    <td id="res1mult"></td>
                </tr>
                <tr>
                    <td class=pin>2</td>
                    <td id="res2"></td>
                    <td id="res2mult"></td>
                </tr>
                <tr>
                    <td class=pin>3</td>
                    <td id="res3"></td>
                    <td id="res3mult"></td>

                </tr>
                <tr>
                    <td class=pin>4</td>
                    <td id="res4"></td>
                    <td id="res4mult"></td>

                </tr>
                <tr>
                    <td class=pin>5</td>
                    <td id="res5"></td>
                    <td id="res5mult"></td>

            </table>
        </td>
    </tr>
    <tr>
        <td id="shape">
            <div id="shapedive">
                <table style="text-align: center" border="1">
                    <tr>
                        <td id="row1-1">*</td>
                        <td id="row1-2">Starter</td>
                        <td id="row1-3">*</td>
                    </tr>
                </table>
                <table style="text-align: center " border="1">
                    <tr>
                        <td id="row2-1">1</td>
                        <td id="row2-2">2</td>
                        <td id="row2-3">3</td>
                        <td id="row2-4">4</td>
                    </tr>
                </table>
                <table style="text-align: center " border="1">
                    <tr>
                        <td id="row3-1">1</td>
                        <td id="row3-2">2</td>
                        <td id="row3-3">3</td>
                        <td id="row3-4">4</td>
                        <td id="row3-5">5</td>
                    </tr>
                </table>
                <table style="text-align: center" border="1">
                    <tr>
                        <td id="row4-1">1</td>
                        <td id="row4-2">2</td>
                        <td id="row4-3">3</td>
                        <td id="row4-4">4</td>
                        <td id="row4-5">5</td>
                        <td id="row4-6">6</td>
                    </tr>
                </table>
                <table style="text-align: center" border="1">
                    <tr>
                        <td id="row5-1">1</td>
                        <td id="row5-2">2</td>
                        <td id="row5-3">3</td>
                        <td id="row5-4">4</td>
                        <td id="row5-5">5</td>
                        <td id="row5-6">6</td>
                        <td id="row5-7">7</td>
                    </tr>
                </table>
                <table style="text-align: center" border="1">
                    <tr>
                        <td id="row6-1">1</td>
                        <td id="row6-2">2</td>
                        <td id="row6-3">3</td>
                        <td id="row6-4">4</td>
                        <td id="row6-5">5</td>
                        <td id="row6-6">6</td>
                        <td id="row6-7">7</td>
                        <td id="row6-8">8</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>
<br>
    
</body>
</html>

我正在尝试做一个简单的游戏。我们有两张table。上面的table有5行3列;包括引脚-随机数-方向（左或右）。和底部的表，其中有6行。第一行和第二列（$("#row1-2")）是我们的游戏开始。
i将.方向块中从上表中获取的任何值。右或左，下表中的相同块应着色。我们有一个简单的条件来获取方向值。if the random number is > 50。将方向设置为"right"否则，设置为"left"
也就是说如果例如这些值 在上表中如下：
Pin 1 =\> 28 =\> Left
Pin 2 =\> 9 =\> Left
Pin 3 =\> 56 =\> Right
Pin 4 =\> 99 =\> Right
Pin 5 =\> 14 =\> Left
从起始列开始游戏，取决于接收到的左值或右值。
根据上面的例子。在下面的表格中。
因为pin1的值等于"left"
来自起动块$("#row1-2")
应该涂在左边。$("#row2-2")
并且因为引脚2的值等于"left"
从最后绘制的块开始，应向左绘制$("#row3-2")
在引脚3中，我们有"right"
因此，从最后绘制的块开始，应向右绘制$("#row4-3")
直到最后。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1</title>
    <script src="../!Needs/jquery.min.js"></script>
    <style>
        body {
            font-size: 20px;

        }

        table {
            width: 200px;

        }

        #shapedive {
            height: 500px;
            border-radius: 30pt;

        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>
            <table id="bigTable" border="1" style="text-align: center;">
                <tr>
                    <td style="font-weight: bold">Pin</td>
                    <td style="font-weight: bold">Number</td>
                    <td style="font-weight: bold">Direction</td>
                </tr>
                <tr>
                    <td class=pin>1</td>
                    <td id="res1"></td>
                    <td id="res1mult"></td>
                </tr>
                <tr>
                    <td class=pin>2</td>
                    <td id="res2"></td>
                    <td id="res2mult"></td>
                </tr>
                <tr>
                    <td class=pin>3</td>
                    <td id="res3"></td>
                    <td id="res3mult"></td>

                </tr>
                <tr>
                    <td class=pin>4</td>
                    <td id="res4"></td>
                    <td id="res4mult"></td>

                </tr>
                <tr>
                    <td class=pin>5</td>
                    <td id="res5"></td>
                    <td id="res5mult"></td>

            </table>
        </td>
    </tr>
    <tr>
        <td id="shape">
            <div id="shapedive">
                <table style="text-align: center" border="1">
                    <tr>
                        <td id="row1-1">*</td>
                        <td id="row1-2">Starter</td>
                        <td id="row1-3">*</td>
                    </tr>
                </table>
                <table style="text-align: center " border="1">
                    <tr>
                        <td id="row2-1">1</td>
                        <td id="row2-2">2</td>
                        <td id="row2-3">3</td>
                        <td id="row2-4">4</td>
                    </tr>
                </table>
                <table style="text-align: center " border="1">
                    <tr>
                        <td id="row3-1">1</td>
                        <td id="row3-2">2</td>
                        <td id="row3-3">3</td>
                        <td id="row3-4">4</td>
                        <td id="row3-5">5</td>
                    </tr>
                </table>
                <table style="text-align: center" border="1">
                    <tr>
                        <td id="row4-1">1</td>
                        <td id="row4-2">2</td>
                        <td id="row4-3">3</td>
                        <td id="row4-4">4</td>
                        <td id="row4-5">5</td>
                        <td id="row4-6">6</td>
                    </tr>
                </table>
                <table style="text-align: center" border="1">
                    <tr>
                        <td id="row5-1">1</td>
                        <td id="row5-2">2</td>
                        <td id="row5-3">3</td>
                        <td id="row5-4">4</td>
                        <td id="row5-5">5</td>
                        <td id="row5-6">6</td>
                        <td id="row5-7">7</td>
                    </tr>
                </table>
                <table style="text-align: center" border="1">
                    <tr>
                        <td id="row6-1">1</td>
                        <td id="row6-2">2</td>
                        <td id="row6-3">3</td>
                        <td id="row6-4">4</td>
                        <td id="row6-5">5</td>
                        <td id="row6-6">6</td>
                        <td id="row6-7">7</td>
                        <td id="row6-8">8</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>
<br>
<script>
    setInterval(function () {
                for (var i = 1; i <= 5; i++) {
                    var number = 1 + Math.floor(Math.random() * 100);

                    var getNum = $('#res' + i).html(number);
                    if (getNum.html() >= 50) {
                        $('#res' + i + 'mult').html("right");
                        var num = 1;
                        for (var j = 1; j <= 6; j++) {
                            $("#row" + num++ + "-" + 2).css("background-color", 'red');
                        }

                    } else {
                        var num2 = 1;
                        $('#res' + i + 'mult').html("left");
                        $("#row" + num2++ + "-" + num2).css("background-color", 'yellow');
                    }

                }
            },
            1000);
</script>
</body>
</html>
jquery

1条答案

按热度按时间
y3bcpkx1

y3bcpkx11#

我发现很难将第一个表中的单元格与第二个表中的单元格同步。一个问题是第一个表中的第一行有一个左/右值;但在第二个表中，第1行是起始行--左/右决策直到第2行才开始。我将通过使两个表中对应的行具有相同的编号来简化此操作。我还将对行和列进行0索引（而不是使它们从1开始），因为这对我的大脑来说更容易，因为它与数组和典型循环一致。
为了确定在表中向下移动时哪个列是活动的，认识到"左"一步意味着下一行的列索引保持不变，而"右"一步意味着索引增加1，这对我很有帮助。
我们可以声明一个变量来跟踪当前列，我们将从1开始，因为我们知道"Starter"位于该行的[1]索引处：然后，当我们循环通过行时，如果我们向右步进，则将col递增1，或者如果我们向左步进，则将0递增。
我们可以将游戏逻辑打包成一个play函数，调用一次（play()）或间隔一段时间（setInterval(play, 1000)）。

const play = () => {
  let col = 1;
  
  // reset the game board
  $('td').css('background-color', 'white');
  $('td#starter').css('background-color', 'red');

  for (let row = 0; row < 6; row++) {
    const pin = 1 + Math.floor(Math.random() * 100);
    const isRight = pin > 50;

    col += (isRight ? 1 : 0);

    $(`#res${row}`).text(pin);
    $(`#res${row}mult`).text(isRight ? 'right' : 'left');
    $(`#row${row}-${col}`).css("background-color", isRight ? 'yellow' : 'red');
  }
};

play();
//setInterval(play, 1000);
body {
  font-size: 20px;
}

table {
  width: 200px;
}

#shapedive {
  height: 500px;
  border-radius: 30pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <table id="bigTable" border="1" style="text-align: center;">
        <tr>
          <td style="font-weight: bold">Pin</td>
          <td style="font-weight: bold">Number</td>
          <td style="font-weight: bold">Direction</td>
        </tr>
        <tr>
          <td class=pin>1</td>
          <td id="res0"></td>
          <td id="res0mult"></td>
        </tr>
        <tr>
          <td class=pin>2</td>
          <td id="res1"></td>
          <td id="res1mult"></td>
        </tr>
        <tr>
          <td class=pin>3</td>
          <td id="res2"></td>
          <td id="res2mult"></td>

        </tr>
        <tr>
          <td class=pin>4</td>
          <td id="res3"></td>
          <td id="res3mult"></td>

        </tr>
        <tr>
          <td class=pin>5</td>
          <td id="res4"></td>
          <td id="res4mult"></td>

      </table>
    </td>
  </tr>
  <tr>
    <td id="shape">
      <div id="shapedive">
        <table style="text-align: center" border="1">
          <tr>
            <td>*</td>
            <td id="starter">Starter</td>
            <td>*</td>
          </tr>
        </table>
        <table style="text-align: center " border="1">
          <tr>
            <td id="row0-0">1</td>
            <td id="row0-1">2</td>
            <td id="row0-2">3</td>
            <td id="row0-3">4</td>
          </tr>
        </table>
        <table style="text-align: center " border="1">
          <tr>
            <td id="row1-0">1</td>
            <td id="row1-1">2</td>
            <td id="row1-2">3</td>
            <td id="row1-3">4</td>
            <td id="row1-4">5</td>
          </tr>
        </table>
        <table style="text-align: center" border="1">
          <tr>
            <td id="row2-0">1</td>
            <td id="row2-1">2</td>
            <td id="row2-2">3</td>
            <td id="row2-3">4</td>
            <td id="row2-4">5</td>
            <td id="row2-5">6</td>
          </tr>
        </table>
        <table style="text-align: center" border="1">
          <tr>
            <td id="row3-0">1</td>
            <td id="row3-1">2</td>
            <td id="row3-2">3</td>
            <td id="row3-3">4</td>
            <td id="row3-4">5</td>
            <td id="row3-5">6</td>
            <td id="row3-6">7</td>
          </tr>
        </table>
        <table style="text-align: center" border="1">
          <tr>
            <td id="row4-0">1</td>
            <td id="row4-1">2</td>
            <td id="row4-2">3</td>
            <td id="row4-3">4</td>
            <td id="row4-4">5</td>
            <td id="row4-5">6</td>
            <td id="row4-6">7</td>
            <td id="row4-7">8</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

我还创建了一个fiddle示例。

赞(0）分享  回复(0）举报  2023-02-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com