js 找相同图片的游戏代码

在JavaScript中实现一个找相同图片的游戏，通常涉及到以下几个基础概念：

基础概念

DOM操作：用于动态创建和管理页面元素。
事件监听：处理用户的点击或其他交互行为。
数组和对象：用于存储和管理图片信息。
定时器：控制游戏的计时和动画效果。
图像加载：确保图片正确加载到页面中。

游戏优势

提高记忆力：玩家需要记住图片的位置来匹配相同的图片。
增强注意力：玩家需要仔细观察图片，避免误选。
娱乐性：适合各个年龄段的人玩，具有很好的娱乐性。

类型

经典模式：玩家需要在限定时间内找到所有相同的图片。
限时模式：设置不同的关卡和时间限制。
无尽模式：不断出现新的图片组合，直到玩家失败。

应用场景

教育软件：用于儿童的认知训练。
社交平台：作为小游戏增加用户互动。
休闲娱乐：在网页或移动应用中提供轻松的娱乐方式。

示例代码

以下是一个简单的找相同图片游戏的JavaScript代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>找相同图片游戏</title>
<style>
  .game-board img {
    width: 100px;
    height: 100px;
    margin: 5px;
    cursor: pointer;
  }
</style>
</head>
<body>

<div id="game-board" class="game-board"></div>
<div id="message"></div>

<script>
const images = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img1.jpg', 'img2.jpg', 'img3.jpg']; // 图片数组
const gameBoard = document.getElementById('game-board');
const message = document.getElementById('message');
let firstCard = null;
let secondCard = null;
let flippedCards = 0;

// 创建游戏板
function createGameBoard() {
  images.sort(() => 0.5 - Math.random()); // 打乱图片顺序
  for (let i = 0; i < images.length; i++) {
    const imgElement = document.createElement('img');
    imgElement.src = `images/${images[i]}`;
    imgElement.alt = images[i];
    imgElement.addEventListener('click', flipCard);
    gameBoard.appendChild(imgElement);
  }
}

// 翻转卡片
function flipCard() {
  if (this === firstCard || this.classList.contains('flipped')) return;
  this.classList.add('flipped');
  flippedCards++;

  if (firstCard === null) {
    firstCard = this;
  } else {
    secondCard = this;
    checkForMatch();
  }
}

// 检查是否匹配
function checkForMatch() {
  if (firstCard.src === secondCard.src) {
    message.textContent = '匹配成功！';
    firstCard = null;
    secondCard = null;
  } else {
    message.textContent = '不匹配，请再试一次。';
    setTimeout(() => {
      firstCard.classList.remove('flipped');
      secondCard.classList.remove('flipped');
      firstCard = null;
      secondCard = null;
    }, 1000);
  }
  flippedCards = 0;
  if (flippedCards === images.length) {
    message.textContent = '恭喜你完成了游戏！';
  }
}

createGameBoard();
</script>

</body>
</html>