mid-time.github.io/dungeontest.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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
<head>
    <title>地牢（测试版）</title>
    <style>
        .container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        .attribute {
            display: flex;
            align-items: center;
            margin: 10px 0;
            gap: 10px;
        }
        .controls {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        button {
            padding: 5px 12px;
            cursor: pointer;
            background: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button:hover {
            background: #e0e0e0;
        }
        .stat-value {
            min-width: 30px;
            text-align: center;
            font-weight: bold;
        }
        #point {
            margin: 15px 0;
            color: #666;
        }
        #error {
            color: red;
            margin: 10px 0;
            min-height: 20px;
        }
        .start-button {
            margin-top: 20px;
            padding: 10px 25px;
            background: #4CAF50;
            color: white;
            border: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>地牢（测试版）</h2>
        <div id="point">剩余点数：20</div>
        <div id="attributes"></div>
        <button class="start-button" onclick="startGame()">开始游戏</button>
        <div id="error" role="alert"></div>
        <div id="result"></div>
    </div>

    <script>
        // 初始配置
        let points = 20; // 总点数
        const minStatValue = 1; // 属性最小值
        const maxStatValue = 10; // 属性最大值
        const attributes = ['力量', '健康', '速度', '魅力', '智力', '感知'];
        const stats = {}; // 存储当前属性值

        // 初始化属性列表
        function initAttributes() {
            const container = document.getElementById('attributes');

            attributes.forEach(attr => {
                const id = attr.toLowerCase();
                stats[id] = minStatValue; // 初始化属性值

                const html = `
                    <div class="attribute">
                        <span>${attr}</span>
                        <div class="controls">
                            <button onclick="adjustStat('${id}', -1)">-</button>
                            <span id="${id}" class="stat-value">${minStatValue}</span>
                            <button onclick="adjustStat('${id}', 1)">+</button>
                        </div>
                    </div>
                `;
                container.insertAdjacentHTML('beforeend', html);
            });
        }

        // 调整属性值
        function adjustStat(statId, delta) {
            const valueElem = document.getElementById(statId);
            let currentValue = parseInt(valueElem.textContent);
            const newValue = currentValue + delta;

            // 验证规则
            if (delta > 0 && points <= 0) {
                showError('点数不足！');
                return;
            }
            if (newValue < minStatValue) {
                showError('属性值不能低于 ' + minStatValue);
                return;
            }
            if (newValue > maxStatValue) {
                showError('属性值不能高于 ' + maxStatValue);
                return;
            }
            // 更新数值和点数
            currentValue = newValue;
            points -= delta;

            valueElem.textContent = currentValue;
            document.getElementById('point').textContent = `剩余点数：${points}`;
            stats[statId] = currentValue;

            clearError();
        }

        // 开始游戏
        function startGame() {
            if (points > 0) {
                showError('请先分配所有点数！');
                return;
            }

            const result = [];
            for (const [key, value] of Object.entries(stats)) {
                result.push(`${key}: ${value}`);
            }
            document.getElementById('result').textContent =
                `角色创建成功！属性：${result.join(', ')}`;
        }

        // 辅助函数
        function showError(message) {
            const errorElem = document.getElementById('error');
            errorElem.textContent = message;
            setTimeout(clearError, 2000);
        }

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

        // 页面初始化
        initAttributes();
    </script>
</body>
</html>