Question

我想在ECMAScript / HTML5 / CSS3中使用最短和最简单的代码进行基本的Space Invaders克隆。我已经开始实施控件，但它们不起作用。这是代码：

   <!DOCTYPE html>
<html>
<body onkeydown="javascript:move()" onkeyup=""></body>

<canvas id="myCanvas" width=800 height=800></canvas>

<script>

var context = document.getElementById('myCanvas').getContext("2d");

var img = new Image();
img.onload = function () {
    context.drawImage(img, 0, 0, 40, 40);
}
img.src = "run0.png";


function leftArrowPressed() {
  img.style.left = parseInt(element.style.left) - 5 + 'px';
}

function rightArrowPressed() {
  img.style.left = parseInt(element.style.left) + 5 + 'px';
}
function move(evt) {
  var code = window.event.keyCode;
  switch (code) {
    case 37:
      leftArrowPressed();
      break;
    case 39:
      rightArrowPressed();
      break;
  }
};

</script>

</body>
</html>

Answer 1

您未在keydown代码的降价处理<body>事件。您可以使用JavaScript以编程方式收听事件，也可以通过将move()方法添加到onkeydown属性来继续，如下所示：

＆＃13;

function leftArrowPressed() {
  console.log('move left');
}

function rightArrowPressed() {
  console.log('move right');
}

function move(evt) {
  var code = window.event.keyCode;
  switch (code) {
    case 37:
      leftArrowPressed();
      break;
    case 39:
      rightArrowPressed();
      break;
  }
};

＆＃13;

<body onkeydown="javascript:move()" onkeyup=""></body>

＆＃13;

为了使上述工作（在iframe内部），首先必须集中注意力。因此，在测试之前，请单击演示打开的空白区域。

应该注意的是，在浏览器中连接键盘在历史上有点令人头疼。最好的办法是将任务委托给一个好的图书馆。

我发现Mousetrap库非常广泛。

Answer 2

你将有一个主循环，所以只需设置一些标志并将你的关键事件附加到文档，无需担心焦点。只要按下按键，船只就会移动。 Fire按钮需要有一个重载标志和一个计时器来控制重复率。如果reloadTime === 0.点击集合reload到true和reloadTime重复率（以帧为单位），则重新加载点火。在关键事件中，通过设置reload = false来重新加载密钥。

这就像你能做到的一样简单。

var framesPerSecond = 30;
var shipX = 0; // ship pos
var leftKeyDown = false;  // key down flags
var rightKeyDown = false;
var fireKeyDown = false;
var reloadTime = 0;  // fire key needs a timer a timer/counter inbuilt keyboard repeat will take over and mess with your repeat rate.
var reload = false; // dont want the keyboard repeat to trigger shots at the wrong time so
                    // flag that you need to reload when the next key up
                    // arrives.
function mainLoop(){
    if(leftKeyDown){ // move left if left key down
        shipX -= 1;
    }
    if(rightKeyDown){ // move right if right key down
        shipX += 1;
    }
    if(fireKeyDown && !reload){ //fire is not needing to reload and fire key down
        //log("FIRE"); // sends a bullet
        reload = true; // need to reload
        reloadTime = 10; // number of frames till reload.
    }
    if(reload && reloadTime > 0){ // if needing to reload
        reloadTime -= 1;  // count down frames 
        if(reloadTime === 0){ // until time to reload.
            reload = false;   // then reload.
        }
    }
    ....
    // game stuff.
    ...

    // can use requestAnimationFrame if you use canvas
    // requestAnimationFrame(mainLoop); // 60 frames a second
    // or because you are doing it in HTML
    setTimeout(mainLoop,1000 / framesPerSecond);

}

function keyEvent(event){ // handle ky up and downs.
    var state = false;  // assume up
    if(event.type === "keydown"){ // if down
        state = true;  // set as down
    }
    if(event.keyCode === 37){ // left key
        leftKeyDown = state;  // set key state
    }else
    if(event.keyCode === 39){ // right key
        rightKeyDown = state; // set key sate
    }else
    if(event.keyCode === 32){ // space
        fireKeyDown = state;  
        if(!state && reload){ // reload if needed and key up
            reload = false;
        }
    }
}

document.addEventListener('keydown', keyEvent);
document.addEventListener('keyup', keyEvent);

简单的JavaScript游戏

2 个答案: