NODE.JS Örnek Uygulama - TIC TAC TOE -2 (Client)
İlk yazımızda söylediğimiz gibi. İstemci kısmında;
https://developer.apple.com/library/safari/samplecode/TicTacToe/Listings/tic_tac_toe_html.html
yararlandık. Buna göre enterGame fonksiyonu ile başlayan
sürece bakalım.
function enterGame() {
socket = io.connect("http://localhost:3000");
nick =
$("#txtNick").val();
socket.emit('login',{
'uid' : nick
});
socket.on('waitingOtherPlayer', function (gameId) {
var html =
$("#X").html();
$("#X").text(html + " -
"+nick );
$("#status").text("Waiting For
Other Player..");
playerSymbol = 'X';
turn = 'X';
compSymbol = 'O';
});
socket.on('readyForGame', function (game) {
var html =
$("#O").html();
$("#X").text("PlayerX -
"+game.userX);
html =
$("#X").html();
$("#O").text("PlayerO
- "+game.userO);
$("#status").text("Game
Started!");
/* create the board
and set the initial player */
createBoard();
setInitialPlayer();
socket.emit('startGame',game,'X');
});
socket.on('startGame', function (game,changeTurn) {
turn = changeTurn;
console.log("Who
has turn:"+turn);
var html =
$("#O").html();
$("#X").text("PlayerX -
"+game.userX);
html =
$("#X").html();
$("#O").text("PlayerO -
"+game.userO);
$("#status").text("Game
Started!");
/* create the board
and set the initial player */
userX = game.userX;
userO = game.userO;
playerSymbol = 'O';
compSymbol = 'X';
createBoard();
setInitialPlayer();
});
socket.on('moveAndChangeTurn', function (move,changeTurn) {
squareSelectForOther(move,compSymbol);
turn = changeTurn;
});
}
İstemci ile ilgili tüm logic aşağıya yukarı bu kısımda;
socket = io.connect("http://xxxx:3000");
nick =
$("#txtNick").val();
socket.emit('login',{
'uid' : nick
});
İo.connect ile web sockete bağlandık. Kullanıcı ismini
jquery ile login fonksiyonunu server a gönderdik. Burda istemci ilk kullanıcı
mı yoksa ikinci kullanıcı mı olduğunu bilmiyor. Eğer ilk kullanıcı ise 'waitingOtherPlayer'
a eğer ikinci kullanıcı ise ‘readyForGame’e düşecek. Bu yönetimi ilk yazımızda
yaptığımız gibi serverda yapıyoruz.
socket.on('waitingOtherPlayer', function (gameId) {
var html =
$("#X").html();
$("#X").text(html + " -
"+nick );
$("#status").text("Waiting For
Other Player..");
playerSymbol = 'X';
turn = 'X';
compSymbol = 'O';
});
Bu kısımda ilk kullanıcı olduğumuzu anlıyoruz ve diğer
kullanıcının sisteme girmesini bekliyoruz. Status bilgisine bekleme yazısı
koyuyoruz.
socket.on('readyForGame', function (game) {
var html =
$("#O").html();
$("#X").text("PlayerX -
"+game.userX);
html =
$("#X").html();
$("#O").text("PlayerO
- "+game.userO);
$("#status").text("Game
Started!");
/* create the board
and set the initial player */
createBoard();
setInitialPlayer();
socket.emit('startGame',game,'X');
});
Daha önce sisteme giren ve bekleyen bir kullanıcı olduğu
için server a oyun hazır mesajı yolluyor. Bizde ilk kullanıcıya hazır olması
için ‘startGame’ mesajı yolluyoruz. Bu arada her kullanıcı ‘X’ ve ‘O’ dan
hangisi olduğunu biliyor. İlk kullanıcının oyuna başlamaması için bir sebep
yok.
socket.on('moveAndChangeTurn', function (move,changeTurn) {
squareSelectForOther(move,compSymbol);
turn = changeTurn;
});
}
Hamle yapan kullanıcının diğer kullanıcıya ‘moveAndChangeTurn’
yolluyor. Bu şekilde hamle sahibi değişikliği ve oyun kontrolu sağlanıyor.
function squareSelectForOther(id,currentPlayer){
var square =
$("#"+id).get(0);;
fillSquareWithMarker(square, currentPlayer);
updateBoard(square.id, currentPlayer);
checkForWinner();
switchPlayers();
}
Hamleler kutu idleri üzerinden yaklandığı için özel bir
metod. İyi oyunlar.
Yorumlar
Yorum Gönder