Updated movement by polling to achieve smoother movement

assets/scripts/engine.js

@@ -44,40 +44,131 @@ window.app = {
         app.initializeKeybindings();
         app.persistence.startAutoSave();
         app.graphics.startAnimation();
+        app.controls.initialize();
+        app.graphics.drawHearts();
         app.chat.message('Help', 'Type /help for some help', 'help');
         app.chat.message('Help', 'Use the WASD keys to move around', 'help');
-
+        
         setTimeout(function() {
             app.network.send.move(app.player.coordinates, app.player.direction);
             app.network.send.character(app.player.name, app.player.picture);
         }, 500);
 
         $('#controls .button').tipsy({fade: false, gravity: 's', html: true});
+
+        app.player.inventory.data = [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000];
+    },
+
+    controls: {
+        selected: 0,
+        initialize: function() {
+            app.controls.set(0);
+        },
+        data: [
+            $('#controls .wood-wall'),
+            $('#controls .wood-floor'),
+            $('#controls .stone-wall'),
+            $('#controls .stone-floor'),
+            $('#controls .door'),
+            $('#controls .glass'),
+            $('#controls .collect')
+        ],
+        set: function(index) {
+            if (index < 0) {
+                index = app.controls.data.length - 1;
+            } else if (index >= app.controls.data.length) {
+                index = 0;
+            }
+
+            app.controls.data[app.controls.selected].css('border-color', '#333');
+            app.controls.selected = index;
+            app.controls.data[app.controls.selected].css('border-color', '#0F0');
+        },
+        next: function() {
+            app.controls.set(app.controls.selected + 1)
+        },
+        previous: function() {
+            app.controls.set(app.controls.selected - 1)
+        },
+        action: function() {
+            if (app.controls.selected == 6) { // collect
+                app.player.mineFacingTile();
+            } else {
+                app.player.placeItem(app.controls.selected + 9);
+            }
+        }
     },
 
     initializeKeybindings: function() {
+
+        var keysPressed = {};
+
+        $(document).keydown(function(e) {
+            if ($(e.target).is(":input")) {
+                return;
+            }
+
+            keysPressed[e.which] = true;
+        });
+
+        $(document).keyup(function(e) {
+            if ($(e.target).is(":input")) {
+                return;
+            }
+
+            keysPressed[e.which] = false;
+        });
+
+        var checkKeys = function() {
+
+            if (keysPressed['87']) { // w
+                if (keysPressed['16']) { // shift
+                    app.player.setDirection('n');
+                } else {
+                    app.player.move('n');
+                }
+            } else if (keysPressed['65']) { // a
+                if (keysPressed['16']) { // shift
+                    app.player.setDirection('w');
+                } else {
+                    app.player.move('w');
+                }
+            } else if (keysPressed['83']) { // s
+                if (keysPressed['16']) { // shift
+                    app.player.setDirection('s');
+                } else {
+                    app.player.move('s');
+                }
+            } else if (keysPressed['68']) { // d
+                if (keysPressed['16']) { // shift
+                    app.player.setDirection('e');
+                } else {
+                    app.player.move('e');
+                }
+            }
+
+            if (keysPressed['37']) { // left arrow
+                app.controls.previous();
+            }
+            else if (keysPressed['39']) { // right arrow
+                app.controls.next();
+            }
+
+            setTimeout(checkKeys, 100);
+        };
+
+        checkKeys();
+
         $(document).keypress(function(e) {
             if ($(e.target).is(":input")) {
                 return;
             }
 
-            if (e.which == 119) { // w
-                app.player.move('n');
-            } else if (e.which == 97) { // a
-                app.player.move('w');
-            } else if (e.which == 115) { // s
-                app.player.move('s');
-            } else if (e.which == 100) { // d
-                app.player.move('e');
-            } else if (e.which == 87) { // W
-                app.player.setDirection('n');
-            } else if (e.which == 65) { // A
-                app.player.setDirection('w');
-            } else if (e.which == 83) { // S
-                app.player.setDirection('s');
-            } else if (e.which == 68) { // D
-                app.player.setDirection('e');
-            } else if (e.which == 116) { // T
+            if (e.which == 32) { // space
+                app.controls.action();
+            }
+
+            if (e.which == 116) { // T
                 e.preventDefault(); // keeps us from getting a t in the box
                 $('#message-input').focus();
             } else if (e.which == 47) { // /
@@ -256,6 +347,7 @@ window.app = {
     },
 
     player: {
+        hearts: 5,
         picture: 0,
         name: '',
         god: false,
@@ -311,7 +403,7 @@ window.app = {
 
             if (app.environment.corruption.loaded && app.environment.corruption.data[coords.x][coords.y]) {
                 if (Math.random() < 1/8) {
-                    app.player.kill("You were killed by corruption");
+                    app.player.hurt("You were killed by corruption");
                     app.network.send.chat("*Killed by Corruption*");
                 }
             }
@@ -468,6 +560,11 @@ window.app = {
             app.graphics.viewport.update();
             app.chat.message('Client', message, 'client');
             app.persistence.save();
+
+            setTimeout(function() {
+                app.player.hearts = 5;
+                app.graphics.hearts.draw();
+            }, 200);
         },
 
         // Checks to see if an NPC is adjacent to the player, and if so, kills them
@@ -479,13 +576,22 @@ window.app = {
                 for (var i = -1; i <= 1; i++) {
                     for (var j = -1; j <= 1; j++) {
                         if (npc.x == coords.x+i && npc.y == coords.y+j) {
-                            app.player.kill("Killed by " + app.graphics.tilesets.descriptors.monsters[npc.id].name);
+                            app.player.hurt("Killed by " + app.graphics.tilesets.descriptors.monsters[npc.id].name);
                             break;
                         }
                     }
                 }
             }
         },
+
+        hurt: function(killMessage) {
+            app.player.hearts--;
+            if (app.player.hearts <= 0) {
+                app.player.kill(killMessage);
+                return;
+            }
+            app.graphics.hearts.draw();
+        }
     },
 
     // NPC stuff
@@ -581,6 +687,7 @@ window.app = {
                 var player = app.players.data[i];
                 if (player.session == session) {
                     app.players.data.splice(i, 1);
+                    break;
                 }
             }
         }
@@ -881,6 +988,17 @@ window.app = {
             }
 
             return index;
+        },
+
+        hearts: {
+            $holder = $('#hearts .holder'),
+
+            draw: function() {
+                app.graphics.hearts.$holder.empty();
+                for (var i = 0; i < app.player.hearts; i++) {
+                    app.graphics.hearts.$holder.append('<div class="heart"></div>');
+                }
+            }
         }
     },
 

assets/styles/main.css

@@ -130,26 +130,43 @@ body {
 #nametags .name span.monster {
     color: #e87b06;
 }
+#hearts {
+    position: absolute;
+    width: 100%;
+    bottom: 55px;
+}
+#hearts .holder {
+    margin: 0 auto;
+    width: 290;
+    border-radius: 6px;
+}
+#hearts .holder .heart {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    background-image: url("/assets/tilesets/heart-32x32.png");    
+}
 #controls {
     position: absolute;
     width: 100%;
     bottom: 0px;
 }
 #controls .holder {
     margin: 0 auto;
-    width: 264px;
+    width: 290px;
     background: rgba(0, 0, 0, 0.75);
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
     height: 32px;
-    padding-top: 8px;
+    padding: 8px 0 10px 0;
 }
 #controls .holder .button {
     display: inline-block;
     width: 32px;
     height: 32px;
     text-align: left;
     text-shadow: 0 2px 2px #000;
+    border: 2px solid #333;
 }
 #controls .wood-wall {
     background-image: url("/assets/tilesets/terrain-32x32.png");

index.html

@@ -38,6 +38,10 @@ <h5>Inventory</h5>
                     <div class="inventory-display" id="inventory-8" title="Cobalt Ore">Cobalt: <span>0</span></div>
                 </div>
             </div>
+            <div id="hearts">
+                <div class="holder">
+                </div>
+            </div>
             <div id="controls">
                 <div class="holder">
                     <div class="button wood-wall" title="Press 1 to place a wooden wall<br /><strong>Cost: 4 x Wood</strong>"><span>1</span></div>

server.js

@@ -1,6 +1,5 @@
 // Use clean code
 'use strict';
-
 // requires
 var app         = require('express').createServer();
 var io          = require('socket.io').listen(app, { log: false});
@@ -243,12 +242,18 @@ var game = {
 
         npcmovement: {
             handle: null,
-            interval: 4 * 1000,
+            interval: 2 * 1000,
             payload: function() {
 
                 var len = game.npcs.length;
                 for(var i = 0; i < len; i++) {
                     var npc = game.npcs[i];
+
+                    if (game.tryNPCChase(npc)) {
+                        // success -> heading towards a player
+                        continue;
+                    }
+
                     var new_direction = Math.floor(Math.random() * 5);
                     if (new_direction == 0 && npc.x < 199 && game.canNPCWalk(npc.x+1, npc.y)) {
                         npc.x++;
@@ -300,6 +305,43 @@ var game = {
         return true;
     },
 
+    tryNPCChase: function(npc) {
+        var radius = 10;
+        var deltaX = 0;
+        var deltaY = 0;
+        var moved = false;
+        for (var i = 0; i < game.players.length; i++) {
+            deltaX = game.players[i].x - npc.x;
+            deltaY = game.players[i].y - npc.y;
+            moved = false;
+
+            if (deltaX >= 0 && deltaX <= radius && npc.x < 199 && game.canNPCWalk(npc.x+1, npc.y)) {
+                npc.x++;
+                npc.d = 'e';
+                moved = true;
+            } else if (deltaX <= 0 && deltaX >= -radius && npc.x > 0 && game.canNPCWalk(npc.x-1, npc.y)) {
+                npc.x--;
+                npc.d = 'w';
+                moved = true;
+            }
+
+            if (deltaY >= 0 && deltaY <= radius && npc.y < 199 && game.canNPCWalk(npc.x, npc.y+1)) {
+                npc.y++;
+                npc.d = 's';
+                moved = true;
+            } else if (deltaY <= 0 && deltaY >= -radius && npc.y > 0 && game.canNPCWalk(npc.x, npc.y-1)) {
+                npc.y--;
+                npc.d = 'n';
+                moved = true;
+            }
+
+            if (moved) {
+                return true;
+            }
+        }
+        return false;
+    },
+
     // Array of known player locations
     players: [],