Javascript：将键分配给一个 Canvas 上的两个不同对象

Question

我想将两个不同颜色的矩形放在一个 canvas 上并分配不同的键盘键以分别使用。不幸的是，它只适用于其中之一。这是我的代码。我为每个对象添加了不同的变量，但仍然没有出现另一个。我应该对函数应用一些东西还是使用 window.onload？

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var GAME_SPEED = 1000/60; //game rate
var x = 100;
var y = 100;
var sideLength = 10;

var leftKey = false;
var rightKey = false;
var upKey = false;
var downKey = false;
var spaceKey = false;

var aKey = false;
var sKey = false;
var wKey = false;
var dKey = false;
var enterKey = false;

var bX = 100;
var bY = 100;
var sideLengthZ = 10;

window.onload = function()
 {
  c = document.getElementById("myCanvas");
  c.width = window.innerWidth*0.9;
  c.height = window.innerHeight*0.9;
  window.setInterval("draw()" , GAME_SPEED);
 }

document.onkeyup = function(event)
{
 switch(event.keyCode)
 {
  case 37: leftKey =false;
  break;
  case 39: rightKey = false;
  break;
  case 38: upKey = false;
  break;
  case 40: downKey = false;
  break;
  case 32: spaceKey = false;
  break;
  case 65: aKey =false;
  break;
  case 83: sKey = false;
  break;
  case 68: dKey = false;
  break;
  case 87: wKey = false;
  break;
  case 13: enterKey = false;
  break;
 }
}

document.onkeydown = function(event)
{
 switch(event.keyCode)
 {
  case 37: leftKey =true;
  break;
  case 39: rightKey = true;
  break;
  case 38: upKey = true;
  break;
  case 40: downKey = true;
  break;
  case 32: spaceKey = true;
  break;
  case 65: aKey =true;
  break;
  case 83: sKey = true;
  break;
  case 68: dKey = true;
  break;
  case 87: wKey = true;
  break;
  case 13: enterKey = true;
  break;
 }
}


function draw()
{
 if(leftKey == true)
{
 x--;
}

if(rightKey == true)
{
 x++;
}

if(upKey == true)
{
 y--;
}

if(downKey == true)
{
 y++;
}

if(spaceKey == true)
{
 sideLength++;
}
 var c = document.getElementById("myCanvas");
 var cntxt = c.getContext("2d");
 cntxt.fillStyle= "#FF0000";
 cntxt.fillRect(x, y, sideLength, sideLength);
}

function draw2()
{
 if(aKey == true)
{
 bX--;
}

if(dKey == true)
{
 bX++;
}

if(wKey == true)
{
 bY--;
}

if(sKey == true)
{
 bY++;
}

if(enterKey == true)
{
 sideLengthZ++;
}
var b = document.getElementById("myCanvas");
 var cntxt2 = b.getContewxt("2d");
 cntxt2.fillStyle= "#F00000";
 cntxt2.fillRect(bX, bY, sideLengthZ, sideLengthZ);
}
</script>
</head>
 <body>
 <!--Marlon Jacques -->
<canvas id="myCanvas" style="border: 5px solid
#000000;">
Your browser does not support the canvas element.
</canvas>
</body>
</html>

Answer 1

您的代码中有很多问题。首先是您从未调用 draw2 函数。第二个是您尝试使用两个不同的上下文。最好只使用一个全局上下文。

固定代码如下。

var GAME_SPEED = 1000 / 60; //game rate
var x = 100;
var y = 100;
var sideLength = 10;

var leftKey = false;
var rightKey = false;
var upKey = false;
var downKey = false;
var spaceKey = false;

var aKey = false;
var sKey = false;
var wKey = false;
var dKey = false;
var enterKey = false;

var bX = 100;
var bY = 100;
var sideLengthZ = 10;
var ctx;

window.onload = function() {
  c = document.getElementById("myCanvas");
  c.width = window.innerWidth * 0.9;
  c.height = window.innerHeight * 0.9;
  ctx = c.getContext('2d');
  window.setInterval(function() {
    draw();
    draw2();
  }, GAME_SPEED);
}

document.onkeyup = function(event) {
  event.preventDefault();
  switch (event.keyCode) {
    case 37:
      leftKey = false;
      break;
    case 39:
      rightKey = false;
      break;
    case 38:
      upKey = false;
      break;
    case 40:
      downKey = false;
      break;
    case 32:
      spaceKey = false;
      break;
    case 65:
      aKey = false;
      break;
    case 83:
      sKey = false;
      break;
    case 68:
      dKey = false;
      break;
    case 87:
      wKey = false;
      break;
    case 13:
      enterKey = false;
      break;
  }
}

document.onkeydown = function(event) {
  event.preventDefault();
  switch (event.keyCode) {
    case 37:
      leftKey = true;
      break;
    case 39:
      rightKey = true;
      break;
    case 38:
      upKey = true;
      break;
    case 40:
      downKey = true;
      break;
    case 32:
      spaceKey = true;
      break;
    case 65:
      aKey = true;
      break;
    case 83:
      sKey = true;
      break;
    case 68:
      dKey = true;
      break;
    case 87:
      wKey = true;
      break;
    case 13:
      enterKey = true;
      break;
  }
}


function draw() {
  if (leftKey == true) {
    x--;
  }

  if (rightKey == true) {
    x++;
  }

  if (upKey == true) {
    y--;
  }

  if (downKey == true) {
    y++;
  }

  if (spaceKey == true) {
    sideLength++;
  }
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(x, y, sideLength, sideLength);
}

function draw2() {
  if (aKey == true) {
    bX--;
  }

  if (dKey == true) {
    bX++;
  }

  if (wKey == true) {
    bY--;
  }

  if (sKey == true) {
    bY++;
  }

  if (enterKey == true) {
    sideLengthZ++;
  }
  var b = document.getElementById("myCanvas");
  var cntxt2 = ctx;
  ctx.fillStyle = "#F00000";
  ctx.fillRect(bX, bY, sideLengthZ, sideLengthZ);
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <!--Marlon Jacques -->
  <canvas id="myCanvas" style="border: 5px solid
#000000;">
    Your browser does not support the canvas element.
  </canvas>
</body>

</html>

Answer 2

以下是解决您的问题的一些小技巧：

将第二位玩家的绘图移至 draw()
您不必为您的第二个玩家声明新的 canvas 变量，只需使用您拥有的
如果您想保留一些旧代码，请修正您第二次声明上下文的拼写错误var cntxt2 = b.getContewxt("2d");

function draw() {

    if(leftKey == true) {
        x--;
    }

    if(rightKey == true) {
        x++;
    }
    if(upKey == true) {
        y--;
    }

    if(downKey == true) {
        y++;
    }

    if(spaceKey == true) {
        sideLength++;
    }

    var c = document.getElementById("myCanvas");
    var cntxt = c.getContext("2d");
    cntxt.fillStyle= "#FF0000";
    cntxt.fillRect(x, y, sideLength, sideLength);

    if(aKey == true) {
        bX--;
    }
    if(dKey == true) {
        bX++;
    }
    if(wKey == true) {
        bY--;
    }
    if(sKey == true) {
        bY++;
    }
    if(enterKey == true) {
        sideLengthZ++;
    }
    cntxt.fillStyle= "#F00000";
    cntxt.fillRect(bX, bY, sideLengthZ, sideLengthZ);
}

Javascript：将键分配给一个 Canvas 上的两个不同对象

Javascript: Assigning keys to Two Different Objects on One Canvas

html

javascript

canvas