Skip to main content
Post Made Community Wiki by animusonStaffMod
added 179 characters in body
Source Link
apsillers
  • 115.7k
  • 2
  • 37
  • 36
ROT.RNG.setSeed(12345);
ROT.DEFAULT_WIDTH = 83;
ROT.DEFAULT_HEIGHT = 32;

var id, level = 1;
var mapData = [];
var inventory = [];
var inventoryUp = false;
var health = 10;
var entities = [];

var display = new ROT.Display({fontSize:11});
document.getElementById("canvasContainer").appendChild(display.getContainer());

var socket = io.connect('https://taggem-apsillers.rhcloud.com:8443');
socket.emit("player");
socket.on("map+pos", function(updates) { redraw(updates.map, updates.pos); });
socket.on("map", function(mapUpdates) { redraw(mapUpdates, {}); });
socket.on("pos", function(pos) { redraw({}, pos); });
socket.on("id", function(myid) {
    id = myid;

    display.clear();

    level = 1;
    mapData = [];
    inventory = [];
    inventoryUp = false;
    health = 10;
    entities = [];

    entities[1] = {};
    messages = [];

    initMapLevel(1);
});

socket.on("inventory", function(data) {
    if(data.change == "add") {
        inventory[data.slot] = data.item;
    } else if(data.change == "remove") {
        delete inventory[data.slot];
    }
});

socket.on("health", function(data) { health = data.value; drawHealth(data.value); });
function drawHealth(value) {
    for(var i=0; i < value; ++i) {
        display.draw(82, 10-i, "o", "#F00", "#000");
    }

    for(;i<10; ++i) {
        display.draw(82, 10-i, "-", "#F00", "#000");
    }
}

function initMapLevel(level) {
    mapData[level] = [];
    for(var i=0; i < ROT.DEFAULT_WIDTH; ++i) {
        for(var j=0; j < ROT.DEFAULT_HEIGHT; ++j) {
            if(mapData[level][i] == null) { mapData[level][i] = []; }
            mapData[level][i][j] = -1;
        }
    }
}

var dirToVector = {};
dirToVector[ROT.VK_H] = { x:-1, y:0};
dirToVector[ROT.VK_L] = { x:1, y:0};
dirToVector[ROT.VK_K] = { x:0, y:-1};
dirToVector[ROT.VK_J] = { x:0, y:1};
dirToVector[ROT.VK_LEFT] = { x:-1, y:0};
dirToVector[ROT.VK_RIGHT] = { x:1, y:0};
dirToVector[ROT.VK_UP] = { x:0, y:-1};
dirToVector[ROT.VK_DOWN] = { x:0, y:1};
dirToVector[ROT.VK_Y] = { x:-1, y:-1};
dirToVector[ROT.VK_U] = { x:1, y:-1};
dirToVector[ROT.VK_B] = { x:-1, y:1};
dirToVector[ROT.VK_N] = { x:1, y:1};

var keyToItem = {};
for (i = 0; i < 10; i++) {
  keyToItem[i + "0".charCodeAt(0)] = i;
}

var interpreters = {};
interpreters[ROT.VK_I]     = 
  function () {
    showInventory();
    interpCallback = function (key) {
      hideInventory();
      interpCallback = defaultInterpreter;
      if (key != ROT.VK_I) {
        defaultInterpreter(key);
      }
    };
  };
interpreters[ROT.VK_Z]     = DirCommand("zap");
interpreters[ROT.VK_A]     = DirCommand("mine");
interpreters[ROT.VK_S]     = ItemDirCommand("shoot");
interpreters[ROT.VK_O]     = DirCommand("open");
interpreters[ROT.VK_C]     = DirCommand("close");
interpreters[ROT.VK_COMMA] = Command("pickup");
interpreters[ROT.VK_D]     = ItemCommand("drop");

for (moveKey in dirToVector) {
  interpreters[moveKey] = (function (key) {
      return function () { socket.emit("move", dirToVector[key]); }
    })(moveKey);
}

interpreters[ROT.VK_ESCAPE] = function () { 
    hideInventory(); 
    interpCallback = defaultInterpreter;
};

var defaultInterpreter = function (key) {
  if (key in interpreters) {
    interpreters[key]();
  }
};

var interpCallback = defaultInterpreter;

function makeCB(f) {
  return function (k) {
    if (!f(k)) {
      interpCallback = defaultInterpreter;
    }
  }
};


function Command (action) {
  return function () {
    socket.emit(action);
  }
}

function DirCommand (action) {
  return function () {
    interpCallback = makeCB( function (key) {
        vec = dirToVector[key];
        if (vec) {
          socket.emit(action, vec);
        }
      });
  }
}

function ItemCommand (action) {
  return function () {
    interpCallback = makeCB( function (key) {
        item = keyToItem[key];
        if (item <= 9 && item >= 0) {
          socket.emit(action, {"itemNum":item});
        }
      });
  }
}

