Question

我想在一个画布上放两个不同颜色的矩形，并分配不同的键盘键以分别使用它们。不幸的是，它只适用于其中一个。这是我的代码。我为每个对象添加了不同的变量，但仍然没有出现另一个变量。我应该在函数或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（）
您不必为第二个玩家声明新的画布变量，只需使用您拥有的那些
如果您想保留一些旧代码，请修改第二次声明上下文的拼写错误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：在一个画布上为两个不同的对象分配键

2 个答案: