We Keep Coding

JavaScript - Moving a character around using WASD but trouble breaking down movement into simpler functions

I'm making a puzzle game where the user uses WASD to move a character up, left, down, right respectively. It works fine at the moment but I was wondering if there was a way to break the code down into more intuitive functions. Below is my code:
function move(e)
{
for (var y = 0; y < mapHeight; y++) {
for (var x = 0; x < mapWidth; x++) {
if (map[y][x] == "#" || map[y][x] == "+") {
break;
}
}
if (map[y][x] == "#" || map[y][x] == "+") {
break;
}
}
var player_x = x;
var player_y = y;
if (e.key == 'w') {
var player_new_x = player_x;
var player_new_y = player_y - 1;
if (moveBox(player_new_x, player_new_y, "up") === false) {
return;
}
if (map[player_new_y][player_new_x] == " " ||
map[player_new_y][player_new_x] == ".") {
if (map[player_new_y][player_new_x] == " ") {
map[player_new_y][player_new_x] = "#";
} else if (map[player_new_y][player_new_x] == ".") {
map[player_new_y][player_new_x] = "+";
}
if (map[player_y][player_x] == "#") {
map[player_y][player_x] = " ";
} else if (map[player_y][player_x] == "+") {
map[player_y][player_x] = ".";
}
}
} else if (e.key == 's') {
var player_new_x = player_x;
var player_new_y = player_y + 1;
if (moveBox(player_new_x, player_new_y, "down") === false) {
return;
}
if (map[player_new_y][player_new_x] == " " ||
map[player_new_y][player_new_x] == ".") {
if (map[player_new_y][player_new_x] == " ") {
map[player_new_y][player_new_x] = "#";
} else if (map[player_new_y][player_new_x] == ".") {
map[player_new_y][player_new_x] = "+";
}
if (map[player_y][player_x] == "#") {
map[player_y][player_x] = " ";
} else if (map[player_y][player_x] == "+") {
map[player_y][player_x] = ".";
}
}
} else if (e.key == 'a') {
var player_new_x = player_x - 1;
var player_new_y = player_y;
if (moveBox(player_new_x, player_new_y, "left") === false) {
return;
}
if (map[player_new_y][player_new_x] == " " ||
map[player_new_y][player_new_x] == ".") {
if (map[player_new_y][player_new_x] == " ") {
map[player_new_y][player_new_x] = "#";
} else if (map[player_new_y][player_new_x] == ".") {
map[player_new_y][player_new_x] = "+";
}
if (map[player_y][player_x] == "#") {
map[player_y][player_x] = " ";
} else if (map[player_y][player_x] == "+") {
map[player_y][player_x] = ".";
}
}
} else if (e.key == 'd') {
var player_new_x = player_x + 1;
var player_new_y = player_y;
if (moveBox(player_new_x, player_new_y, "right") === false) {
return;
}
if (map[player_new_y][player_new_x] == " " ||
map[player_new_y][player_new_x] == ".") {
if (map[player_new_y][player_new_x] == " ") {
map[player_new_y][player_new_x] = "#";
} else if (map[player_new_y][player_new_x] == ".") {
map[player_new_y][player_new_x] = "+";
}
if (map[player_y][player_x] == "#") {
map[player_y][player_x] = " ";
} else if (map[player_y][player_x] == "+") {
map[player_y][player_x] = ".";
}
}
} else {
return;
}
render();
}
Is it possible to make four functions, one for each of the movement keys? Any help would be much appreciated

Yes
It´s possible to do what you want, 4 different functions
But ... you should intercept the events keydown (when the user presses the key) and keyup (when the user releases the key)
As long as the key is "pressed" you do the movement
You can create an object like this
let move = { moveH : 0 , moveV :0 }
When the keydown event is detected for "a" -> {moveH : -1, moveV :0}
"s" -> { moveH :0 , moveV :1 }
"w" -> { moveH :0 , moveV :-1 }
"d" -> { moveH :1 , moveV :0 }
When the keyup event is detected .. for any key -> {moveH :0 , moveV:0 }
Meanwhile
apply the move to the object on the screen
something like
stuff.position = { x : stuff.position.x + move.moveH , y: stuff.position.y + move.moveV }

Javascript websocket won't stay open?

I'm creating a javascript WebSocket chat room, but immediately after opening, it closes again. The code is pretty long for an online forum, but if you need it I'll be happy to give it to you. I'm also using chrome.
Here's the code:
window.onbeforeunload = function() {
socket.send("alert('" + username + " has disconnected from the server.')");
socket.close();
}
var username = prompt("Enter your name (It name will be displayed to others)")
var socket = new WebSocket("MY_WEBSOCKET_URL");
socket.onopen = function() {
socket.send("otherusers();");
alert("Connected to server. Press 'esc' to disconnect. Type 'send' to send something.");
alert("The users on this server will be displayed shortly (if any)")
socket.send("alert('A new user has connected with the username " +
username + ".')")
};
socket.onclose = function() {
alert("Disconnected from server.")
}
socket.onerror = function(e) {
alert("There was a server error: " + e.data);
}
socket.onmessage = function(e) {
eval(e.data);
//create history
save(e.data);
}
window.addEventListener("keydown", keydown);
window.addEventListener("keyup", keyup);
var s = false;
var ee = false;
var n = false;
function keydown(e) {
//send
if (e.keyCode == 83) {
s = true;
}
if (e.keyCode == 69) {
if (s == true) {
ee = true;
}
}
if (e.keyCode == 78) {
if (ee == true) {
n = true;
}
}
if (e.keyCode == 68) {
if (n == true) {
s = false;
e = false;
n = false;
var message = prompt("What message would you like to send? (Type 'Stop' to send nothing)");
send(message);
}
}
if (e.keyCode == 192) {
var messages = document.getElementsByClassName("ALINTIOKNALSFJI");
for (var i = 0, max = messages.length; i < max; i++) {
messages[i].setAttribute("style", "color: black; background-color: white;");
}
}
if (e.keyCode == 27) {
socket.send("alert('" + username + " has disconnected from the server.')");
socket.close();
window.removeEventListener("keydown", keydown);
window.removeEventListener("keyup", keyup);
}
}
function keyup(e) {
if (e.keyCode == 192) {
var messages = document.getElementsByClassName("ALINTIOKNALSFJI");
for (var i = 0, max = messages.length; i < max; i++) {
messages[i].setAttribute("style", "color: transparent; background-color: transparent;");
}
}
}
function send(message) {
if (message !== "Stop") {
socket.send("alert('Message recieved from " + username + ": " + message + "');");
save("alert('Message sent: " + message + "');");
}
}
function otherusers() {
socket.send("alert('User on server: " + username + "');")
}
function save(message, float) {
var p = document.createElement("p");
p.innerHTML = message;
if (!float) {
float = "left";
}
p.setAttribute("style", "color: transparent; z-index: 1000000; background-color: transparent; float: " + float + ";");
p.setAttribute("class", "ALINTIOKNALSFJI")
document.body.appendChild(p);
}
It gives me this error:
SyntaxError: Unexpected token ':'
at WebSocket.socket.onmessage (/hackertools/chat.js:20:10)
FYI this is a bookmarklet.

Step identification bug in script using Material Steppers

