multiplayer-ping-pong/index.html at master · msujaws/multiplayer-ping-pong · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .topPlayer {
        -moz-transform: rotate(180deg);
      }
      .leftPlayer {
        -moz-transform: rotate(270deg);
      }
      .rightPlayer {
        -moz-transform: rotate(90deg);
      }
    </style>
  </head>
  <body>
    <canvas id="court"></canvas>

    <script src="/socket.io/socket.io.js"></script>
    <script>

  var constants = { court: { width: 0, height: 0, adjusted: false },
                    colors: { court: "brown", ball: "black", paddle: "orange" },
                    paddle: { width: 0, height: 0, delta: 0 },
                    ball: { radius: 0 },
                    player: { id: 0 }
                  };

  var state = { paddles: {},
                ball: { left: 0, top: 0 },
                sides: {}
              };

  var socket = io.connect('http://localhost'),
      canvas = document.getElementById("court"),
      ctx = canvas.getContext('2d');

  socket.on('environment', function(data) {
    constants.court.width = data.court.width;
    constants.court.height = data.court.height;
    constants.paddle.delta = data.paddle.delta;
    constants.paddle.width  = data.paddle.width;
    constants.paddle.height  = data.paddle.height;
    constants.ball.radius = data.ball.radius;
    constants.player.id = data.player.id;
  });

  socket.on('paddles', function(data) {
    var paddles = data.positions;
    // Overwrite the server's version of my own paddle position
    // if I already know where I am so I don't redraw in the old spot.
    if (state.paddles[constants.player.id])
      paddles[constants.player.id] = state.paddles[constants.player.id];
    state.paddles = paddles;
    state.sides = data.sides;
    if (!constants.court.adjusted) {
        constants.court.adjusted = true;
        if (state.sides.top == constants.player.id)
            canvas.className = 'topPlayer';
        else if (state.sides.left == constants.player.id)
            canvas.className = 'leftPlayer';
        else if (state.sides.right == constants.player.id)
            canvas.className = 'rightPlayer';
    }
  });

  socket.on('ball', function (data) {
    state.ball.left = data.position.left;
    state.ball.top = data.position.top;
    drawCanvas();
  });

  var drawCanvas = function() {
    canvas.width = constants.court.width;
    canvas.height = constants.court.height;
    ctx.fillStyle = constants.colors.court;
    ctx.fillRect(0, 0, constants.court.width, constants.court.height);
    ctx.fillStyle = constants.colors.paddle;
    ctx.fillRect((state.paddles[state.sides.bottom] / 100 * constants.court.width) - (constants.paddle.width / 2),
                 constants.court.height - constants.paddle.height, constants.paddle.width, constants.paddle.height);
    ctx.fillRect((state.paddles[state.sides.top] / 100 * constants.court.width) - (constants.paddle.width / 2),
                 0, constants.paddle.width, constants.paddle.height);
    ctx.fillRect(0, (state.paddles[state.sides.left] / 100 * constants.court.height) - (constants.paddle.height / 2),
                 constants.paddle.height, constants.paddle.width);
    ctx.fillRect(constants.court.width - constants.paddle.height,
                 (state.paddles[state.sides.right] / 100 * constants.court.height) - (constants.paddle.height / 2),
                 constants.paddle.height, constants.paddle.width);
    ctx.fillStyle = constants.colors.ball;
    ctx.beginPath();
    ctx.arc( state.ball.left, state.ball.top, constants.ball.radius, 0, Math.PI * 2 );
    ctx.fill();
  };

  var movePaddle = function (delta) {
    var newLeft = state.paddles[constants.player.id] + delta;
    if (newLeft >= 100)
      newLeft = 100;
    else if (newLeft <= 0)
      newLeft = 0;
    if (newLeft != state.paddles[constants.player.id]) {
      state.paddles[constants.player.id] = newLeft;
      socket.emit('paddle', {left: state.paddles[constants.player.id] });
      drawCanvas();
    }
  };

  window.addEventListener('keydown', function onKeyDown(aEvent) {
    switch (aEvent.which) {
      case 37: // Left
        if (state.sides.top == constants.player.id || state.sides.right == constants.player.id) movePaddle(constants.paddle.delta);
        else movePaddle(-constants.paddle.delta);
        break;
      case 39: // Right
        if (state.sides.top == constants.player.id || state.sides.right == constants.player.id) movePaddle(-constants.paddle.delta);
        else movePaddle(constants.paddle.delta);
        break;
    }
  }, false);

    </script>
  </body>
</html>