NoNameGuy/BadMemoryDAD
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Board!

Browse Source
This commit is contained in:
Paulo Vieira 2018-01-12 11:41:23 +00:00
parent 5db4cdaaa3
commit c924322c89
8 changed files with 163 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
laravel_server/public/css/style.css vendored
View File

@ -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;
}

45
laravel_server/public/js/vueapp.js vendored
View File

@ -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) },

50
laravel_server/resources/assets/js/components/game-tictactoe.vue
View File

@ -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 }} &nbsp;&nbsp;&nbsp;&nbsp;<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>

2
laravel_server/resources/assets/js/components/lobby.vue
View File

@ -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>

5
laravel_server/resources/assets/sass/app.scss vendored
View File

@ -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;
}
}

3
laravel_server/resources/views/master.blade.php
View File

@ -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>

149
node_server/gamemodel.js
View File

@ -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;

24
node_server/gameserver.js
View File

@ -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);