我用JavaScript创建了一个小游戏,需要同时按下多个按键才能进行化身运动。
为了识别多个按键,我使用“ Braden Best”来回答这个问题,即一次按下多个按键的JavaScript效果很好,除了文档似乎没有执行多任务按键事件。例如,如果我要先按向上箭头键,再按向左箭头键,然后释放向左箭头键,则头像将完全停止。
以下是示例代码:https : //Jsfiddle.net/552gc9dh/1/
var c = document.getElementById("canv");
var canv = c.getContext("2d");
console.log("test");
var map = {};
var playerlist = [];
function player(width, height, x, y, color, speedx, speedy) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.color = color;
this.speedx = speedx;
this.speedy = speedy;
playerlist.push(this);
}
var player1 = new player(50, 50, 0, 0, "red", 2, 2);
console.log(playerlist[0]);
function gravity(playerY) {
}
function createplayerlistener(name, key1, key2, key3, key4) {
onkeydown = onkeyup = function(e) {
e = e || event;
map[e.keyCode] = e.type == 'keydown';
if (name.x + name.speedx < c.width - name.width) {
if (map[key1]) {
name.x += name.speedx;
}
}
if (name.x + name.speedx > 0) {
if (map[key2]) {
name.x -= name.speedx;
}
}
if (name.y + name.speedy < c.height - name.height) {
if (map[key3]) {
name.y += name.speedy;
}
}
if (name.y + name.speedy > 0) {
if (map[key4]) {
name.y -= name.speedy;
}
}
}
}
createplayerlistener(player1, 39, 37, 40, 38);
setInterval(function() {
canv.clearRect(0, 0, c.width, c.height);
for (var i = 0; i <= playerlist.length - 1; i++) {
canv.fillStyle = playerlist[i].color; // iterates through players and draws them
canv.fillRect(playerlist[i].x, playerlist[i].y, playerlist[i].width, playerlist[i].height);
}
}, 10);
这个答案更多是一种策略...
我会为方向设置变量并在keyDown
和上更新它们keyUp
须藤代码
const North = false;
const West = false;
const South = false;
const East = false;
keyUp = keyDown = (keyType) {
switch(keyType) {
case 'up':
North = !North;
break;
case 'right':
East = !East;
break;
case 'down':
South = !South;
break;
case 'left':
West = !West;
break;
};
}
setInterval({
if(North) //move up
if(South) //move down
if(East) //Move right
if(West) //Move left
}, 10);
这应该保持当前的运动,直到您收到取消它的命令。如果用户同时按下它们,则还可以允许上下左右相互抵消。
希望这会有所帮助!
加成
实际上,更高效的选择可能是setInteval
为特定方向创建一个on keydown并在keyUp上将其删除,这样,如果玩家不进行交互,则您将不会运行额外的周期(每秒1/100秒)
directions = {
up: null,
right: null,
down: null,
left: null
}
const startInterval = (keyType) => {
direction[keyType] = setInteval(()=> move(keyType);
}
const endInterval = (keyType) => {
clearInterval( direction[keyType]);
direction[keyType] = null;
}
const keyUp = keyDown = (keyType) {
if(direction[keyType] === null) {
startInteval(keyType);
} else {
endInterval(keyType);
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句