From afe07336e22fb4e934de85f0c960cd5d2c04e949 Mon Sep 17 00:00:00 2001 From: Paulo Vieira Date: Fri, 12 Jan 2018 17:00:22 +0000 Subject: [PATCH] singleplayer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit singleplayer já é jogável, com alguns problemas, mas já se joga <3 --- laravel_server/public/js/vueapp.js | 125 +++++++++++---- .../js/components/singleplayer_tictactoe.vue | 146 +++++++++++++----- node_server/gameserver.js | 2 + 3 files changed, 197 insertions(+), 76 deletions(-) diff --git a/laravel_server/public/js/vueapp.js b/laravel_server/public/js/vueapp.js index 22d91f5..960803e 100644 --- a/laravel_server/public/js/vueapp.js +++ b/laravel_server/public/js/vueapp.js @@ -47471,7 +47471,7 @@ exports = module.exports = __webpack_require__(2)(false); // module -exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]); +exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]); // exports @@ -47510,7 +47510,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony default export */ __webpack_exports__["default"] = ({ data: function data() { return { - title: 'TicTacToe', + title: 'Memory Game', showSuccess: false, showFailure: false, successMessage: '', @@ -47518,26 +47518,98 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); currentValue: 1, gameEnded: false, player1User: undefined, - player2User: undefined, - board: [0, 0, 0, 0, 0, 0, 0, 0, 0] + board: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + numeroJogada: 0, + piece1: 0, + piece2: 0, + pontuacao: 0, + boardImagens: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }; }, + created: function created() { + // populate array + var array = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8]; + // shuffle do array array + var i = 0; + var j = 0; + var temp = null; + + for (i = array.length - 1; i > 0; i--) { + j = Math.floor(Math.random() * (i + 1)); + temp = array[i]; + array[i] = array[j]; + array[j] = temp; + } + // console.log("created " + array); + + for (var i = 0; i < array.length; i++) { + this.boardImagens[i] = array[i]; + } + + for (var i = 0; i < this.board.length; i++) { + this.board[i] = "hidden"; + } + // console.log("created imagens " + this.boardImagens); + + }, + methods: { + + clickPiece: function clickPiece(index) { + // console.log("created clickepiece " + this.boardImagens); + if (this.board[index] != "hidden") { + return; + } + + this.board[index] = this.boardImagens[index]; + this.numeroJogada++; + if (this.numeroJogada == 1) { + this.piece1 = index; + console.log("Jogada 1"); + console.log(this.boardImagens[index]); + this.showSuccess = true; + this.showSuccess = "Para jogar novamente, feche esta cena!"; + } + if (this.numeroJogada == 2) { + this.piece2 = index; + console.log("Jogada 2"); + console.log(this.boardImagens[index]); + this.showSuccess = true; + this.showSuccess = "Para jogar novamente, feche esta cena!"; + + if (this.boardImagens[this.piece1] == this.boardImagens[this.piece2]) { + // comparar no vetor boardImagens com as posições do arrayJogadas + // bloqueio das posições selecionadas + // pontuação ++; + this.pontuacao = this.pontuacao + 10; + this.boardImagens[this.piece1] = this.boardImagens[this.piece1]; + this.boardImagens[this.piece2] = this.boardImagens[this.piece2]; + // same player playing + console.log("imagens iguais"); + } else { + // quer dizer que são diferentes + // volta-se a virar as cartas para imagem limpa + this.board[this.piece1] = "hidden"; + this.board[this.piece2] = "hidden"; + this.piece1 = null; + this.piece2 = null; + + console.log("imagens diferentes"); + } + this.numeroJogada = 0; + } + index = null; + }, + pieceImageURL: function pieceImageURL(piece) { var imgSrc = String(piece); + //console.log(imgSrc); return 'img/' + imgSrc + '.png'; }, - clickPiece: function clickPiece(index) { - if (this.board[index] || this.gameEnded) return; - this.board[index] = this.currentValue; - this.successMessage = this.currentPlayer + ' has Played'; - this.showSuccess = true; - this.currentValue = this.currentValue == 1 ? 2 : 1; - this.checkGameEnded(); - }, + restartGame: function restartGame() { console.log('restartGame'); - this.board = [0, 0, 0, 0, 0, 0, 0, 0, 0]; + this.board = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; this.showSuccess = false; this.showFailure = false; this.successMessage = ''; @@ -47552,18 +47624,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); return this.board[0] == value && this.board[1] == value && this.board[2] == value || this.board[3] == value && this.board[4] == value && this.board[5] == value || this.board[6] == value && this.board[7] == value && this.board[8] == value || this.board[0] == value && this.board[3] == value && this.board[6] == value || this.board[1] == value && this.board[4] == value && this.board[7] == value || this.board[2] == value && this.board[5] == value && this.board[8] == value || this.board[0] == value && this.board[4] == value && this.board[8] == value || this.board[2] == value && this.board[4] == value && this.board[6] == value; }, checkGameEnded: function checkGameEnded() { - if (this.hasRow(1)) { - this.successMessage = this.playerName(1) + ' won the Game'; - this.showSuccess = true; - this.gameEnded = true; - } - if (this.hasRow(2)) { - this.successMessage = this.playerName(2) + ' won the Game'; - this.showSuccess = true; - this.gameEnded = true; - } if (this.isBoardComplete()) { - this.successMessage = 'The Game ended in a Tie'; + this.successMessage = this.playerName(1) + ', you win!'; this.showSuccess = true; this.gameEnded = true; } @@ -47579,12 +47641,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); }); return returnValue; }, - // ---------------------------------------------------------------------------------------- - // GAME LOGIC - END - // ---------------------------------------------------------------------------------------- + playerName: function playerName(playerNumber) { - console.log(playerNumber); - console.log(this.player1User); if (this.player1User != undefined && playerNumber == 1) { return this.player1User.name; } @@ -47593,11 +47651,13 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); } return 'Player ' + playerNumber; } + }, + // ---------------------------------------------------------------------------------------- + // GAME LOGIC - END + // ---------------------------------------------------------------------------------------- computed: { currentPlayer: function currentPlayer() { - console.log(this.currentValue); - console.log(this.playerName(this.currentValue)); return this.playerName(this.currentValue); } }, @@ -47605,9 +47665,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); if (this.$root.$data.player1) { this.player1User = this.$root.$data.player1; } - if (this.$root.$data.player2) { - this.player2User = this.$root.$data.player2; - } } }); diff --git a/laravel_server/resources/assets/js/components/singleplayer_tictactoe.vue b/laravel_server/resources/assets/js/components/singleplayer_tictactoe.vue index a0a8506..0fa53d6 100644 --- a/laravel_server/resources/assets/js/components/singleplayer_tictactoe.vue +++ b/laravel_server/resources/assets/js/components/singleplayer_tictactoe.vue @@ -7,10 +7,10 @@
-
- - {{ successMessage }}     Restart -
+
+ + {{ successMessage }}     Restart +
@@ -26,7 +26,7 @@ export default { data: function(){ return { - title: 'TicTacToe', + title: 'Memory Game', showSuccess: false, showFailure: false, successMessage: '', @@ -34,26 +34,103 @@ currentValue: 1, gameEnded:false, player1User: undefined, - player2User: undefined, - board: [0,0,0,0,0,0,0,0,0] + board: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + numeroJogada: 0, + piece1 : 0, + piece2 : 0, + pontuacao: 0, + boardImagens: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] } }, + created() { + // populate array + var array = [1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8]; + // shuffle do array array + var i = 0; + var j = 0; + var temp = null; + + for (i = array.length - 1; i > 0; i--) { + j = Math.floor(Math.random() * (i + 1)); + temp = array[i]; + array[i] = array[j]; + array[j] = temp; + } + // console.log("created " + array); + + for (var i = 0; i < array.length; i++) { + this.boardImagens[i] = array[i]; + } + + + for (var i = 0; i < this.board.length; i++) { + this.board[i] = "hidden"; + } + // console.log("created imagens " + this.boardImagens); + + + }, methods: { - pieceImageURL: function (piece) { + + clickPiece: function(index) { + // console.log("created clickepiece " + this.boardImagens); + if (this.board[index] != "hidden") { + return; + } + + this.board[index] = this.boardImagens[index]; + this.numeroJogada++; + if (this.numeroJogada == 1) { + this.piece1 = index; + console.log("Jogada 1"); + console.log(this.boardImagens[index]); + this.showSuccess = true; + this.showSuccess = "Para jogar novamente, feche esta cena!"; + } + if (this.numeroJogada == 2) { + this.piece2 = index; + console.log("Jogada 2"); + console.log(this.boardImagens[index]); + this.showSuccess = true; + this.showSuccess = "Para jogar novamente, feche esta cena!"; + + if (this.boardImagens[this.piece1] == this.boardImagens[this.piece2]){ // comparar no vetor boardImagens com as posições do arrayJogadas + // bloqueio das posições selecionadas + // pontuação ++; + this.pontuacao = this.pontuacao+10; + this.boardImagens[this.piece1] = this.boardImagens[this.piece1]; + this.boardImagens[this.piece2] = this.boardImagens[this.piece2]; + // same player playing + console.log("imagens iguais"); + } else { // quer dizer que são diferentes + // volta-se a virar as cartas para imagem limpa + this.board[this.piece1] = "hidden"; + this.board[this.piece2] = "hidden"; + this.piece1 = null; + this.piece2 = null; + + console.log("imagens diferentes"); + } + this.numeroJogada = 0; + + + + } + index = null; + + + + }, + + pieceImageURL: function (piece) { var imgSrc = String(piece); + //console.log(imgSrc); return 'img/' + imgSrc + '.png'; }, - clickPiece: function(index) { - if(this.board[index] || this.gameEnded) return; - this.board[index] = this.currentValue; - this.successMessage = this.currentPlayer+' has Played'; - this.showSuccess = true; - this.currentValue = (this.currentValue == 1)? 2 : 1; - this.checkGameEnded(); - }, + restartGame:function(){ console.log('restartGame'); - this.board= [0,0,0,0,0,0,0,0,0]; + this.board= [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; this.showSuccess= false; this.showFailure= false; this.successMessage= ''; @@ -75,18 +152,8 @@ ((this.board[2]==value) && (this.board[4]==value) && (this.board[6]==value)); }, checkGameEnded: function(){ - if (this.hasRow(1)) { - this.successMessage = this.playerName(1) + ' won the Game'; - this.showSuccess = true; - this.gameEnded = true; - } - if (this.hasRow(2)) { - this.successMessage = this.playerName(2) + ' won the Game'; - this.showSuccess = true; - this.gameEnded = true; - } if (this.isBoardComplete()) { - this.successMessage = 'The Game ended in a Tie'; + this.successMessage = this.playerName(1) + ', you win!'; this.showSuccess = true; this.gameEnded = true; } @@ -102,12 +169,8 @@ }); return returnValue; }, - // ---------------------------------------------------------------------------------------- - // GAME LOGIC - END - // ---------------------------------------------------------------------------------------- - playerName: function(playerNumber){ - console.log(playerNumber); - console.log(this.player1User); + + playerName: function(playerNumber){ if(this.player1User != undefined && playerNumber == 1){ return this.player1User.name; } @@ -116,11 +179,13 @@ } return 'Player '+playerNumber; } - }, - computed:{ - currentPlayer: function(){ - console.log(this.currentValue); - console.log(this.playerName(this.currentValue)); + + }, + // ---------------------------------------------------------------------------------------- + // GAME LOGIC - END + // ---------------------------------------------------------------------------------------- + computed:{ + currentPlayer: function(){ return this.playerName(this.currentValue); } }, @@ -128,9 +193,6 @@ if(this.$root.$data.player1){ this.player1User = this.$root.$data.player1; } - if(this.$root.$data.player2 ){ - this.player2User = this.$root.$data.player2; - } } } diff --git a/node_server/gameserver.js b/node_server/gameserver.js index ea8eab3..8772757 100644 --- a/node_server/gameserver.js +++ b/node_server/gameserver.js @@ -71,6 +71,7 @@ io.on('connection', function (socket) { return; } var playerNumber = 0; +/* if(game.player1SocketID == socket.id){ playerNumber = 1; }else if(game.player2SocketID == socket.id){ @@ -80,6 +81,7 @@ io.on('connection', function (socket) { if(game.play(playerNumber, data.index)){ io.to(game.gameID).emit('game_change', game); } +*/ });