Question

我正在尝试制作一个具有简单物理原理的游戏，在其中您可以使用node.js，socket.io和express跳转并查看其他玩家。但是，我试图使游戏循环运行，但无法将其绘制到浏览器中。如果您可以帮助我使用这种格式，或者可以为我的项目建议其他更有效的格式，请这样做。我看不到以下代码有什么问题，谢谢！另外，我对node.js和socket.io还是比较陌生，所以请保持谦虚。谢谢！

game.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();
}

server.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);

也有人说

还要确保在.listen而不是server上呼叫app

Answer 2

这是一个小错误，现已修复。经过大量调试后，我终于修复了它，我做了很多编辑，所以我不打算解释它们，而是向您展示有效的代码，并根据需要进行解密。（发送矩形会导致看不见的问题，并且更新不应保持原状）

唤醒server.js：

const hostname = 'IPADRESS';
var canvsize = {
    width : 1080,
    height : 720
}
var ind;
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 = [];
const express = require('express');
const app = express();
const server = app.listen(80);
app.use(express.static('public'));
app.set('port', process.env.HOST || hostname);
const socket = require('socket.io');
const io = socket(server);
console.log("Server working @ " + hostname);
io.sockets.on('connect',newConnection);
function newConnection(socket){
    Players.push({
        ID:socket.id,
        frame:0,
        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: " + JSON.stringify(Players));
    socket.on('disconnect',disConnect);
    function disConnect(){
        for(var i = 0; i<Players.length; i++){
          if(Players[i].ID == socket.id){
            Players.splice(i,1);
            break;
          }
        }
        console.log(socket.id + " Has Disconnected \nPlayers: " + Players[socket.id].x);
    } 
    socket.on("update",update);
    function update(data){
          for(var i = 0; i<Players.length; i++){
            if(Players[i].ID == data.ID){
              ind = i;
              break;
            }
          }
          if (data.Ctl.up && Players[ind].jumping == false) {

            Players[ind].y_velocity -= jumpForce;
            Players[ind].jumping = true;

          }

          if (data.Ctl.left) {

            Players[ind].x_velocity -= spd;

          }

          if (data.Ctl.right) {

            Players[ind].x_velocity += spd;

          }
          Players[ind].y_velocity += grav;// gravity
          Players[ind].x += Players[ind].x_velocity;
          Players[ind].y += Players[ind].y_velocity;
          Players[ind].x_velocity *= friction;// friction
          Players[ind].y_velocity *= friction;// friction

          // if Players[ind].Rectangle is falling below floor line
          if (Players[ind].y > canvsize.height - flooroffset - Players[ind].height) {

            Players[ind].jumping = false;
            Players[ind].y = canvsize.height - flooroffset - Players[ind].height;
            Players[ind].y_velocity = 0;

          }

          // if Players[ind].Rectangle is going off the left of the screen
          if (Players[ind].x < -Players[ind].width) {

            Players[ind].x = canvsize.width;

          } else if (Players[ind].x > canvsize.width) {// if Players[ind].Rectangle goes past right boundary

            Players[ind].x = -Players[ind].width;
          }
    }
}
setInterval(SEND,FPS);
function SEND(){
    io.sockets.emit('UPDATE', Players);
}

正在运行Game.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;

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 87: // or w 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, ID:socket.id})
}
socket.on("UPDATE",draw)
function draw(data){
  context.clearRect(0,0,canvsize.width,canvsize.height);  
  context.fillStyle = "#202020";
  context.fillRect(0, 0, canvsize.width, canvsize.height);// x, y, width, height
  context.fillStyle = "#ff0000";
  for(var i = 0; i<data.length; i++){
    context.fillRect(data[i].x, data[i].y, data[i].width, data[i].height);
  }
  context.strokeStyle = "#202830";
  context.lineWidth = 4;
  context.beginPath();
  context.moveTo(0, canvsize.height-flooroffset);
  context.lineTo(canvsize.width, canvsize.height-flooroffset);
  context.stroke();
}

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

2 个答案: