首頁猿問 Javascript 和 HTML...

Javascript 和 HTML - 令牌未出現在連接四板上

JavaScript

臨摹微笑 2023-06-09 15:16:03

我正在使用 javascript、html 和 css 創建四人連線游戲，但我在 game.js 中的 refreshGrid() 函數遇到了問題。運行我的 html 文件目前只是一個空板，這個功能應該是這樣的，當用戶點擊板上的空白區域時，會出現一個芯片。我不確定為什么這個功能不起作用，希望得到一些幫助。我不確定我是否正確地遍歷了我的行和列。var player=1; var grid = [ [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0]];function selectColumn(col) { if(player==1){ grid[5][col]=1; player=2; document.getElementById("box1").innerHTML="Player 1's Turn"; }else{ grid[5][col]=2; player=1; document.getElementById("box1").innerHTML="Player 2's Turn"; } refreshGrid();}function refreshGrid() { for (var row = 0; row < 6; row++) { for (var col = 0; col < 7; col++) { if (grid[row][col]==0) { document.getElementById("cell"+row+col).style.backgroundColor="#FFFFFF"; } else if (grid[row][col]==1) { //1 for yellow document.getElementById("cell"+row+col).style.backgroundColor="#FFFF00"; } else if (grid[row][col]==2) { //1 for yellow document.getElementById("cell"+row+col).style.backgroundColor="#FF0000"; } } } }

查看完整描述

1 回答

梵蒂岡之花

TA貢獻1900條經驗獲得超5個贊

您的代碼中有太多錯誤。我什至不知道從哪里開始，我會用我記得的東西和提示來編輯這篇文章。

var player=1;

var grid = [

[0, 0, 0, 0, 0, 0, 0],

[0, 0, 0, 0, 0, 0, 0]

];

function selectColumn(col) {

for (let row = 0; row < 7; ++row) {

if(grid[row][6-col]){

continue;

}

if(player==1){

grid[row][6-col]=1;

player=2;

document.getElementById("box1").innerHTML="Player 1's Turn";

}else{

grid[row][6-col]=2;

player=1;

document.getElementById("box1").innerHTML="Player 2's Turn";

}

break;

}

refreshGrid();

}

function refreshGrid() {

for (var row = 0; row < 6; row++) {

for (var col = 0; col < 7; col++) {

const htmlElement = document.querySelector(`#column-${6-col} .row-${row}`);

if (grid[row][col]==0) {

htmlElement.style.backgroundColor="#FFFFFF";

} else if (grid[row][col]==1) { //1 for yellow

htmlElement.style.backgroundColor="#FFFF00";

} else if (grid[row][col]==2) { //1 for yellow

htmlElement.style.backgroundColor="#FF0000";

}

.column {

display: grid;

grid-auto-flow: row;

}

#grid {

display: grid;

grid-auto-flow: column;

}

<div id="box1"><h1>Player 2's turn.</h1></div>

</svg>

</svg>

</svg>

</svg>

</svg>

</svg>

</div>

</svg>

</svg>

</svg>

</svg>

</svg>

</svg>

</div>

</svg>

</svg>

</svg>

</svg>

</svg>

</svg>

</div>

</svg>

</svg>

</svg>

</svg>

</svg>

</svg>

</div>

</svg>

</svg>

</svg>

</svg>

</svg>

</svg>

</div>

</svg>

</svg>

</svg>

</svg>

</svg>

</svg>

</div>

</svg>

</svg>

</svg>

</svg>

</svg>

</svg>

</div>

</div>

你的代碼真的很亂，你的問題不夠集中。我這樣做的唯一原因是因為這個想法很有趣而且我想看到它奏效。

我記得的事情：

您的列和行在您的 html 結構中（現在仍然）是倒置的。您的腳本中有單元格行，html 中有單元格列。

您在同一列中調用 (selectColumn with 0, 1, 2, 3, 4, ...) ...

不要使用幻數（像 6 或 7 這樣的原始數字），而是使用常量。您可以定義 NUMBER_OF_ROWS 和 NUMBER_OF_COLUMNS。字符串也一樣。

您可以使用 javascript 生成一個數組并使用該數組創建您的 html 元素。

您試圖訪問一個不存在的 board 變量。

當沒有用行和列定義的 id 時，您試圖通過 id 選擇單元格。

反對回復 2023-06-09

1 回答
0 關注
140 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Javascript 和 HTML - 令牌未出現在連接四板上

Javascript 和 HTML - 令牌未出現在連接四板上

1 回答

添加回答