Question

我一直试图用javascript制作我的第一款游戏，这是一款类似于游戏的游戏，其中两个玩家移动他们的矩形以向另一个方向撞击球。我想要它，以便当一名球员击中＆＃34; a＆＃34;当他们按下d键时，他们的角色向左移动。

现在，当我点击所需的键时没有任何反应。

这是我目前的代码：

＆＃13;

$(document).ready(function() {
  // things needed
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  //positions of elements at start
  var ballposx = 400;
  var ballposy = 50;
  var balldx = 1;
  var balldy = 2;
  var balld2x = 0;
  var balld2y = 0;
  var p1posx = 80;
  var p1posy = 225;
  var p1dx = 0;
  var p1dy = 0;
  var p2posx = 620;
  var p2posy = 225;
  var p2dx = 0;
  var p2dy = 0;


  function draw() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //goal1
    ctx.fillStyle = "#0F3F0F";
    var goal1 = ctx.fillRect(0, 150, 50, 150);

    //goal2
    ctx.fillStyle = "#204050";
    var goal2 = ctx.fillRect(750, 150, 50, 150);
    ctx.beginPath();

    //ball
    var ball = ctx.arc(ballposx, ballposy, 60, 0, 2 * Math.PI);
    ctx.stroke();

    //p1
    ctx.fillStyle = "#FF0000";
    var p1 = ctx.fillRect(p1posx, p1posy, 40, 75);

    //p2
    ctx.fillStyle = "#0000FF";
    var p1 = ctx.fillRect(p2posx, p2posy, 40, 75);
    p1posx += p1dx;
    p2posx += p2dx;
    balldx += balld2x;
    balldy += balld2y;
    ballposx += balldx;
    ballposy += balldy;

    $(window).keypress(function(e) {
      var code = e.which;
      switch (code) {
        case 65:
          p1dx = 1;
        case 68:
          p1dx = -1;
        case 37:
          p2dx = -1;
        case 39:
          p2dx = 1;
        default:
          break;
      }
    });

    if (ballposy === 240) {
      balldy = -1;
    } else if (ballposy === 60) {
      balldy = 1;
    } else if (ballposx === 60) {
      balldx = 1;
    } else if (ballposx === 740) {
      balldx = -1;
    } else if (ballposx === p1posx && ballposy < p1posy) {
      balldx = 1;
    } else if (ballposx === p2posx && ballposy < p2posy) {
      balldx = -1;
    }
  }

  setInterval(draw, 10);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
  <canvas id="myCanvas" width="800px" height="300px" style="border:1px solid #000000;"> Sorry your browser doesnt support this!</canvas></center>

＆＃13;

Answer 1

您每10毫秒添加一个keypress处理程序。因此，几秒钟后，每按一次键就会有数千个处理程序运行，这可能会让浏览器陷入困境。您应该只在draw函数之外绑定处理程序一次。

在函数中，每个break都需要case个语句。

您的code测试也是错误的。小写a为97，而不是65。 p1dx的值是向后的 - 如果你想向左走，它应该是-1，而不是1。

$(document).ready(function() {
  // things needed
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  //positions of elements at start
  var ballposx = 400;
  var ballposy = 50;
  var balldx = 1;
  var balldy = 2;
  var balld2x = 0;
  var balld2y = 0;
  var p1posx = 80;
  var p1posy = 225;
  var p1dx = 0;
  var p1dy = 0;
  var p2posx = 620;
  var p2posy = 225;
  var p2dx = 0;
  var p2dy = 0;

  $(window).keypress(function(e) {
    var code = e.which;
    switch (code) {
      case 97:
        p1dx = -1;
        break;
      case 100:
        p1dx = 1;
        break;
      case 37:
        p2dx = -1;
        break;
      case 39:
        p2dx = 1;
        break;
      default:
        break;
    }
  });

  function draw() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //goal1
    ctx.fillStyle = "#0F3F0F";
    var goal1 = ctx.fillRect(0, 150, 50, 150);

    //goal2
    ctx.fillStyle = "#204050";
    var goal2 = ctx.fillRect(750, 150, 50, 150);
    ctx.beginPath();

    //ball
    var ball = ctx.arc(ballposx, ballposy, 60, 0, 2 * Math.PI);
    ctx.stroke();

    //p1
    ctx.fillStyle = "#FF0000";
    var p1 = ctx.fillRect(p1posx, p1posy, 40, 75);

    //p2
    ctx.fillStyle = "#0000FF";
    var p1 = ctx.fillRect(p2posx, p2posy, 40, 75);
    p1posx += p1dx;
    p2posx += p2dx;
    balldx += balld2x;
    balldy += balld2y;
    ballposx += balldx;
    ballposy += balldy;


    if (ballposy === 240) {
      balldy = -1;
    } else if (ballposy === 60) {
      balldy = 1;
    } else if (ballposx === 60) {
      balldx = 1;
    } else if (ballposx === 740) {
      balldx = -1;
    } else if (ballposx === p1posx && ballposy < p1posy) {
      balldx = 1;
    } else if (ballposx === p2posx && ballposy < p2posy) {
      balldx = -1;
    }
  }

  setInterval(draw, 10);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
  <canvas id="myCanvas" width="800px" height="300px" style="border:1px solid #000000;"> Sorry your browser doesnt support this!</canvas></center>

Answer 2

我没有检查整个代码，但是你应该在每种情况下添加break;语句，而不仅仅是默认语句。

例如，您的代码应该是：

$(window).keypress(function(e){
  var code = e.which;
  switch (code)
  {
    case 65:
      p1dx = 1;
      break;
    case 68:
      p1dx = -1;
      break;
    case 37:
      p2dx = -1;
      break;
    case 39:
      p2dx = 1;
      break;
    default:
      break;
  }
});

javascript如何在键盘上单击更改变量

2 个答案: