j'essaye de coder un jeu multi-joueurs sur navigateur avec socketIo. Je ne suis pas très expérimenté et mon projet est peu être trop ambitieux, néanmoins si vous pourriez m'aider à solutionner mon problème, ce serait sympa.
là y'a tout le code mais vous pouvez direct passer en dessous pour voir le problème (sinon c'est un peu long).
côté serveur il y a ce code :
var http=require("http");
var express = require('express');
var app =express();
var server=http.createServer(app);
var io =require('socket.io'). listen(server);
var nbJoueurCo=0;
app.get('/', function (req, res) {
res.sendfile(__dirname + '/onGamePage.html');
});
app.use(express.static(__dirname+"/css"));
io.sockets.on('connection', function(socket, pseudo){
if (nbJoueurCo==0){
socket.on('nouveau_joueur',function(){
socket.emit('initLocal',{spawnPosX: 100,spawnPosY: 100});
nbJoueurCo++;
});
} else if(nbJoueurCo==1){
socket.on('nouveau_joueur',function(){
socket.emit('initLocal',{spawnPosX: 900,spawnPosY: 900});
socket.emit('joueur2Co',{spawnPosX: 100,spawnPosY: 100});
socket.broadcast.emit('joueur2Co',{spawnPosX: 900,spawnPosY: 900});
nbJoueurCo++;
});
} else {
socket.disconnect(true);
}
socket.on('actuPos',function(data){
socket.broadcast.emit('actuPosJ2',data);
});
socket.on('disconnect',function(){
nbJoueurCo = nbJoueurCo-1;
});
});
server.listen(8080);
et côté client :
<!DOCTYPE html>
<html>
<head>
<title>projetTM</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="onGamePage.css"/>
<script src="/socket.io/socket.io.js"></script>
<script text="javascript">
var socket = io.connect('http://localhost:8080');
var ctx;
var i=0;
var Wdown;
var Adown;
var Sdown;
var Ddown;
var mousePosX;
var mousePosY;
var tpDispo=true; // cd TP
var speedBoostOn=false; //boost actif ou non
var speedBoostDispo=true; //cd boost
var previewTP = false; //tp preview
var joueur1;
var joueur2;
pseudoJoueur=prompt("indique pseudo");
socket.emit('nouveau_joueur',pseudoJoueur);
socket.on('initLocal',function(data){ //init J1
joueur1=new joueur(pseudoJoueur,data.spawnPosX,data.spawnPosY);
});
socket.on('joueur2Co',function(data){
joueur2=new joueur('joueur2',data.spawnPosX,data.spawnPosY);
});
socket.on('actuPosJ2',function(data){
joueur2.posX = data.posX;
joueur2.posY = data.posY;
joueur2.topCanonX = data.posCanonX;
joueur2.topCanonY = data.posCanonY;
});
function joueur(pseudo,spawnPosX,spawnPosY) { //joueur constructeur
this.pseudo = pseudo;
this.posX=spawnPosX;
this.posY=spawnPosY;
this.health = 1000;
this.vitX=0;
this.vitY=0;
this.topCanonX=0;
this.topCanonY=0;
}
function initialiserCanvas() { //initialisation du canvas+lancer inteval qui dessine
canvas=document.getElementById("leCanvas");
ctx= document.getElementById("leCanvas").getContext("2d");
drawInteval = setInterval(canvasDraw,30);
}
//mouvement joueur sur canvas
document.onkeydown = function (e) {
switch(e.keyCode) {
case 87:
Wdown=true;
break;
case 83:
Sdown = true;
break;
case 65:
Adown = true;
break;
case 68:
Ddown = true;
break;
case 81:
previewTP = true;
break;
case 70: //compétense boostspeed (F)
if(speedBoostDispo){
speedBoostOn=true;
setTimeout(function(){speedBoostOn=false;},1500);
speedBoostDispo=false;
setTimeout(function(){speedBoostDispo=true;},3000);
}
break;
}
};
document.onkeyup = function (e) {
switch(e.keyCode) {
case 87: //mouvement TOP (W)
Wdown=false;
break;
case 83: //mouvement DOWN (S)
Sdown=false;
break;
case 65: //mouvement gauche (A)
Adown=false;
break;
case 68: //mouvement droite (D)
Ddown=false;
break;
case 81: //compétence tp(Q)
if(tpDispo){
teleportation();
tpDispo=false;
setTimeout(function(){tpDispo=true;},3000);
}
previewTP = false;
break;
case 70: //compétense boostspeed (F)
speedBoostOn=false;
break;
}
};
function calculPos() { /*calcul position joueur1 (local)*/
joueur1.vitX=0;
joueur1.vitY=0;
if(Wdown) {
joueur1.vitY=-10;
}
if(Sdown) {
joueur1.vitY=10;
}
if(Adown) {
joueur1.vitX=-10;
}
if(Ddown) {
joueur1.vitX=10;
}
if(Ddown && Wdown || Ddown&&Sdown || Adown&&Wdown || Adown && Sdown) { //les conditions suivant sont la pour équilibré la vitesse si il y a un mouvement en diagonale.
joueur1.vitX = joueur1.vitX/Math.sqrt(2);
joueur1.vitY = joueur1.vitY/Math.sqrt(2);
}
if(speedBoostOn) { //compétence speedBoost
joueur1.vitX=joueur1.vitX*2;
joueur1.vitY=joueur1.vitY*2;
}
joueur1.posX=joueur1.posX+joueur1.vitX;
joueur1.posY=joueur1.posY+joueur1.vitY;
joueur1.posX=Math.min(joueur1.posX,1000-25); //pour eviter que le joueur sorte du canvas.
joueur1.posY=Math.min(joueur1.posY,1000-25);
joueur1.posX=Math.max(joueur1.posX,25);
joueur1.posY=Math.max(joueur1.posY,25);
var angle=Math.atan(Math.abs(mousePosY-joueur1.posY)/(Math.abs(mousePosX-joueur1.posX)));
if((mousePosX-joueur1.posX)>0){
if((mousePosY-joueur1.posY)>0){
joueur1.topCanonX=joueur1.posX+(Math.cos(angle)*50);
joueur1.topCanonY=joueur1.posY+(Math.sin(angle)*50);
} else {
joueur1.topCanonX=joueur1.posX+(Math.sin(angle+Math.PI/2)*50);
joueur1.topCanonY=joueur1.posY+(Math.cos(angle+Math.PI/2)*50);
}
} else {
if((mousePosY-joueur1.posY)>0){
joueur1.topCanonX=joueur1.posX+(Math.sin(angle-Math.PI/2)*50);
joueur1.topCanonY=joueur1.posY+(Math.cos(angle-Math.PI/2)*50);
} else {
joueur1.topCanonX=joueur1.posX+(Math.cos(angle+Math.PI)*50);
joueur1.topCanonY=joueur1.posY+(Math.sin(angle+Math.PI)*50);
}
}
socket.emit('actuPos',{posX:joueur1.posX,posY:joueur1.posY,posCanonX:joueur1.topCanonX,posCanonY:joueur1.topCanonY});
}
function teleportation() { //compétence telportation
joueur1.posX=mousePosX;
joueur1.posY=mousePosY;
}
function mouseMove(k,g) { //on récupère la position de la souris. + quelque bidouille pour que ça coresponde au coordonnées sur le canvas
mousePosX=k;
mousePosY=g;
x1=document.getElementById("leCanvas").offsetLeft;
k=document.getElementById("leCanvas").clientWidth;
y1=document.getElementById("leCanvas").offsetTop ;
mousePosX=Math.max(((mousePosX-x1)*1000/k), 0);
mousePosY=Math.max(((mousePosY-y1+document.body.scrollTop)*1000/k),0);
mousePosX=Math.min(mousePosX, 1000);
mousePosY=Math.min(mousePosY,1000);
}
//dessiner sur le canvas
function canvasDraw(){ //dessin sur le canvas
calculPos(); //function qui calcule les positions des joueurs.
ctx.beginPath(); //dessiner disque joueur1
ctx.lineWidth=1;
ctx.globalAlpha=1;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle="black";
ctx.strokeStyle="black";
ctx.arc(joueur1.posX,joueur1.posY,25,0,2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.closePath();
if(speedBoostOn) {
ctx.beginPath();
ctx.lineWidth=5;
ctx.strokeStyle="yellow";
ctx.arc(joueur1.posX,joueur1.posY,28,0,2*Math.PI);
ctx.stroke();
}
ctx.beginPath(); //dessiner canon joueur1
ctx.lineWidth=20;
ctx.globalAlpha=1;
ctx.strokeStyle="black";
ctx.moveTo(joueur1.posX,joueur1.posY);
ctx.lineTo(joueur1.topCanonX,joueur1.topCanonY);
ctx.fill();
ctx.stroke();
ctx.closePath();
if(previewTP) {
if(tpDispo) {
ctx.beginPath();
ctx.lineWidth=1;
ctx.fillStyle='black';
ctx.globalAlpha=0.5;
ctx.arc(mousePosX,mousePosY,25,0,2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.closePath();
}
}
ctx.beginPath(); //dessiner disque joueur2
ctx.lineWidth=1;
ctx.globalAlpha=1;
ctx.fillStyle="black";
ctx.strokeStyle="black";
ctx.arc(joueur2.posX,joueur2.posY,25,0,2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.beginPath(); //dessiner canon joueur2
ctx.lineWidth=20;
ctx.globalAlpha=1;
ctx.strokeStyle="black";
ctx.moveTo(joueur2.posX,joueur2.posY);
ctx.lineTo(joueur2.topCanonX,joueur2.topCanonY);
ctx.fill();
ctx.stroke();
ctx.closePath();
}
</script>
</head>
<body onload="initialiserCanvas()" onmousemove="mouseMove(event.clientX,event.clientY)">
<header>
<p>Un jeu pour mon TM</p>
</header>
<div class="canvasBox">
<canvas class="canvas" id="leCanvas" width='1000' height='1000'></canvas>
</div>
<footer>
</footer>
</body>
</html>
En gros ce code dessine des petit rond dans un canvas que l'on peu déplacer avec les touche du clavier. Le problème c'est que mon code qui devrait actualiser la position de l'autre joueur connecté ne fonctionne pas, il s'agit, côté serveur, des lignes 36 à 40 soit :
lorsque j'exécute le code sans ces instructions, tout fonctionne. Mais avec ces instructions, le second client connecté indique que joueur1 et joueur2 ne sont pas des objets. sur la page du premier client, le code fonctionne, le second client apparait à spawnPosX,Y lorqu'un autre client se connecte.
voilà, je sais pas si vous pouvez m'aider.
merci d'avance pour votre temps.
[Node.Js] problème que je ne sais pas titrer.
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