function ItemDirCommand (action) {
  return function () {
    interpCallback = makeCB( function (key) {
        item = keyToItem[key];
        if (item == undefined) {
          item = defaultItemForAction(action);
          vec = dirToVector[key];
          if (vec) {
            vec.itemNum = item;
            socket.emit(action, vec);
          }
        }
        else if (item <= 9 && item >= 0) {
          interpCallback = makeCB( function (key) {
              vec = dirToVector[key];
              if (vec) {
                vec.itemNum = item;
                socket.emit(action, vec);
              }
            });
          return true;
        }
      });
  }
}


window.addEventListener("keydown", function (e) {
    var code = e.keyCode;
    interpCallback(code);
  });

   
function drawMap(mapUpdates) {

    if(typeof mapData[level] == 'undefined') { initMapLevel(level); }

    for(i in mapUpdates) {
        var coords = i.split(',');
        mapData[level][coords[0]][coords[1]] = mapUpdates[i];
    }

    for(i=0; i < ROT.DEFAULT_WIDTH; ++i) {
        for(j=0; j < ROT.DEFAULT_HEIGHT; ++j) {
            drawMapChar(i, j, mapData[level][i][j]==0?".":" ", "#fff", ["#000", "#777"][mapData[level][i][j]]);
        }
    }
}

function updateEntities(posData) {
    var i;
    if(posData.clear) { entities[level] = {}; }

    if(posData["add"]) {
        for(i in posData["add"]) {
            entities[level][i] = posData["add"][i];
        }
    }

    if(posData["remove"]) {
        for(i=0; i<posData["remove"].length; ++i) {
            delete entities[level][posData["remove"][i]];
        }
    }
}

function drawEntities() {
    for(i in entities[level]) {
        var pos = entities[level][i];

        if(pos.blocking) { drawMapChar(pos.x, pos.y, pos.symbol, pos.color); }
        else {
            var hasBlocking = false;
            for(var j in entities[level]) {
                if(entities[level][j].blocking && entities[level][j].x == pos.x && entities[level][j].y == pos.y) {
                    hasBlocking = true;
                    break;
                }
            }
            if(!hasBlocking) { drawMapChar(pos.x, pos.y, pos.symbol, pos.color); }
        }
    }
}

function redraw(map, posData) {

    if(posData["add"] && posData["add"][id] != undefined) {
        level = posData["add"][id].z;
        if(entities[level] == undefined) { entities[level] = {}; }
    }

    updateEntities(posData);

    drawMap(map);
    drawEntities();

    drawHealth(health);
}

function drawMapChar(x,y,ch,fg,bg) {
    if(!inventoryUp || ((x < 2 || x > 36) && (y < 4 || y > 14))) {
        display.draw(x, y+2, ch, fg, bg);
    }
}

function showInventory() {
    inventoryUp = true;
    var thirtySpaces = "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0";
    display.drawText(2, 3, "--------------------------------");
    display.drawText(2, 4, ("| Inventory" + thirtySpaces).substr(0,30) + " |");
    var invCount = 0;
    for(var i=0; i<10; ++i) {
        if(inventory[i]) {
            display.drawText(2, invCount+5, ("| " + i + ": " + inventory[i].name + thirtySpaces).substr(0,30) + " |", 34);
            invCount++;
        }
    }
    for(i=0; i<10 - invCount; ++i) {
        display.drawText(2, invCount+i+5, "| " + thirtySpaces + " |", 34);
    }
    display.drawText(2, invCount+i+5, "--------------------------------");
}

function hideInventory() {
    inventoryUp = false;
    redraw({}, {});
}

function defaultItemForAction(actionName) {
    if(actionName == "shoot") {
        for(var i=0; i<inventory.length; ++i) {
            if(inventory[i] && inventory[i].shootable) return i;
        }
    }

    return null;
}

function showMessage(m) {
    display.drawText(0, 0, "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0", "#000", "#000");
    display.drawText(0, 1, "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0", "#000", "#000");
    display.drawText(0,  0, m);
}

socket.on("output", function(m) {
    showMessage(m);
});
<div id="canvasContainer" style="float:left; border: thick solid black;"></div>l

<div style="float:left;">
<div style="width:400px; padding: 10px;">
<ul>
<li><b>arrow keys</b>: movement</li>
<li><b>h,j,k,l</b>: left, down, up, right</li>
<li><b>i</b>: show inventory</li>
<li><b>,</b> (comma): pick up items</li>
<li><b>o</b> <i>[direction]</i>: open door in [direction]</li>
<li><b>c</b> <i>[direction]</i>: close door in [direction]</li>
<li><b>d</b> <i>[number]</i>: drop item in slot [number]</li>
<li><b>s</b> <i>[number] [direction]</i>: shoot item [number] in [direction] (e.g., <b>s2h</b> shoots item in slot 5 to the left)</li>
<li><b>s</b> <i>[direction]</i>: shoot the first shootable item in your inventory in [direction]</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
<script src="https://ondras.github.io/rot.js/rot.js"></script>
ROT.RNG.setSeed(12345);
ROT.DEFAULT_WIDTH = 83;
ROT.DEFAULT_HEIGHT = 32;

var id, level = 1;
var mapData = [];
var inventory = [];
var inventoryUp = false;
var health = 10;
var entities = [];

var display = new ROT.Display({fontSize:11});
document.getElementById("canvasContainer").appendChild(display.getContainer());

var socket = io.connect('https://taggem-apsillers.rhcloud.com:8443');
socket.emit("player");
socket.on("map+pos", function(updates) { redraw(updates.map, updates.pos); });
socket.on("map", function(mapUpdates) { redraw(mapUpdates, {}); });
socket.on("pos", function(pos) { redraw({}, pos); });
socket.on("id", function(myid) {
    id = myid;

    display.clear();

    level = 1;
    mapData = [];
    inventory = [];
    inventoryUp = false;
    health = 10;
    entities = [];

    entities[1] = {};
    messages = [];

    initMapLevel(1);
});

socket.on("inventory", function(data) {
    if(data.change == "add") {
        inventory[data.slot] = data.item;
    } else if(data.change == "remove") {
        delete inventory[data.slot];
    }
});

socket.on("health", function(data) { health = data.value; drawHealth(data.value); });
function drawHealth(value) {
    for(var i=0; i < value; ++i) {
        display.draw(82, 10-i, "o", "#F00", "#000");
    }

    for(;i<10; ++i) {
        display.draw(82, 10-i, "-", "#F00", "#000");
    }
}

function initMapLevel(level) {
    mapData[level] = [];
    for(var i=0; i < ROT.DEFAULT_WIDTH; ++i) {
        for(var j=0; j < ROT.DEFAULT_HEIGHT; ++j) {
            if(mapData[level][i] == null) { mapData[level][i] = []; }
            mapData[level][i][j] = -1;
        }
    }
}

var dirToVector = {};
dirToVector[ROT.VK_H] = { x:-1, y:0};
dirToVector[ROT.VK_L] = { x:1, y:0};
dirToVector[ROT.VK_K] = { x:0, y:-1};
dirToVector[ROT.VK_J] = { x:0, y:1};
dirToVector[ROT.VK_Y] = { x:-1, y:-1};
dirToVector[ROT.VK_U] = { x:1, y:-1};
dirToVector[ROT.VK_B] = { x:-1, y:1};
dirToVector[ROT.VK_N] = { x:1, y:1};

var keyToItem = {};
for (i = 0; i < 10; i++) {
  keyToItem[i + "0".charCodeAt(0)] = i;
}

var interpreters = {};
interpreters[ROT.VK_I]     = 
  function () {
    showInventory();
    interpCallback = function (key) {
      hideInventory();
      interpCallback = defaultInterpreter;
      if (key != ROT.VK_I) {
        defaultInterpreter(key);
      }
    };
  };
interpreters[ROT.VK_Z]     = DirCommand("zap");
interpreters[ROT.VK_A]     = DirCommand("mine");
interpreters[ROT.VK_S]     = ItemDirCommand("shoot");
interpreters[ROT.VK_O]     = DirCommand("open");
interpreters[ROT.VK_C]     = DirCommand("close");
interpreters[ROT.VK_COMMA] = Command("pickup");
interpreters[ROT.VK_D]     = ItemCommand("drop");

for (moveKey in dirToVector) {
  interpreters[moveKey] = (function (key) {
      return function () { socket.emit("move", dirToVector[key]); }
    })(moveKey);
}

interpreters[ROT.VK_ESCAPE] = function () { 
    hideInventory(); 
    interpCallback = defaultInterpreter;
};

var defaultInterpreter = function (key) {
  if (key in interpreters) {
    interpreters[key]();
  }
};

var interpCallback = defaultInterpreter;

function makeCB(f) {
  return function (k) {
    if (!f(k)) {
      interpCallback = defaultInterpreter;
    }
  }
};


function Command (action) {
  return function () {
    socket.emit(action);
  }
}

function DirCommand (action) {
  return function () {
    interpCallback = makeCB( function (key) {
        vec = dirToVector[key];
        if (vec) {
          socket.emit(action, vec);
        }
      });
  }
}

function ItemCommand (action) {
  return function () {
    interpCallback = makeCB( function (key) {
        item = keyToItem[key];
        if (item <= 9 && item >= 0) {
          socket.emit(action, {"itemNum":item});
        }
      });
  }
}

