В настоящее время я создаю программу agar.io для своего школьного проекта с использованием p5.js и node.js для работы в сети. Однако у меня возникла проблема с настройкой всех маленьких капель в одном месте для многопользовательского режима, потому что я написал программу установки маленьких капель на локальном javascript (circle.js). Я попытался передать функции локального javascript на server.js (node.js), но когда я его назову, он только зависает. Это скриншот каталога. 
p5.js и node.js синхронизировать положение x и y для небольших blobs
Вот код 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){
\t console.log('new connection' + socket.id);
}
function asd(){
\t 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() {
\t 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 до hav e похожего количества и положения маленьких капель, мой вопрос в том, как я могу сделать сервер, который дает x и y позицию для маленьких капель?
Что вы имеете в виду, когда вы говорите, что вы перевели логику на сервер? Я не вижу никакой логики в коде сервера. –
@kevinWorkman Я уже знаю, как сообщить node.js и p5.js с помощью socket.io.emit и многих других, спасибо. – Rich
Вы утверждаете, что решили эту проблему? –