Question

我想做的是以下事情：

当我按下向左箭头时，只会绘制marioleft。
按下向右箭头只会绘制马里奥特。

问题在于两个图像都同时加载，并且它们也同时移动。我希望2用正确的键移动。我的代码有什么问题？

我认为我应该在load函数上设置一个条件，但是我不知道该怎么做。

我应该使用哪种类型的条件？ if ()，if else，switch ...以及如何使用它们？

var vp = document.getElementById("villa_mario");
var paper = vp.getContext("2d");
document.addEventListener("keydown", moveMario);

var x = 250;
var y = 250;

var keys = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};

var background = {
  url: "tile.png",
  loadOK: false
}

var marioright = {
  url: "mario_right.png",
  loadOK: false
}

var marioleft = {
  url: "mario_left.png",
  loadOK: false
}

background.imagen = new Image();
background.imagen.src = background.url;
background.imagen.addEventListener("load", loadBackground);

marioright.imagen = new Image();
marioright.imagen.src = marioright.url;
marioright.imagen.addEventListener("load", loadMarioright);

marioleft.imagen = new Image();
marioleft.imagen.src = marioleft.url;
marioleft.imagen.addEventListener("load", loadMarioleft);


function loadBackground()
{
  background.loadOK = true
  paint();
}

function loadMarioright()
{
  marioright.loadOK = true
  paint();
}

function loadMarioleft()
{
  marioleft.loadOK = true
  paint();
}



function paint()
{
   if(background.loadOK)
   {
    paper.drawImage(background.imagen, 0, 0);
   }

   if(marioright.loadOK)
    {
      paper.drawImage(marioright.imagen, x, y);
    }

    if(marioleft.loadOK)
    {
      paper.drawImage(marioleft.imagen, x, y);
    }
}

function moveMario(evento)
{
  var movement = 5;
  switch(evento.keyCode)
  {
    case keys.RIGHT:
    loadMarioright(x, y, x + movement, y, paper);
    x = x + movement;
    break;
    case keys.LEFT:
    loadMarioleft(x, y, x - movement, y, paper);
    x = x - movement;
    break;
    default:
      console.log("other key");
    break;
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Villa Mario</title>
  </head>
  <body>
    <canvas id="villa_mario" width="500" height="500">
    </canvas>
    <script src="mario.js"></script>
  </body>
</html>

Answer 1

您必须将false设置为'loadOk'变量。如下更新loadMarioright（），loadMarioleft（）函数。

function loadMarioright()
{
  marioright.loadOK = true;
  marioleft.loadOK = false;
  paint();
}

function loadMarioleft()
{
  marioleft.loadOK = true;
  marioright.loadOK = false;
  paint();
}

Answer 2

Ragu bathi是正确的，因为您需要关闭loadOK才能正确加载，但是我建议通过强制每次绘制仅绘制一个Mario来消除对每个图像进行切换所带来的额外麻烦。这次，您只需选择要使用的图像即可控制它。

@Override
public void onSaveInstanceState(Bundle savedInstanceState) {
    // Save the user's current game state

    // Always call the superclass so it can save the view hierarchy state
    super.onSaveInstanceState(savedInstanceState);
}  

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState); // Always call the superclass first

    // Check whether we're recreating a previously destroyed instance
    if (savedInstanceState != null) {
        // Restore value of members from saved state
    } else {
        // Probably initialize members with default values for a new instance
    }
    // ...
}

使用JavaScript中的键盘箭头加载和移动不同的图像

2 个答案: