谁是卧底 HTML 游戏代码示例 - 简单易懂 - 常规

下面是一个简单的谁是卧底 HTML 游戏的源代码：

<!DOCTYPE html>
<html>
<head>
    <title>谁是卧底</title>
    <style>
        body {
            text-align: center;
        }
        h1 {
            margin-top: 50px;
        }
        .container {
            display: flex;
            justify-content: center;
            margin-top: 50px;
        }
        .card {
            width: 100px;
            height: 150px;
            background-color: #f2f2f2;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 0 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .card:hover {
            background-color: #e6e6e6;
        }
        .card p {
            margin: 0;
        }
        #result {
            margin-top: 30px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>谁是卧底</h1>
    <div class="container">
        <div class="card" onclick="revealRole('civilian')">
            <img src="civilian.jpg" alt="civilian" width="80" height="80">
            <p>平民</p>
        </div>
        <div class="card" onclick="revealRole('undercover')">
            <img src="undercover.jpg" alt="undercover" width="80" height="80">
            <p>卧底</p>
        </div>
    </div>
    <p id="result"></p>

    <script>
        function revealRole(role) {
            if (role === 'undercover') {
                document.getElementById('result').innerHTML = '你是卧底！';
            } else {
                document.getElementById('result').innerHTML = '你是平民。';
            }
        }
    </script>
</body>
</html>

注意：这只是一个简单的示例，使用了两张图片（civilian.jpg和undercover.jpg），你可以将这些图片替换为你自己的图片。你可以根据需要对代码进行修改和美化。