-1
我有以下代码。我想通过打字控制兰博基尼车的行驶。问题是：我可以只有键入大写字母和数字。 我应该如何输入小写字母和符号？我应该如何使用keyCode键入小写字母和符号？
/*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) {
\t "use strict";
\t var letters = new Array(95);
\t \t 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];
\t
\t for (var i=0; i<letters.length; i++) {
\t \t switch (e.keyCode) {
\t \t \t case letters[i]:
\t \t \t \t p1Move += 15;
\t \t \t \t
\t \t \t \t if(p1Move >= rightBound) {
\t \t \t \t \t p1.style.left = rightBound -4 + 'px';
\t \t \t \t }
\t \t \t \t else {
\t \t \t \t \t p1.style.left = p1Move + 'px';
\t \t \t \t \t document.querySelector("#textTyped").innerHTML += String.fromCharCode(letters[i]); //I feel this is where I am wrong but just not sure what to do.
\t \t \t \t }
\t \t \t \t break;
\t \t }
\t }
}
document.onkeydown = move;body {
\t width: 1320px;
\t display: table;
\t margin: 20px auto;
\t background-color: rgba(109,217,163,1.00);
}
/* Codes for the tutorial */
#map {
\t width: 1000px;
\t height: 700px;
\t border: 1px solid #000000;
\t background-color: #AFAFAF;
\t position: relative;
\t border-radius: 20px;
}
#player1 {
\t width: 150px;
\t height: auto;
\t left: 0;
\t top: 50%;
\t transform: translateY(-50%);
\t position: absolute;
\t
}
/* Side bar */
#sidebar {
\t width: 310px;
\t height: 700px;
\t display: inline-block;
\t float: right;
}
#sidebar #text {
\t border: 1px solid #000000;
\t border-radius: 5px;
\t width: 300px;
\t height: 310px;
\t overflow-y: scroll;
\t background-color: #ffffff;
\t margin: 0 auto;
}
#sidebar #textTyped {
\t border: 1px solid #000000;
\t border-radius: 5px;
\t width: 300px;
\t height: 310px;
\t overflow-y: scroll;
\t background-color: #ffffff;
\t margin: 10px auto;
}
#sidebar #text p {
\t margin: 5px 10px;
\t 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>
\t <div id="sidebar">
\t \t <div id="text">
\t \t \t <p>Now we are on the tutorial field. Here, we will teach you how to drive your car.</p><br />
\t \t \t <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>
\t \t </div>
\t \t <div id="textTyped"></div>
\t </div>
\t <div id="map">
\t \t <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">
\t </div>
\t
\t <script src="typingGame.js" type="text/javascript"></script>
</body>
</html>
它的工作原理！谢谢詹姆斯！我将研究keyCode和charCode，以及onkeydown和onkeypress。 – Hao