使用keyCode输入小写字母和符号应该怎么办？
How should I do to type lowercase letters and symbols by using 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) {
"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>
keydown 事件 属性 'keyCode' 接收有关按下什么键的相当低级的信息，它不关心是否按住 shift 等。您可以自己实现代码来计算如果按住 shift 键会退出，但还有更简单的方法。
而不是 keydown，如果您监听按键事件，您可以获得 属性 'charCode'，这更符合您的预期。
我刚刚将事件处理程序更改为在按键时触发，keyCode 变成了 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>
我有以下代码。我想通过打字来控制兰博基尼汽车的移动。问题是：我只能 键入大写字母和数字。 如何输入小写字母和符号？
/*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>
keydown 事件 属性 'keyCode' 接收有关按下什么键的相当低级的信息，它不关心是否按住 shift 等。您可以自己实现代码来计算如果按住 shift 键会退出，但还有更简单的方法。
而不是 keydown，如果您监听按键事件，您可以获得 属性 'charCode'，这更符合您的预期。
我刚刚将事件处理程序更改为在按键时触发，keyCode 变成了 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>