function ItemDirCommand (action) {
  return function () {
    interpCallback = makeCB( function (key) {
        item = keyToItem[key];
        if (item == undefined) {
          item = defaultItemForAction(action);
          vec = dirToVector[key];
          if (vec) {
            vec.itemNum = item;
            socket.emit(action, vec);
          }
        }
        else if (item <= 9 && item >= 0) {
          interpCallback = makeCB( function (key) {
              vec = dirToVector[key];
              if (vec) {
                vec.itemNum = item;
                socket.emit(action, vec);
              }
            });
          return true;
        }
      });
  }
}


window.addEventListener("keydown", function (e) {
    var code = e.keyCode;
    interpCallback(code);
  });

   
function drawMap(mapUpdates) {

    if(typeof mapData[level] == 'undefined') { initMapLevel(level); }

    for(i in mapUpdates) {
        var coords = i.split(',');
        mapData[level][coords[0]][coords[1]] = mapUpdates[i];
    }

    for(i=0; i < ROT.DEFAULT_WIDTH; ++i) {
        for(j=0; j < ROT.DEFAULT_HEIGHT; ++j) {
            drawMapChar(i, j, mapData[level][i][j]==0?".":" ", "#fff", ["#000", "#777"][mapData[level][i][j]]);
        }
    }
}

function updateEntities(posData) {
    var i;
    if(posData.clear) { entities[level] = {}; }

    if(posData["add"]) {
        for(i in posData["add"]) {
            entities[level][i] = posData["add"][i];
        }
    }

    if(posData["remove"]) {
        for(i=0; i<posData["remove"].length; ++i) {
            delete entities[level][posData["remove"][i]];
        }
    }
}

function drawEntities() {
    for(i in entities[level]) {
        var pos = entities[level][i];

        if(pos.blocking) { drawMapChar(pos.x, pos.y, pos.symbol, pos.color); }
        else {
            var hasBlocking = false;
            for(var j in entities[level]) {
                if(entities[level][j].blocking && entities[level][j].x == pos.x && entities[level][j].y == pos.y) {
                    hasBlocking = true;
                    break;
                }
            }
            if(!hasBlocking) { drawMapChar(pos.x, pos.y, pos.symbol, pos.color); }
        }
    }
}

function redraw(map, posData) {

    if(posData["add"] && posData["add"][id] != undefined) {
        level = posData["add"][id].z;
        if(entities[level] == undefined) { entities[level] = {}; }
    }

    updateEntities(posData);

    drawMap(map);
    drawEntities();

    drawHealth(health);
}

function drawMapChar(x,y,ch,fg,bg) {
    if(!inventoryUp || ((x < 2 || x > 36) && (y < 4 || y > 14))) {
        display.draw(x, y+2, ch, fg, bg);
    }
}

function showInventory() {
    inventoryUp = true;
    var thirtySpaces = "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0";
    display.drawText(2, 3, "--------------------------------");
    display.drawText(2, 4, ("| Inventory" + thirtySpaces).substr(0,30) + " |");
    var invCount = 0;
    for(var i=0; i<10; ++i) {
        if(inventory[i]) {
            display.drawText(2, invCount+5, ("| " + i + ": " + inventory[i].name + thirtySpaces).substr(0,30) + " |", 34);
            invCount++;
        }
    }
    for(i=0; i<10 - invCount; ++i) {
        display.drawText(2, invCount+i+5, "| " + thirtySpaces + " |", 34);
    }
    display.drawText(2, invCount+i+5, "--------------------------------");
}

function hideInventory() {
    inventoryUp = false;
    redraw({}, {});
}

function defaultItemForAction(actionName) {
    if(actionName == "shoot") {
        for(var i=0; i<inventory.length; ++i) {
            if(inventory[i] && inventory[i].shootable) return i;
        }
    }

    return null;
}

function showMessage(m) {
    display.drawText(0, 0, "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0", "#000", "#000");
    display.drawText(0, 1, "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0", "#000", "#000");
    display.drawText(0,  0, m);
}

socket.on("output", function(m) {
    showMessage(m);
});
<div id="canvasContainer" style="float:left; border: thick solid black;"></div>l

<div style="float:left;">
<div style="width:400px; padding: 10px;">
<ul>
<li><b>h,j,k,l</b>: left, down, up, right</li>
<li><b>i</b>: show inventory</li>
<li><b>,</b> (comma): pick up items</li>
<li><b>o</b> <i>[direction]</i>: open door in [direction]</li>
<li><b>c</b> <i>[direction]</i>: close door in [direction]</li>
<li><b>d</b> <i>[number]</i>: drop item in slot [number]</li>
<li><b>s</b> <i>[number] [direction]</i>: shoot item [number] in [direction] (e.g., <b>s2h</b> shoots item in slot 5 to the left)</li>
<li><b>s</b> <i>[direction]</i>: shoot the first shootable item in your inventory in [direction]</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
<script src="https://ondras.github.io/rot.js/rot.js"></script>
ROT.RNG.setSeed(12345);
ROT.DEFAULT_WIDTH = 83;
ROT.DEFAULT_HEIGHT = 32;

