用户同时按下两个或多个按键时,如何判断用户按下了哪些键:
比如如何判断用户同时按下了‘A’和‘H’键
segmentd 的 Clark 提供的思路(原文链接):
Ctl,alt是有专门判断的属性的。如果是其他的组合,我有想法,就是keydown的时候,push到Array里面存着,keyup的时候在删掉对应的。每次keydown的时候检查一下array。
最后实行代码为:
<img id="imgPlane" src="" alt="飞机" />
<script type="text/javascript">
var keyCodeArry = [];
document.onkeydown = function(ev) {
var oEvent = ev || event;
keyCode = oEvent.keyCode;
keyCodeArry = addKeyCodeArry(keyCode, keyCodeArry);
console.log(keyCodeArry);
}
document.onkeyup = function(ev) {
var oEvent = ev || event;
keyCode = oEvent.keyCode;
keyCodeArry = deletKeyCodeArry(keyCode, keyCodeArry);
console.log(keyCodeArry);
}
function addKeyCodeArry(num, arr) {
var check = 0;
for(var i = 0; i < arr.length; i++) {
if(arr[i] == num) {
check = 1;
}
}
if(check == 0) {
arr.push(num);
}
return arr;
}
function deletKeyCodeArry(num, arr) {
for(var i = 0; i < arr.length; i++) {
if(arr[i] == num) {
arr.splice(i, 1);
}
}
return arr;
}
var body = document.getElementsByTagName("body")[0];
var x = 300;
var y = 200;
body.addEventListener("keydown", function(e) {
console.log(e.keyCode);
var imgPlane = document.getElementById("imgPlane");
var speed = 10;
console.log(x + " " + y);
for(var i=0; i < keyCodeArry.length; i++) {
keyCode = keyCodeArry[i];
if(keyCode == 87) {
//w
y -= speed;
}
if(keyCode == 83) {
//s
y += speed;
}
if(keyCode == 65) {
//a
x -= speed;
}
if(keyCode == 68) {
//d
x += speed;
}
}
imgPlane.style.top = y + "px";
imgPlane.style.left = x + "px";
});
function lan_Click() {
var lan = document.getElementById("language");
var lans = ["C", "C++", "Java", "Php", "C#"];
if(lan.children.length == 0) {
for(var i = 0; i < lans.length; i++) {
var li = document.createElement("li");
li.innerHTML = lans[i];
//动态绑定事件
li.addEventListener("click", function(e) {
console.log(e.path[0].innerHTML);
});
lan.appendChild(li);
}
} else {
lan.innerHTML = null;
}
}
</script>
通过按下W/A/S/D键控制飞机移动,利用网友的思路,可以实现斜向移动。