html中简单的连连看代码

Html语言中，连连看游戏是很受欢迎的小游戏之一，它不仅能够提升人们的注意力和反应能力，还可以增强大脑的记忆力，下面就让我们来了解一下简单的HTML代码如何实现连连看游戏。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.tile {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  cursor: pointer;
  background-color: grey;
  display: inline-block;
  margin: 5px;
}

#game-container {
  width: 290px;
  margin: 0 auto;
}

.game-row {
  white-space: Nowrap;
}
</style>
</head>
<body>
<div id="game-container">
</div>

<script type="text/javascript">
var tileArray = ["★","▪","▲","►","○","▣","☀","☂","♞","✈","✋","➡","➭","〈","〉","■","●","♪","♫","♯","♠","♣","♥","♦"];

function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
}

function createGame() {
  var shuffledArray = shuffleArray(tileArray.concat(tileArray));
  var gameContainer = document.getElementById("game-container");
  var currentRow = document.createElement("div");
  currentRow.className = "game-row";
  for (var i = 0; i < shuffledArray.length; i++) {
    var currentTile = document.createElement("div");
    currentTile.className = "tile";
    currentTile.innerHTML = shuffledArray[i];
    currentTile.setAttribute("data-tilevalue",shuffledArray[i]);
    currentTile.addEventListener("click",tileClickEvent);
    currentRow.appendChild(currentTile);
    if ((i + 1) % 5 == 0) {
      gameContainer.appendChild(currentRow);
      currentRow = document.createElement("div");
      currentRow.className = "game-row";
    }
  }
}

var totalClicks = 0;
var firstTileClicked = null;
var secondTileClicked = null;
var tileClickEvent = function() {
  totalClicks++;
  if (totalClicks % 2 !== 0) {
    firstTileClicked = this;
    firstTileClicked.style.backgroundColor = "white";
  } else {
    secondTileClicked = this;
    secondTileClicked.style.backgroundColor = "white";
    if (firstTileClicked.getAttribute("data-tilevalue") === secondTileClicked.getAttribute("data-tilevalue")) {
      firstTileClicked.removeEventListener("click",tileClickEvent);
      secondTileClicked.removeEventListener("click",tileClickEvent);
    } else {
      setTimeout(function() {
        firstTileClicked.style.backgroundColor = "grey";
        secondTileClicked.style.backgroundColor = "grey";
      },500);
    }
  }
};

createGame();
</script>
</body>
</html>

html中简单的连连看代码

在上述代码中，我们包含了Html和Javascript代码。其中，我们使用了CSS来对游戏界面进行样式调整。在该代码中，每个盒子都是一个tile类，使用了display:inline-block，让每个块元素在同一行排列。在Javascript中，我们在点击游戏块元素时进行操作。在每一次移动游戏块之前，我们需要计算用户的总点击次数，以便于控制游戏进程。我们还在游戏块元素上设置了一个数据属性，以便我们能够判断两个元素是否属于同一对。在判断两个元素之后，我们对其中不匹配的块进行颜色改变，并在500ms之后恢复为灰色。在此基础上，我们不难将代码进行扩展，以实现更为高级的连连看游戏。

html中简单的连连看代码

相关推荐