diff --git a/client/js/board.js b/client/js/board.js index 1550b29..2da891a 100644 --- a/client/js/board.js +++ b/client/js/board.js @@ -29,10 +29,9 @@ export default class Board extends EventEmitter{ this.clientLocalSnake = undefined; } - newSnake(x, y, name) { + newSnake(x, y, name, id) { if(this.snakes.length < 10){ - let snake = new Snake(this.context, x, y, this.getAvailableColor(), name); - + let snake = new Snake(this.context, x, y, this.getAvailableColor(), name, id); snake.draw(); this.snakes.push(snake); @@ -76,22 +75,22 @@ export default class Board extends EventEmitter{ createScoreboard() { this.scoreboard = new Scoreboard(); - this.scoreboard.playersContainer.appendTo('#scoreboard'); } - render() { - this.intervalId = setInterval(() => { - this.snakes.forEach(snake => { - if(!snake.dead) { - snake.move(this); - } - }); - this.scoreboard.updateScores(this.snakes, this.clientLocalSnake); - this.checkSnakeSelfCollision(); - this.checkCollisionWithApples(); - // END TEMP - }, constant.DELAY); + render(snakes, apples){ + + snakes.forEach(snake => { + + this.snakes.find(function (data) { + return snake.id === data.id; + }) + }); + /*apples.forEach(apple => { + this.apples.find(function (data) { + return apple.id === data.id; + }) + });*/ } stopRendering(){ @@ -121,15 +120,15 @@ export default class Board extends EventEmitter{ } checkCollisionWithApples() { - this.snakes.forEach((snake, i) => { + this.snakes.forEach((snake) => { let firstBodyPart = snake.bodyParts[0]; this.apples.forEach((apple, index) => { if (firstBodyPart.x < apple.x + apple.radius * 2 && - firstBodyPart.x + firstBodyPart.width > apple.x && - firstBodyPart.y < apple.y + apple.radius * 2 && - firstBodyPart.height + firstBodyPart.y > apple.y) { + firstBodyPart.x + firstBodyPart.width > apple.x && + firstBodyPart.y < apple.y + apple.radius * 2 && + firstBodyPart.height + firstBodyPart.y > apple.y) { this.apples.splice(index, 1); snake.addScore(); diff --git a/client/js/constant.js b/client/js/constant.js index 9c3d9c7..a4642c2 100644 --- a/client/js/constant.js +++ b/client/js/constant.js @@ -16,4 +16,6 @@ export const CANVAS_HEIGHT = 690; export const TOTAL_DURATION = 15000; export const GAME_DURATION = 10000; -export const GRID_SIZE = 30; \ No newline at end of file +export const GRID_SIZE = 30; + +export const ID_SIZE = 16; \ No newline at end of file diff --git a/client/js/displayDisconnectMessage.js b/client/js/displayDisconnectMessage.js index 379f95f..82a5191 100644 --- a/client/js/displayDisconnectMessage.js +++ b/client/js/displayDisconnectMessage.js @@ -3,6 +3,6 @@ import $ from 'jquery'; export default function displayDisconnectMessage() { - $("#message").html("

Warning !

You have been deconnected, please check your internet connection and try again

").addClass("active"); - $('body').addClass("blur"); + $("#message").html("

Warning !

You have been deconnected, please check your internet connection and try again

").addClass("active"); + $('body').addClass("blur"); } \ No newline at end of file diff --git a/client/js/main.js b/client/js/main.js index ace10dd..3c5e9e0 100644 --- a/client/js/main.js +++ b/client/js/main.js @@ -35,10 +35,10 @@ document.addEventListener('DOMContentLoaded', function () { }); server.on('new_snake', function(data){ - clientLocaleSnake = board.newSnake(data.x, data.y, data.name); + clientLocaleSnake = board.newSnake(data.x, data.y, data.name, data.id); }); server.on('joinGame', function(apples){ - apples.forEach((apple) => { + apples.forEach(apple => { let drawApple = board.newApple(apple.x, apple.y); drawApple.draw(); }); @@ -53,16 +53,30 @@ document.addEventListener('DOMContentLoaded', function () { }); }); - //server.sendDeleteUser(); server.sendMove(); //server.sendAppleEaten(x, y); - board.render(); board.on('appleEaten', function(position){ server.sendAppleEaten(position); }); + server.on('sendPositions', function(snakes, apples){ + snakes.forEach(snake => { + var snakeData = board.snakes.find(function (data) {snake.id === data.id;}); + if(!snakeData){ + console.log(snakeData); + board.newSnake(snake.x, snake.y, snake.name, snake.id); + }else{ + console.log('màj'); + snake.x = laonsaitpas.x; + snake.y = laonsaitpas.y; // trouver l'ordre à faire, pour créer les serpents non existant, et màj les serpents déjà dans board.snake + } + }); + + board.render(snakes, apples); + }); + server.on('disconnect', function(){ board.stopRendering(); displayMessage("Warning !", "You have been disconnected from the server ! Check your internet connection !"); diff --git a/client/js/sendToServer.js b/client/js/sendToServer.js index 21abb2c..60e22b3 100644 --- a/client/js/sendToServer.js +++ b/client/js/sendToServer.js @@ -57,6 +57,10 @@ socket.on('joinGame', function(apples) { serverObject.emit('joinGame', apples); }); +socket.on('sendPositions', function(snakes, apples) { + serverObject.emit('sendPositions', snakes, apples); +}); + socket.on('appleEaten', function(data) { console.log('sendto'); serverObject.emit('new_apple', data); diff --git a/client/js/snake.js b/client/js/snake.js index 303bcbc..195bfa3 100644 --- a/client/js/snake.js +++ b/client/js/snake.js @@ -5,7 +5,7 @@ import * as constant from './constant'; export default class Snake { - constructor(context, x, y, color, name) { + constructor(context, x, y, color, name, id) { this.context = context; this.x = x; this.y = y; @@ -19,6 +19,7 @@ export default class Snake { this.bodyParts = []; this.name = name; + this.id = id; this.dead = false; } @@ -50,8 +51,6 @@ export default class Snake { lastBodyPart.y = 0; } - lastBodyPart.draw(); - this.moveBodyPartsInArray(); } @@ -68,8 +67,6 @@ export default class Snake { lastBodyPart.y = this.context.canvas.clientHeight - (this.height + constant.BODY_PART_MARGIN); } - lastBodyPart.draw(); - this.moveBodyPartsInArray(); } @@ -87,8 +84,6 @@ export default class Snake { lastBodyPart.x = this.context.canvas.clientWidth - (this.width + constant.BODY_PART_MARGIN); } - lastBodyPart.draw(); - this.moveBodyPartsInArray(); } @@ -106,8 +101,6 @@ export default class Snake { lastBodyPart.x = 0; } - lastBodyPart.draw(); - this.moveBodyPartsInArray(); } @@ -119,41 +112,22 @@ export default class Snake { this.bodyParts.splice(0, 0, this.bodyParts.splice(this.bodyParts.length - 1, 1)[0]); } - move(board) { - this.checkCollisionWithApples(board.apples); - + move() { + /*this.checkCollisionWithApples(board.apples);*/ if (this.direction === 'right') { - this.moveRight(); + return this.moveRight(); } else if (this.direction === 'down') { - this.moveDown(); + return this.moveDown(); } else if (this.direction === 'up') { - this.moveUp(); + return this.moveUp(); } else if (this.direction === 'left') { - this.moveLeft(); + return this.moveLeft(); } } - checkCollisionWithApples(apples) { - let firstBodyPart = this.bodyParts[0]; - - apples.forEach((apple, index) => { - if (firstBodyPart.x < apple.x + apple.radius * 2 && - firstBodyPart.x + firstBodyPart.width > apple.x && - firstBodyPart.y < apple.y + apple.radius * 2 && - firstBodyPart.height + firstBodyPart.y > apple.y) { - - apples.splice(index, 1); - this.addScore(); - - this.addBodyPart(); - - } - }); - } - remove() { this.bodyParts.forEach((bodyPart) => { bodyPart.remove(); diff --git a/client/js/snakePart.js b/client/js/snakePart.js index 99eb7c4..47dfec0 100644 --- a/client/js/snakePart.js +++ b/client/js/snakePart.js @@ -24,11 +24,13 @@ export default class SnakePart { } remove() { - this.context.beginPath(); - this.context.rect(this.x, this.y, this.width, this.height); - this.context.fillStyle = constant.BACKGROUND_COLOR; - this.context.fill(); - this.context.closePath(); + if (this.context) { + this.context.beginPath(); + this.context.rect(this.x, this.y, this.width, this.height); + this.context.fillStyle = constant.BACKGROUND_COLOR; + this.context.fill(); + this.context.closePath(); + } } } \ No newline at end of file diff --git a/server/index.js b/server/index.js index b2134af..f535b00 100644 --- a/server/index.js +++ b/server/index.js @@ -10,6 +10,7 @@ import * as constant from '../client/js/constant'; import Board from '../client/js/board.js'; import Snake from '../client/js/snake.js'; import Scoreboard from '../client/js/scoreboard.js'; +import identifier from 'identifier'; var b = new Board(); let inProgressGame = false; @@ -44,9 +45,12 @@ io.on('connection', function(socket) { socket.on('snakeNew', name => { + var id = identifier(constant.ID_SIZE); + console.log(id); + let long = Math.floor(Math.random() * (constant.CANVAS_WIDTH/constant.GRID_SIZE)) * constant.GRID_SIZE; let lat = Math.floor(Math.random() * (constant.CANVAS_HEIGHT/constant.GRID_SIZE)) * constant.GRID_SIZE; - let snake = b.newSnake(long, lat, name); + let snake = b.newSnake(long, lat, name, id); console.log("snake : " + snake.name); io.emit('new_snake', snake); @@ -54,21 +58,33 @@ io.on('connection', function(socket) { io.emit('joinGame', b.apples); } }); - + socket.on('changeDirection', (data) => { io.emit('setDirection', data); }); if(!inProgressGame){ - inProgressGame = true; - setInterval(function() { + + setInterval(function() { + b.checkSnakeSelfCollision(); + b.checkCollisionWithApples(); + b.snakes.forEach(snake => { + if(!snake.dead) { + snake.move(); + } + }); + if(b.apples.length < constant.DEFAULT_APPLES_NUMBER){ + let apple = b.generateApple(); + io.emit('new_apple', apple); + } + io.emit('sendPositions', b.snakes, b.apples); + }, constant.DELAY); + + setInterval(function() { + inProgressGame = true; + io.emit('start', 'Démarrage de la partie'); console.log('Démarrage de la partie'); - - while(b.apples.length < constant.DEFAULT_APPLES_NUMBER){ - let apple = b.generateApple(); - io.emit('new_apple', apple); - } setTimeout(function() { inProgressGame = false; @@ -84,4 +100,4 @@ io.on('connection', function(socket) { http.listen(3000, () => { console.log('listening on *:3000'); -}); +}); \ No newline at end of file