I have the following codes. I'd like to control the move of the car Lamborghini by typing. The problem is: I could ONLY type uppercase letters and numbers. How should I do to type lowercase letters and symbols?
/*Use the keyboard to control the car*/
var map = document.querySelector("#map");
var p1 = document.querySelector("#player1");
var p1Move = 0;
var rightBound = 0.855 * map.getBoundingClientRect().width;
function move(e) {
"use strict";
var letters = new Array(95);
letters = [32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126];
for (var i=0; i<letters.length; i++) {
switch (e.keyCode) {
case letters[i]:
p1Move += 15;
if(p1Move >= rightBound) {
p1.style.left = rightBound -4 + 'px';
}
else {
p1.style.left = p1Move + 'px';
document.querySelector("#textTyped").innerHTML += String.fromCharCode(letters[i]); //I feel this is where I am wrong but just not sure what to do.
}
break;
}
}
}
document.onkeydown = move; body {
width: 1320px;
display: table;
margin: 20px auto;
background-color: rgba(109,217,163,1.00);
}
/* Codes for the tutorial */
#map {
width: 1000px;
height: 700px;
border: 1px solid #000000;
background-color: #AFAFAF;
position: relative;
border-radius: 20px;
}
#player1 {
width: 150px;
height: auto;
left: 0;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
/* Side bar */
#sidebar {
width: 310px;
height: 700px;
display: inline-block;
float: right;
}
#sidebar #text {
border: 1px solid #000000;
border-radius: 5px;
width: 300px;
height: 310px;
overflow-y: scroll;
background-color: #ffffff;
margin: 0 auto;
}
#sidebar #textTyped {
border: 1px solid #000000;
border-radius: 5px;
width: 300px;
height: 310px;
overflow-y: scroll;
background-color: #ffffff;
margin: 10px auto;
}
#sidebar #text p {
margin: 5px 10px;
text-align: justify;
} <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Car-racing Typing Game</title>
<link href="typingGame.css" rel="stylesheet" ype="text/css">
</head>
<body>
<div id="sidebar">
<div id="text">
<p>Now we are on the tutorial field. Here, we will teach you how to drive your car.</p><br />
<p>In this game, you drive by typing. You will type every single letter, number and punctuation in this box to move your car.</p>
</div>
<div id="textTyped"></div>
</div>
<div id="map">
<img id="player1" src="https://www.lamborghini.com/en-en/sites/en-en/files/DAM/lamborghini/gateway-family/aventador/cars/aventador-coupe.png" alt="Lamborghini">
</div>
<script src="typingGame.js" type="text/javascript"></script>
</body>
</html>The keydown event property 'keyCode' receives fairly low-level information about what key was pressed, it doesn't care about whether shift was held down etc. You could implement code yourself to figure out if shift is held down, but there is an easier way.
Rather than keydown, if you listen to the keypress event you can get a property 'charCode' which is more like what you were expecting.
I just changed the event handler to trigger on keypress, and keyCode became charCode.
/*Use the keyboard to control the car*/
var map = document.querySelector("#map");
var p1 = document.querySelector("#player1");
var p1Move = 0;
var rightBound = 0.855 * map.getBoundingClientRect().width;
function move(e) {
"use strict";
var letters = new Array(95);
letters = [32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126];
for (var i=0; i<letters.length; i++) {
switch (e.charCode) {
case letters[i]:
p1Move += 15;
if(p1Move >= rightBound) {
p1.style.left = rightBound -4 + 'px';
}
else {
p1.style.left = p1Move + 'px';
document.querySelector("#textTyped").innerHTML += String.fromCharCode(letters[i]); //I feel this is where I am wrong but just not sure what to do.
}
break;
}
}
}
document.onkeypress = move;body {
width: 1320px;
display: table;
margin: 20px auto;
background-color: rgba(109,217,163,1.00);
}
/* Codes for the tutorial */
#map {
width: 1000px;
height: 700px;
border: 1px solid #000000;
background-color: #AFAFAF;
position: relative;
border-radius: 20px;
}
#player1 {
width: 150px;
height: auto;
left: 0;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
/* Side bar */
#sidebar {
width: 310px;
height: 700px;
display: inline-block;
float: right;
}
#sidebar #text {
border: 1px solid #000000;
border-radius: 5px;
width: 300px;
height: 310px;
overflow-y: scroll;
background-color: #ffffff;
margin: 0 auto;
}
#sidebar #textTyped {
border: 1px solid #000000;
border-radius: 5px;
width: 300px;
height: 310px;
overflow-y: scroll;
background-color: #ffffff;
margin: 10px auto;
}
#sidebar #text p {
margin: 5px 10px;
text-align: justify;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Car-racing Typing Game</title>
<link href="typingGame.css" rel="stylesheet" ype="text/css">
</head>
<body>
<div id="sidebar">
<div id="text">
<p>Now we are on the tutorial field. Here, we will teach you how to drive your car.</p><br />
<p>In this game, you drive by typing. You will type every single letter, number and punctuation in this box to move your car.</p>
</div>
<div id="textTyped"></div>
</div>
<div id="map">
<img id="player1" src="https://www.lamborghini.com/en-en/sites/en-en/files/DAM/lamborghini/gateway-family/aventador/cars/aventador-coupe.png" alt="Lamborghini">
</div>
<script src="typingGame.js" type="text/javascript"></script>
</body>
</html>