Board!
Paulo Vieira
parent
5db4cdaaa3
commit
c924322c89
|
|
@ -6,4 +6,21 @@
|
|||
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.board {
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
border-style: solid;
|
||||
border-width: 0px 0 0 0px;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
.board img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 5px;
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48112,8 +48112,6 @@ var render = function() {
|
|||
return _c("tr", { key: game.gameID }, [
|
||||
_c("td", [_vm._v(_vm._s(game.gameID))]),
|
||||
_vm._v(" "),
|
||||
_c("td", [_vm._v(_vm._s(game.playerName))]),
|
||||
_vm._v(" "),
|
||||
_c("td", [
|
||||
_c(
|
||||
"a",
|
||||
|
|
@ -48245,7 +48243,7 @@ exports = module.exports = __webpack_require__(2)(false);
|
|||
|
||||
|
||||
// module
|
||||
exports.push([module.i, "\n.gameseparator[data-v-d614d384]{\n border-style: solid;\n border-width: 2px 0 0 0;\n border-color: black;\n}\n", ""]);
|
||||
exports.push([module.i, "\n.gameboard[data-v-d614d384]{\n border-style: solid;\n border-width: 2px 0 0 0;\n border-color: black;\n}\n", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
|
@ -48276,6 +48274,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
|||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
|
||||
/* harmony default export */ __webpack_exports__["default"] = ({
|
||||
props: ['game'],
|
||||
|
|
@ -48341,6 +48342,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
startGame: function startGame(game) {
|
||||
this.$socket.emit('start_game', { gameID: game.gameID });
|
||||
},
|
||||
pieceImageURL: function pieceImageURL(pieceNumber) {
|
||||
var imgSrc = String(pieceNumber);
|
||||
return 'img/' + imgSrc + '.png';
|
||||
|
|
@ -48348,16 +48352,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
|||
closeGame: function closeGame() {
|
||||
this.$parent.close(this.game);
|
||||
},
|
||||
clickPiece: function clickPiece(index) {
|
||||
if (!this.game.gameEnded) {
|
||||
if (this.game.playerTurn != this.ownPlayerNumber) {
|
||||
alert("It's not your turn to play");
|
||||
} else {
|
||||
if (this.game.board[index] == 0) {
|
||||
this.$parent.play(this.game, index);
|
||||
}
|
||||
}
|
||||
clickPiece: function clickPiece(game, index) {
|
||||
if (this.game.boardImages[index] == "hidden") {
|
||||
this.$parent.play(this.game, index);
|
||||
}
|
||||
this.$socket.emit('play', { gameID: game.gameID, index: index });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -48370,7 +48369,7 @@ var render = function() {
|
|||
var _vm = this
|
||||
var _h = _vm.$createElement
|
||||
var _c = _vm._self._c || _h
|
||||
return _c("div", { staticClass: "gameseparator" }, [
|
||||
return _c("div", { staticClass: "gameboard" }, [
|
||||
_c("div", [
|
||||
_c("h2", { staticClass: "text-center" }, [
|
||||
_vm._v("Game " + _vm._s(_vm.game.gameID))
|
||||
|
|
@ -48406,10 +48405,28 @@ var render = function() {
|
|||
])
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_c("div", [
|
||||
_c("p", [
|
||||
_c(
|
||||
"button",
|
||||
{
|
||||
staticClass: "btn btn-xs btn-success",
|
||||
on: {
|
||||
click: function($event) {
|
||||
$event.preventDefault()
|
||||
_vm.startGame(_vm.game)
|
||||
}
|
||||
}
|
||||
},
|
||||
[_vm._v("Start Game")]
|
||||
)
|
||||
])
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_c(
|
||||
"div",
|
||||
{ staticClass: "board" },
|
||||
_vm._l(_vm.game.board, function(piece, index) {
|
||||
_vm._l(_vm.game.boardImages, function(piece, index) {
|
||||
return _c("div", [
|
||||
_c("img", {
|
||||
attrs: { src: _vm.pieceImageURL(piece) },
|
||||
|
|
|
|||
|
|
@ -1,21 +1,24 @@
|
|||
<template>
|
||||
<div class="gameseparator">
|
||||
<div class="gameboard">
|
||||
<div>
|
||||
<h2 class="text-center">Game {{ game.gameID }}</h2>
|
||||
<br>
|
||||
</div>
|
||||
<div class="game-zone-content">
|
||||
<div class="game-zone-content">
|
||||
<div class="alert" :class="alerttype">
|
||||
<strong>{{ message }} <a v-show="game.gameEnded" v-on:click.prevent="closeGame">Close Game</a></strong>
|
||||
</div>
|
||||
<div>
|
||||
<p><button class="btn btn-xs btn-success" v-on:click.prevent="startGame(game)">Start Game</button></p>
|
||||
</div>
|
||||
<div class="board">
|
||||
<div v-for="(piece, index) of game.board" >
|
||||
<div v-for="(piece, index) of game.boardImages" >
|
||||
<img v-bind:src="pieceImageURL(piece)" v-on:click="clickPiece(index)">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
|
@ -32,7 +35,7 @@
|
|||
return 1;
|
||||
} else if (this.game.player2SocketID == this.$parent.socketId) {
|
||||
return 2;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
ownPlayerName(){
|
||||
|
|
@ -59,7 +62,7 @@
|
|||
return "Game has ended. You Win.";
|
||||
} else if (this.game.winner == 0) {
|
||||
return "Game has ended. There was a tie.";
|
||||
}
|
||||
}
|
||||
return "Game has ended and " + this.adversaryPlayerName + " has won. You lost.";
|
||||
} else {
|
||||
if (this.game.playerTurn == this.ownPlayerNumber) {
|
||||
|
|
@ -78,18 +81,21 @@
|
|||
return "alert-success";
|
||||
} else if (this.game.winner == 0) {
|
||||
return "alert-info";
|
||||
}
|
||||
}
|
||||
return "alert-danger";
|
||||
}
|
||||
}
|
||||
if (this.game.playerTurn == this.ownPlayerNumber) {
|
||||
return "alert-success";
|
||||
return "alert-success";
|
||||
} else {
|
||||
return "alert-info";
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startGame(game){
|
||||
this.$socket.emit('start_game', {gameID: game.gameID});
|
||||
},
|
||||
pieceImageURL (pieceNumber) {
|
||||
var imgSrc = String(pieceNumber);
|
||||
return 'img/' + imgSrc + '.png';
|
||||
|
|
@ -97,25 +103,21 @@
|
|||
closeGame (){
|
||||
this.$parent.close(this.game);
|
||||
},
|
||||
clickPiece(index){
|
||||
if (!this.game.gameEnded) {
|
||||
if (this.game.playerTurn != this.ownPlayerNumber) {
|
||||
alert("It's not your turn to play");
|
||||
} else {
|
||||
if (this.game.board[index] == 0) {
|
||||
this.$parent.play(this.game, index);
|
||||
}
|
||||
}
|
||||
}
|
||||
clickPiece(game, index){
|
||||
if (this.game.boardImages[index] == "hidden") {
|
||||
this.$parent.play(this.game, index);
|
||||
}
|
||||
this.$socket.emit('play', {gameID: game.gameID, index: index});
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gameseparator{
|
||||
<style scoped>
|
||||
.gameboard{
|
||||
border-style: solid;
|
||||
border-width: 2px 0 0 0;
|
||||
border-color: black;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<tbody>
|
||||
<tr v-for="game in games" :key="game.gameID">
|
||||
<td>{{ game.gameID }}</td>
|
||||
<td>{{ game.playerName }}</td>
|
||||
<!-- <td>{{ data.currentPlayer }}</td> -->
|
||||
<td>
|
||||
<a class="btn btn-xs btn-primary" v-on:click.prevent="join(game)">Join</a>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
border-style: solid;
|
||||
border-width: 0px 0 0 0px;
|
||||
border-color: black;
|
||||
|
||||
|
||||
div{
|
||||
display: inline-block;
|
||||
border-style: solid;
|
||||
|
|
@ -39,6 +39,3 @@
|
|||
border-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,12 +4,13 @@
|
|||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
|
||||
@yield('metatags')
|
||||
<title>@yield('title')</title>
|
||||
@yield('extrastyles')
|
||||
<!-- Latest compiled and minified CSS & JS -->
|
||||
<link rel="stylesheet" href="{{ URL::asset('css/app.css') }}">
|
||||
<link rel="stylesheet" href="{{ URL::asset('css/style.css') }}">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ class MemoryGame {
|
|||
this.gameOwner= gameOwnerSocket;
|
||||
this.playerTurn = 1;
|
||||
this.winner = 0;
|
||||
this.boardImages;
|
||||
this.boardHidden;
|
||||
this.boardImages = [];
|
||||
this.boardHidden = [];
|
||||
this.numPlayers = 0;
|
||||
this.players = [];
|
||||
this.playerScore = [];
|
||||
|
|
@ -23,65 +23,34 @@ class MemoryGame {
|
|||
this.array = [];
|
||||
}
|
||||
|
||||
startGame(){
|
||||
switch(this.numPlayers) {
|
||||
case 1:
|
||||
case 2:
|
||||
this.line = 4;
|
||||
this.column = 4;
|
||||
this.gameStarted = true;
|
||||
this.array = [0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7];
|
||||
populateMainBoard();
|
||||
populateInvisibleBoard();
|
||||
break;
|
||||
case 3:
|
||||
this.line = 4;
|
||||
this.column = 6;
|
||||
this.gameStarted = true;
|
||||
this.array = [0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11];
|
||||
populateMainBoard();
|
||||
populateInvisibleBoard();
|
||||
break;
|
||||
case 4:
|
||||
this.line = 6;
|
||||
this.column = 6;
|
||||
this.gameStarted = true;
|
||||
this.array = [0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,
|
||||
12,12,13,13,14,14,15,15,16,16,17,17];
|
||||
populateMainBoard();
|
||||
populateInvisibleBoard();
|
||||
break;
|
||||
}
|
||||
zerarPontuacoes();
|
||||
this.winner = 0;
|
||||
this.gameEnded = false;
|
||||
}
|
||||
|
||||
|
||||
zerarPontuacoes() {
|
||||
for ( var i = 0; i < this.playerScore.lenght; i++ ) {
|
||||
for ( let i = 0; i < this.playerScore.lenght; i++ ) {
|
||||
this.playerScore[i] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
populateMainBoard() {
|
||||
for(var i = 0; i < this.line*this.column; i++) {
|
||||
let max = this.line*this.column;
|
||||
for(let i = 0; i < max; i++) {
|
||||
this.boardImages[i] = "hidden";
|
||||
}
|
||||
}
|
||||
|
||||
populateInvisibleBoard() {
|
||||
shuffleArray();
|
||||
console.log(array);
|
||||
this.shuffleArray();
|
||||
//console.log(this.array);
|
||||
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
this.boardImages[i] = this.array[i];
|
||||
for (let i = 0; i < this.array.length; i++) {
|
||||
this.boardHidden[i] = this.array[i];
|
||||
}
|
||||
console.log(this.boardHidden);
|
||||
|
||||
}
|
||||
|
||||
join(socketId){ // chamar pelo socket id do user
|
||||
for(var i = 0; i < this.players.lenght; i++){
|
||||
for(let i = 0; i < this.players.lenght; i++){
|
||||
if (this.players[i] == socketId) { // se já estiver no jogo, então não conta
|
||||
return;
|
||||
}
|
||||
|
|
@ -94,14 +63,7 @@ class MemoryGame {
|
|||
checkGameEnded(){
|
||||
//1 Board complete ??
|
||||
|
||||
if (this.isBoardComplete()) {
|
||||
//
|
||||
// for(let i=0; i<this.numPlayers; i++){
|
||||
// this.playerScore[i] = 0; //inicializa a pontuaçao do player a 0
|
||||
// this.calculateScore(i); //calcula o score do player
|
||||
// }
|
||||
|
||||
|
||||
if (this.isBoardComplete() && this.gameEnded) {
|
||||
// buscar o player com maior pontuação
|
||||
for(let a = 0; a < this.players.lenght; a++) {
|
||||
if (this.playerScore[a] > this.pontuacao) {
|
||||
|
|
@ -110,32 +72,23 @@ class MemoryGame {
|
|||
}
|
||||
}
|
||||
|
||||
// mostrá-lo
|
||||
console.log('player' + this.players[this.winner]);
|
||||
console.log('position ' + this.winner);
|
||||
console.log('pontuacao: ' + this.pontuacao);
|
||||
this.winnerMessage = this.players[this.winner] + ' won the game with ' + this.pontuacao + ' pontos.';
|
||||
console.log('winnerMessage: ' + this.winnerMessage);
|
||||
|
||||
this.gameEnded = true;
|
||||
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
//ou se empataram
|
||||
|
||||
//se nao estiver complete return false
|
||||
return false;
|
||||
}
|
||||
|
||||
isBoardComplete(){
|
||||
|
||||
for(var i=0; i<this.boardImages.lenght; i++){
|
||||
if (this.boardImages[i] == "hidden") { //se houver alguma img hidden entao a board nao esta completa logo nao acabou o Jogo
|
||||
return false;
|
||||
}
|
||||
}
|
||||
for(let i=0; i<this.boardImages.lenght; i++){
|
||||
if (this.boardImages[i] == "hidden") { //se houver alguma img hidden entao a board nao esta completa logo nao acabou o Jogo
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
|
@ -149,34 +102,42 @@ class MemoryGame {
|
|||
|
||||
//jogo ainda nao acabou
|
||||
if(this.gameEnded) {
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
//Estado da quadricula ? hidden ? Jogada valida
|
||||
if (this.boardImages[index] == "hidden") {
|
||||
if (this.boardImages[index] != "hidden") {
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
//player turn = 1 entao 1ª jogada do jogador e tem de virar a 2ª peça
|
||||
// SE o player turn =1 vira 1ª carta e playerturn ++
|
||||
|
||||
if (this.playerTurn == 1) {
|
||||
this.piece1 = index;
|
||||
this.boardImages[index] = this.boardHidden[index];
|
||||
this.playerTurn++;
|
||||
console.log("1ª play");
|
||||
} else if (this.playerTurn == 2) {
|
||||
// se playerTurn = 2 vira se a 2ª carta
|
||||
this.piece2 = index;
|
||||
this.piece1 = index;
|
||||
console.log(this.piece1);
|
||||
this.boardImages[index] = this.boardHidden[index];
|
||||
isPair(playerNumber);
|
||||
this.playerTurn = 1;
|
||||
console.log(this.boardImages[this.piece1]);
|
||||
this.playerTurn++;
|
||||
} else {
|
||||
// se playerTurn = 2 vira se a 2ª carta
|
||||
console.log("2ª play");
|
||||
this.piece2 = index;
|
||||
console.log(this.piece2);
|
||||
this.boardImages[index] = this.boardHidden[index];
|
||||
console.log(this.boardImages[this.piece2]);
|
||||
this.isPair(playerNumber);
|
||||
this.playerTurn = 1;
|
||||
this.checkGameEnded();
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
isPair(playerNumber) {
|
||||
if (this.boardImages[this.piece1] === this.boardImages[this.piece2]) {
|
||||
if (this.boardHidden[this.piece1] === this.boardHidden[this.piece2]) {
|
||||
console.log("You found a pair!");
|
||||
// pontuação ++
|
||||
this.playerScore[playerNumber]++;
|
||||
|
|
@ -188,7 +149,7 @@ class MemoryGame {
|
|||
this.boardImages[this.piece1] = "hidden";
|
||||
this.boardImages[this.piece2] = "hidden";;
|
||||
|
||||
nextTurn(playerNumber);
|
||||
this.nextTurn(playerNumber);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -204,7 +165,7 @@ class MemoryGame {
|
|||
var j = 0;
|
||||
var temp = null;
|
||||
|
||||
for (i = this.array.length - 1; i > 0; i--) {
|
||||
for (let i = this.array.length - 1; i > 0; i--) {
|
||||
j = Math.floor(Math.random() * (i + 1));
|
||||
temp = this.array[i];
|
||||
this.array[i] = this.array[j];
|
||||
|
|
@ -214,6 +175,40 @@ class MemoryGame {
|
|||
|
||||
}
|
||||
|
||||
startGame(){
|
||||
switch(this.numPlayers) {
|
||||
case 1:
|
||||
case 2:
|
||||
this.line = 4;
|
||||
this.column = 4;
|
||||
this.gameStarted = true;
|
||||
this.array = [0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7];
|
||||
this.populateMainBoard();
|
||||
this.populateInvisibleBoard();
|
||||
break;
|
||||
case 3:
|
||||
this.line = 4;
|
||||
this.column = 6;
|
||||
this.gameStarted = true;
|
||||
this.array = [0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11];
|
||||
this.populateMainBoard();
|
||||
this.populateInvisibleBoard();
|
||||
break;
|
||||
case 4:
|
||||
this.line = 6;
|
||||
this.column = 6;
|
||||
this.gameStarted = true;
|
||||
this.array = [0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,
|
||||
12,12,13,13,14,14,15,15,16,16,17,17];
|
||||
this.populateMainBoard();
|
||||
this.populateInvisibleBoard();
|
||||
break;
|
||||
}
|
||||
this.zerarPontuacoes();
|
||||
this.winner = 0;
|
||||
this.gameEnded = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
module.exports = MemoryGame;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ io.on('connection', function (socket) {
|
|||
console.log('client has connected');
|
||||
|
||||
socket.on('create_game', function (data){
|
||||
let game = games.createGame(data.playerName, socket.id);
|
||||
let game = games.createGame(socket.id);
|
||||
socket.join(game.gameID);
|
||||
console.log('game was created');
|
||||
// Notifications to the client
|
||||
|
|
@ -70,18 +70,18 @@ io.on('connection', function (socket) {
|
|||
socket.emit('invalid_play', {'type': 'Invalid_Game', 'game': null});
|
||||
return;
|
||||
}
|
||||
let playerSocket = socket.id;
|
||||
/*if (playerTurn > game.players.length || playerTurn < 0) {
|
||||
socket.emit('invalid_play', {'type': 'Invalid_Player', 'game': game});
|
||||
return;
|
||||
}*/
|
||||
if (game.play( playerSocket, data.x, data.y)) {
|
||||
io.to(game.gameID).emit('game_changed', game);
|
||||
} else {
|
||||
socket.emit('invalid_play', {'type': 'Invalid_Play', 'game': game});
|
||||
return;
|
||||
var playerNumber = 0;
|
||||
if(game.player1SocketID == socket.id){
|
||||
playerNumber = 1;
|
||||
}else if(game.player2SocketID == socket.id){
|
||||
playerNumber = 2;
|
||||
}
|
||||
});
|
||||
|
||||
if(game.play(playerNumber, data.index)){
|
||||
io.to(game.gameID).emit('game_change', game);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
socket.on('get_game', function (data){
|
||||
let game = games.gameByID(data.gameID);
|
||||
|
|
|
|||
Loading…
Reference in New Issue