Question

我想让这件事情继续下去 - 它基本上是一个非常简单的游戏，你必须先猜测哪个跑步者会越过这条线。

基本上，它是一个有4名选手的赛道。 search按钮提供数组中的随机数。这个数字显示哪个跑步者向终点前进了一步。

我把这个东西分成两部分。首先，我在那里制作了随机数发生器而另一部分只是轨道。我能够让跑步者分别用4个按钮移动。现在我不知道如何使这项工作。

我尝试了不同的代码，但仍然无效。我是JavaScript的新手，拥有一点PHP知识，我认为PHP的工作方式并不是我能够做到这一点的方式。

我尝试了不同的方法来比较随机数生成器的结果，我认为这是我得到的最接近的，我错过了一些我无法弄清楚的代码。

感谢。

＆＃13;

var runner = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
  3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
  4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
];

function GetValue() {
  var random = runner[Math.floor(Math.random() * runner.length)];
  //alert(random);
  document.getElementById("message").innerHTML = random;
  for (var i = runner.length - 1; i >= 0; i--) {
    if (runner[i] === random) {
      runner.splice(i, 1);
      break;
    }
  }

  document.getElementById("demo1").innerHTML = runner;
}

var imgObjgroen = null;
var imgObjrood = null;
var imgObjgeel = null;
var imgObjblauw = null;

function init() {
  imgObjblauw = document.getElementsByClassName('loperblauw');
  imgObjblauw.style.left = '35px';
  imgObjgeel = document.getElementsByClassName('lopergeel');
  imgObjgeel.style.left = '35px';
  imgObjrood = document.getElementsByClassName('loperrood');
  imgObjrood.style.left = '35px';
  imgObjgroen = document.getElementsByClassName('lopergroen');
  imgObjgroen.style.left = '35px';
}

if (random === 1) {
  imgObjgroen.style.left = parseInt(imgObjgroen.style.left) + 95 + 'px';
}

if (random === 2) {
  imgObjrood.style.left = parseInt(imgObjrood.style.left) + 95 + 'px';
}

if (random === 3) {
  imgObjgeel.style.left = parseInt(imgObjgeel.style.left) + 95 + 'px';
}

if (random === 4) {
  imgObjblauw.style.left = parseInt(imgObjblauw.style.left) + 95 + 'px';
}

window.onload = init;

＆＃13;

<div id="wrap">
  <img id="baan" src="baan.png">
  <img id="lopergroen" src="lopergroen.png">
  <img id="loperrood" src="loperrood.png">
  <img id="lopergeel" src="lopergeel.png">
  <img id="loperblauw" src="loperblauw.png">
</div>

<input type="button" id="btnSearch" value="Search" onclick="GetValue();" />

<p id="message" class="test">test</p>



<p id="demo1"></p>

＆＃13;

Answer 1

四个if语句（if (random === 1)等）共同构成了您（当前不存在的）move函数。将它们包装在一个函数中，并在GetValue：

的末尾调用它

＆＃13;

function movePlayer(playerIndex) {
  if (playerIndex === 1) {
    imgObjgroen.style.left = parseInt(imgObjgroen.style.left) + 95 + 'px';
  }

  if (playerIndex === 2) {
    imgObjrood.style.left = parseInt(imgObjrood.style.left) + 95 + 'px';
  }

  if (playerIndex === 3) {
    imgObjgeel.style.left = parseInt(imgObjgeel.style.left) + 95 + 'px';
  }

  if (playerIndex === 4) {
    imgObjblauw.style.left = parseInt(imgObjblauw.style.left) + 95 + 'px';
  }
}

function getValue() {
  /* your code */
  movePlayer(random);
}

＆＃13;

这应该会让你更进一步，但仍然远离最简单的＆＃34;实现这一目标的方式。

我建议您在名称清晰的小函数中分解代码。使用数组作为项目列表（例如：将您的玩家存储在一个数组中）。请记住，函数中的代码仅在调用函数时运行（例如：GetValue()在function GetValue() { }中运行块）。

如果您觉得需要更多帮助，请告诉我。

编辑：＆＃34;下一步＆＃34;让我的代码工作，我提出，在一个片段。注意：我必须进行一些更改才能正常工作：

您无法在random函数之外使用GetValue变量。
我必须通过id而非class来选择以定位元素
我将style.left更改为style.marginLeft所以我需要少一点css

免责声明：这绝不会修复您的所有游戏。如果我们重写所有内容，我不会认为它会有所帮助。一旦理解了下一步，您就应该能够慢慢解决其他问题：）

＆＃13;

var runner = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
  3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
  4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
];

function GetValue() {
  var random = runner[Math.floor(Math.random() * runner.length)];
  //alert(random);
  document.getElementById("message").innerHTML = random;
  for (var i = runner.length - 1; i >= 0; i--) {
    if (runner[i] === random) {
      runner.splice(i, 1);
      break;
    }
  }

  document.getElementById("demo1").innerHTML = runner;
  move(random);
}

var imgObjgroen = null;
var imgObjrood = null;
var imgObjgeel = null;
var imgObjblauw = null;

function init() {
  imgObjblauw = document.getElementById('loperblauw');
  imgObjblauw.style.marginLeft = '35px';
  imgObjgeel = document.getElementById('lopergeel');
  imgObjgeel.style.marginLeft = '35px';
  imgObjrood = document.getElementById('loperrood');
  imgObjrood.style.marginLeft = '35px';
  imgObjgroen = document.getElementById('lopergroen');
  imgObjgroen.style.marginLeft = '35px';
}

function move(random) {
  if (random === 1) {
    imgObjgroen.style.marginLeft = parseInt(imgObjgroen.style.marginLeft) + 95 + 'px';
  }

  if (random === 2) {
    imgObjrood.style.marginLeft = parseInt(imgObjrood.style.marginLeft) + 95 + 'px';
  }

  if (random === 3) {
    imgObjgeel.style.marginLeft = parseInt(imgObjgeel.style.marginLeft) + 95 + 'px';
  }

  if (random === 4) {
    imgObjblauw.style.marginLeft = parseInt(imgObjblauw.style.marginLeft) + 95 + 'px';
  }
}

window.onload = init;

＆＃13;

img {
  display: block;
}

＆＃13;

<div id="wrap">
  <img id="baan" src="baan.png">
  <img id="lopergroen" src="lopergroen.png">
  <img id="loperrood" src="loperrood.png">
  <img id="lopergeel" src="lopergeel.png">
  <img id="loperblauw" src="loperblauw.png">
</div>

<input type="button" id="btnSearch" value="Search" onclick="GetValue();" />

<p id="message" class="test">test</p>
<p id="demo1"></p>

＆＃13;

Answer 2

您的代码并不是真正的高效，因为您需要循环并测试所有数组元素，我认为您正在寻找的是Javascript array.filter()。它将完美地完成您要尝试的测试并过滤结果。

您的代码将是：

"Aggregations": {
           "Datatypes": {
                "Value": {
                "Both": 0,
                "Onlya": 1,
                "OnlyB": 1
            }
        }
    }

Answer 3

有一件事我发现你错过了：

Math.floor(Math.random() * 4)

应该是

Math.floor(Math.random() * 4) + 1

因为原样，你只得到0-3而不是1-4。所以你可以改变那个或你的if-else条件。您可以在控制台中测试它。

Javascript，比较数组中的元素，如果为true则执行函数

3 个答案: