Simple Game Loop Socket.io + Node.js + Express

I was trying to make a game with simple physics in which you can jump around and see other player's using node.js, socket.io and express. However and I was trying to get the game loop running and I couldn't get it to draw it to the browser. If you can help me use this format or if you could suggest other more efficient formats for my project please do so.I don't see what's wrong with the following code thanks! Also I am fairly new with node.js and socket.io so please be gentle. Thanks!

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);
}

Upvotes: 1

Answers (2)

Daemonique

Reputation: 648

Was a small mistake, Now fixed. After lots of debugging I finally fixed it, I made quite a few edits so I am not going to explain them but rather show you the working code and let you decipher it if you so choose. (sending the rectangle caused unseen problems and the update should not be as it was)

Woking 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);
}

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

Upvotes: 0

menya

Reputation: 1525

Your server's code is incorrect to listen on port 80. I found this code in 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);

It is also said

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

Upvotes: 1

Simple Game Loop Socket.io + Node.js + Express

Answers (2)

Related Questions