I am working on a small AngularJS application with with Material Steppers.
I have to select items from two sections of the page and return true only if the items from both sections belong to the category with id (categoryID) 1.
Choosing items from section A already changes the variable this.isTriggerB, that should only be change after choosing from section A:
class Controller {
constructor($mdStepper) {
this.isTriggerA = false;
this.isTriggerB = false;
this.clickedStepNumber = 0;
getCurrentStep() {
this.steppers = this.$mdStepper('stepper');
const steps = this.steppers.steps;
steps.forEach((el, index) => {
let step = this.steppers.steps[index];
if (step.isClicked()) {
this.clickedStepNumber = step.stepNumber;
}
});
}
checkCategory() {
this.getCurrentStep();
if (this.filter.provider) {
let categoryID = parseInt(this.filter.category.id, 10);
console.log('Cid: ' + categoryID);
if (categoryID !== 1) {
this.isTestPassed = false;
} else {
if (parseInt(this.clickedStepNumber, 10 === 1)) {
this.isTriggerA = true;
console.log('Step: ' + this.clickedStepNumber);
console.log("A1: " + this.isTriggerA);
console.log("B1: " + this.isTriggerB);
}
if (parseInt(this.clickedStepNumber, 10 === 2)) {
this.isTriggerB = true;
console.log('Step: ' + this.clickedStepNumber);
console.log("A2: " + this.isTriggerA);
console.log("B2: " + this.isTriggerB);
}
if (this.isTriggerA === true && this.isTriggerB === true) {
this.isTestPassed = true;
} else {
this.isTestPassed = false;
}
}
}
}
}
The script should not even go inside if it is executing.
It should treat the 2 cases (steps) differently.
What am I doing wrong?

Move the banana:
if (categoryID !== 1) {
this.isTestPassed = false;
} else {
̶i̶f̶ ̶(̶p̶a̶r̶s̶e̶I̶n̶t̶(̶t̶h̶i̶s̶.̶c̶l̶i̶c̶k̶e̶d̶S̶t̶e̶p̶N̶u̶m̶b̶e̶r̶,̶ ̶1̶0̶ ̶=̶=̶=̶ ̶1̶)̶)̶ ̶{̶
if (parseInt(this.clickedStepNumber, 10) === 1) {
this.isTriggerA = true;
console.log('Step: ' + this.clickedStepNumber);
console.log("A1: " + this.isTriggerA);
console.log("B1: " + this.isTriggerB);
}
̶i̶f̶ ̶(̶p̶a̶r̶s̶e̶I̶n̶t̶(̶t̶h̶i̶s̶.̶c̶l̶i̶c̶k̶e̶d̶S̶t̶e̶p̶N̶u̶m̶b̶e̶r̶,̶ ̶1̶0̶ ̶=̶=̶=̶ ̶2̶)̶)̶ ̶{̶
if (parseInt(this.clickedStepNumber, 10) === 2) {
this.isTriggerB= true;
console.log('Step: ' + this.clickedStepNumber);
console.log("A2: " + this.isTriggerA);
console.log("B2: " + this.isTriggerB);
}

How to assign 2 or + variables

sorry I'm french and I speak just few word in english.
I have a question maybe stupid :
Original code :var test = {
commandChar : "!",
};
for (i = 0; i < commands.length; i++) {
if (commands[i].hasOwnProperty('alt')) {
for (j = 0; j < commands[i].alt.length; j++) {
if ((index = text.toLowerCase().search(new RegExp("^\\" + test.commandChar + commands[i].alt[j].toLowerCase() + "\\b"))) >= 0) {
break;
}
}
}
if (index < 0) {
index = text.toLowerCase().search("^\\" + "[" + test.commandChar + ",##]" + commands[i].name.toLowerCase() + "\\b");
}
if (index > -1) {
var command = text.slice(index).split(" ");
if (!(commands[i].op || commands[i].elevated) || host || mod || authorised) {
if (!(commands[i].mod) || host || mod) {
commands[i].command(command, user);
}
}
else {
//sendChat("You have to be authorised to use " + commands[i].name + ".");
}
break;
}
}
This is an little bot, example.
If commandChar : "!". !help work but /help dont work.
I want just use this commandChar with many symbole
like
commandChar : "!", "/";
for use !help and /help
I think it should or array or regexpr
Sorry if I did not express myself properly it's complicated, thanks

There's many ways to do it but here's a quick one:
function isValidCommandChar(str) {
return "!/.".indexOf(str.charAt(0)) > -1;
}
isValidCommandChar("!help"); // true
isValidCommandChar("#help"); // false
isValidCommandChar("/help"); // true
isValidCommandChar(".help"); // true

Chrome reading javascript differently on different machines

The problem here is that Google Chrome doesn't seem to work for many of the users of my site. I'm not yet sure if all of them are using Vista, but I know some are. I am using Windows 7 and it works for me. I have made sure they have the latest version of Chrome, and so do I. What might the problem be?
My guess is that it has something to do with encoding the URL, because the function that does not work involves a Javascript POST to another page.
Okey, this is how it looks:
function searchDB() {
$(".transparent_class").show();
strHolder = $('#tbxSearchFor').val().replace("å", "char01").replace("ä", "char02").replace("ö", "char03");
for (i = 0; i < 10; i++)
strHolder = strHolder.replace("å", "char01").replace("ä", "char02").replace("ö", "char03");
vTxtBox = '&vTxtBox=' + encodeURIComponent(strHolder);
vResultHasTo = "&vResultHasTo=1";
vChangedAfter = '&vChangedAfter=' + $('#tbxChangedAfter').val();
vChangedBefore = '&vChangedBefore=' + $('#tbxChangedBefore').val();
vCreatedAfter = '&vCreatedAfter=' + $('#tbxCreatedAfter').val();
vCreatedBefore = '&vCreatedBefore=' + $('#tbxCreatedBefore').val();
if ($('#cbSearchNode').is(':checked')) {
vSearchNode = '&vSearchNode=' + $('#hfSelectedNode').val();
}
else
vSearchNode = '&vSearchNode=false';
if ($('#cbSearchDescription').is(':checked')) {
vSearchDescription = '&vSearchDescription=true';
}
else
vSearchDescription = '&vSearchDescription=false';
if ($('#cbSearchAdminDescription').is(':checked')) {
vSearchAdminDescription = '&vSearchAdminDescription=true';
}
else
vSearchAdminDescription = '&vSearchAdminDescription=false';
if ($('#cbSearchEnvironment').is(':checked')) {
vSearchEnvironment = '&vSearchEnvironment=true';
}
else
vSearchEnvironment = '&vSearchEnvironment=false';
vSearchStatus = '&vSearchStatus=' + $('#ddlSearchStatus').val();
vCurrentSort = "&vCurrentSort=";
if(currentSort == "up" || currentSortColumn != column){
if(column == "1")
vCurrentSort += "namedown";
else if(column == "2")
vCurrentSort += "iddown";
else if(column == "3")
vCurrentSort += "statusdown";
else if(column == "4")
vCurrentSort += "createddown";
else
vCurrentSort += "changeddown";
}
else {
if(column == "1")
vCurrentSort += "nameup";
else if(column == "2")
vCurrentSort += "idup";
else if(column == "3")
vCurrentSort += "statusup";
else if(column == "4")
vCurrentSort += "createdup";
else
vCurrentSort += "changedup";
}
$.get('GridViewService.aspx?updater=' + getTime() + vTxtBox + vResultHasTo + vChangedAfter + vChangedBefore + vCreatedAfter + vCreatedBefore + vSearchNode + vSearchStatus + vSearchDescription + vSearchAdminDescription + vSearchEnvironment + vCurrentSort, function(data) {
$("#searchViewBox").html(data);
$('#searchViewBox input').remove();
theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
$(".transparent_class").hide();
});
}
This URL gets formatted in a bad way when using chrome on some machine, causing an exception in GridViewService.aspx, which leads to the code in the last brackets not being executed.