Question

我正在尝试制作记忆棋盘游戏。我完成了游戏的css部分，但JavaScript部分假设如何解决。我尝试使用下面的代码。当我点击该框时，即使它们是相同的，该框也不会消失，当它不是相同的数字时，该框不会回转。另外，对于我的“游戏盒”，我想添加一张图片作为背景。我无法让它发挥作用。谁能帮我。感谢。

<html>
<style>

#gamebox
{
   position: absolute;
   top: 100px;
   left: 100px;
   background-image: url("https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=&url=http%3A%2F%2Fwww.pokemontimes.it%2Fhome%2F2014%2F10%2Fannunciato-il-pokemon-center-mega-tokyo-in-apertura-a-dicembre%2F%3F%3Drelated&psig=AFQjCNFGPAm9tU9MR4AZJKe1s6F90F8UFg&ust=1454720806721506");

}

div.box
{
  position: absolute;
  background-color: red;
  top: -800px;
  left: -800px;
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 30px;
}

div.box:hover
{
  background-color: blue;
}
</style>

<div id=gamebox></div>
<div id=boxdiv class=box onclick="clickedBox(this)"></div>

<script>
var squaresize = 100;
var numsquares = 6;
var numClicked = 0;
var firstClicked;
var secondClicked;
var game = [];
for (var i = 0; i < numsquares; i++)
{
  game[i] = [];
  for (var j = 0; j < numsquares; j++)
  {
     game[i][j] = Math.floor(Math.random()*5);
     makeBox(i, j);
  }
}

function theSame(abox, bbox)
{
   var boxParts = abox.id.split("-");
   var i = boxParts[1];
   var j = boxParts[2];
   var boxaNum = game[i][j];
   var boxParts = bbox.id.split("-");
   i = boxParts[1];
   j = boxParts[2];
   var boxbNum = game[i][j];

   return(boxaNum == boxbNum);
}

function nextTurn()
{
   if (numClicked != 2)
      return;


   if (theSame(firstClicked, secondClicked))
   {
      deleteBox(firstClicked);
      deleteBox(secondClicked);
   }
   else
   {
      hideBox(firstClicked);
      hideBox(secondClicked);
   }
   numClicked = 0;
}

function hideBox(box)
{
   box.innerHTML = "";
   box.style.backgroundColor = "red";

}

function deleteBox(box)
{
   //really delete the box
   box.style.backgroundColor = "";
}

function showBox(box)
{
   var boxParts = box.id.split("-");
   var i = boxParts[1];
   var j = boxParts[2];
   box.innerHTML = game[i][j];
   box.style.backgroundColor = "black";
   box.style.color = "white";
}

function clickedBox(box)
{
   showBox(box);
   numClicked++;

   if (numClicked == 1)
   {
      firstClicked = box;
      return;
   }

   if (numClicked == 2)
   {
      secondClicked = box;
   }
}

function makeBox(i, j)
{
   var boxdiv = document.getElementById("boxdiv");
   var newBox = boxdiv.cloneNode(true);
   newBox.style.left = i * (squaresize + 5);
   newBox.style.top = j * (squaresize + 5);
   newBox.style.width = squaresize;
   newBox.style.height = squaresize;
   newBox.id = 'box-' + i + '-' + j;
   var gamebox = document.getElementById("gamebox");
   gamebox.appendChild(newBox);
}
</script>

</html>

Answer 1

我认为你没有在你的代码中的任何地方调用nextTurn（），这意味着从不调用theSame（），因此没有任何东西可以与彼此进行比较。

也许在clickedBox（）函数中的numClicked === 2时尝试调用nextTurn（）。

如何使这个内存板游戏工作？

1 个答案: