title: Simple Game Loop Socket.io + Node.js + Express
body: <p>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!</p>
  
  <p>game.js</p>
  
  <pre><code>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&lt;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();
  }
  </code></pre>
  
  <p>server.js</p>
  
  <pre><code>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 &amp;&amp; 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 &gt; 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 &lt; -player.Rectangle.width) {
  
              player.Rectangle.x = canvsize.width;
  
            } else if (player.Rectangle.x &gt; 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);
  }
  </code></pre>