var id, level = 1;
var mapData = [];
var inventory = [];
var inventoryUp = false;
var health = 10;
var entities = [];

var display = new ROT.Display({fontSize:11});
document.getElementById("canvasContainer").appendChild(display.getContainer());

var socket = io.connect('https://taggem-apsillers.rhcloud.com:8443');
socket.emit("player");
socket.on("map+pos", function(updates) { redraw(updates.map, updates.pos); });
socket.on("map", function(mapUpdates) { redraw(mapUpdates, {}); });
socket.on("pos", function(pos) { redraw({}, pos); });
socket.on("id", function(myid) {
    id = myid;

    display.clear();

    level = 1;
    mapData = [];
    inventory = [];
    inventoryUp = false;
    health = 10;
    entities = [];

    entities[1] = {};
    messages = [];

    initMapLevel(1);
});

socket.on("inventory", function(data) {
    if(data.change == "add") {
        inventory[data.slot] = data.item;
    } else if(data.change == "remove") {
        delete inventory[data.slot];
    }
});

socket.on("health", function(data) { health = data.value; drawHealth(data.value); });
function drawHealth(value) {
    for(var i=0; i < value; ++i) {
        display.draw(82, 10-i, "o", "#F00", "#000");
    }

    for(;i<10; ++i) {
        display.draw(82, 10-i, "-", "#F00", "#000");
    }
}

function initMapLevel(level) {
    mapData[level] = [];
    for(var i=0; i < ROT.DEFAULT_WIDTH; ++i) {
        for(var j=0; j < ROT.DEFAULT_HEIGHT; ++j) {
            if(mapData[level][i] == null) { mapData[level][i] = []; }
            mapData[level][i][j] = -1;
        }
    }
}

var dirToVector = {};
dirToVector[ROT.VK_H] = { x:-1, y:0};
dirToVector[ROT.VK_L] = { x:1, y:0};
dirToVector[ROT.VK_K] = { x:0, y:-1};
dirToVector[ROT.VK_J] = { x:0, y:1};
dirToVector[ROT.VK_LEFT] = { x:-1, y:0};
dirToVector[ROT.VK_RIGHT] = { x:1, y:0};
dirToVector[ROT.VK_UP] = { x:0, y:-1};
dirToVector[ROT.VK_DOWN] = { x:0, y:1};
dirToVector[ROT.VK_Y] = { x:-1, y:-1};
dirToVector[ROT.VK_U] = { x:1, y:-1};
dirToVector[ROT.VK_B] = { x:-1, y:1};
dirToVector[ROT.VK_N] = { x:1, y:1};

var keyToItem = {};
for (i = 0; i < 10; i++) {
  keyToItem[i + "0".charCodeAt(0)] = i;
}

var interpreters = {};
interpreters[ROT.VK_I]     = 
  function () {
    showInventory();
    interpCallback = function (key) {
      hideInventory();
      interpCallback = defaultInterpreter;
      if (key != ROT.VK_I) {
        defaultInterpreter(key);
      }
    };
  };
interpreters[ROT.VK_Z]     = DirCommand("zap");
interpreters[ROT.VK_A]     = DirCommand("mine");
interpreters[ROT.VK_S]     = ItemDirCommand("shoot");
interpreters[ROT.VK_O]     = DirCommand("open");
interpreters[ROT.VK_C]     = DirCommand("close");
interpreters[ROT.VK_COMMA] = Command("pickup");
interpreters[ROT.VK_D]     = ItemCommand("drop");

for (moveKey in dirToVector) {
  interpreters[moveKey] = (function (key) {
      return function () { socket.emit("move", dirToVector[key]); }
    })(moveKey);
}

interpreters[ROT.VK_ESCAPE] = function () { 
    hideInventory(); 
    interpCallback = defaultInterpreter;
};

var defaultInterpreter = function (key) {
  if (key in interpreters) {
    interpreters[key]();
  }
};

var interpCallback = defaultInterpreter;

function makeCB(f) {
  return function (k) {
    if (!f(k)) {
      interpCallback = defaultInterpreter;
    }
  }
};


function Command (action) {
  return function () {
    socket.emit(action);
  }
}

function DirCommand (action) {
  return function () {
    interpCallback = makeCB( function (key) {
        vec = dirToVector[key];
        if (vec) {
          socket.emit(action, vec);
        }
      });
  }
}

function ItemCommand (action) {
  return function () {
    interpCallback = makeCB( function (key) {
        item = keyToItem[key];
        if (item <= 9 && item >= 0) {
          socket.emit(action, {"itemNum":item});
        }
      });
  }
}

function ItemDirCommand (action) {
  return function () {
    interpCallback = makeCB( function (key) {
        item = keyToItem[key];
        if (item == undefined) {
          item = defaultItemForAction(action);
          vec = dirToVector[key];
          if (vec) {
            vec.itemNum = item;
            socket.emit(action, vec);
          }
        }
        else if (item <= 9 && item >= 0) {
          interpCallback = makeCB( function (key) {
              vec = dirToVector[key];
              if (vec) {
                vec.itemNum = item;
                socket.emit(action, vec);
              }
            });
          return true;
        }
      });
  }
}


window.addEventListener("keydown", function (e) {
    var code = e.keyCode;
    interpCallback(code);
  });

   
function drawMap(mapUpdates) {

    if(typeof mapData[level] == 'undefined') { initMapLevel(level); }

    for(i in mapUpdates) {
        var coords = i.split(',');
        mapData[level][coords[0]][coords[1]] = mapUpdates[i];
    }

    for(i=0; i < ROT.DEFAULT_WIDTH; ++i) {
        for(j=0; j < ROT.DEFAULT_HEIGHT; ++j) {
            drawMapChar(i, j, mapData[level][i][j]==0?".":" ", "#fff", ["#000", "#777"][mapData[level][i][j]]);
        }
    }
}

function updateEntities(posData) {
    var i;
    if(posData.clear) { entities[level] = {}; }

    if(posData["add"]) {
        for(i in posData["add"]) {
            entities[level][i] = posData["add"][i];
        }
    }

    if(posData["remove"]) {
        for(i=0; i<posData["remove"].length; ++i) {
            delete entities[level][posData["remove"][i]];
        }
    }
}

function drawEntities() {
    for(i in entities[level]) {
        var pos = entities[level][i];

        if(pos.blocking) { drawMapChar(pos.x, pos.y, pos.symbol, pos.color); }
        else {
            var hasBlocking = false;
            for(var j in entities[level]) {
                if(entities[level][j].blocking && entities[level][j].x == pos.x && entities[level][j].y == pos.y) {
                    hasBlocking = true;
                    break;
                }
            }
            if(!hasBlocking) { drawMapChar(pos.x, pos.y, pos.symbol, pos.color); }
        }
    }
}

function redraw(map, posData) {

    if(posData["add"] && posData["add"][id] != undefined) {
        level = posData["add"][id].z;
        if(entities[level] == undefined) { entities[level] = {}; }
    }

    updateEntities(posData);

    drawMap(map);
    drawEntities();

    drawHealth(health);
}

function drawMapChar(x,y,ch,fg,bg) {
    if(!inventoryUp || ((x < 2 || x > 36) && (y < 4 || y > 14))) {
        display.draw(x, y+2, ch, fg, bg);
    }
}

function showInventory() {
    inventoryUp = true;
    var thirtySpaces = "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0";
    display.drawText(2, 3, "--------------------------------");
    display.drawText(2, 4, ("| Inventory" + thirtySpaces).substr(0,30) + " |");
    var invCount = 0;
    for(var i=0; i<10; ++i) {
        if(inventory[i]) {
            display.drawText(2, invCount+5, ("| " + i + ": " + inventory[i].name + thirtySpaces).substr(0,30) + " |", 34);
            invCount++;
        }
    }
    for(i=0; i<10 - invCount; ++i) {
        display.drawText(2, invCount+i+5, "| " + thirtySpaces + " |", 34);
    }
    display.drawText(2, invCount+i+5, "--------------------------------");
}

function hideInventory() {
    inventoryUp = false;
    redraw({}, {});
}

function defaultItemForAction(actionName) {
    if(actionName == "shoot") {
        for(var i=0; i<inventory.length; ++i) {
            if(inventory[i] && inventory[i].shootable) return i;
        }
    }

    return null;
}

function showMessage(m) {
    display.drawText(0, 0, "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0", "#000", "#000");
    display.drawText(0, 1, "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0", "#000", "#000");
    display.drawText(0,  0, m);
}

socket.on("output", function(m) {
    showMessage(m);
});
<div id="canvasContainer" style="float:left; border: thick solid black;"></div>l

<div style="float:left;">
<div style="width:400px; padding: 10px;">
<ul>
<li><b>arrow keys</b>: movement</li>
<li><b>h,j,k,l</b>: left, down, up, right</li>
<li><b>i</b>: show inventory</li>
<li><b>,</b> (comma): pick up items</li>
<li><b>o</b> <i>[direction]</i>: open door in [direction]</li>
<li><b>c</b> <i>[direction]</i>: close door in [direction]</li>
<li><b>d</b> <i>[number]</i>: drop item in slot [number]</li>
<li><b>s</b> <i>[number] [direction]</i>: shoot item [number] in [direction] (e.g., <b>s2h</b> shoots item in slot 5 to the left)</li>
<li><b>s</b> <i>[direction]</i>: shoot the first shootable item in your inventory in [direction]</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
<script src="https://ondras.github.io/rot.js/rot.js"></script>
Source Link
apsillers
  • 115.7k
  • 2
  • 37
  • 36

Multiplayer Websocket test! Hack you fellow Stackians to bits! I hope you know your HJKL Nethack key controls... (I'm afraid you'll need to fullscreen this one to make it actually playable.)

ROT.RNG.setSeed(12345);
ROT.DEFAULT_WIDTH = 83;
ROT.DEFAULT_HEIGHT = 32;

var id, level = 1;
var mapData = [];
var inventory = [];
var inventoryUp = false;
var health = 10;
var entities = [];

var display = new ROT.Display({fontSize:11});
document.getElementById("canvasContainer").appendChild(display.getContainer());

var socket = io.connect('https://taggem-apsillers.rhcloud.com:8443');
socket.emit("player");
socket.on("map+pos", function(updates) { redraw(updates.map, updates.pos); });
socket.on("map", function(mapUpdates) { redraw(mapUpdates, {}); });
socket.on("pos", function(pos) { redraw({}, pos); });
socket.on("id", function(myid) {
    id = myid;

    display.clear();

    level = 1;
    mapData = [];
    inventory = [];
    inventoryUp = false;
    health = 10;
    entities = [];

    entities[1] = {};
    messages = [];

    initMapLevel(1);
});

socket.on("inventory", function(data) {
    if(data.change == "add") {
        inventory[data.slot] = data.item;
    } else if(data.change == "remove") {
        delete inventory[data.slot];
    }
});

socket.on("health", function(data) { health = data.value; drawHealth(data.value); });
function drawHealth(value) {
    for(var i=0; i < value; ++i) {
        display.draw(82, 10-i, "o", "#F00", "#000");
    }

    for(;i<10; ++i) {
        display.draw(82, 10-i, "-", "#F00", "#000");
    }
}

function initMapLevel(level) {
    mapData[level] = [];
    for(var i=0; i < ROT.DEFAULT_WIDTH; ++i) {
        for(var j=0; j < ROT.DEFAULT_HEIGHT; ++j) {
            if(mapData[level][i] == null) { mapData[level][i] = []; }
            mapData[level][i][j] = -1;
        }
    }
}

var dirToVector = {};
dirToVector[ROT.VK_H] = { x:-1, y:0};
dirToVector[ROT.VK_L] = { x:1, y:0};
dirToVector[ROT.VK_K] = { x:0, y:-1};
dirToVector[ROT.VK_J] = { x:0, y:1};
dirToVector[ROT.VK_Y] = { x:-1, y:-1};
dirToVector[ROT.VK_U] = { x:1, y:-1};
dirToVector[ROT.VK_B] = { x:-1, y:1};
dirToVector[ROT.VK_N] = { x:1, y:1};

var keyToItem = {};
for (i = 0; i < 10; i++) {
  keyToItem[i + "0".charCodeAt(0)] = i;
}

var interpreters = {};
interpreters[ROT.VK_I]     = 
  function () {
    showInventory();
    interpCallback = function (key) {
      hideInventory();
      interpCallback = defaultInterpreter;
      if (key != ROT.VK_I) {
        defaultInterpreter(key);
      }
    };
  };
interpreters[ROT.VK_Z]     = DirCommand("zap");
interpreters[ROT.VK_A]     = DirCommand("mine");
interpreters[ROT.VK_S]     = ItemDirCommand("shoot");
interpreters[ROT.VK_O]     = DirCommand("open");
interpreters[ROT.VK_C]     = DirCommand("close");
interpreters[ROT.VK_COMMA] = Command("pickup");
interpreters[ROT.VK_D]     = ItemCommand("drop");

for (moveKey in dirToVector) {
  interpreters[moveKey] = (function (key) {
      return function () { socket.emit("move", dirToVector[key]); }
    })(moveKey);
}

interpreters[ROT.VK_ESCAPE] = function () { 
    hideInventory(); 
    interpCallback = defaultInterpreter;
};

var defaultInterpreter = function (key) {
  if (key in interpreters) {
    interpreters[key]();
  }
};

var interpCallback = defaultInterpreter;

function makeCB(f) {
  return function (k) {
    if (!f(k)) {
      interpCallback = defaultInterpreter;
    }
  }
};


function Command (action) {
  return function () {
    socket.emit(action);
  }
}

function DirCommand (action) {
  return function () {
    interpCallback = makeCB( function (key) {
        vec = dirToVector[key];
        if (vec) {
          socket.emit(action, vec);
        }
      });
  }
}

function ItemCommand (action) {
  return function () {
    interpCallback = makeCB( function (key) {
        item = keyToItem[key];
        if (item <= 9 && item >= 0) {
          socket.emit(action, {"itemNum":item});
        }
      });
  }
}

