Créez votre propre FPS en WebGL avec socket.io
Yamishibai
Bonjour, je suis sur le cours pour créer un jeu FPS sur WebGL j'essaie de me servir de socket.io mais pour le moment j'ai cette érreur : socket.io.js:3511 GET http://localhost/socket.io/?EIO=3&transport=polling&t=NGIlqnj 404 (Not Found)
voici mes codes concernés
l'index :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>JUST SQUARES</title>
<meta name="description" content="This game is an Webgl FPS multiplayer game realised for learn Babylonjs!" />
<!-- SCRIPTS DE BASE -->
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
<script type="text/javascript" src="./node_modules/socket.io-client/socket.io.js"></script>
<script>
var socket = io('http://localhost');
socket.on('connect', function(){});
socket.on('event', function(data){});
socket.on('disconnect', function(){});
</script>
<link rel="stylesheet" type="text/css" href="css/mainStyle.css"/>
</head>
<body>
<div id="topHud">
<div id="eventConnection"></div>
<div id="leaderBoard">
<h2>Leaderboard</h2>
<ul>
<li><p><span class="nameLeaderboard" id="player0"></span><span class="scoreLeaderboard" id="scorePlayer0"></span></p></li>
<li><p><span class="nameLeaderboard" id="player1"></span><span class="scoreLeaderboard" id="scorePlayer1"></span></p></li>
<li><p><span class="nameLeaderboard" id="player2"></span><span class="scoreLeaderboard" id="scorePlayer2"></span></p></li>
<li><p><span class="nameLeaderboard" id="player3"></span><span class="scoreLeaderboard" id="scorePlayer3"></span></p></li>
<li><p><span class="nameLeaderboard" id="player4"></span><span class="scoreLeaderboard" id="scorePlayer4"></span></p></li>
</ul>
<p id="identityGame">You are <span id="gameName"></span>. Kill them all!<p>
</div>
</div>
<div id="bottomHud">
<div id="statusPlayer">
<div id="lifeBox">
<img src="assets/icons/health.svg">
<p><span id="textHealth">0</span> / 100</p>
</div>
<div id="armorBox">
<img src="assets/icons/armor.svg">
<p><span id="textArmor">0</span> / 100</p>
</div>
</div>
<div id="statusAmmo">
<p id="typeWeapon"></p>
<div id="ammoBox">
<img src="assets/icons/ammos.svg">
<p><span id="numberAmmos"></span> / <span id="totalAmmos"></span></p>
</div>
</div>
</div>
<div id="announcementKill" class="annoucementClose">
<div id="interiorDiv">
<p id="textAnouncement"></p>
</div>
</div>
<div id="crossHair"><img src="assets/icons/target.svg" /></div>
<canvas id="renderCanvas"></canvas>
</body>
<script src="js/Game.js"></script>
<script src="js/Player.js"></script>
<script src="js/Arena.js"></script>
<script src="js/Weapons.js"></script>
<script src="js/Armory.js"></script>
<script src="js/GhostPlayer.js"></script>
<script src="js/NetworkManager.js"></script>
</html>et le NetworkManager.js :
// ================================================
// DECLARATION SOCKET
var socket = io();
// ================================================
// ================================================
// MAIN
var game;
var myRoom = [];
var personalRoomId = false;
var myConfig = {};
var isPlayerAlreadySet = false;
socket.on('newPlayer',function(dataNewPlayer){
var room = dataNewPlayer[0];
var score = dataNewPlayer[1];
var props = dataNewPlayer[2];
if(!isPlayerAlreadySet){
for(var i=0;i<room.length;i++){
if(room[i].id == socket.id){
myConfig = room[i];
personalRoomId = room[i].id;
game = new Game('renderCanvas',myConfig,props);
isPlayerAlreadySet = true;
document.getElementById('gameName').innerText = room[i].name;
}
}
}
// game.displayScore(score);
// // Vérifie les joueurs qui se connectent
checkIfNewGhost(room);
});
// Vérifie les joueurs qui se déconnectent
socket.on('disconnectPlayer', function(room){
checkIfGhostDisconnect(room);
});
// ================================================
// ================================================
// EXTRA FUNCTIONS
var sortRoom = function(room){ // sort the players in room by id
return room.sort(function(a, b) {
var nameA = a.id.toUpperCase(); // ignore upper and lowercase
var nameB = b.id.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
});
}
var checkIfNewGhost = function(room){ // check if there is a new ghost in room
for(var i=0;i<room.length;i++){
if(room[i].id != personalRoomId){
var ghostAlreadyExist = false;
for(var j=0;j<myRoom.length;j++){
if(room[i].id == myRoom[j].id){
ghostAlreadyExist = true;
break;
}
}
if(!ghostAlreadyExist){ // if ghost not exist yet in myRoom
createGhost(room[i],room[i].id);
}
}
}
}
var checkIfGhostDisconnect = function(room){ // check if it miss a ghost in room
for(var i=0;i<myRoom.length;i++){
var ghostExist = false;
for(var j=0;j<room.length;j++){
if(myRoom[i].id == room[j].id){
ghostExist = true;
break;
}
}
if(!ghostExist){ // if ghost not exist yet in myRoom
deleteGhost(myRoom[i].id,i);
}
}
}
var createGhost = function(ghost,id){ // create a new ghost
myRoom.push(ghost);
newGhostPlayer = GhostPlayer(game,ghost,id);
game._PlayerData.ghostPlayers.push(newGhostPlayer);
}
var updateGhost = function(data){ // update all the ghosts with room data
socket.emit('updateData',[data,personalRoomId]);
}
var deleteGhost = function(index,position){ // delete the ghost by the index
deleteGameGhost(game,index);
myRoom.splice(position,1);
// ICI fonction pour détruire le ghost du jeu
}
var sendGhostRocket = function(position, rotation, direction){
socket.emit('newRocket',[position, rotation, direction, personalRoomId]);
}
var sendGhostLaser = function(position1, position2){
socket.emit('newLaser',[position1, position2, personalRoomId]);
}
var sendDamages = function(damage,target){ // update all the ghosts with room data
socket.emit('distributeDamage',[damage, target, personalRoomId]);
}
var sendPostMortem = function(whoKilledMe){ // update all the ghosts with room data
if(!whoKilledMe){
var whoKilledMe = personalRoomId;
}
socket.emit('killPlayer',[personalRoomId,whoKilledMe]);
}
var ressurectMe = function(position){ // update all the ghosts with room data
var dataToSend = [game._PlayerData.sendActualData(),personalRoomId];
dataToSend[0].ghostCreationNeeded = true;
socket.emit('updateData',dataToSend);
}
var destroyPropsToServer = function(idServer,type){ // update all the ghosts with room data
socket.emit('updatePropsRemove',[idServer,type]);
}
// ================================================
socket.on('requestPosition', function(room){
var dataToSend = [game._PlayerData.sendActualData(),personalRoomId];
socket.emit('updateData',dataToSend);
});
socket.on ('updatePlayer', function (arrayData) {
if(arrayData.id != personalRoomId){
if(arrayData.ghostCreationNeeded){
var newGhostPlayer = GhostPlayer(game,arrayData,arrayData.id);
game._PlayerData.ghostPlayers.push(newGhostPlayer);
}else{
game._PlayerData.updateLocalGhost(arrayData);
}
}
});
socket.on ('createGhostRocket', function (arrayData) {
if(arrayData[3] != personalRoomId){
game.createGhostRocket(arrayData);
}
});
socket.on ('createGhostLaser', function (arrayData) {
if(arrayData[2] != personalRoomId){
game.createGhostLaser(arrayData);
}
});
socket.on ('giveDamage', function (arrayData) {
if(arrayData[1] == personalRoomId){
game._PlayerData.getDamage(arrayData[0],arrayData[2]);
}
});
socket.on ('killGhostPlayer', function (arrayData) {
var idArray = arrayData[0];
var roomScore = arrayData[1];
if(idArray[0] != personalRoomId){
deleteGameGhost(game,idArray[0]);
}
if(idArray[1] == personalRoomId){
//game._PlayerData.newDeadEnnemy(idArray[2]);
}
//game.displayScore(roomScore);
});
socket.on ('ressurectGhostPlayer', function (idPlayer) {
if(idPlayer != personalRoomId){
deleteGameGhost(game,idPlayer);
}
});
// socket.on ('deleteProps', function (deleteProp) {
// game._ArenaData.deletePropFromServer(deleteProp)
// });
// socket.on ('recreateProps', function (createdProp) {
// game._ArenaData.recreatePropFromServer(createdProp)
// });est ce que par hasard vous pouvez me donnez une piste à suivre merci de votre attention