javascript - 简单的游戏循环 Socket.io + Node.js + Express

Question

我试图制作一个具有简单物理原理的游戏，在其中你可以跳来跳去并看到其他玩家使用node.js、socket.io 和express。然而，我试图让游戏循环运行，但无法将其绘制到浏览器上。如果您可以帮助我使用这种格式，或者您可以为我的项目建议其他更有效的格式，请这样做。我不明白以下代码有什么问题，谢谢!另外，我对 node.js 和 socket.io 还很陌生，所以请保持温柔。谢谢!

游戏.js

var socket = io.connect('http://IPADRESS/');
var context, controller, rectangle, loop;
context = document.querySelector("canvas").getContext("2d");
canvsize = {
  height:720,
  width:1080
}
var fps = 60;
var FPS = 1000/fps;
var flooroffset = 64;
context.canvas.height = canvsize.height;
context.canvas.width = canvsize.width;
rectangle = {
  height:64,
  jumping:true,
  width:64,
  x:canvsize.width/2, // center of the canvas
  x_velocity:0,
  y:0,
  y_velocity:0
};

controller = {

  left:false,
  right:false,
  up:false,
  keyListener:function(event) {

    var key_state = (event.type == "keydown")?true:false;

    switch(event.keyCode) {

      case 37:// left key
        controller.left = key_state;
      break;
      case 65: //or key a
        controller.left = key_state;
      break;
      case 38:// space key
        controller.up = key_state;
      break;
      case 32: // or up key
       controller.up = key_state;
      break; 
      case 39:// right key
        controller.right = key_state;
      break;
      case 68:
        controller.right = key_state;
      break; // d key

    }

  }

};
window.addEventListener("keydown", controller.keyListener)
window.addEventListener("keyup", controller.keyListener);

setInterval(SendUpdate,FPS);
function SendUpdate(){
  socket.emit("update",{Ctl: controller,Rectangle: rectangle, ID:socket.id})
}
socket.on("UPDATE",draw)
function draw(data){  
  context.fillStyle = "#202020";
  context.fillRect(0, 0, canvsize.width, canvsize.height);// x, y, width, height
  context.fillStyle = "#ff0000";
  context.beginPath();
  for(var i = 0; i<data.length; i++){
    if (data[i].ID = socket.id){
      rectangle = data;
    }
    context.rect(data[i].x, data[i].y, rectangle.width, rectangle.height);
  }
  context.fill();
  context.strokeStyle = "#202830";
  context.lineWidth = 4;
  context.beginPath();
  context.moveTo(0, canvsize.height-flooroffset);
  context.lineTo(canvsize.width, canvsize.height-flooroffset);
  context.stroke();
}

服务器.js

const hostname = 'IPADRESS';
var canvsize = {
    width : 1080,
    height : 720
}
var fps = 60;
var FPS = 1000/fps;
var flooroffset = 64;
var spd = 2;
var jumpForce = 50;
var grav = 1.5;
var friction = 0.9;
var Players = [];
var express = require('express');
var app = express();
var server = app.listen(80);
app.use(express.static('public'));
app.set('port', process.env.HOST || hostname);
var socket = require('socket.io');
var io = socket(server);
console.log("Server working @ " + hostname);
io.sockets.on('connect',newConnection);
function newConnection(socket){
    Players[socket.id] = {
        height:64,
        jumping:true,
        width:64,
        x:canvsize.width/2, // center of the canvas
        x_velocity:0,
        y:0,
        y_velocity:0
    }
    console.log("New Connection @ " + socket.id + "\nPlayers: " + Players[socket.id].x);
    socket.on('disconnect',disConnect);
    function disConnect(){
        Players.splice(socket.id,1);
        console.log(socket.id + " Has Disconnected \nPlayers: " + Players[socket.id].x);
    } 
    socket.on("update",update);
    function update(data){
        var player = data;
        if (player.Ctl.up && player.Rectangle.jumping == false) {

            player.Rectangle.y_velocity -= jumpForce;
            player.Rectangle.jumping = true;

          }

          if (player.Ctl.left) {

            player.Rectangle.x_velocity -= spd;

          }

          if (player.Ctl.right) {

            player.Rectangle.x_velocity += spd;

          }

          player.Rectangle.y_velocity += grav;// gravity
          player.Rectangle.x += player.Rectangle.x_velocity;
          player.Rectangle.y += player.Rectangle.y_velocity;
          player.Rectangle.x_velocity *= friction;// friction
          player.Rectangle.y_velocity *= friction;// friction

          // if player.Rectangle is falling below floor line
          if (player.Rectangle.y > canvsize.height - flooroffset - player.Rectangle.height) {

            player.Rectangle.jumping = false;
            player.Rectangle.y = canvsize.height - flooroffset - player.Rectangle.height;
            player.Rectangle.y_velocity = 0;

          }

          // if player.Rectangle is going off the left of the screen
          if (player.Rectangle.x < -player.Rectangle.width) {

            player.Rectangle.x = canvsize.width;

          } else if (player.Rectangle.x > canvsize.width) {// if player.Rectangle goes past right boundary

            player.Rectangle.x = -player.Rectangle.width;
          }
        Players[data.ID] = {rectangle:player.Rectangle, ID:data.id};
    }
}
setInterval(SEND,FPS);
function SEND(){
    io.sockets.emit('UPDATE', Players);
}

Answer 1

您的服务器代码不正确，无法监听端口 80。 我在 socket.io's doc 中找到了这段代码:

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
io.on('connection', () => { /* … */ });
server.listen(3000);

也有说法

Also make sure to call .listen on the server, not the app