Question

我正在尝试学习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的操作。

因此有效...第一次。当我再次使用此功能时，它什么也没画（我检查了制表符的值是否已更改），但是draw()画了同样的东西，或者什么也没做。当然，我对所有想法都开放了，但是如何仍然无法显示该表。

一个好主意是使用与我创建当前表相同的方式，向所有单元格添加ID，而不是仅向这些单元格添加值（但这只是疲惫的初学者的一些愚蠢想法，很抱歉不自己检查它，但无论如何，我想问第一件事……）。

Answer 1

从实用的角度看，这似乎并不是您真正想要使用JS的东西。

我会为一些X，O或什么都不是的元素制作一些CSS类。

然后在JS中存储轮到谁的状态。当用户单击某个元素时，在该回合中将适当的类添加到该元素。

您还可以像赢钱检查器功能一样尝试计算自动赢钱的人

Answer 2

我看上去很古怪，我看到第二次绘制函数被触发xz < tab.length总是错误的。其中xz = 3和tab.length =3也是如此。那里有问题，所以它永远不会进入表绘制操作。

Javascript通过一个函数多次写表

2 个答案: