mid-time.github.io/dungeon.html at main · Mid-time/mid-time.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
    <title>地牢（测试版）</title>
    <style>
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        input { width: 20px; padding: 8px; margin: 5px 0; }
        button {
            padding: 8px 16px;
            border: none;
            cursor: pointer;
            margin: 5px;
            text-align: center;
        #buttonaccess {
            background: #4CAF50;
            color: white;
        }
        #buttoncancel {
            background: #2196F3;
            color: white;
        }
        #buttoncontrol {
            background: #9BD0E5;
            color: white;
        #buttonsubcontrol {
            background: #008CBA;
            color: white;
        }
        #result { margin-top: 20px; white-space: pre-wrap; }
        .attribute { display: flex; align-items: center; margin: 10px 0; }
        .attribute label { width: 80px; }
        .controls { display: flex; align-items: center; gap: 8px; }
        .btn-control { padding: 4px 12px; }
        .stat-value { min-width: 30px; text-align: center; }
        .start-button { margin-top: 20px; padding: 10px 20px; }
        .error { color: red; margin-top: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <h2>地牢（测试版）</h2>
        <div id="point" aria-live="polite">剩余点数：10</div>

        <!-- 属性列表容器 -->
        <div class="attribute-list">
            <!-- 单个属性模板（可用 JavaScript 动态生成） -->
            <div class="attribute">
                <label>力量</label>
                <div class="controls">
                    <button type="button" class="btn-control" onclick="adjustStat('power', -1)">-</button>
                    <span id="power" class="stat-value">1</span>
                    <button type="button" class="btn-control" onclick="adjustStat('power', 1)">+</button>
                </div>
            </div>

            <!-- 其他属性复用相同结构（健康/速度/魅力/智力/感知） -->
            <div class="attribute">
                <label>健康</label>
                <div class="controls">
                    <button type="button" class="btn-control" onclick="adjustStat('health', -1)">-</button>
                    <span id="health" class="stat-value">1</span>
                    <button type="button" class="btn-control" onclick="adjustStat('health', 1)">+</button>
                </div>
            </div>

            <!-- 其他属性结构同理... -->
        </div>

        <button class="start-button" onclick="startGame()">开始游戏</button>
        <div id="error" class="error" role="alert"></div>
        <div id="result" aria-live="polite"></div>
    </div>

    <script>
let points = 10; // 初始点数

function adjustStat(statId, delta) {
    const valueElem = document.getElementById(statId);
    let currentValue = parseInt(valueElem.textContent);

    // 验证点数是否充足
    if (delta > 0 && points <= 0) {
        showError("点数不足！");
        return;
    }

    // 更新数值
    currentValue += delta;
    points -= delta;

    // 更新显示
    valueElem.textContent = currentValue;
    document.getElementById('point').textContent = `剩余点数：${points}`;

    // 禁用/启用按钮（可选）
    updateButtonStates();
}

function showError(message) {
    const errorElem = document.getElementById('error');
    errorElem.textContent = message;
    setTimeout(() => errorElem.textContent = '', 3000);
}

const attributes = ['力量', '健康', '速度', '魅力', '智力', '感知'];
const container = document.querySelector('.attribute-list');

attributes.forEach(attr => {
    const id = attr.toLowerCase();
    const html = `
        <div class="attribute">
            <label>${attr}</label>
            <div class="controls">
                <button type="button" class="btn-control" onclick="adjustStat('${id}', -1)">-</button>
                <span id="${id}" class="stat-value">1</span>
                <button type="button" class="btn-control" onclick="adjustStat('${id}', 1)">+</button>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
});
        function start() {
            // 清空错误提示和隐藏复制按钮
            document.getElementById('error').textContent = '';

        function showError(message) {
            document.getElementById('error').textContent = message;
        }

        function randint(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
    </script>
</body>
</html>