vincent.astolfi
/
maettleship
mirror of https://github.com/viastolfi/maettleship.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ Game is now working. Socket utilisation is all rework. Piece movement and players move.

Browse Source
deployement
Vincent ASTOLFI 1 year ago
parent 696a5c83ee
commit 608519763c
5 changed files with 236 additions and 233 deletions
Show Stats Download Patch File Download Diff File

79
Game.js
Unescape View File

@ -1,79 +0,0 @@
const { io } = require(`${__dirname}/index.js`);
class Game {
constructor(room) {
this.room = room;
this.actualPlayer = "";
this.ennemy = "";
}
start() {
this.room.players.forEach((player) => {
io.to(player.socketId).emit("start game", this);
});
let rand = Math.floor(Math.random() * (1 - 0 + 1) + 0);
this.actualPlayer = this.room.players[rand];
rand === 0
? (this.ennemy = this.room.players[1])
: (this.ennemy = this.room.players[0]);
this.askToPlay();
}
endGame() {
this.room.players.forEach((player) =>
io.to(player.socketId).emit("end game"),
);
}
askToPlay() {
io.to(this.actualPlayer.socketId).emit("play");
}
move(move) {
let playedCase = this.ennemy.grid.cases[move.col][move.row];
if (playedCase.isPlayed === false) {
playedCase.isPlayed = true;
let isHit = playedCase.isShip;
let isWin = this.checkWin();
this.room.players.forEach((player) => {
io.to(player.socketId).emit("played move", this, isHit, isWin);
});
let temp = this.actualPlayer;
this.actualPlayer = this.ennemy;
this.ennemy = temp;
}
this.askToPlay();
}
checkWin() {
let w = true;
for (let i = 0; i < this.ennemy.grid.cases.length; i++) {
for (let j = 0; j < this.ennemy.grid.cases.length; j++) {
let c = this.ennemy.grid.cases[i][j];
if (c.isShip && !c.isPlayed) {
w = false;
break;
}
}
}
return w;
}
validBoards() {
this.room.players.forEach((player) => {
player.pieces.forEach((piece) => {
for (let i = piece.startPos.x; i <= piece.endPos.x; i++) {
for (let j = piece.startPos.y; j <= piece.endPos.y; j++) {
player.grid.cases[i][j].isShip = true;
}
}
});
});
}
}
module.exports = {
Game,
};

82
app.js
Unescape View File

