'} if (grid[x][y] == ENEMY) {document.getElementById("grid_"+x+"_"+y).innerHTML += "

'} if (grid[x][y] == WALL) {document.getElementById("grid_"+x+"_"+y).className = "wallTile"} if (grid[x][y] == EXIT) { document.getElementById("grid_"+x+"_"+y).className = "doorTile"; document.getElementById("grid_"+x+"_"+y).innerHTML += "'} } }mapWrapper.style.visibility = "visible"; } /* Internal functions for moving the player around */ //Create X, Y coordinates function Vector2( x, y ){ this.x = x; this.y = y; } /* ======================= * Player Sprite Object * ======================= */ var myPlayer = { position: new Vector2( 0, 0 ), }; var newX, newY; function setLocation(x, y) { newX = x; myPlayer.position.x = x; document.getElementById("player").style.left = x*gridXsize + "vw"; newY = y; myPlayer.position.y = y; document.getElementById("player").style.top = y*gridYsize + "vh"; } var gridXsize = 4.75 // screen.width 360 / 20; IF px, we're using vw and vh here var gridYsize = 3.85 // screen.height 640 / 27.7ish function setInMotionX() { document.getElementById("player").style.left = newX*gridXsize + "vw"; } function setInMotionY() { document.getElementById("player").style.top = newY*gridYsize + "vh"; } var walkTimer = false; function pressButton(x) { if (walkTimer === false) { walkTimer = true; switch(x) { case 'up': setTimeout(function(){ moveUp(); walkTimer = false}, 250); break; case 'down': setTimeout(function(){ moveDown(); walkTimer = false}, 250); break; case 'left': setTimeout(function(){ moveLeft(); walkTimer = false}, 250); break; case 'right': setTimeout(function(){ moveRight(); walkTimer = false}, 250); break; } } } function moveUp() { lastPositionY = myPlayer.position.y; lastPositionX = myPlayer.position.x; myPlayer.position.y = myPlayer.position.y-1; newY = (myPlayer.position.y); setInMotionY(); checkForCollision(newX,newY); } function moveDown() { lastPositionY = myPlayer.position.y; lastPositionX = myPlayer.position.x; myPlayer.position.y = myPlayer.position.y+1; newY = (myPlayer.position.y); setInMotionY(); checkForCollision(newX,newY); } function moveLeft() { lastPositionX = myPlayer.position.x; lastPositionY = myPlayer.position.y; myPlayer.position.x = myPlayer.position.x-1; newX = (myPlayer.position.x); setInMotionX(); checkForCollision(newX,newY); } function moveRight() { lastPositionX = myPlayer.position.x; lastPositionY = myPlayer.position.y; myPlayer.position.x = myPlayer.position.x+1; newX = (myPlayer.position.x); setInMotionX(); checkForCollision(newX,newY); } /*==============================================*/ /*==============================================*/ /* ** Collision Checks ** Current Functionality: Key, Item, Wall, Exit Proposed Functionality: COIN, ENEMY, PORTAL, DOOR, CHEST, EVENT, ITEM, NPC, BOSS; Removes "checkEvent()" function by streamlining events and objects **Collision Checks** DEFAULT case. Will draw a randomBattle(); (Proposed) On hold until further developments have taken place. WALL case. Sets player location to last location. (Complete) Simple. KEY and COIN increment a value of their object. (Proposed) Easy. ITEM increments a value of a inventory object. (How to write this without a specific instance check?) /* /*==============================================*/ /*==============================================*/ function checkForCollision() { switch( grid[ newX ][ newY ] ){ case KEY: out("Key Found") //Collision with COIN out to debug console grid[ newX ][ newY ] = ""; document.getElementById("grid_"+newX+"_"+newY).innerHTML = ""; //Reset graphics and variables associated with coin break; case ITEM: out("Item Found") //Collision with item out to Debug Console //if (ITEM.value === "BluPotion") {inventory.bluPotion++} // <--- Make this work! grid[ newX ][ newY ] = ""; //erases the enemy's grid location on the map document.getElementById("grid_"+newX+"_"+newY).innerHTML = ""; break; case WALL: out("Thats a wall") //Collision with wall setLocation(lastPositionX, lastPositionY); //You can't go that way break; case OBJECT: out("Solid object collision") //Collision with wall setLocation(lastPositionX, lastPositionY); //You can't go that way break; case EXIT: grid[newX][newY] = "" document.getElementById("grid_"+newX+"_"+newY).innerHTML = ""; setLocation(lastPositionX, lastPositionY); //You can only go that way if the door is open document.getElementById(`mapWrapper`).innerHTML = ``; switch(currentFloor) { case 0: toggleHide("controller"); mapWrapper.style.visibility = "hidden"; mapWrapper.style.backgroundImage = ""; setTimeout(function(){ renderMap(1); setLocation(lastPositionX, lastPositionY); },3); currentFloor = 1; break; case 1: toggleHide("controller"); mapWrapper.style.visibility = "hidden"; mapWrapper.style.backgroundImage = ""; setTimeout(function(){ renderMap(2); setLocation(lastPositionX, lastPositionY); },3); currentFloor = 2; break; case 2: toggleHide("controller"); mapWrapper.style.visibility = "hidden"; mapWrapper.style.backgroundImage = ""; setTimeout(function(){ renderMap(3); setLocation(lastPositionX, lastPositionY); },3); currentFloor = 3; break; case 3: toggleHide("controller"); mapWrapper.style.visibility = "hidden"; mapWrapper.style.backgroundImage = ""; setTimeout(function(){ renderMap(4); setLocation(lastPositionX, lastPositionY); },3); currentFloor = 4; break; case 4: toggleHide("controller"); mapWrapper.style.visibility = "hidden"; mapWrapper.style.backgroundImage = ""; setTimeout(function(){ renderMap(5); setLocation(lastPositionX, lastPositionY); },3); currentFloor = 5; break; case 5: toggleHide("controller"); mapWrapper.style.visibility = "hidden"; mapWrapper.style.backgroundImage = ""; setTimeout(function() { renderMap(0); setLocation(lastPositionX, lastPositionY); },3); currentFloor = 0; break; } default: // He is safe to walk now if (foundEvent === false) { break; } } } /*==============================================*/ /*==============================================*/ /* ** Functions for Easier Object Manipulation ** /* /*==============================================*/ /*==============================================*/ function dismiss(x) { document.getElementById(x).style.display = "none"; } function unDismiss(x) { document.getElementById(x).style.display = "block"; } function toggleHide(x) { if( document.getElementById(x).style.visibility === "hidden") {document.getElementById(x).style.visibility = "visible"; } else { document.getElementById(x).style.visibility = "hidden"; } } function toggleHideByClass(y) { //y = (DOM tag).map, then gets another function to check it against arr = Array.prototype.slice.call(document.getElementsByClassName(y)); arr.forEach(function(item){ if (item.style.visibility === "hidden") { item.style.visibility = "visible" } else { item.style.visibility = "hidden" } }); } function toggleHideByTag(y) { //y = (DOM tag).map, then gets another function to check it against arr = Array.prototype.slice.call(document.getElementsByTagName(y)); arr.forEach(function(item){ item.style.visibility = "hidden"}); } /*==============================================*/ /*==============================================*/ /* ** Draggable UX Module ** /* /*==============================================*/ /*==============================================*/ function drag_start(event) { var style = window.getComputedStyle(event.target, null); event.dataTransfer.setData("text/plain", (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY)); } function drag_over(event) { event.preventDefault(); return false; } function drag_start(event) { var style = window.getComputedStyle(event.target, null); event.dataTransfer.setData("text/plain", (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY)); } var dm; function drop(event) { var offset = event.dataTransfer.getData("text/plain").split(','); dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px'; dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px'; event.preventDefault(); return false; } function drag_over(event) { event.preventDefault(); return false; } window.onload = function() { var dm; document.getElementById("controller").addEventListener('dragstart', drag_start,false); document.body.addEventListener('dragover',drag_over,false); document.body.addEventListener('drop',drop,false); }; /*==============================================*/ /*==============================================*/ /* vvvvv New Codes Go Here vvvvv /* /*==============================================*/ /*==============================================*/

Map Grid Helper with Walker