Question

我正在尝试使用canavas，html5和javascript开发游戏。我的问题是我想在下面给出的代码中每300毫秒后自动发射子弹。但是根据按键按下它们会被解雇。请帮忙

我的游戏代码如下：

<!DOCTYPE html>
<html>
<script src="jquery.js"></script>
<style>
#canvas{
border:inset 1px black;
}
</style>
<body>
<canvas id="canvas" width=400 height=300></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");



var ballX = 0;
var ballY = 270;
var bulletY=270
var bulletX=50;
draw();
bullet();
function bulletFire()
{
if(bulletY<0)
 {
   bulletY=270;
   bullet();
 }
 else       
 bulletY-=10;
}

function draw() {

  ctx.clearRect(0,0,400,300);   
  ctx.fillStyle="black"
  ctx.beginPath();
  ctx.fillRect(ballX, ballY,100,30);
  ctx.closePath(); 
  ctx.fill();   
}
function bullet()
{
//ctx.clearRect(0,0,400,300);
  ctx.beginPath();
  ctx.fillRect(bulletX, bulletY,15,30);
  ctx.closePath();
}

  // Here we just handle command keys
  function keyDownHandler(event) {

  // get which key the user pressed
  var key = event.which;

  // Let keypress handle displayable characters
  if (key > 46) {
    return;
  }

  switch (key) {
    case 37:if(ballX!=0)
        // left key
            { 
        // move the ball 1 left by subtracting 1 from ballX
        ballX -= 4;
        bulletX -=4;
       }


        break;

    case 39:
        // right key
          if(ballX!=300)
        // move the ball 1 right by adding 1 to ballX
        {
        ballX += 4;
        bulletX +=4;
        }  

        break;

    default:
        break;
  }

  // redraw everything
  draw();
  bullet();   
  window.setInterval(bulletFire,300);    
}
//draw();


// Listen for when the user presses a key down
window.addEventListener("keydown", keyDownHandler, true);
</script>

</body>
</html>

Answer 1

Javascript允许您定义keydown处理程序以及keyup处理程序。您通常使用这些来切换变量，这些变量说明当前哪些键是＆＃34; up＆＃34;或＆＃34; down＆＃34;。他们只设置这些变量 - 没有别的。

此外，游戏机制通常在更新功能中实现 - 这是一个定期执行的功能。在Javascript中，您可以使用setInterval函数轻松安排执行此类函数。

在该功能中，您可以检查当前哪些键＆＃34; down＆＃34;并执行相应的操作。此功能还应更新不受播放器控制的所有对象的位置，检查碰撞，并在对象发生碰撞时执行交互。

自动发射子弹而不是依靠按键？

1 个答案: