Last active
February 22, 2016 17:43
-
-
Save Williammer/0dfb48dabaa048a2194e to your computer and use it in GitHub Desktop.
javaScript.remoteReq.js - @t t t game #jsonp - script tag injection, remote request example. By the way, the way it organize the game code is worth learning.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- html --> | |
| <button id="new">New game</button> | |
| <button id="server">Server play</button> | |
| <table> | |
| <tr> | |
| <td id="cell-1"> </td> | |
| <td id="cell-2"> </td> | |
| <td id="cell-3"> </td> | |
| </tr> | |
| <tr> | |
| <td id="cell-4"> </td> | |
| <td id="cell-5"> </td> | |
| <td id="cell-6"> </td> | |
| </tr> | |
| <tr> | |
| <td id="cell-7"> </td> | |
| <td id="cell-8"> </td> | |
| <td id="cell-9"> </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 = " "; | |
| } | |
| 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 !== " ") { | |
| data = Math.ceil(Math.random() * 9); | |
| } | |
| this.get('cell-' + data).innerHTML = 'O'; | |
| this.played.push(data); | |
| } | |
| }; | |
| ttt.setup(); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment