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 11 months 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) => {
console.log("first connection");
let player = new Player(socketId);
players.push(player);
callback({
@ -43,14 +42,74 @@ io.on("connection", (socket) => {
game = new Game(room);
game.validBoards();
game.room.players.forEach((player) => {
io.to(player.socketId).emit("start game", game);
io.to(player.socketId).emit("start game");
});
game.start();
});
socket.on("play", (move) => {
socket.on("play", (id, move) => {
game.modifyEnnemyGrid(id, 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) => {
@ -59,7 +118,7 @@ const askToPlay = (game) => {
const playedMoove = (game, isHit, isWin) => {
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[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);
}
@ -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) {
let playedCase = this.ennemy.grid.cases[move.col][move.row];
if (playedCase.isPlayed === false) {

1
businesses/Piece.js
Unescape View File

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

35
public/scripts/index.js
Unescape View File

@ -4,9 +4,8 @@ export const socket = io();
function startConnection() {
socket.emit("first connection", socket.id, (response) => {
console.log(response);
drawGrid(response.player);
selectPiece(response.player);
drawGrid();
selectPiece();
document
.querySelector("#start")
@ -17,12 +16,13 @@ function startConnection() {
});
}
socket.on("start game", (game) => {
socket.on("start game", () => {
const ennemyBoard = document.querySelector("#ennemy_board");
ennemyBoard.classList.remove("hidden-element");
drawBoards(game);
drawGrid();
drawEnnemyGrid();
});
socket.on("end game", () => {
@ -40,7 +40,7 @@ socket.on("play", () => {
play();
});
socket.on("played move", (game, isHit, isWin) => {
socket.on("played move", (isHit, isWin) => {
const hitNotification = document.querySelector("#hit_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");
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) {
const notification = document.querySelector("#play_notification");
socket.emit("play", move);
socket.emit("play", socket.id, move);
notification.classList.add("hidden-element");
}

Write Preview
Loading…
Cancel
Save