function ItemDirCommand (action) {
  return function () {
    interpCallback = makeCB( function (key) {
        item = keyToItem[key];
        if (item == undefined) {
          item = defaultItemForAction(action);
          vec = dirToVector[key];
          if (vec) {
            vec.itemNum = item;
            socket.emit(action, vec);
          }
        }
        else if (item <= 9 && item >= 0) {
          interpCallback = makeCB( function (key) {
              vec = dirToVector[key];
              if (vec) {
                vec.itemNum = item;
                socket.emit(action, vec);
              }
            });
          return true;
        }
      });
  }
}


window.addEventListener("keydown", function (e) {
    var code = e.keyCode;
    interpCallback(code);
  });

   
function drawMap(mapUpdates) {

    if(typeof mapData[level] == 'undefined') { initMapLevel(level); }

    for(i in mapUpdates) {
        var coords = i.split(',');
        mapData[level][coords[0]][coords[1]] = mapUpdates[i];
    }

    for(i=0; i < ROT.DEFAULT_WIDTH; ++i) {
        for(j=0; j < ROT.DEFAULT_HEIGHT; ++j) {
            drawMapChar(i, j, mapData[level][i][j]==0?".":" ", "#fff", ["#000", "#777"][mapData[level][i][j]]);
        }
    }
}

function updateEntities(posData) {
    var i;
    if(posData.clear) { entities[level] = {}; }

    if(posData["add"]) {
        for(i in posData["add"]) {
            entities[level][i] = posData["add"][i];
        }
    }

    if(posData["remove"]) {
        for(i=0; i<posData["remove"].length; ++i) {
            delete entities[level][posData["remove"][i]];
        }
    }
}

function drawEntities() {
    for(i in entities[level]) {
        var pos = entities[level][i];

        if(pos.blocking) { drawMapChar(pos.x, pos.y, pos.symbol, pos.color); }
        else {
            var hasBlocking = false;
            for(var j in entities[level]) {
                if(entities[level][j].blocking && entities[level][j].x == pos.x && entities[level][j].y == pos.y) {
                    hasBlocking = true;
                    break;
                }
            }
            if(!hasBlocking) { drawMapChar(pos.x, pos.y, pos.symbol, pos.color); }
        }
    }
}

function redraw(map, posData) {

    if(posData["add"] && posData["add"][id] != undefined) {
        level = posData["add"][id].z;
        if(entities[level] == undefined) { entities[level] = {}; }
    }

    updateEntities(posData);

    drawMap(map);
    drawEntities();

    drawHealth(health);
}

function drawMapChar(x,y,ch,fg,bg) {
    if(!inventoryUp || ((x < 2 || x > 36) && (y < 4 || y > 14))) {
        display.draw(x, y+2, ch, fg, bg);
    }
}

function showInventory() {
    inventoryUp = true;
    var thirtySpaces = "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0";
    display.drawText(2, 3, "--------------------------------");
    display.drawText(2, 4, ("| Inventory" + thirtySpaces).substr(0,30) + " |");
    var invCount = 0;
    for(var i=0; i<10; ++i) {
        if(inventory[i]) {
            display.drawText(2, invCount+5, ("| " + i + ": " + inventory[i].name + thirtySpaces).substr(0,30) + " |", 34);
            invCount++;
        }
    }
    for(i=0; i<10 - invCount; ++i) {
        display.drawText(2, invCount+i+5, "| " + thirtySpaces + " |", 34);
    }
    display.drawText(2, invCount+i+5, "--------------------------------");
}

function hideInventory() {
    inventoryUp = false;
    redraw({}, {});
}

function defaultItemForAction(actionName) {
    if(actionName == "shoot") {
        for(var i=0; i<inventory.length; ++i) {
            if(inventory[i] && inventory[i].shootable) return i;
        }
    }

    return null;
}

function showMessage(m) {
    display.drawText(0, 0, "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0", "#000", "#000");
    display.drawText(0, 1, "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0", "#000", "#000");
    display.drawText(0,  0, m);
}

socket.on("output", function(m) {
    showMessage(m);
});
<div id="canvasContainer" style="float:left; border: thick solid black;"></div>l

<div style="float:left;">
<div style="width:400px; padding: 10px;">
<ul>
<li><b>h,j,k,l</b>: left, down, up, right</li>
<li><b>i</b>: show inventory</li>
<li><b>,</b> (comma): pick up items</li>
<li><b>o</b> <i>[direction]</i>: open door in [direction]</li>
<li><b>c</b> <i>[direction]</i>: close door in [direction]</li>
<li><b>d</b> <i>[number]</i>: drop item in slot [number]</li>
<li><b>s</b> <i>[number] [direction]</i>: shoot item [number] in [direction] (e.g., <b>s2h</b> shoots item in slot 5 to the left)</li>
<li><b>s</b> <i>[direction]</i>: shoot the first shootable item in your inventory in [direction]</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
<script src="https://ondras.github.io/rot.js/rot.js"></script>