@ -19,7 +19,6 @@ io.on("connection", (socket) => {
*/ */
socket.on("first connection", (socketId, callback) => { socket.on("first connection", (socketId, callback) => {
console.log("first connection");
let player = new Player(socketId); let player = new Player(socketId);
players.push(player); players.push(player);
callback({ callback({
@ -43,14 +42,74 @@ io.on("connection", (socket) => {
game = new Game(room); game = new Game(room);
game.validBoards(); game.validBoards();
game.room.players.forEach((player) => { game.room.players.forEach((player) => {
io.to(player.socketId).emit("start game", game); io.to(player.socketId).emit("start game");
}); });
game.start(); game.start();
}); });
socket.on("play", (move) => { socket.on("play", (id, move) => {
game.modifyEnnemyGrid(id, move);
game.move(move); game.move(move);
}); });
socket.on("get player", (id, callback) => {
let out = "";
players.forEach((p) => {
if (p.socketId === id) {
out = p;
}
});
callback({
player: out,
});
});
socket.on("get ennemy", (id, callack) => {
let out = "";
players.forEach((p) => {
if (p.socketId !== id) {
out = p;
}
});
callack({
player: out,
});
});
socket.on("update grid", (id, grid, callback) => {
players.forEach((p) => {
if (p.socketId === id) {
p.grid = grid;
}
});
callback({
status: true,
});
});
socket.on("update piece", (playerId, piece) => {
players.forEach((p) => {
if (p.socketId === playerId) {
for (let i = 0; i < p.pieces.length; i++) {
if (p.pieces[i].id === piece.id) {
p.pieces[i] = piece;
}
}
}
});
});
socket.on("change selection status", (playerId, pieceId, status) => {
players.forEach((p) => {
if (p.id === playerId) {
p.pieces.forEach((piece) => {
if (piece.id === pieceId) {
piece.isSelected = status;
}
});
}
});
});
}); });
const askToPlay = (game) => { const askToPlay = (game) => {
@ -59,7 +118,7 @@ const askToPlay = (game) => {
const playedMoove = (game, isHit, isWin) => { const playedMoove = (game, isHit, isWin) => {
game.room.players.forEach((player) => { game.room.players.forEach((player) => {
io.to(player.socketId).emit("played move", game, isHit, isWin); io.to(player.socketId).emit("played move", isHit, isWin);
}); });
}; };
@ -77,6 +136,13 @@ class Game {
? (this.ennemy = this.room.players[1]) ? (this.ennemy = this.room.players[1])
: (this.ennemy = this.room.players[0]); : (this.ennemy = this.room.players[0]);
players.forEach((p) => {
for (let i = 0; i < p.pieces.length; i++) {
p.pieces[i].isMovable = false;
p.pieces[i].isSelected = false;
}
});
askToPlay(this); askToPlay(this);
} }
@ -88,6 +154,14 @@ class Game {
} }
*/ */
modifyEnnemyGrid(id, move) {
players.forEach((p) => {
if (p.socketId !== id) {
p.grid.cases[move.col][move.row].isPlayed = true;
}
});
}
move(move) { move(move) {
let playedCase = this.ennemy.grid.cases[move.col][move.row]; let playedCase = this.ennemy.grid.cases[move.col][move.row];
if (playedCase.isPlayed === false) { if (playedCase.isPlayed === false) {

1
businesses/Piece.js
Unescape View File

@ -8,6 +8,7 @@ class Piece {
this.endPos = endPos; this.endPos = endPos;
this.vertical = true; this.vertical = true;
this.isSelected = false; this.isSelected = false;
this.isMovable = true;
} }
} }

272
public/scripts/game.js
Unescape View File

@ -1,4 +1,4 @@
import { sendMove } from "./index.js"; import { sendMove, socket } from "./index.js";
const ownCanvas = document.getElementById("own_board"); const ownCanvas = document.getElementById("own_board");
const ownCtx = ownCanvas.getContext("2d"); const ownCtx = ownCanvas.getContext("2d");
@ -9,98 +9,104 @@ const ennemyCtx = ennemyCanvas.getContext("2d");
const CASE_SIZE = 30; const CASE_SIZE = 30;
let selectedPiece = ""; let selectedPiece = "";
export function drawGrid(player) { export function drawGrid() {
ownCtx.clearRect(0, 0, ownCanvas.height, ownCanvas.width); ownCtx.clearRect(0, 0, ownCanvas.height, ownCanvas.width);
ownCtx.strokeStyle = "black"; ownCtx.strokeStyle = "black";
player.pieces.forEach((piece) => { socket.emit("get player", socket.id, (response) => {
for (let i = piece.startPos.x; i <= piece.endPos.x; i++) { let player = response.player;
for (let j = piece.startPos.y; j <= piece.endPos.y; j++) { player.pieces.forEach((piece) => {
if (piece.isSelected) { for (let i = piece.startPos.x; i <= piece.endPos.x; i++) {
ownCtx.fillStyle = "#F88379"; for (let j = piece.startPos.y; j <= piece.endPos.y; j++) {
ownCtx.fillRect( if (piece.isSelected) {
i * CASE_SIZE + 1, ownCtx.fillStyle = "#F88379";
j * CASE_SIZE + 1, ownCtx.fillRect(
CASE_SIZE - 1, i * CASE_SIZE + 1,
CASE_SIZE - 1, j * CASE_SIZE + 1,
); CASE_SIZE - 1,
} else { CASE_SIZE - 1,
ownCtx.fillStyle = "#A9A9A9"; );
ownCtx.fillRect( } else {
i * CASE_SIZE + 1, ownCtx.fillStyle = "#A9A9A9";
j * CASE_SIZE + 1, ownCtx.fillRect(
CASE_SIZE - 1, i * CASE_SIZE + 1,
CASE_SIZE - 1, j * CASE_SIZE + 1,
); CASE_SIZE - 1,
CASE_SIZE - 1,
);
}
} }
} }
} });
});
for (let i = 0; i < player.grid.cases.length; i++) { for (let i = 0; i < player.grid.cases.length; i++) {
for (let j = 0; j < player.grid.cases.length; j++) { for (let j = 0; j < player.grid.cases.length; j++) {
ownCtx.strokeRect( ownCtx.strokeRect(
i * CASE_SIZE + 1, i * CASE_SIZE + 1,
j * CASE_SIZE + 1, j * CASE_SIZE + 1,
CASE_SIZE, CASE_SIZE,
CASE_SIZE, CASE_SIZE,
);
if (player.grid.cases[i][j].isPlayed) {
const centerX = CASE_SIZE / 2 + i * CASE_SIZE;
const centerY = CASE_SIZE / 2 + j * CASE_SIZE;
ownCtx.fillStyle = "red";
const pointSize = 5;
ownCtx.fillRect(
centerX - pointSize / 2,
centerY - pointSize / 2,
pointSize,
pointSize,
); );
if (player.grid.cases[i][j].isPlayed) {
const centerX = CASE_SIZE / 2 + i * CASE_SIZE;
const centerY = CASE_SIZE / 2 + j * CASE_SIZE;
ownCtx.fillStyle = "red";
const pointSize = 5;
ownCtx.fillRect(
centerX - pointSize / 2,
centerY - pointSize / 2,
pointSize,
pointSize,
);
}
} }
} }
} });
} }
export function drawEnnemyGrid(player) { export function drawEnnemyGrid() {
ennemyCtx.strokeStyle = "red"; ennemyCtx.strokeStyle = "red";
for (let i = 0; i < player.grid.cases.length; i++) { socket.emit("get ennemy", socket.id, (response) => {
for (let j = 0; j < player.grid.cases.length; j++) { let player = response.player;
ennemyCtx.strokeRect( for (let i = 0; i < player.grid.cases.length; i++) {
i * CASE_SIZE + 1, for (let j = 0; j < player.grid.cases.length; j++) {
j * CASE_SIZE + 1, ennemyCtx.strokeRect(
CASE_SIZE,
CASE_SIZE,
);
if (player.grid.cases[i][j].isShip && player.grid.cases[i][j].isPlayed) {
ennemyCtx.fillStyle = "#FFFFCC";
ennemyCtx.fillRect(
i * CASE_SIZE + 1, i * CASE_SIZE + 1,
j * CASE_SIZE + 1, j * CASE_SIZE + 1,
CASE_SIZE - 1, CASE_SIZE,
CASE_SIZE - 1, CASE_SIZE,
); );
}
if (player.grid.cases[i][j].isPlayed) { if (player.grid.cases[i][j].isPlayed) {
const centerX = CASE_SIZE / 2 + i * CASE_SIZE; const centerX = CASE_SIZE / 2 + i * CASE_SIZE;
const centerY = CASE_SIZE / 2 + j * CASE_SIZE; const centerY = CASE_SIZE / 2 + j * CASE_SIZE;
ennemyCtx.fillStyle = "red";
if (player.grid.cases[i][j].isShip) {
const pointSize = 5; ennemyCtx.fillStyle = "#FFFFCC";
ennemyCtx.fillRect( ennemyCtx.fillRect(
centerX - pointSize / 2, i * CASE_SIZE + 1,
centerY - pointSize / 2, j * CASE_SIZE + 1,
pointSize, CASE_SIZE - 1,
pointSize, CASE_SIZE - 1,
); );
}
ennemyCtx.fillStyle = "red";
const pointSize = 5;
ennemyCtx.fillRect(
centerX - pointSize / 2,
centerY - pointSize / 2,
pointSize,
pointSize,
);
}
} }
} }
} });
} }
function getCursorPosition(ennemyCanvas, event) { function getCursorPosition(ennemyCanvas, event) {
@ -189,41 +195,55 @@ function validMoove(player, piece, movement) {
return isValid; return isValid;
} }
function clickNewCase(player, piece) { function clickNewCase(piece) {
const clickNewCasehandler = function (event) { const clickNewCasehandler = function (event) {
let selectedCase = getCursorPosition(ownCanvas, event); let selectedCase = getCursorPosition(ownCanvas, event);
player.pieces.forEach((p) => { socket.emit("get player", socket.id, (response) => {
if ( let player = response.player;
p.id === piece.id && player.pieces.forEach((p) => {
p.isSelected && if (
validMoove(player, piece, { type: "move", selectedCase: selectedCase }) p.id === piece.id &&
) { p.isSelected &&
for (let i = p.startPos.x; i <= p.endPos.x; i++) { p.isMovable &&
for (let j = p.startPos.y; j <= p.endPos.y; j++) { validMoove(player, piece, {
player.grid.cases[i][j].piece = ""; type: "move",
player.grid.cases[i][j].isShip = false; selectedCase: selectedCase,
})
) {
for (let i = p.startPos.x; i <= p.endPos.x; i++) {
for (let j = p.startPos.y; j <= p.endPos.y; j++) {
player.grid.cases[i][j].piece = "";
player.grid.cases[i][j].isShip = false;
}
} }
} p.startPos = { x: selectedCase.col, y: selectedCase.row };
p.startPos = { x: selectedCase.col, y: selectedCase.row }; if (p.vertical) {
if (p.vertical) { p.endPos = {
p.endPos = { x: selectedCase.col,
x: selectedCase.col, y: selectedCase.row + piece.size - 1,
y: selectedCase.row + piece.size - 1, };
}; } else {
} else { p.endPos = {
p.endPos = { x: selectedCase.col + piece.size - 1,
x: selectedCase.col + piece.size - 1, y: selectedCase.row,
y: selectedCase.row, };
}; }
} for (let i = p.startPos.x; i <= p.endPos.x; i++) {
for (let i = p.startPos.x; i <= p.endPos.x; i++) { for (let j = p.startPos.y; j <= p.endPos.y; j++) {
for (let j = p.startPos.y; j <= p.endPos.y; j++) { player.grid.cases[i][j].piece = p;
player.grid.cases[i][j].piece = p; player.grid.cases[i][j].isShip = true;
player.grid.cases[i][j].isShip = true; }
} }
socket.emit("update piece", socket.id, p);
socket.emit("update grid", socket.id, player.grid, (response) => {
if (response.status === true) {
drawGrid();
} else {
// TODO : error handling
}
});
} }
} });
drawGrid(player);
}); });
}; };
@ -238,6 +258,7 @@ function rotatePiece(player, piece) {
if ( if (
p.id === piece.id && p.id === piece.id &&
p.isSelected && p.isSelected &&
p.isMovable &&
validMoove(player, piece, { validMoove(player, piece, {
type: "rotation", type: "rotation",
selectedCase: p.startPos, selectedCase: p.startPos,
@ -271,39 +292,42 @@ function rotatePiece(player, piece) {
return handler; return handler;
} }
function clickChoose(player) { function clickChoose(event) {
const clickHandler = function (event) { event.preventDefault();
let selectedCase = getCursorPosition(ownCanvas, event); let selectedCase = getCursorPosition(ownCanvas, event);
socket.emit("get player", socket.id, (response) => {
let player = response.player;
if (player.grid.cases[selectedCase.col][selectedCase.row].isShip) { if (player.grid.cases[selectedCase.col][selectedCase.row].isShip) {
const rotate_button = document.querySelector("#rotate"); const rotate_button = document.querySelector("#rotate");
rotate_button.classList.remove("hidden-element"); rotate_button.classList.remove("hidden-element");
let piece = player.grid.cases[selectedCase.col][selectedCase.row].piece; let piece = player.grid.cases[selectedCase.col][selectedCase.row].piece;
let oldPieceId = selectedPiece.id; if (piece.isMovable) {
player.pieces.forEach((p) => { let oldPieceId = selectedPiece.id;
if (p.id === oldPieceId) { player.pieces.forEach((p) => {
p.isSelected = false; if (p.id === oldPieceId) {
} socket.emit("change selection status", player.id, p.id, false);
if (p.id === piece.id) { }
selectedPiece = p; if (p.id === piece.id) {
p.isSelected = true; selectedPiece = p;
} socket.emit("change selection status", player.id, p.id, true);
}); }
});
}
drawGrid(player); drawGrid();
rotate_button.addEventListener("click", rotatePiece(player, piece)); rotate_button.addEventListener("click", rotatePiece(piece));
ownCanvas.addEventListener("mousedown", clickNewCase(player, piece)); ownCanvas.addEventListener("mousedown", clickNewCase(piece));
} }
}; });
return clickHandler;
} }
export function play() { export function play() {
ennemyCanvas.addEventListener("mousedown", clickPlay); ennemyCanvas.addEventListener("mousedown", clickPlay);
} }
export function selectPiece(player) { export function selectPiece() {
ownCanvas.addEventListener("mousedown", clickChoose(player)); ownCanvas.addEventListener("mousedown", clickChoose);
} }

35
public/scripts/index.js
Unescape View File

@ -4,9 +4,8 @@ export const socket = io();
function startConnection() { function startConnection() {
socket.emit("first connection", socket.id, (response) => { socket.emit("first connection", socket.id, (response) => {
console.log(response); drawGrid();
drawGrid(response.player); selectPiece();
selectPiece(response.player);
document document
.querySelector("#start") .querySelector("#start")
@ -17,12 +16,13 @@ function startConnection() {
}); });
} }
socket.on("start game", (game) => { socket.on("start game", () => {
const ennemyBoard = document.querySelector("#ennemy_board"); const ennemyBoard = document.querySelector("#ennemy_board");
ennemyBoard.classList.remove("hidden-element"); ennemyBoard.classList.remove("hidden-element");
drawBoards(game); drawGrid();
drawEnnemyGrid();
}); });
socket.on("end game", () => { socket.on("end game", () => {
@ -40,7 +40,7 @@ socket.on("play", () => {
play(); play();
}); });
socket.on("played move", (game, isHit, isWin) => { socket.on("played move", (isHit, isWin) => {
const hitNotification = document.querySelector("#hit_notification"); const hitNotification = document.querySelector("#hit_notification");
const winNotification = document.querySelector("#win_notification"); const winNotification = document.querySelector("#win_notification");
@ -50,30 +50,13 @@ socket.on("played move", (game, isHit, isWin) => {
if (isWin) winNotification.classList.remove("hidden-element"); if (isWin) winNotification.classList.remove("hidden-element");
else winNotification.classList.add("hidden-element"); else winNotification.classList.add("hidden-element");
drawBoards(game); drawGrid();
drawEnnemyGrid();
}); });
function drawBoards(game) {
let p, e;
let p1 = game.room.players[0];
let p2 = game.room.players[1];
if (p1.socketId === socket.id) {
p = p1;
e = p2;
} else {
p = p2;
e = p1;
}
drawGrid(p);
drawEnnemyGrid(e);
}
export function sendMove(move) { export function sendMove(move) {
const notification = document.querySelector("#play_notification"); const notification = document.querySelector("#play_notification");
socket.emit("play", move); socket.emit("play", socket.id, move);
notification.classList.add("hidden-element"); notification.classList.add("hidden-element");
} }

Write Preview
Loading…
Cancel
Save