Skip to content
Snippets Groups Projects
Commit 5db9daed authored by Paul-louis Gomis's avatar Paul-louis Gomis
Browse files

start implement server

parent 21a8936a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
client/public/index.html
+ 1
− 0
View file @ 5db9daed
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Karantina&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Karantina&display=swap" rel="stylesheet">
<script src="./build/index.bundle.js" defer></script>
</head> </head>
<body> <body>
<section class="home"> <section class="home">
......
client/src/Player.js
+ 2
− 1
View file @ 5db9daed
class Player { class Player {
image = new Image(); image = new Image();
constructor(x, y, radius, imageFolder) { constructor(x, y, radius, imageFolder, id) {
this.id = id;
this.x = x; this.x = x;
this.y = y; this.y = y;
this.radius = radius; this.radius = radius;
......
client/src/main.js
+ 87
− 51
View file @ 5db9daed
import Player from "./Player.js"; import Player from "./Player.js";
import { Sushi } from "./Ressources.js"; import { Sushi } from "./Ressources.js";
import { io } from "socket.io-client";
const Main = (playerName, playerCharacter) => { const Main = (playerName, playerCharacter) => {
const canvas = document.querySelector(".map"); const canvas = document.querySelector(".map");
...@@ -9,6 +10,10 @@ const Main = (playerName, playerCharacter) => { ...@@ -9,6 +10,10 @@ const Main = (playerName, playerCharacter) => {
canvas.height = document.documentElement.clientHeight; canvas.height = document.documentElement.clientHeight;
ctx.width = 6000; ctx.width = 6000;
ctx.height = 3340; ctx.height = 3340;
const xStart = canvas.width / 2;
const xEnd = ctx.width - canvas.width / 2;
const yStart = canvas.height / 2;
const yEnd = ctx.height - canvas.height / 2;
window.addEventListener("resize", (e) => { window.addEventListener("resize", (e) => {
e.preventDefault(); e.preventDefault();
...@@ -16,15 +21,9 @@ const Main = (playerName, playerCharacter) => { ...@@ -16,15 +21,9 @@ const Main = (playerName, playerCharacter) => {
canvas.height = document.documentElement.clientHeight; canvas.height = document.documentElement.clientHeight;
}); });
const image = new Image();
image.src = "/images/goku.png";
const backgroundImage = new Image(); const backgroundImage = new Image();
backgroundImage.src = "/images/map.jpg"; backgroundImage.src = "/images/map.jpg";
let folder = playerCharacter;
const player = new Player(canvas.width / 2, canvas.height / 2, 20, folder);
document.addEventListener("keydown", (event) => { document.addEventListener("keydown", (event) => {
event.preventDefault(); event.preventDefault();
// Mettre à jour la direction en fonction des touches enfoncées // Mettre à jour la direction en fonction des touches enfoncées
...@@ -71,57 +70,94 @@ const Main = (playerName, playerCharacter) => { ...@@ -71,57 +70,94 @@ const Main = (playerName, playerCharacter) => {
} }
}); });
let sushis = []; const socket = io();
for (let i = 0; i < 1500; i++) {
const xStart = canvas.width / 2;
const xEnd = ctx.width - canvas.width / 2;
const yStart = canvas.height / 2;
const yEnd = ctx.height - canvas.height / 2;
const x = Math.random() * (xEnd - xStart) + xStart;
const y = Math.random() * (-yStart + yEnd) + yStart;
console.log(x, y);
const sushi = new Sushi(x, y, 5);
sushis.push(sushi);
}
let mouseX;
let mouseY;
canvas.addEventListener("mousemove", (event) => { let sushis = [];
event.preventDefault(); socket.on("sushis", (data) => {
mouseX = event.clientX; for (let i = 0; i < data?.length; i++) {
mouseY = event.clientY; const sushi = new Sushi(
data[i].x * (xEnd - xStart) + xStart,
player.moveTo(mouseX, mouseY, canvas); data[i].y * (-yStart + yEnd) + yStart,
5
);
sushis.push(sushi);
}
}); });
function update() { let folder = playerCharacter;
ctx.save(); let userId;
ctx.clearRect(0, 0, ctx.width, ctx.height);
ctx.beginPath(); function getUserId() {
return new Promise((resolve, reject) => {
// Déplacer le joueur en fonction de la direction socket.on("user", (data) => {
const cameraX = canvas.width / 2 - player.x; userId = data;
const cameraY = canvas.height / 2 - player.y; resolve(userId);
ctx.translate(cameraX, cameraY); });
// Déplacer le contexte pour centrer la caméra ssur le joueur
// Dessiner le joueur et les autres éléments du jeu
ctx.drawImage(backgroundImage, 0, 0, ctx.width, ctx.height);
sushis.forEach((sushi) => {
sushi.draw(ctx);
}); });
}
//player.move(ctx); async function myFunction() {
player.eatSushi(sushis); try {
player.draw(ctx); const userId = await getUserId();
player.move(ctx, mouseX, mouseY); const player = new Player(
ctx.restore(); Math.random() * (xEnd - xStart) + xStart,
// Déplacer le contexte pour centrer la caméra sur le joueur Math.random() * (-yStart + yEnd) + yStart,
//ctx.translate(-cameraX, -cameraY); 20,
requestAnimationFrame(update); folder,
userId
);
socket.emit("newUser", player);
let allUsers = [];
socket.on("allUsers", (datas) => {
allUsers = datas;
});
let mouseX;
let mouseY;
canvas.addEventListener("mousemove", (event) => {
event.preventDefault();
mouseX = event.clientX;
mouseY = event.clientY;
player.moveTo(mouseX, mouseY, canvas);
});
function update() {
ctx.save();
ctx.clearRect(0, 0, ctx.width, ctx.height);
ctx.beginPath();
const cameraX = canvas.width / 2 - player.x;
const cameraY = canvas.height / 2 - player.y;
ctx.translate(cameraX, cameraY);
ctx.drawImage(backgroundImage, 0, 0, ctx.width, ctx.height);
sushis.forEach((sushi) => {
sushi.draw(ctx);
});
allUsers.forEach((user) => {
const otherPlayer = new Player(
user.x,
user.y,
user.radius,
user.imageFolder,
user.id
);
otherPlayer.draw(ctx);
});
player.eatSushi(sushis);
player.move(ctx, mouseX, mouseY);
ctx.restore();
socket.emit("updateUser", player);
requestAnimationFrame(update);
}
update();
} catch (error) {
console.error(error);
}
} }
update(); myFunction();
}; };
export default Main; export default Main;
package.json
+ 4
− 1
View file @ 5db9daed
...@@ -20,7 +20,9 @@ ...@@ -20,7 +20,9 @@
"@babel/preset-env": "^7.20.2", "@babel/preset-env": "^7.20.2",
"@types/node": "^18.15.11", "@types/node": "^18.15.11",
"babel-loader": "^9.1.2", "babel-loader": "^9.1.2",
"nodemon": "^2.0.22",
"prettier": "^2.8.3", "prettier": "^2.8.3",
"ts-node": "^10.9.1",
"webpack": "^5.75.0", "webpack": "^5.75.0",
"webpack-cli": "^5.0.1", "webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1" "webpack-dev-server": "^4.11.1"
...@@ -29,6 +31,7 @@ ...@@ -29,6 +31,7 @@
"dotenv": "^16.0.3", "dotenv": "^16.0.3",
"express": "^4.18.2", "express": "^4.18.2",
"fs": "^0.0.1-security", "fs": "^0.0.1-security",
"nodemon": "^2.0.22" "socket.io": "^4.6.1",
"socket.io-client": "^4.6.1"
} }
} }
server/index.js
+ 27
− 1
View file @ 5db9daed
...@@ -2,11 +2,37 @@ import express from "express"; ...@@ -2,11 +2,37 @@ import express from "express";
import http from "http"; import http from "http";
const app = express(); const app = express();
const httpServer = http.createServer(app); const httpServer = http.createServer(app);
import { Server as IOServer } from "socket.io";
app.use("/", express.static("client/public")); app.use("/", express.static("client/public"));
let users = [];
let sushis = [];
for (let i = 0; i < 1500; i++) {
sushis.push({ x: Math.random(), y: Math.random() });
}
const io = new IOServer(httpServer);
io.on("connection", (socket) => {
io.emit("user", socket.id);
io.emit("sushis", sushis);
socket.on("newUser", (data) => {
users.push(data);
socket.emit("allUsers", users);
});
socket.on("updateUser", (data) => {
for (let i = 0; i < users.length; i++) {
if (users[i].id === data.id) {
users[i] = data;
}
}
socket.emit("allUsers", users);
});
});
const port = 8000; const port = 8000;
console.log(port);
httpServer.listen(port, () => { httpServer.listen(port, () => {
console.log(`Think http://localhost:${port}, Think !/`); console.log(`Think http://localhost:${port}, Think !/`);
}); });
webpack.config.js
+ 6
− 3
View file @ 5db9daed
...@@ -2,11 +2,14 @@ import path from "path"; ...@@ -2,11 +2,14 @@ import path from "path";
export default { export default {
// Fichier d'entrée : // Fichier d'entrée :
entry: "./client/src/index.js", entry: {
index: "./client/src/index.js",
main: "./client/src/main.js",
},
// Fichier de sortie : // Fichier de sortie :
output: { output: {
path: path.resolve(process.cwd(), "./client/public/build"), path: path.resolve(process.cwd(), "./client/public/build"),
filename: "main.bundle.js", filename: "[name].bundle.js",
publicPath: "/build/", publicPath: "/build/",
}, },
// compatibilité anciens navigateurs (si besoin du support de IE11 ou android 4.4) // compatibilité anciens navigateurs (si besoin du support de IE11 ou android 4.4)
...@@ -15,7 +18,7 @@ export default { ...@@ -15,7 +18,7 @@ export default {
module: { module: {
rules: [ rules: [
{ {
test: /\.js$/, // tous les fichiers js ... test: /.js$/, // tous les fichiers js ...
exclude: /node_modules/, // ... sauf le dossier node_modules ... exclude: /node_modules/, // ... sauf le dossier node_modules ...
use: { use: {
// ... seront compilés par babel ! // ... seront compilés par babel !
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment