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>