Xpheres Labyrinthe<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n }\r\n .game-container {\r\n display: flex;\r\n justify-content: center;\r\n flex-direction: column;\r\n align-items: center;\r\n margin-top: 20px;\r\n }\r\n .maze {\r\n display: grid;\r\n grid-template-columns: repeat(15, 40px); \/* Taille du labyrinthe 15x15 *\/\r\n grid-template-rows: repeat(15, 40px);\r\n gap: 2px;\r\n margin-bottom: 20px;\r\n position: relative;\r\n }\r\n .cell {\r\n width: 40px;\r\n height: 40px;\r\n background-color: #f0f0f0;\r\n border: 1px solid #ccc;\r\n }\r\n .wall {\r\n background-color: black;\r\n }\r\n .xphere {\r\n background-color: red;\r\n border-radius: 50%;\r\n width: 30px;\r\n height: 30px;\r\n position: absolute;\r\n }\r\n .start, .end {\r\n background-color: green;\r\n }\r\n .center {\r\n background-color: yellow;\r\n }\r\n .player-input {\r\n margin: 5px;\r\n }\r\n #leaderboard {\r\n margin-top: 20px;\r\n }\r\n #replay-button {\r\n display: none;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"game-container\">\r\n <h1>Xpheres Labyrinthe<\/h1>\r\n <div id=\"player-setup\">\r\n <div class=\"player-input\">\r\n Joueur 1: <input type=\"text\" id=\"player1-name\" placeholder=\"Nom du joueur 1\"> <button onclick=\"setReady(1)\">Ready<\/button>\r\n <\/div>\r\n <div class=\"player-input\">\r\n Joueur 2: <input type=\"text\" id=\"player2-name\" placeholder=\"Nom du joueur 2\"> <button onclick=\"setReady(2)\">Ready<\/button>\r\n <\/div>\r\n <div class=\"player-input\">\r\n Joueur 3: <input type=\"text\" id=\"player3-name\" placeholder=\"Nom du joueur 3\"> <button onclick=\"setReady(3)\">Ready<\/button>\r\n <\/div>\r\n <div class=\"player-input\">\r\n Joueur 4: <input type=\"text\" id=\"player4-name\" placeholder=\"Nom du joueur 4\"> <button onclick=\"setReady(4)\">Ready<\/button>\r\n <\/div>\r\n <button id=\"start-button\" onclick=\"startGame()\" disabled>Start<\/button>\r\n <\/div>\r\n \r\n <div id=\"maze\" class=\"maze\">\r\n \r\n <\/div>\r\n\r\n <h2 id=\"winner-message\"><\/h2>\r\n <button id=\"replay-button\" onclick=\"replayGame()\">Replay<\/button>\r\n\r\n <div id=\"leaderboard\">\r\n <h3>Classement des 10 meilleurs joueurs<\/h3>\r\n <ul id=\"leaderboard-list\"><\/ul>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n let players = [];\r\n let readyPlayers = 0;\r\n let gameStarted = false;\r\n let mazeSize = 15;\r\n let leaderboard = [];\r\n let xpheres = []; \/\/ Pour stocker les informations de position des joueurs\r\n let mazeArray = []; \/\/ Pour stocker la structure du labyrinthe\r\n let cellSize = 40; \/\/ Taille des cellules en pixels\r\n\r\n function setReady(playerNumber) {\r\n const playerName = document.getElementById(`player${playerNumber}-name`).value;\r\n if (playerName) {\r\n players[playerNumber - 1] = { name: playerName, score: 0, ready: true };\r\n readyPlayers++;\r\n if (readyPlayers >= 2) {\r\n document.getElementById('start-button').disabled = false;\r\n }\r\n }\r\n }\r\n\r\n function startGame() {\r\n if (readyPlayers >= 2 && !gameStarted) {\r\n gameStarted = true;\r\n document.getElementById('player-setup').style.display = 'none';\r\n initializeMaze();\r\n initializePlayers();\r\n window.addEventListener('keydown', handleKeyboardMovement);\r\n setupTouchControls();\r\n }\r\n }\r\n\r\n function initializeMaze() {\r\n const mazeElement = document.getElementById('maze');\r\n mazeElement.innerHTML = '';\r\n mazeArray = []; \/\/ R\u00e9initialiser le labyrinthe\r\n\r\n \/\/ G\u00e9n\u00e9rer le labyrinthe\r\n for (let row = 0; row < mazeSize; row++) {\r\n mazeArray[row] = [];\r\n for (let col = 0; col < mazeSize; col++) {\r\n const cell = document.createElement('div');\r\n cell.classList.add('cell');\r\n\r\n \/\/ Placer les murs de fa\u00e7on al\u00e9atoire\r\n if (Math.random() > 0.7) {\r\n cell.classList.add('wall');\r\n mazeArray[row][col] = 'wall';\r\n } else {\r\n mazeArray[row][col] = 'empty';\r\n }\r\n\r\n \/\/ Ajouter les coins de d\u00e9part pour les joueurs\r\n if ((row === 0 && col === 0) || (row === 0 && col === mazeSize - 1) || \r\n (row === mazeSize - 1 && col === 0) || (row === mazeSize - 1 && col === mazeSize - 1)) {\r\n cell.classList.add('start');\r\n mazeArray[row][col] = 'start';\r\n }\r\n\r\n \/\/ Placer la case centrale (arriv\u00e9e)\r\n if (row === Math.floor(mazeSize \/ 2) && col === Math.floor(mazeSize \/ 2)) {\r\n cell.classList.add('center');\r\n mazeArray[row][col] = 'center';\r\n }\r\n\r\n mazeElement.appendChild(cell);\r\n }\r\n }\r\n }\r\n\r\n function initializePlayers() {\r\n const mazeElement = document.getElementById('maze');\r\n const playerPositions = [\r\n { row: 0, col: 0 },\r\n { row: 0, col: mazeSize - 1 },\r\n { row: mazeSize - 1, col: 0 },\r\n { row: mazeSize - 1, col: mazeSize - 1 }\r\n ];\r\n\r\n players.forEach((player, index) => {\r\n if (player) {\r\n const xphere = document.createElement('div');\r\n xphere.classList.add('xphere');\r\n xphere.style.left = `${playerPositions[index].col * cellSize}px`;\r\n xphere.style.top = `${playerPositions[index].row * cellSize}px`;\r\n mazeElement.appendChild(xphere);\r\n\r\n \/\/ Stocker la position initiale du joueur\r\n xpheres[index] = {\r\n element: xphere,\r\n row: playerPositions[index].row,\r\n col: playerPositions[index].col\r\n };\r\n }\r\n });\r\n }\r\n\r\n function handleKeyboardMovement(event) {\r\n const key = event.key;\r\n players.forEach((player, index) => {\r\n if (player && xpheres[index]) {\r\n let newRow = xpheres[index].row;\r\n let newCol = xpheres[index].col;\r\n\r\n switch (key) {\r\n case 'ArrowUp':\r\n newRow -= 1;\r\n break;\r\n case 'ArrowDown':\r\n newRow += 1;\r\n break;\r\n case 'ArrowLeft':\r\n newCol -= 1;\r\n break;\r\n case 'ArrowRight':\r\n newCol += 1;\r\n break;\r\n }\r\n\r\n movePlayer(index, newRow, newCol);\r\n }\r\n });\r\n }\r\n\r\n function movePlayer(playerIndex, newRow, newCol) {\r\n \/\/ V\u00e9rifier les limites et les murs\r\n if (newRow >= 0 && newRow < mazeSize && newCol >= 0 && newCol < mazeSize) {\r\n if (mazeArray[newRow][newCol] !== 'wall') {\r\n \/\/ D\u00e9placer le joueur\r\n xpheres[playerIndex].row = newRow;\r\n xpheres[playerIndex].col = newCol;\r\n xpheres[playerIndex].element.style.top = `${newRow * cellSize}px`;\r\n xpheres[playerIndex].element.style.left = `${newCol * cellSize}px`;\r\n\r\n \/\/ V\u00e9rifier si le joueur est arriv\u00e9 au centre\r\n if (mazeArray[newRow][newCol] === 'center') {\r\n endGame(playerIndex);\r\n }\r\n }\r\n }\r\n }\r\n\r\n function replayGame() {\r\n gameStarted = false;\r\n readyPlayers = 0;\r\n players = [];\r\n document.getElementById('player-setup').style.display = 'block';\r\n document.getElementById('start-button').disabled = true;\r\n document.getElementById('replay-button').style.display = 'none';\r\n document.getElementById('winner-message').innerText = '';\r\n window.removeEventListener('keydown', handleKeyboardMovement);\r\n }\r\n\r\n \/\/ Fonction pour mettre \u00e0 jour le leaderboard\r\n function updateLeaderboard() {\r\n leaderboard.sort((a, b) => b.score\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Xpheres Labyrinthe Xpheres Labyrinthe Joueur 1: Ready Joueur 2: Ready Joueur 3: Ready Joueur 4: Ready Start Replay Classement des 10 meilleurs joueurs let players = []; let readyPlayers = 0; let gameStarted = false; let mazeSize = 15; let leaderboard = []; let xpheres = []; \/\/ Pour stocker les informations de position des […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/pages\/2"}],"collection":[{"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":84,"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":341,"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/341"}],"wp:attachment":[{"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Xpheres Labyrinthe<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n }\r\n .game-container {\r\n display: flex;\r\n justify-content: center;\r\n flex-direction: column;\r\n align-items: center;\r\n margin-top: 20px;\r\n }\r\n .maze {\r\n display: grid;\r\n grid-template-columns: repeat(15, 40px); \/* Taille du labyrinthe 15x15 *\/\r\n grid-template-rows: repeat(15, 40px);\r\n gap: 2px;\r\n margin-bottom: 20px;\r\n position: relative;\r\n }\r\n .cell {\r\n width: 40px;\r\n height: 40px;\r\n background-color: #f0f0f0;\r\n border: 1px solid #ccc;\r\n }\r\n .wall {\r\n background-color: black;\r\n }\r\n .xphere {\r\n background-color: red;\r\n border-radius: 50%;\r\n width: 30px;\r\n height: 30px;\r\n position: absolute;\r\n }\r\n .start, .end {\r\n background-color: green;\r\n }\r\n .center {\r\n background-color: yellow;\r\n }\r\n .player-input {\r\n margin: 5px;\r\n }\r\n #leaderboard {\r\n margin-top: 20px;\r\n }\r\n #replay-button {\r\n display: none;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"game-container\">\r\n <h1>Xpheres Labyrinthe<\/h1>\r\n <div id=\"player-setup\">\r\n <div class=\"player-input\">\r\n Joueur 1: <input type=\"text\" id=\"player1-name\" placeholder=\"Nom du joueur 1\"> <button onclick=\"setReady(1)\">Ready<\/button>\r\n <\/div>\r\n <div class=\"player-input\">\r\n Joueur 2: <input type=\"text\" id=\"player2-name\" placeholder=\"Nom du joueur 2\"> <button onclick=\"setReady(2)\">Ready<\/button>\r\n <\/div>\r\n <div class=\"player-input\">\r\n Joueur 3: <input type=\"text\" id=\"player3-name\" placeholder=\"Nom du joueur 3\"> <button onclick=\"setReady(3)\">Ready<\/button>\r\n <\/div>\r\n <div class=\"player-input\">\r\n Joueur 4: <input type=\"text\" id=\"player4-name\" placeholder=\"Nom du joueur 4\"> <button onclick=\"setReady(4)\">Ready<\/button>\r\n <\/div>\r\n <button id=\"start-button\" onclick=\"startGame()\" disabled>Start<\/button>\r\n <\/div>\r\n \r\n <div id=\"maze\" class=\"maze\">\r\n \r\n <\/div>\r\n\r\n <h2 id=\"winner-message\"><\/h2>\r\n <button id=\"replay-button\" onclick=\"replayGame()\">Replay<\/button>\r\n\r\n <div id=\"leaderboard\">\r\n <h3>Classement des 10 meilleurs joueurs<\/h3>\r\n <ul id=\"leaderboard-list\"><\/ul>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n let players = [];\r\n let readyPlayers = 0;\r\n let gameStarted = false;\r\n let mazeSize = 15;\r\n let leaderboard = [];\r\n let xpheres = []; \/\/ Pour stocker les informations de position des joueurs\r\n let mazeArray = []; \/\/ Pour stocker la structure du labyrinthe\r\n let cellSize = 40; \/\/ Taille des cellules en pixels\r\n\r\n function setReady(playerNumber) {\r\n const playerName = document.getElementById(`player${playerNumber}-name`).value;\r\n if (playerName) {\r\n players[playerNumber - 1] = { name: playerName, score: 0, ready: true };\r\n readyPlayers++;\r\n if (readyPlayers >= 2) {\r\n document.getElementById('start-button').disabled = false;\r\n }\r\n }\r\n }\r\n\r\n function startGame() {\r\n if (readyPlayers >= 2 && !gameStarted) {\r\n gameStarted = true;\r\n document.getElementById('player-setup').style.display = 'none';\r\n initializeMaze();\r\n initializePlayers();\r\n window.addEventListener('keydown', handleKeyboardMovement);\r\n setupTouchControls();\r\n }\r\n }\r\n\r\n function initializeMaze() {\r\n const mazeElement = document.getElementById('maze');\r\n mazeElement.innerHTML = '';\r\n mazeArray = []; \/\/ R\u00e9initialiser le labyrinthe\r\n\r\n \/\/ G\u00e9n\u00e9rer le labyrinthe\r\n for (let row = 0; row < mazeSize; row++) {\r\n mazeArray[row] = [];\r\n for (let col = 0; col < mazeSize; col++) {\r\n const cell = document.createElement('div');\r\n cell.classList.add('cell');\r\n\r\n \/\/ Placer les murs de fa\u00e7on al\u00e9atoire\r\n if (Math.random() > 0.7) {\r\n cell.classList.add('wall');\r\n mazeArray[row][col] = 'wall';\r\n } else {\r\n mazeArray[row][col] = 'empty';\r\n }\r\n\r\n \/\/ Ajouter les coins de d\u00e9part pour les joueurs\r\n if ((row === 0 && col === 0) || (row === 0 && col === mazeSize - 1) || \r\n (row === mazeSize - 1 && col === 0) || (row === mazeSize - 1 && col === mazeSize - 1)) {\r\n cell.classList.add('start');\r\n mazeArray[row][col] = 'start';\r\n }\r\n\r\n \/\/ Placer la case centrale (arriv\u00e9e)\r\n if (row === Math.floor(mazeSize \/ 2) && col === Math.floor(mazeSize \/ 2)) {\r\n cell.classList.add('center');\r\n mazeArray[row][col] = 'center';\r\n }\r\n\r\n mazeElement.appendChild(cell);\r\n }\r\n }\r\n }\r\n\r\n function initializePlayers() {\r\n const mazeElement = document.getElementById('maze');\r\n const playerPositions = [\r\n { row: 0, col: 0 },\r\n { row: 0, col: mazeSize - 1 },\r\n { row: mazeSize - 1, col: 0 },\r\n { row: mazeSize - 1, col: mazeSize - 1 }\r\n ];\r\n\r\n players.forEach((player, index) => {\r\n if (player) {\r\n const xphere = document.createElement('div');\r\n xphere.classList.add('xphere');\r\n xphere.style.left = `${playerPositions[index].col * cellSize}px`;\r\n xphere.style.top = `${playerPositions[index].row * cellSize}px`;\r\n mazeElement.appendChild(xphere);\r\n\r\n \/\/ Stocker la position initiale du joueur\r\n xpheres[index] = {\r\n element: xphere,\r\n row: playerPositions[index].row,\r\n col: playerPositions[index].col\r\n };\r\n }\r\n });\r\n }\r\n\r\n function handleKeyboardMovement(event) {\r\n const key = event.key;\r\n players.forEach((player, index) => {\r\n if (player && xpheres[index]) {\r\n let newRow = xpheres[index].row;\r\n let newCol = xpheres[index].col;\r\n\r\n switch (key) {\r\n case 'ArrowUp':\r\n newRow -= 1;\r\n break;\r\n case 'ArrowDown':\r\n newRow += 1;\r\n break;\r\n case 'ArrowLeft':\r\n newCol -= 1;\r\n break;\r\n case 'ArrowRight':\r\n newCol += 1;\r\n break;\r\n }\r\n\r\n movePlayer(index, newRow, newCol);\r\n }\r\n });\r\n }\r\n\r\n function movePlayer(playerIndex, newRow, newCol) {\r\n \/\/ V\u00e9rifier les limites et les murs\r\n if (newRow >= 0 && newRow < mazeSize && newCol >= 0 && newCol < mazeSize) {\r\n if (mazeArray[newRow][newCol] !== 'wall') {\r\n \/\/ D\u00e9placer le joueur\r\n xpheres[playerIndex].row = newRow;\r\n xpheres[playerIndex].col = newCol;\r\n xpheres[playerIndex].element.style.top = `${newRow * cellSize}px`;\r\n xpheres[playerIndex].element.style.left = `${newCol * cellSize}px`;\r\n\r\n \/\/ V\u00e9rifier si le joueur est arriv\u00e9 au centre\r\n if (mazeArray[newRow][newCol] === 'center') {\r\n endGame(playerIndex);\r\n }\r\n }\r\n }\r\n }\r\n\r\n function replayGame() {\r\n gameStarted = false;\r\n readyPlayers = 0;\r\n players = [];\r\n document.getElementById('player-setup').style.display = 'block';\r\n document.getElementById('start-button').disabled = true;\r\n document.getElementById('replay-button').style.display = 'none';\r\n document.getElementById('winner-message').innerText = '';\r\n window.removeEventListener('keydown', handleKeyboardMovement);\r\n }\r\n\r\n \/\/ Fonction pour mettre \u00e0 jour le leaderboard\r\n function updateLeaderboard() {\r\n leaderboard.sort((a, b) => b.score\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Xpheres Labyrinthe Xpheres Labyrinthe Joueur 1: Ready Joueur 2: Ready Joueur 3: Ready Joueur 4: Ready Start Replay Classement des 10 meilleurs joueurs let players = []; let readyPlayers = 0; let gameStarted = false; let mazeSize = 15; let leaderboard = []; let xpheres = []; \/\/ Pour stocker les informations de position des […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/pages\/2"}],"collection":[{"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":84,"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":341,"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/341"}],"wp:attachment":[{"href":"https:\/\/www.ggunity.com\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}