英文:
How to detect, and color the left or right block of each table, depending on conditions and random values by JavaScript-jQ
问题
这是您提供的HTML和JavaScript代码的翻译结果。这部分是代码的翻译部分，不包括其他内容：
<!-- 开始代码片段：JavaScript 隐藏: false 控制台: true Babel: false -->
<!-- 语言: JavaScript -->
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);
<!-- 语言: HTML -->
<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>
<!-- 结束代码片段 -->
希望这对您有所帮助。如果您有任何其他问题，请随时告诉我。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
<!-- language: lang-html -->
<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>
<!-- end snippet -->
I am trying to make a simple game. We have two tables. The table on the top, which has 5 rows and 3 columns - including: pin, random number and direction (left or right) - and the bottom table which has 6 rows. The cell at the first row and second column ($("#row1-2")) is the beginning of our game.
The Left/Right values in the top table determine the direction, left or right, of the cell that should be painted in the corresponding row in the bottom table.
We have a simple condition to get a direction value. We generate a random number. If the random number is > 50, the direction is set to "right"; otherwise, it is set to "left".
That is, if, for example, the values in the top table were as follows:
Pin 1 => 28 => Left
Pin 2 => 9 => Left
Pin 3 => 56 => Right
Pin 4 => 99 => Right
Pin 5 => 14 => Left
Then, in the bottom table, the game is started from the starter column, and as we incrementally descend the rows, the column that gets painted is determined by the "left" or "right" values that were generated above.
In the bottom table, because the value of pin 1 (28) is less than 50, the painted column will move to the "left" from the starter block $("#row1-2"): $("#row2-2").
And because the value of pin 2 (9) also maps to "left", the painted column in the next row should also be to the "left": $("#row3-2").
For pin 3, we have "right", so the column in the next row to the right of the last painted cell should be painted: $("#row4-3").
...and so on until all the rows have a painted cell.
<!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>
答案1
得分: 1
我发现在顶部表格中的单元格与第二个表格中的单元格进行同步非常困难。一个问题是第一个表格中的第一行有一个左/右值；但在第二个表格中，第一行是“Starter” - 左/右决策直到第二行才开始。我建议通过使两个表格中的对应行具有相同的编号来简化此问题。我还建议将行和列从0开始编号（而不是从1开始），因为这对我的大脑更容易理解，与数组和典型的循环一致。
要确定在遍历表格时哪一列是活动列，对我来说有帮助的是认识到“左”步骤意味着下一行中列索引保持不变，而“右”步骤意味着索引增加1。
我们可以声明一个变量来跟踪当前列。我们将从1开始，因为我们知道“Starter”位于其行的[1]索引处：const col = 1;。然后，当我们遍历行时，如果向右移动，则将col增加1，如果向左移动，则增加0。
我们可以将游戏逻辑打包到一个名为play的函数中，然后一次调用它 - play() - 或在间隔内调用它 - setInterval(play, 1000)。
const play = () => {
let col = 1;
// 重置游戏板
$('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);
我还创建了一个示例fiddle。
英文:
I find it very difficult to synchronize the cells in the top table with those in the second. One problem is that row 1 in the first table has a left/right value; but in the second table, row 1 is the Starter - the left/right decisions don't start until row 2. I would simplify this by making the corresponding rows in the two tables have the same number. I would also 0-index the rows and columns (as opposed to having them start at 1) because this is easier for my brain as it is consistent with arrays and typical loops.
To determine which column is active as we descend the table, it was helpful for me to realize that a "left" step means the column index stays the same in the next row, and a "right" step means the index increases by 1.
We can declare a variable to track the current column. We will start it at 1 since we know the "Starter" is at the [1] index of its row: const col = 1;. Then, as we loop through the rows, we increment col by 1 if we are stepping right or 0 if we are stepping left.
We can package our game logic into a play function and invoke it once - play() - or at an interval - setInterval(play, 1000).
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
<!-- language: lang-css -->
body {
font-size: 20px;
}
table {
width: 200px;
}
#shapedive {
height: 500px;
border-radius: 30pt;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
I have also created an example fiddle.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论