html javaScript.remoteReq.js - @t t t game #jsonp - 脚本标记注入，远程请求示例。顺便说一句，它组织游戏代码的方式我

Posted 2021-05-11

<!-- html -->
<button id="new">New game</button>
<button id="server">Server play</button>
<table>
    <tr>
        <td id="cell-1">&nbsp;</td>
        <td id="cell-2">&nbsp;</td>
        <td id="cell-3">&nbsp;</td>
    </tr>
    <tr>
        <td id="cell-4">&nbsp;</td>
        <td id="cell-5">&nbsp;</td>
        <td id="cell-6">&nbsp;</td>
    </tr>
    <tr>
        <td id="cell-7">&nbsp;</td>
        <td id="cell-8">&nbsp;</td>
        <td id="cell-9">&nbsp;</td>
    </tr>
</table>

<!-- css -->
<style>
 td {
     width: 50px;
     height: 50px;
     font-size: 50px;
     font-family: monospace;
     border: 1px solid lightGrey;
     text-align: center;
     color: red;
 }
 .server {
     color: blue;
 }
 body {
     font-family: Helvetica;
 }
 </style>
<!-- js -->
<script>
var ttt = {
    // cells played so far
    played: [],
    // shorthand
    get: function (id) {
        return document.getElementById(id);
    },
    // handle clicks
    setup: function () {
        this.get('new').onclick = this.newGame;
        this.get('server').onclick = this.remoteRequest;
    },
    // clean the board
    newGame: function () {
        var tds = document.getElementsByTagName("td"),
            max = tds.length,
            i;
        for (i = 0; i < max; i += 1) {
            tds[i].innerHTML = "&nbsp;";
        }
        ttt.played = [];
    },
    // make a request
    remoteRequest: function () {
        var script = document.createElement("script");
        script.src = "server.php?callback=ttt.serverPlay&played=" + ttt.played.join(',');
        document.body.appendChild(script);
    },
    // callback, server's turn to play
    serverPlay: function (data) {
        if (data.error) {
            alert(data.error);
            return;
        }
        data = parseInt(data, 10);
        this.played.push(data);
        this.get('cell-' + data).innerHTML = '<span class="server">X<\/span>';
        setTimeout(function () {
            ttt.clientPlay();
        }, 300); // as if thinking hard

    },
    // client's turn to play
    clientPlay: function () {
        var data = 5;
        if (this.played.length === 9) {
            alert("Game over");
            return;
        }
        // keep coming up with random numbers 1-9
        // until one not taken cell is found
        while (this.get('cell-' + data).innerHTML !== "&nbsp;") {
            data = Math.ceil(Math.random() * 9);
        }
        this.get('cell-' + data).innerHTML = 'O';
        this.played.push(data);
    }
};

ttt.setup();

</script>