JavaScript 对对碰游戏

在本文中，我们将使用 JavaScript 创建一个卡片对对碰游戏。这个集中力和记忆匹配游戏主要用于测试玩家的记忆和专注水平。在这里，玩家需要找出所有在面朝下的棋盘上放置的相同卡片对。玩家一次只能翻开 2 张卡片。因此，请记住它们的位置以便找到相应的卡片匹配。玩家需要在最少的移动次数内完成找到所有卡片对的游戏。完成项目后，将显示如下的图片：

JavaScript 对对碰游戏

先决条件

项目结构

将出现以下项目结构：

JavaScript 对对碰游戏

步骤

使用HTML标签（如div、heading、span、p等）在body标签中创建游戏卡片布局，并添加相关的类名和id。
使用标签、id和类名来使用CSS属性（如margin、padding、背景颜色、字体属性、高度、宽度等）来样式化页面。
在JavaScript中，首先创建一个要在游戏中使用的项目列表，并使用交换和math.random()方法的洗牌函数重排它们。
定义一个createCard()函数，使用HTML DOM方法（如createElement、classList.add、getElementById等）在网页上呈现项目，并使用array.map()方法呈现所有项目。
使用addEventListener来处理点击事件，以更新移动次数，并触发toggle函数来相应更新卡片，使用setTimeout函数来应用一些延迟。
使用check函数来检查游戏是否结束，使用window.alert来显示结果。

示例: 此示例演示了使用JavaScript进行配对游戏。

HTML

<!-- index.html -->
<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" /> 
    <title>Pair game</title> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1" /> 
    <link rel="stylesheet" 
          href="style.css" /> 
</head> 
  
<body> 
    <h1>Find All Pair Cards</h1> 
    <div class="root"> 
        <br /> 
        <h3 id="count">Total Moves : 0</h3> 
        <div class="card" id="card"></div> 
    </div> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* style.css */
  
@import url( 
"https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"); 
  
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
  
body { 
    min-height: 50vh; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    justify-content: center; 
    background: hsl(0, 0%, 100%); 
    font-family: "Poppins", sans-serif; 
} 
  
h1 { 
    font-size: xx-large; 
    padding: 2%; 
} 
  
.root { 
    background: rgb(60, 125, 60); 
    margin: 0 1rem; 
    padding: rem; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
    width: 50rem; 
    border-radius: 0.5rem; 
} 
  
.card { 
    margin: 5%; 
    text-align: centre; 
    display: flex; 
    flex-wrap: wrap; 
} 
  
.card-item { 
    color: white; 
    height: 100px; 
    font-size: larger; 
    margin: 2%; 
    padding: 4%; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
    width: 28%; 
    background: rgb(2, 0, 36); 
    background: linear-gradient(120deg, rgb(0, 37, 61) 0%,  
                rgba(45, 128, 97, 0.33657212885154064) 35%, 
                  rgba(0, 212, 255, 1) 100%); 
} 
  
#count { 
    font-size: xx-large; 
    color: antiquewhite; 
} 
  
p { 
    font-size: x-large; 
    font-weight: bolder; 
}

JavaScript

// script.js 
  
let list = [ 
    "HTML", 
    "HTML", 
    "CSS", 
    "CSS", 
    "JavaScript", 
    "JavaScript", 
    "React", 
    "React", 
    "Geeks", 
    "Geeks", 
    "Bootstrap", 
    "Bootstrap", 
]; 
  
let match = ""; 
let click = 0; 
let count = 0; 
function check() { 
    if (count === 6) 
        window.alert("You win! your score is :" + click); 
} 
  
// To shuffle the list 
function shuffleList(List) { 
    for (let i = List.length - 1; i > 0; i--) { 
        let j = Math.floor(Math.random() * (i + 1)); 
        let temp = List[i]; 
        List[i] = List[j]; 
        List[j] = temp; 
    } 
    return List; 
} 
  
list = shuffleList(list); 
  
// Toggle function to handle moves 
let toggle = (text) => { 
    click = click + 1; 
    document.getElementById("count").innerText = 
        "Total Moves: " + click; 
          
    // Toogle class and update text visibility 
    text.classList.toggle("active"); 
    if (text.style.display === "block") { 
        text.style.display = "none"; 
        match = ""; 
    } else if (text.style.display === "none") { 
        text.style.display = "block"; 
        if (match === "") match = text; 
        else if (match.innerText === text.innerText) { 
            text.style.display = "inline"; 
            match.style.display = "inline"; 
            count++; 
            match = ""; 
              
            // Check and display result with .5 sec delay 
            setTimeout(() => check(), 500); 
        } else { 
          
            // Revert back changes if no match 
            // found with delay 
            setTimeout(() => { 
                text.style.display = "none"; 
                match.style.display = "none"; 
                match = ""; 
            }, 500); 
        } 
    } 
}; 
  
// Create cards 
function createCard(e) { 
    const cardItem = document.createElement("div"); 
    cardItem.classList.add("card-item"); 
    const text = document.createElement("p"); 
    text.innerText = e; 
    text.style.display = "none"; 
    cardItem.appendChild(text); 
    text.style.display = "none"; 
    cardItem.addEventListener("click", () => toggle(text)); 
    const card = document.getElementById("card"); 
    card.appendChild(cardItem); 
} 
  
// Load all card items 
list.map((e, i) => createCard(e, i));