-1
J'ai les codes suivants. Je voudrais contrôler le mouvement de la voiture Lamborghini en tapant. Le problème est: Je pourrais SEULEMENT taper les lettres majuscules et les nombres. Comment faire pour taper des lettres minuscules et des symboles?Comment faire pour taper des lettres minuscules et des symboles en utilisant 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>
Il fonctionne! Merci James! Je vais regarder dans keyCode et charCode, et onkeydown et onkeypress. – Hao