Ge0rg3 · February 16, 2020 19:45
diff --git a/snake.html b/snake.html
 <head>

  <title>Snake</title>

 </head>

 <div id="container">

  <canvas id="board" width="500" height="500"></canvas>

 </div>

 <script type="text/javascript">

 //Canvas and canvas context declarations
 var canvas = document.getElementById('board');
 var ctx = canvas.getContext('2d');
 //Main websocket for connection
 var ws = new WebSocket("ws://159.65.83.230:8765");

 //Default game data
 var gameBoard = new Array(50).fill(new Array(50).fill(0));
 var player = {};
 var userColours = {};

 //First process opened once websock connection established
 ws.onopen = function (evt) {
  ws.send('get_id');
 }

 //Interpret all data received from websock
 ws.onmessage = function(evt) {
  //Parse JSON (all data should be a JSON key/data pair)
  try {
    var received = JSON.parse(evt.data);
  } catch (ex) {
    console.error("Could not parse the following data:\n"+evt.data)
    return;
  }
  //The type of data sent, i.e. get_id or game_board
  var dataType = Object.keys(received);
  //The data itself
  var data = received[dataType];

  if (dataType == 'player_id') {
    player['id'] = data;
    ws.send('get_board')
  }
  else if (dataType == 'game_board') {
    gameBoard = Object.values(data);
    drawBoard(gameBoard);
  }
  else if (dataType == 'game_over') {
    alert("Game over.\nScore: "+data);
  }
  else if (dataType == 'new_message') {
    printMessage(data)
  }

 }

 function drawBoard(newBoard) {
  ctx.fillStyle = 'rgb(204, 204, 204)';
  ctx.fillRect(0, 0, 500, 500);
  for (let i=0; i < newBoard.length; i++) {
    var row = newBoard[i];
    for (let j=0; j < row.length; j++) {
      if (row[j] == player['id']) {
        ctx.fillStyle = 'rgb(0, 0, 100)';
        ctx.fillRect(j * 10, i * 10, 10, 10);
      }
      else if (row[j] > 0) {
        if (!userColours[row[j]]) {
          userColours[row[j]] = 'rgb('+(Math.floor(Math.random()*200)+50)+', '+(Math.floor(Math.random()*200)+50)+', '+(Math.floor(Math.random()*200)+50)+')';
        }
        ctx.fillStyle = userColours[row[j]];
        ctx.fillRect(j * 10, i * 10, 10, 10);
      }
      else if (row[j] == -1) {
        ctx.fillStyle = 'rgb(0, 0, 0)';
        ctx.fillRect(j * 10, i * 10, 10, 10);
      }
    }
  }
 }


 //Change snake direction
 document.onkeydown  = function (e) {
  switch (e.keyCode) {
    case 38: // Up arrow
    case 87: // w
      ws.send("move_up");
      break;
    case 37: // Left arrow
    case 65: // a
      ws.send("move_left");
      break;
    case 40: // Down arrow
    case 83: // s
      ws.send("move_down");
      break;
    case 39: // Right arrow
    case 68: //d
      ws.send("move_right");
      break;
  }
 }


 //Request game board every 0.5 seconds
 setInterval(function() {
  ws.send('get_board');
 }, 100);


 //Send a message to all connected users
 function sendMessage() {
  var message = document.getElementById('userinput').value;
  if (message.trim() == "") return;
  ws.send('send_message: '+message);
  document.getElementById('userinput').value = "";
 }

 //Add received/sent messages to the screen
 async function printMessage(data) {
  var sender = data['senderID'];
  var message = data['message'];
  console.log(`${sender}: ${message}`)
 }


 </script>
	<head>

	<title>Snake</title>

	</head>

	<div id="container">

	<canvas id="board" width="500" height="500"></canvas>

	</div>

	<script type="text/javascript">

	//Canvas and canvas context declarations
	var canvas = document.getElementById('board');
	var ctx = canvas.getContext('2d');
	//Main websocket for connection
	var ws = new WebSocket("ws://159.65.83.230:8765");

	//Default game data
	var gameBoard = new Array(50).fill(new Array(50).fill(0));
	var player = {};
	var userColours = {};

	//First process opened once websock connection established
	ws.onopen = function (evt) {
	ws.send('get_id');
	}

	//Interpret all data received from websock
	ws.onmessage = function(evt) {
	//Parse JSON (all data should be a JSON key/data pair)
	try {
	var received = JSON.parse(evt.data);
	} catch (ex) {
	console.error("Could not parse the following data:\n"+evt.data)
	return;
	}
	//The type of data sent, i.e. get_id or game_board
	var dataType = Object.keys(received);
	//The data itself
	var data = received[dataType];

	if (dataType == 'player_id') {
	player['id'] = data;
	ws.send('get_board')
	}
	else if (dataType == 'game_board') {
	gameBoard = Object.values(data);
	drawBoard(gameBoard);
	}
	else if (dataType == 'game_over') {
	alert("Game over.\nScore: "+data);
	}
	else if (dataType == 'new_message') {
	printMessage(data)
	}

	}

	function drawBoard(newBoard) {
	ctx.fillStyle = 'rgb(204, 204, 204)';
	ctx.fillRect(0, 0, 500, 500);
	for (let i=0; i < newBoard.length; i++) {
	var row = newBoard[i];
	for (let j=0; j < row.length; j++) {
	if (row[j] == player['id']) {
	ctx.fillStyle = 'rgb(0, 0, 100)';
	ctx.fillRect(j * 10, i * 10, 10, 10);
	}
	else if (row[j] > 0) {
	if (!userColours[row[j]]) {
	userColours[row[j]] = 'rgb('+(Math.floor(Math.random()200)+50)+', '+(Math.floor(Math.random()200)+50)+', '+(Math.floor(Math.random()*200)+50)+')';
	}
	ctx.fillStyle = userColours[row[j]];
	ctx.fillRect(j * 10, i * 10, 10, 10);
	}
	else if (row[j] == -1) {
	ctx.fillStyle = 'rgb(0, 0, 0)';
	ctx.fillRect(j * 10, i * 10, 10, 10);
	}
	}
	}
	}


	//Change snake direction
	document.onkeydown = function (e) {
	switch (e.keyCode) {
	case 38: // Up arrow
	case 87: // w
	ws.send("move_up");
	break;
	case 37: // Left arrow
	case 65: // a
	ws.send("move_left");
	break;
	case 40: // Down arrow
	case 83: // s
	ws.send("move_down");
	break;
	case 39: // Right arrow
	case 68: //d
	ws.send("move_right");
	break;
	}
	}


	//Request game board every 0.5 seconds
	setInterval(function() {
	ws.send('get_board');
	}, 100);


	//Send a message to all connected users
	function sendMessage() {
	var message = document.getElementById('userinput').value;
	if (message.trim() == "") return;
	ws.send('send_message: '+message);
	document.getElementById('userinput').value = "";
	}

	//Add received/sent messages to the screen
	async function printMessage(data) {
	var sender = data['senderID'];
	var message = data['message'];
	console.log(`${sender}: ${message}`)
	}


	</script>