Brocken

//server.js
var path = require("path");
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

class Player {
  constructor(x, y, skin) {
    self.x = x;
    self.y = y;
    self.skin = skin;
  }
}

app.use(express.static('html'))
app.get('/', function(req, res){
  res.sendFile(path.resolve(__dirname + '/html/index.html'));
});

io.on('connection', function(socket){
  socket.on('pos', (player) => {
    io.emit('pos', player);
    console.log('Received player data with values : ' + player.x + ' for x ' + player.y + ' for y '+ player.skin + 'as a skin')
  });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Oh</title>
    <link rel="shortcut icon" href="#" />

    <script src="socket.io-1.2.0.js"></script>
    <script src="jquery.js"></script>
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="gameContainer">
        <h1 id="text-over">Hello, and welcome to <br>Oh !</h1>
        <canvas id="gameCanvas" width="800" height="500"></canvas>
    </div>
</body>
</html>

//main.js
const socket = io.connect('//localhost:3000');

class sun {
  constructor(suncolor) {
    self.suncolor = suncolor;
  }

  draw(ctx) {
    ctx.fillStyle = self.suncolor;
    ctx.beginPath();
    ctx.arc(20, 0, 200, 0 * Math.PI, 1.5 * Math.PI);
    ctx.fill();
  };
}

var fps = 60;
var gameDiv;
var gameCanvas;
var canvasCtx;

var defaSun = new sun("#ffff55")

var shadow_height = 10;
var shadow_width = 20;
var playerwidth = 20;
var playerheight = 20;
var player = {
  name: "player1",
  x: 0,
  y : 0,
  show: true,
  ori: "down",
  skin: "def"
}

window.onload = function() {
    gameDiv = document.getElementById("gameContainer");
    gameCanvas = document.getElementById("gameCanvas");
    canvasCtx = gameCanvas.getContext("2d");

    player.x = gameCanvas.width/2 - 10;
    player.y = gameCanvas.height/2 - 10;

    setupGameArea();
}

function setupGameArea() {
    canvasCtx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);

    start();
}

function update() {
    canvasCtx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);

    if (player.show) {

        if (player.x > gameCanvas.width-player.width) {
            player.x = gameCanvas.width-player.width;
        }

        if (player.x < 0) {
            player.x = 0;
        }

        if (player.y > gameCanvas.height - player.height) {
            player.y = gameCanvas.height - player.height;
        }

        if (player.y < 0) {
            player.y = 0;
        }
        /*if (player.show = true) {
          canvasCtx.fillStyle = "#7c5c5c"
          canvasCtx.fillRect(player.x, player.y, playerwidth, playerheight);

          canvasCtx.fillStyle = "grey";
          canvasCtx.fillRect(player.x, player.y + 20, shadow_width, shadow_height);
        }*/
        socket.emit('pos', player);

        socket.on('pos', (pos) => {
          if (player.show = true) {
            canvasCtx.fillStyle = "#7c5c5c";
            canvasCtx.fillRect(player.x, player.y, playerwidth, playerheight);

            canvasCtx.fillStyle = "grey";
            canvasCtx.fillRect(player.x, player.y + playerheight, shadow_width, shadow_height);
          }
        })

        defaSun.draw(canvasCtx);
    }
}

function keyEvent(evt) {
    switch(evt.key) {

        case "w":
            player.y -= 10;
            player.ori ="up"
            break;

        case "s":
            player.y += 10;
            player.ori = "down"
            break;

        case "a":
            player.x -= 10;
            player.ori = "left"
            break;

        case "d":
            player.x += 10;
            player.ori = "right"
            break;
    }
}

function start() {
    document.addEventListener("keypress", keyEvent);

    window.setInterval(update, 1000/fps);
}

//style.css
#text-over {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 50px;
}
#gameCanvas {
    background-color: rgb(187, 241, 155);
}