Question

所以我想知道是否有任何方法可以在按下键时检测到两个物体的碰撞，

我正在做一个游戏，我需要知道如何在按下键（任何键）（使用javascript）时两个对象（正方形）碰撞时激活碰撞检测。这是我尝试过的代码（我是从另一个问题的另一个注释中得到的），

var box2 = document.getElementById('block'),
    box3 = document.getElementById('block2');
box2.addEventListener('click', detectCollision) 

box3.addEventListener('click', detectCollision) 
function detectCollision(e) {
    var elem        = e.target,
        elemOffset  = elem.getBoundingClientRect(),
        elemDisplay = elem.style.display;

    // Temporarily hide element
    elem.style.display = 'none';

    // Check for top-most element at position
    var topElem = document.elementFromPoint(elemOffset.left, elemOffset.top);

    // Reset element's initial display value.
    elem.style.display = elemDisplay;

    // If a top-most element is another box
    if (topElem.className.match(/box/)) {
       alert(elem.id + " is touching " + topElem.id)
    } else {
        elem.id.innerHTML = elem.id + " isn't touching another box."
    };}

我希望在按键上激活碰撞，但是每次我尝试将事件侦听器或e.target更改为其他事物（例如按键）时，它根本不起作用，它什么也没做。

Answer 1

我只是用这个让太空侵略者击倒了

window.addEventListener("keydown", function(e) {
// space and arrow keys
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
    e.preventDefault();
}}, false);

在整个窗口上使用，某些键会导致浏览器窗口移动，这是您在尝试控制角色移动时不想要的。这段代码将其关闭

gameArea.addEventListener("keyup", function(event){ 
var kcode= event.keyCode;
if (kcode==38)
    { //... etc

此代码控制按下向上箭头时的字符（键码38）据我所知，“按键”已贬值，这可能会导致您遇到问题。同样，按键和按下按键可能需要集中精力在某些元素中/上工作。这是键码https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes的列表。...游戏开始。

Answer 2

我终于发现了！这就是答案（我自己找到了答案，但谢谢尝试帮助的人）

document.addEventListener('keydown', detectCollision) 

function detectCollision(e) {
    var elem        = document.getElementById('block'),
        elemOffset  = elem.getBoundingClientRect(),
        elemDisplay = elem.style.display;

    // Temporarily hide element
    elem.style.display = 'none';

    // Check for top-most element at position
    var topElem = document.elementFromPoint(elemOffset.left, elemOffset.top);

    // Reset element's initial display value.
    elem.style.display = elemDisplay;

    // If a top-most element is another box
    if (topElem.className.match(/box/)) {
      alert('collided')

    } else {
        elem.innerHTML = elem.id + " isn't touching another box."
    };
}

按键时有什么方法可以检测到碰撞？

2 个答案: