diff --git a/apps/client/src/app.tsx b/apps/client/src/app.tsx index fe6b9d5..ef5d4ef 100644 --- a/apps/client/src/app.tsx +++ b/apps/client/src/app.tsx @@ -77,7 +77,7 @@ // ジョイスティックを動かしたとき const handleMove = (event: any) => { - if (socketRef.current) { + if (socketRef.current && typeof event.x === "number" && typeof event.y === "number") { socketRef.current.emit("move", { x: event.x, y: event.y }); } }; @@ -108,8 +108,9 @@ key={player.id} style={{ position: "absolute", - left: `${player.x}px`, - top: `${player.y}px`, + left: 0, + top: 0, + transform: `translate(${player.x}px, ${player.y}px)`, width: "20px", height: "20px", background: player.color || "red", // サーバーが決めた色 @@ -117,10 +118,11 @@ // 自分だけ枠線を黄色にする border: player.id === myId ? "2px solid yellow" : "none", zIndex: player.id === myId ? 10 : 1, // 自分を一番手前に - marginLeft: "-25px", // 中心に配置 - marginTop: "-25px", + marginLeft: "-10px", // 中心に配置 + marginTop: "-10px", - transition: "transform 0.05s linear" // 動きを滑らかにする + transition: "transform 0.1s linear", + willChange: "transform" // 動きを滑らかにする }} /> ))} diff --git a/apps/server/src/managers/GameManager.ts b/apps/server/src/managers/GameManager.ts index 4f62ec2..4827b7b 100644 --- a/apps/server/src/managers/GameManager.ts +++ b/apps/server/src/managers/GameManager.ts @@ -12,6 +12,8 @@ // プレイヤー追加 addPlayer(id: string): Player { const player = new Player(id); + player.x = 150; // 初期位置 + player.y = 150; this.players.set(id, player); return player; } @@ -20,16 +22,36 @@ removePlayer(id: string) { this.players.delete(id); } - + // プレイヤー情報を取得 + getPlayer(id: string) { + return this.players.get(id); + } // プレイヤー移動 movePlayer(id: string, x: number, y: number) { const player = this.players.get(id); if (player) { - const spped = 3 // 移動速度 - player.x += x * spped; - player.y += y * spped; - console.log(`ID:${id.slice(0, 4)} 📍 (${Math.floor(player.x)}, ${Math.floor(player.y)})`); + // ▼▼▼ デバッグ用ログ(何が送られてきてるか犯人探し) ▼▼▼ + // これでターミナルに "Move: x=null" とか出たら通信の問題です + console.log(`Move Request -> ID:${id.slice(0,4)} x:${x} y:${y}`); + + + if (typeof x !== "number" || typeof y !== "number" || isNaN(x) || isNaN(y)) { + console.log("⚠️ 無効なデータなので無視しました"); + return; + } + + + const speed = 10.0; // スピード + + player.x += x * speed; + player.y -= y * speed; + + // 画面端の制限 + if (player.x < 0) player.x = 0; + if (player.x > 300) player.x = 300; + if (player.y < 0) player.y = 0; + if (player.y > 300) player.y = 300; } } diff --git a/apps/server/src/network/SocketManager.ts b/apps/server/src/network/SocketManager.ts index 0811091..6536984 100644 --- a/apps/server/src/network/SocketManager.ts +++ b/apps/server/src/network/SocketManager.ts @@ -33,7 +33,14 @@ // 全員に位置情報を配信 // (人数が増えたらここを最適化しますが、まずはこれでOK) - this.io.emit("update_player", { id: socket.id, x: data.x, y: data.y }); + const updatedPlayer = this.gameManager.getPlayer(socket.id); + if (updatedPlayer) { + this.io.emit("update_player", { + id: socket.id, + x: updatedPlayer.x, + y: updatedPlayer.y + }); + } }); // 切断した時