p5.js 和 node.js 同步小斑点的 x 和 y 位置

Question

我目前正在为我的学校项目制作一个类似 agar.io 的程序，使用 p5.js 和 node.js 进行网络连接。但是，我在为多人游戏模式将所有小斑点设置在一个位置时遇到问题，因为我编写了在本地 javascript(circle.js) 上设置小斑点的程序。我试图将本地 javascript 的功能转移到 server.js(node.js) 但是当我调用它时，它只会挂断。这是目录的截图。

这里是server.js

的代码

var express = require('express');
var app = express();
var server = app.listen(3000);

app.use(express.static('public'));

console.log("Running");

var socket = require('socket.io');

var io = socket(server);

io.sockets.on('connection', newConnection);

function newConnection(socket){
 console.log('new connection' + socket.id);


}

function asd(){
 fill(255);
    ellipse(200, 200, 100 * 2, 100 * 2);
}

这是index.html

的代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>agar.io</title>
  <script src="libraries/p5.js" type="text/javascript"></script>
  <script src="libraries/p5.dom.js" type="text/javascript"></script>
  <script src="libraries/p5.sound.js" type="text/javascript"></script>
  <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

  <script src="sketch.js" type="text/javascript"></script>
  <script src="circle.js" type="text/javascript"></script>
  <script src="C:/Users/hp/Desktop/p5.js/Project/agario/server.js" type="text/javascript"></script>

  <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
</head>
<body>
</body>
</html>

这里是Circle.js

的代码

function Circle(positionX, positionY, radius) {
  this.position = createVector(positionX, positionY);
  this.radius = radius;
  this.velocity = createVector(0, 0);

  this.show = function() {
    fill(255);
    ellipse(this.position.x, this.position.y, this.radius * 2, this.radius * 2);
  }

  this.update = function() {
    var newVelocity;
    velocity = createVector(mouseX - width / 2, mouseY - height / 2);
    newVelocity = createVector(mouseX - width / 2, mouseY - height / 2);
    newVelocity.setMag(3);
    this.velocity.lerp(newVelocity, 0.2);
    this.position.add(this.velocity);
    
  }

  this.eat = function(other) {
    var distance = p5.Vector.dist(this.position, other.position);
    if (distance < this.radius + other.radius) {
      var area = Math.PI * Math.pow(this.radius, 2) + Math.PI * Math.pow(other.radius, 2);
      this.radius = Math.sqrt(area / Math.PI);
      return true;
    } else {
      return false;
    }
  }

}

这里是sketch.js

的代码

var circle;
var circles = [];
var zoom = 1;
var newZoom;
var socket;

function setup() {
 socket = io.connect('http://localhost:3000');
  createCanvas(1366, 666);
  circle = new Circle(0, 0, 64);
  for (var x = 0; x < 410; x++) {
    circles[x] = new Circle(random(-width, width * 4), random(-height, height * 4), 20);
  }
}

function draw() {
  background(60);
  translate(width / 2, height / 2);
  newZoom = (64 / circle.radius*1.5);
  zoom = lerp(zoom, newZoom, 0.1);
  scale(zoom);
  translate(-circle.position.x, -circle.position.y);

  for (var x = circles.length - 1; x >= 0; x--) {
    if (circle.eat(circles[x])) {
      circles.splice(x, 1);
    }
  }

  circle.show();
  circle.update();


  for (var x = 0; x < circles.length; x++) {
    circles[x].show();
  }
  asd();
}

如您所见，我尝试在 node.js 上调用一个函数，只是为了尝试从 server.js 获取信息是否有效，以获得类似的小斑点计数和位置，我的问题是如何制作一个服务器，为小斑点提供 x 和 y 位置？

Answer 1

    socket.on('mouse',
      function(data) {
        // Data comes in as whatever was sent, including objects
        console.log("Received: 'mouse' " + data.x + " " + data.y);

        // Send it to all other clients
        socket.broadcast.emit('mouse', data);

        // This is a way to send to everyone including sender
        // io.sockets.emit('message', "this goes to everyone");

      }
    );

p5.js 和 node.js 同步小斑点的 x 和 y 位置

p5.js and node.js sync the position of x and y for little blobs

node.js

p5.js