Server-Side game dimensions, mass rebalancing, SAT player collision, etc.

client/js/app.js

@@ -10,7 +10,7 @@ function startGame() {
     document.getElementById('gameAreaWrapper').style.display = 'block';
     document.getElementById('startMenuWrapper').style.display = 'none';
     socket = io();
-    SetupSocket(socket);
+    setupSocket(socket);
     animloop();
 }
 
@@ -65,8 +65,8 @@ window.onload = function() {
 // Canvas
 var screenWidth = window.innerWidth;
 var screenHeight = window.innerHeight;
-var gameWidth = screenWidth * 10;
-var gameHeight = screenHeight * 10;
+var gameWidth = 0;
+var gameHeight = 0;
 var xoffset = -gameWidth;
 var yoffset = -gameHeight;
 
@@ -84,19 +84,19 @@ var foodConfig = {
     border: 0,
     borderColor: '#f39c12',
     fillColor: '#f1c40f',
-    size: 10
+    mass: 0.5
 };
 
 var playerConfig = {
-    border: 15,
+    border: 5,
     textColor: '#FFFFFF',
     textBorder: '#000000',
     textBorderSize: 3,
     defaultSize: 30
 };
 
 var enemyConfig = {
-    border: 15,
+    border: 5,
     textColor: '#FFFFFF',
     textBorder: '#000000',
     textBorderSize: 3,
@@ -105,13 +105,10 @@ var enemyConfig = {
 
 var player = {
     id: -1,
-    x: gameWidth / 2, y: gameHeight / 2,
-    mass: 0, speed: 8,
-    //TODO: exclude width and height out of player package
+    x: screenWidth / 2, 
+    y: screenHeight / 2,    
     screenWidth: screenWidth,
     screenHeight: screenHeight,
-    gameWidth: gameWidth,
-    gameHeight: gameHeight
 };
 
 var foods = [];
@@ -124,8 +121,8 @@ c.width = screenWidth; c.height = screenHeight;
 c.addEventListener('mouseout', outOfBounds, false);
 
 // register when the mouse goes off the canvas
-function outOfBounds() {
-    target = { x : screenWidth / 2, y : screenHeight / 2 };
+function outOfBounds() {    
+    target = { x : 0, y: 0 };
 }
 
 function visibleBorder() {
@@ -241,7 +238,7 @@ function sendChat(key) {
     }
 }
 
-function SetupSocket(socket) {
+function setupSocket(socket) {
     // Handle ping
     socket.on('pong', function () {
         var latency = Date.now() - startPingTime;
@@ -262,16 +259,22 @@ function SetupSocket(socket) {
 
     // Handle connection
     socket.on('welcome', function (playerSettings) {
-        player.name = playerName;
-        player.id = playerSettings.id;
-        player.hue = playerSettings.hue;
+        player = playerSettings;        
+        player.name = playerName; 
+        player.screenWidth = screenWidth;
+        player.screenHeight = screenHeight; 
         socket.emit('gotit', player);
         gameStart = true;
         console.log('Game is started: ' + gameStart);
         addSystemLine('Connected to the game!');
         addSystemLine('Type <b>-help</b> for a list of commands');
     });
 
+    socket.on('gameSetup', function(data){
+        gameWidth = data.gameWidth;
+        gameHeight = data.gameHeight;        
+     });
+
     socket.on('playerDisconnect', function (data) {
         enemies = data.playersList;
         document.getElementById('status').innerHTML = 'Players: ' + enemies.length;
@@ -301,13 +304,16 @@ function SetupSocket(socket) {
     });
 
     // Handle movement
-    socket.on('serverTellPlayerMove', function (playerData, foodsList) {
-        xoffset += (player.x - playerData.x);
-        yoffset += (player.y - playerData.y);
+    socket.on('serverTellPlayerMove', function (playerData, userData, foodsList) {
+        var xoffset = player.x - playerData.x;
+        var yoffset = player.y - playerData.y;
+
         player = playerData;
-        if(foodsList !== 0){
+        player.xoffset = isNaN(xoffset) ? 0 : xoffset;
+        player.yoffset = isNaN(yoffset) ? 0 : yoffset;
+
+        enemies = userData;        
         foods = foodsList;
-        }
     });
 
     socket.on('serverUpdateAll', function (players, foodsList) {
@@ -321,7 +327,7 @@ function SetupSocket(socket) {
     socket.on('RIP', function () {
         gameStart = false;
         died = true;
-        socket.close();
+        // socket.close();
     });
 
     socket.on('kick', function () {
@@ -331,16 +337,20 @@ function SetupSocket(socket) {
     });
 }
 
-function drawCircle(centerX, centerY, size) {
-    var theta = 0,
-        x = 0,
-        y = 0,
-        radius = size * 1.5;
+function massToRadius(mass){
+    return Math.sqrt(mass / Math.PI) * 10;
+}
+
+function drawCircle(centerX, centerY, mass, sides) {
+    var theta = 0;
+    var x = 0;
+    var y = 0;
+    var radius = massToRadius(mass);
 
     graph.beginPath();
 
-    for (var i = 0; i < size; i++) {
-        theta = (i / size) * 2 * Math.PI;
+    for (var i = 0; i < sides; i++) {
+        theta = (i / sides) * 2 * Math.PI;
         x = centerX + radius * Math.sin(theta);
         y = centerY + radius * Math.cos(theta);
         graph.lineTo(x, y);
@@ -355,19 +365,19 @@ function drawFood(food) {
     graph.strokeStyle = food.color.border || foodConfig.borderColor;
     graph.fillStyle = food.color.fill || foodConfig.fillColor;
     graph.lineWidth = foodConfig.border;
-    drawCircle(food.x - player.x + screenWidth / 2, food.y - player.y + screenHeight / 2, foodConfig.size);
+    drawCircle(food.x - player.x + screenWidth / 2, food.y - player.y + screenHeight / 2, massToRadius(foodConfig.mass), 10);
 }
 
 function drawPlayer() {
     graph.strokeStyle = 'hsl(' + player.hue + ', 80%, 40%)';
     graph.fillStyle = 'hsl(' + player.hue + ', 70%, 50%)';
     graph.lineWidth = playerConfig.border;
     graph.beginPath();
-    graph.arc(screenWidth / 2, screenHeight / 2, playerConfig.defaultSize + player.mass, 0, 2 * Math.PI);
+    graph.arc(screenWidth / 2, screenHeight / 2, massToRadius(player.mass), 0, 2 * Math.PI);
     graph.stroke();
     graph.fill();
 
-    var fontSize = (player.mass / 2) + playerConfig.defaultSize;
+    var fontSize = (massToRadius(player.mass) / 2);
     graph.lineWidth = playerConfig.textBorderSize;
     graph.miterLimit = 1;
     graph.lineJoin = 'round';
@@ -385,11 +395,11 @@ function drawEnemy(enemy) {
     graph.fillStyle = 'hsl(' + enemy.hue + ', 70%, 50%)';
     graph.lineWidth = enemyConfig.border;
     graph.beginPath();
-    graph.arc(enemy.x - player.x + screenWidth / 2, enemy.y - player.y + screenHeight / 2, enemyConfig.defaultSize + enemy.mass, 0, 2 * Math.PI);
+    graph.arc(enemy.x - player.x + screenWidth / 2, enemy.y - player.y + screenHeight / 2, massToRadius(enemy.mass), 0, 2 * Math.PI);
     graph.fill();
     graph.stroke();
 
-    var fontSize = (enemy.mass / 2) + enemyConfig.defaultSize;
+    var fontSize = (massToRadius(enemy.mass) / 2);
 
     graph.lineWidth = enemyConfig.textBorderSize;
     graph.textAlign = 'center';
@@ -460,8 +470,8 @@ function drawborder() {
 }
 
 function gameInput(mouse) {
-    target.x = mouse.clientX;
-    target.y = mouse.clientY;
+    target.x = mouse.clientX - screenWidth / 2;
+    target.y = mouse.clientY - screenHeight / 2;
 }
 
 window.requestAnimFrame = (function(){
@@ -489,9 +499,7 @@ function gameLoop() {
                 drawborder();
             }
 
-            for (var i = 0; i < foods.length; i++) {
-                drawFood(foods[i]);
-            }
+            foods.forEach(function(f){ drawFood(f); });
 
             if(borderDraw){
                 drawborder();

server/config.json

@@ -1,14 +1,9 @@
 {
     "port": 3000,
-    "maxSizeMass": 200,
-    "maxMoveSpeed": 7,
-    "massDecreaseRatio": 1000,
-    "foodMass": 0.5,
-    "newFoodPerPlayer": 500,
-    "respawnFoodPerPlayer": 50,
-    "maxFoodCount": 20000,
-    "noPlayer": 0,
-    "defaultPlayerSize": 50,
-    "eatableMassDistance": 5,
-    "adminPass": "DEFAULT"
+    "foodMass": 1,
+    "defaultPlayerMass": 10,
+    "gameWidth": 5000,
+    "gameHeight": 5000,
+    "adminPass": "DEFAULT",
+    "gameMass": 2000
 }