0

所以我想用html和脚本javascript制作一个井字游戏，我的重置按钮似乎不起作用，其他一切似乎都运行良好，谁能告诉我这里出了什么问题？

我已经尝试将 restart() 函数移动到正文中，就在按钮之后，以及我认为可能的任何其他地方，并将重新启动函数中的代码更改为我认为可行且可能的几乎所有内容，但是当我单击按钮没有任何反应

<!DOCTYPE html>
<html>
<head>
    <title>Tictactoe Game</title>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }

        td {
            background: #DDD;
            width: 50px;
            height: 50px;
        }

        .piece-o {
            margin: auto;
            width: 30px;
            height: 30px;
            border: 3px solid #ff8080;
            border-radius: 50%;
        }

        .piece-x {
            margin: auto;
            width: 30px;
            height: 30px;
            background: linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#0099ff 45%,#0099ff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%), linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#0099ff 45%,#0099ff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%);
        }
    </style>
    <script type="text/javascript">
        function restart() {
            for (i = 0; i <= 2; i++){
                for (j = 0; j <= 2; j++){
                    this.game[i][j] = ' '
                }
            }
        }
    </script>
</head>
<body>
    <div id="app" v-cloak>
        <p>Current Player: <i :class="turn == 'O' ? 'far fa-circle' : 'fas fa-times'"></i></p>
        <table>
            <tr v-for="(row, rowKey, index) in game" :key="rowKey">
                <td v-for="(col, colKey, index) in row" :key="colKey" @click="click(rowKey, colKey)">
                    <div v-if="col" :class="'piece-'+col.toLowerCase()"></div>
                </td>
            </tr>
        </table>
    </div>
    <input type="button" onclick=restart() value="Restart">
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                turn: 'O',
                game: [
                    ['', '', ''],
                    ['', '', ''],
                    ['', '', '']
                ]
            },
            methods: {
                click(row, col) {
                    if (this.game[row][col] != '') {
                        alert('Please select empty slot.')
                        return
                    }

                    this.game[row].splice(col, 1, this.turn);
                    this.calcResult()
                },
                calcResult() {

                    var game = this.game
                    var turn = this.turn

                    // Victory Condition
                    if ((this.game[0][0] == this.game[0][1] && this.game[0][0] == this.game[0][2] && this.game[0][0] != '')
                        || (this.game[1][0] == this.game[1][1] && this.game[1][0] == this.game[1][2] && this.game[1][0] != '')
                        || (this.game[2][0] == this.game[2][1] && this.game[2][0] == this.game[2][2] && this.game[2][0] != '')
                        || (this.game[0][0] == this.game[1][0] && this.game[0][0] == this.game[2][0] && this.game[0][0] != '')
                        || (this.game[0][1] == this.game[1][1] && this.game[0][1] == this.game[2][1] && this.game[0][1] != '')
                        || (this.game[0][2] == this.game[1][2] && this.game[0][2] == this.game[2][2] && this.game[0][2] != '')
                        || (this.game[0][0] == this.game[1][1] && this.game[0][0] == this.game[2][2] && this.game[0][0] != '')
                        || (this.game[0][2] == this.game[1][1] && this.game[0][2] == this.game[2][0] && this.game[0][2] != '')
                    ) {
                        alert('Player ' + this.turn + ' is the winner!');
                        return;
                    }

                    // Draw condition
                    if (this.game[0][0] != '' && this.game[0][1] && this.game[0][2] && this.game[1][0] && this.game[1][1]
                        && this.game[1][2] && this.game[2][0] && this.game[2][1] && this.game[2][2]) {
                        alert('Draw!');
                        return;
                    }

                    // Next player turn
                    this.turn = this.turn == 'O' ? 'X' : 'O'
                }
            }
        })
    </script>
</body>
</html>
4

2 回答 2

0

我想这是因为您的restart()功能超出了 Vue 应用程序的范围。我对 Vue 不熟悉，但您可能需要在 中拥有restart()一个函数app.methods，并像调用其他 Vue 方法一样调用它。这也意味着您可能必须在<div id="app" v-cloak>元素中包含重启按钮。目前，您已将其放置在父 Vue 元素之外。

于 2021-08-05T02:23:34.157 回答
0

您可以像这样更改代码。

<div id="app" v-cloak>

    ...

    </table>
    <input type="button" @click="restart()" value="Restart">
</div>

并为 Vue 方法添加重启功能，因为您必须使用 Vue 的“游戏”数据。

...
},
restart() {
    for (i = 0; i <= 2; i++){
        for (j = 0; j <= 2; j++){
            this.game[i][j] = ''
        }
    }
    turn = 'O';
    alert("Restart");
}
于 2021-08-05T02:39:29.093 回答