Skip to content

Instantly share code, notes, and snippets.

@Williammer
Last active February 22, 2016 17:43
Show Gist options
  • Select an option

  • Save Williammer/0dfb48dabaa048a2194e to your computer and use it in GitHub Desktop.

Select an option

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.
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment