JavaScript-为什么我的重启按钮不能工作？（Tic tac toe游戏）-堆栈溢出

顺晟科技

2022-10-19 11:38:06

所以我想用html和脚本javascript做一个tic tac toe游戏，但我的重置按钮似乎不起作用，其他一切似乎都很好，有人能告诉我这里出了什么问题吗？

我尝试将restart（）函数移动到主体中，就在按钮之后，以及其他任何我认为可能的地方，并将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>

顺晟科技：

可以这样更改代码。

<!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>

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

<!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>

我想这是因为您的功能超出了Vue应用程序的范围。我不熟悉Vue，但您可能需要在其中包含一个函数，并像调用其他Vue方法一样调用它。这也意味着您可能必须在元素中设置重启按钮。您现在已经将其放置在父Vue元素之外。

上一篇：JavaScript-input t 下一篇：HTML-在引导程序中更改css中的

网站建设

Html

JavaScript-为什么我的重启按钮不能工作？（Tic tac toe游戏）-堆栈溢出