Permalink
Browse files

Working Tic Tac Toe.

  • Loading branch information...
1 parent 48db271 commit 157dd8c433b9e8edde31c6eef0f2ca3de6b0c407 Jordan Fowler committed Dec 15, 2009
Showing with 91 additions and 28 deletions.
  1. +9 −12 examples/tictactoe.html
  2. +82 −16 examples/tictactoe.js
View
@@ -24,28 +24,25 @@
height: 100px;
padding: 5px;
background: #000;
+ color: #FFF;
+ font-size: 100px;
+ text-align: center;
+ vertical-align: middle;
}
</style>
</head>
<body>
<h1>Tic Tac Toe</h1>
+<div id="user-count"></div>
+<div id="game-stats"></div>
<div id="status"></div>
-<div id="navigation">
- <!-- <p>Your Username: <input id="username" type="text" name="username" value="" /></p> -->
-
- <ul>
- <!-- <li><a href="#" id="new-game">Start a New Game</a></li> -->
- <li><a href="#" id="join-game">Join a Game</a></li>
- </ul>
-</div>
-
<table id="game-board">
- <tr><td id="cell-0-0" class="open cell"></td><td id="cell-1-0" class="open cell"></td><td id="cell-2-0" class="open cell"></td></tr>
- <tr><td id="cell-0-1" class="open cell"></td><td id="cell-1-1" class="open cell"></td><td id="cell-2-1" class="open cell"></td></tr>
- <tr><td id="cell-0-2" class="open cell"></td><td id="cell-1-2" class="open cell"></td><td id="cell-2-2" class="open cell"></td></tr>
+ <tr><td id="cell-0-0" class="cell"></td><td id="cell-1-0" class="cell"></td><td id="cell-2-0" class="cell"></td></tr>
+ <tr><td id="cell-0-1" class="cell"></td><td id="cell-1-1" class="cell"></td><td id="cell-2-1" class="cell"></td></tr>
+ <tr><td id="cell-0-2" class="cell"></td><td id="cell-1-2" class="cell"></td><td id="cell-2-2" class="cell"></td></tr>
</table>
<script type="text/javascript" charset="utf-8" src="mootools-1.2.4-core-nc.js"></script>
View
@@ -1,62 +1,128 @@
-// Author: Jordan Fowler
-
-var currentGame = null;
+// Author: Jordan Fowler (TheBreeze)
var TicTacToe = new Class({
+ wins: 0,
+ loses: 0,
+ draws: 0,
methodMap: {
'queued': 'onQueued',
'start': 'onStart',
'turn': 'onTurn',
'move': 'onMove',
- 'game_over': 'onGameOver'
+ 'game_over': 'onGameOver',
+ 'win': 'onWin',
+ 'loss': 'onLoss',
+ 'draw': 'onDraw',
+ 'user_count': 'onUserCount'
},
initialize: function() {
if (TicTacToe.connection == null) {
TicTacToe.connection = new WebSocket('ws://192.168.0.2:8000/tictactoe');
};
- TicTacToe.connection.onopen = this.onJoin.bind(this);
+ TicTacToe.connection.onopen = this.join.bind(this);
TicTacToe.connection.onmessage = this.onMessage.bind(this);
TicTacToe.connection.onclose = this.onGameOver.bind(this);
+
+ this.setGameStats();
},
onMessage: function(event) {
var command = JSON.decode(event.data);
console.log('[RCV] ' + command.msg);
- this[this.methodMap[command.msg]].call(this, [command]);
+ this[this.methodMap[command.msg]].call(this, command);
},
- onJoin: function(event) {
- console.log('[SENT] join game');
+ message: function(msg, options) {
+ var command = JSON.encode({msg: msg, data: options});
- TicTacToe.connection.send(JSON.encode({msg: 'join'}));
+ console.log('[SENT] ' + msg);
+
+ TicTacToe.connection.send(command);
},
- onQueued: function(command) {
+ setStatus: function(status) {
+ $('status').set('text', status);
+ },
+
+ setGameStats: function() {
+ $('game-stats').set('text', 'Wins: '+this.wins+' / Losses: '+this.wins+' / Draws: '+this.draws);
+ },
+
+ setUserCount: function(userCount) {
+ $('user-count').set('text', 'Number of players: ' + userCount);
+ },
+
+ join: function(event) {
+ this.message('join');
+
+ this.setStatus('Connecting you to a game...');
+ },
+
+ reset: function() {
},
+ onQueued: function(command) {
+ this.setStatus('Waiting for another player...');
+ },
+
onStart: function(command) {
-
+ this.setStatus('Game found! Their turn first...');
},
onTurn: function(command) {
-
+ this.setStatus('Your turn...');
},
onMove: function(command) {
-
+ $('cell-'+command.data.x+'-'+command.data.y).set('text', command.key);
+
+ this.setStatus('Their turn...');
+ },
+
+ move: function(x, y) {
+ this.message('move', {x: x, y: y});
},
onGameOver: function(command) {
-
+ this.setStatus('Game over.');
+ this.setGameStats();
+ this.reset();
+ },
+
+ onWin: function(command) {
+ this.wins += 1;
+ this.setStatus('Game over. You win!');
+ this.setGameStats();
+ },
+
+ onLoss: function(command) {
+ this.losses += 1;
+ this.setStatus('Game over. You lose!');
+ this.setGameStats();
+ },
+
+ onDraw: function(command) {
+ this.draws += 1;
+ this.setStatus('Game over. It was a draw!');
+ this.setGameStats();
+ },
+
+ onUserCount: function(command) {
+ this.setUserCount(command.data);
}
});
-$('join-game').addEvent('click', function(event) {
- currentGame = new TicTacToe();
+$$('.cell').addEvent('click', function(event) {
+ try {
+ currentGame.move($(this).get('id').split('-')[1], $(this).get('id').split('-')[2]);
+ } catch(error) {
+ alert('Please wait while we connect you to a game...');
+ }
});
+currentGame = new TicTacToe();

0 comments on commit 157dd8c

Please sign in to comment.