我正在尝试学习 js，因此我决定创建一些简单的十字架游戏圈。 这是代码:
(JS)
var tab = [[0,0,0],[0,0,0],[0,0,0]];
var x = 0;
var y = 0;
var xz = 0;
var yz = tab[0].length - 1;
var xu = 1;
var yu = 1;
var val = '';
var gd = 0;
var body = document.body;
var div = document.getElementById("content");
var tbl = document.createElement('table');
tbl.border = '1px';
tbl.style.width = '75px';
div.insertAdjacentHTML('beforeend', 'Actually chosen coordinates: ' + xu + ',' + yu); //Easter egg for smartest- why Quokka plugin in VS Code is returning 'Cannot read property 'insertAdjacentHTML' of null'. When none of things used in this line is null. :)
function go() {
//if (tab[xu][yu] == 0) {
//system to secure writing on already used cells
get();
var yu = 1;
var xu = 1;
//} else {
//div.insertAdjacentHTML('beforeend', 'This cell is used.');
//}
draw();
var x = 0;
var y = 0;
var xz = 0;
var yz = tab[0].length - 1;
var val = '';
}
function get() {
tab[xu][yu] = 2;
if(gd < 5){
do{
x = Math.floor(Math.random()*tab.length);
y = Math.floor(Math.random()*tab[0].length);
}while(tab[x][y]!=0)
gd++;
tab[x][y] = 1;
}else{
document.write('<h3>GAME OVER</h3>');
}
}
function draw() {
div.innerHTML = '<p>Remember U are X.</p>';
while (xz < tab.length) {
var tr = tbl.insertRow();
while (yz >= 0) {
switch (tab[xz][yz]) {
case 0:
val = '.';
break;
case 1:
val = 'O';
break;
case 2:
val = 'X';
break;
}
var td = tr.insertCell();
td.appendChild(document.createTextNode(val));
yz--;
}
yz = tab[0].length - 1;
xz++;
}
div.appendChild(tbl);
div.insertAdjacentHTML('beforeend', 'Actually chosen coordinates: ' + xu + ',' + yu);
}
function drawt() {
div.innerHTML = '<p>Remember U are X.</p>';
while (xz < tab.length) {
var tr = tbl.insertRow();
while (yz >= 0) {
switch (tab[xz][yz]) {
case 0:
val = '.';
break;
case 1:
val = 'O';
break;
case 2:
val = 'X';
break;
}
var td = tr.insertCell();
td.appendChild(document.createTextNode(val));
yz--;
}
yz = tab[0].length - 1;
xz++;
}
div.appendChild(tbl);
div.insertAdjacentHTML('beforeend', 'Actually chosen coordinates: ' + xu + ',' + yu);
}
function Right() {
if (xu < 2) {
xu++;
} else {
div.insertAdjacentHTML('beforeend', 'Nope');
}
draw();
var x = 0;
var y = 0;
var xz = 0;
var yz = tab[0].length - 1;
var val = '';
}
function Left() {
if (xu > 0) {
xu--;
} else {
div.insertAdjacentHTML('beforeend', 'Nope');
}
draw();
var x = 0;
var y = 0;
var xz = 0;
var yz = tab[0].length - 1;
var val = '';
}
function Up() {
if (yu < 2) {
yu++;
} else {
div.insertAdjacentHTML('beforeend', 'Nope');
}
draw();
var x = 0;
var y = 0;
var xz = 0;
var yz = tab[0].length - 1;
var val = '';
}
function Down() {
if(yu > 0){
yu--;
} else {
div.insertAdjacentHTML('beforeend', 'Nope');
}
draw();
var x = 0;
var y = 0;
var xz = 0;
var yz = tab[0].length - 1;
var val = '';
}
(HTML)
<!DOCTYPE html>
<head>
<title>karta</title>
</head>
<body>
<div id="content">
<p>Jesteś X.</p>
<table border = '1px' width = '75px'>
<tr>
<td>.</td>
<td>.</td>
<td>.</td>
</tr>
<tr>
<td>.</td>
<td>.</td>
<td>.</td>
</tr>
<tr>
<td>.</td>
<td>.</td>
<td>.</td>
</tr>
</table>
</div>
<a id="myLink" href="#" onclick="go()">Accept</a><br>
<a id="myLink" href="#" onclick="Right()">Right</a><br>
<a id="myLink" href="#" onclick="Left()">Left</a><br>
<a id="myLink" href="#" onclick="Up()">Up</a><br>
<a id="myLink" href="#" onclick="Down()">Down</a>
<script src = kod.js></script>
</body>
</html>
我发现要写表格(我制作 3x3 表格，只在单元格中写“X”和“O”)我需要制作类似函数绘制的东西。
所以它奏效了……第一次。当我再次使用此函数时，它只是不绘制任何东西(我检查了选项卡值已更改)，但是 draw() 绘制了相同的东西或者什么也没做。当然，我对如何显示此表的所有想法持开放态度，但仍然想知道什么不起作用。
可能好主意是使用与我制作当前表格相同的方式并向所有单元格添加 ID，而不是仅向这些单元格添加值(但这可能只是疲倦的初学者的一些愚蠢想法，抱歉我没有自己检查但是不管怎样，我想先问问这件事，所以...)。
最佳答案
从实用的 Angular 来看，这似乎并不是您真正想要使用 JS 的目的。
我会为带有 X、O 或什么都没有的元素制作一些 css 类。
然后把轮到谁的状态存储在JS中。当用户点击一个元素时，为该回合向该元素添加适当的类。
你也可以制作一个获胜检查器函数来尝试自动计算谁赢了
关于Javascript通过一个函数多次写表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54337338/