我正在尝试制作一款游戏,玩家必须通过鼠标在迷宫中导航才能找到奶酪 block 。我在让 div 移动我想要的方式时遇到了一些麻烦。问题是当你按下向下箭头键(我用来测试它的键)时,它不会像我想要的那样以十为增量继续下降。我试过循环,整个 shebang,但我就是不知道如何让它工作。
document.onkeydown = function(key){
if (key.keyCode == 38){
console.log("up");
} else if (key.keyCode == 39){
console.log("right");
} else if (key.keyCode == 37){
console.log("left");
} else if (key.keyCode == 40){
mouse.style.top = 10 + "px";
};
};
最佳答案
您可以使用 Player
对象并修改它的 x
和 y
属性。
还创建一个 K
对象以将当前使用的 keys 数字设置为 bool 值。
比在像 requestAnimationFrame
这样的循环中移动播放器:
const Player = {
el: document.getElementById('mouse'),
x: 200,
y: 100,
speed: 2,
move() {
// If no collision with map or tiles... (TODO!)
this.el.style.transform = `translate(${this.x}px, ${this.y}px)`;
}
};
const K = {
fn(ev) {
ev.preventDefault();
const k = ev.which;
if (k >= 37 && k <= 40) K[k] = ev.type === "keydown"; // If is arrow
}
};
const update = () => {
// 1 / Math.sqrt(2) = 0.7071.. (Diagonal)
let dist = K[38] && (K[37] || K[39]) || K[40] && (K[37] || K[39]) ? 0.707 : 1;
dist *= Player.speed;
if (K[37]) Player.x -= dist;
if (K[38]) Player.y -= dist;
if (K[39]) Player.x += dist;
if (K[40]) Player.y += dist;
Player.move();
}
document.addEventListener('keydown', K.fn);
document.addEventListener('keyup', K.fn);
(function engine() {
update();
window.requestAnimationFrame(engine);
}());
#mouse{
position: absolute;
left: 0; top: 0;
width: 20px; height: 20px;
background: #000; border-radius: 50%;
}
Click here to focus, and use arrows
<div id="mouse"></div>
一个更简单的例子,它将元素移动 Npx 步并在您按住键(就像打字一样)时重复:
const Player = {
el: document.getElementById('mouse'),
x: 0,
y: 0,
step: 10,
move() {
this.el.style.transform = `translate(${this.x}px, ${this.y}px)`;
}
};
const keysHandler = (ev) => {
const k = ev.which;
if (k>=37 && k<=40) {
ev.preventDefault();
({
'37' () {Player.x -= Player.step},
'38' () {Player.y -= Player.step},
'39' () {Player.x += Player.step},
'40' () {Player.y += Player.step},
}[k]());
Player.move();
}
}
document.addEventListener('keydown', keysHandler);
#mouse{
position: absolute;
left: 0; top: 0;
width: 20px; height: 20px;
background: #000; border-radius: 50%;
}
Click here to focus, and use arrows
<div id="mouse"></div>
关于javascript - 试图让 div 在 keydown 时在屏幕上移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54956327/