ARTICLE AD BOX
I'm trying to make a graphics test using tables as individual pixels, where you can move around using WASD, with the player character being the "@" symbol.
I'm using this code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>array test</title> <style> .grid { padding: 2px; } </style> </head> <body id="body"> <button id="dev">dev mode</button> <hr> <table> <tr> <!-- row 1 --> <td id="a1" class="grid"></td> <td id="a2" class="grid"></td> <td id="a3" class="grid"></td> <td id="a4" class="grid"></td> <td id="a5" class="grid"></td> </tr> <tr> <td id="b1" class="grid"></td> <td id="b2" class="grid"></td> <td id="b3" class="grid"></td> <td id="b4" class="grid"></td> <td id="b5" class="grid"></td> </tr> <tr> <td id="c1" class="grid"></td> <td id="c2" class="grid"></td> <td id="c3" class="grid"></td> <td id="c4" class="grid"></td> <td id="c5" class="grid"></td> </tr> <tr> <td id="d1" class="grid"></td> <td id="d2" class="grid"></td> <td id="d3" class="grid"></td> <td id="d4" class="grid"></td> <td id="d5" class="grid"></td> </tr> <tr> <td id="e1" class="grid"></td> <td id="e2" class="grid"></td> <td id="e3" class="grid"></td> <td id="e4" class="grid"></td> <td id="e5" class="grid"></td> </tr> </table> </body> <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script> <script> var tog = 1; var code = e.keyCode || e.which; var char = "@"; // player char const val = [ "a1", "a2", "a3", "a4", "a5", // div "b1", "b2", "b3", "b4", "b5", // div "c1", "c2", "c3", "c4", "c5", // div "d1", "d2", "d3", "d4", "d5", // div "e1", "e2", "e3", "e4", "e5" ]; $("#dev").on("click", function() { if (tog === 1) { $(".grid").attr("style", "border: 1px solid black;"); tog = 2; } else if (tog === 2) { $(".grid").attr("style", "border: none;"); tog = 1; } }); function getChar() { var abc = val.find((element) => $("#" + element).html() == "@"); return abc; } function nextLetter(s){ return s.replace(/([a-zA-Z])[^a-zA-Z]*$/, function(a){ var c= a.charCodeAt(0); switch(c){ case 90: return 'A'; case 122: return 'a'; default: return String.fromCharCode(++c); } }); } function movement(type) { if (type === "w") { getChar(); if (abc.substring(0,1) === "a") { var useless = 0; // do nothing because you cant move out of bounds } else { $("#" + abc).html(""); $("#" + nextLetter(abc.substring(0,1)) + abc.substring(1,1)).html(char); } } if (type === "a") { getChar(); if (abc.substring(1,1) === "1") { var useless = 0; // do nothing because you cant move out of bounds } else { $("#" + abc).html(""); $("#" + abc.substring(0,1) + (abc.substring(1,1) - 1)).html(char); } } if (type === "s") { getChar(); if (abc.substring(0,1) === "e") { var useless = 0; // do nothing because you cant move out of bounds } else { $("#" + abc).html(""); $("#" + nextLetter(abc.substring(0,1)) + abc.substring(1,1)).html(char); } } if (type === "d") { getChar(); if (abc.substring(1,1) === "5") { var useless = 0; // do nothing because you cant move out of bounds } else { $("#" + abc).html(""); $("#" + abc.substring(0,1) + (abc.substring(1,1) + 1)).html(char); } } } window.addEventListener("keydown", (e) => { if (e.keyCode === 119 || e.which === 119) { movement("w"); } if (e.keyCode === 97 || e.which === 97) { movement("a"); } if (e.keyCode === 115 || e.which === 115) { movement("s"); } if (e.keyCode === 100 || e.which === 100) { movement("d"); } }); $("#a1").html(char); // starting point </script> </html>But it keeps returning this exact error:
array.html:57 Uncaught ReferenceError: e is not defined at array.html:57:16I don't really know why the error is happening, so I don't really need the code to be rewritten for me (although that would be nice), since I'm trying to learn how to deal with key inputs in Javascript!
