-1

我有以下代码。我想通过打字来控制兰博基尼汽车的移动。问题是：我只能输入大写字母和数字。我应该如何输入小写字母和符号？

    /*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>

4

1 回答 1

1

keydown 事件属性 'keyCode' 接收关于按下了什么键的相当低级的信息，它不关心是否按住 shift 等。您可以自己实现代码来确定 shift 是否被按住，但是有一个更简单的方法。

而不是 keydown，如果您收听 keypress 事件，您可以获得一个属性“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>

于 2017-05-06T20:10:47.510 回答