LittileGame/algorithm.html at main · lynn40725/LittileGame · 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <title>你是哪一種買遊戲演算法玩家？</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      margin: 0;
      padding: 1.5rem;
      background: #f5f5f5;
      color: #1f2937;
      display: flex;
      justify-content: center;
    }

    .container {
      width: 100%;
      max-width: 900px;
      background: #ffffff;
      border-radius: 1rem;
      padding: 1.5rem 1.75rem 2rem;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
      border: 1px solid #ddd;
    }

    h1 {
      font-size: 1.8rem;
      margin-bottom: 0.5rem;
      color: #111827;
    }

    .subtitle {
      color: #374151;
      margin-bottom: 1.25rem;
      line-height: 1.6;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: #e0f2fe;
      color: #0369a1;
      border-radius: 999px;
      padding: 0.2rem 0.75rem;
      font-size: 0.8rem;
      margin-bottom: 0.75rem;
    }

    .questions {
      margin-top: 1rem;
      display: grid;
      gap: 1rem;
    }

    .question-card {
      background: #fafafa;
      border-radius: 0.85rem;
      padding: 0.9rem 1rem;
      border: 1px solid #e5e7eb;
    }

    .question-title {
      font-weight: 600;
      margin-bottom: 0.15rem;
      color: #111827;
      font-size: 1rem;
    }

    .question-desc {
      font-size: 0.85rem;
      color: #4b5563;
      margin-bottom: 0.4rem;
      line-height: 1.5;
    }

    .range-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .range-row span.label {
      font-size: 0.75rem;
      color: #6b7280;
      white-space: nowrap;
    }

    .range-row input[type="range"] {
      flex: 1;
      accent-color: #2563eb;
    }

    .range-value {
      min-width: 2rem;
      text-align: center;
      font-weight: 600;
      color: #1d4ed8;
      font-size: 0.9rem;
    }

    .hint-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      color: #6b7280;
      margin-top: 0.2rem;
    }

    button#calculateBtn {
      margin-top: 1.3rem;
      width: 100%;
      padding: 0.7rem 1rem;
      border-radius: 999px;
      border: none;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      background: linear-gradient(135deg, #3b82f6, #6366f1);
      color: white;
      transition: 0.15s ease;
      box-shadow: 0 6px 15px rgba(99, 102, 241, 0.35);
    }

    button#calculateBtn:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(99, 102, 241, 0.45);
    }

    button#calculateBtn:active {
      transform: translateY(1px);
      box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
    }

    .result-section {
      margin-top: 1.75rem;
      padding-top: 1.25rem;
      border-top: 1px solid #e5e7eb;
      display: none;
    }

    .result-tag {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #6b7280;
      margin-bottom: 0.3rem;
    }

    .result-title {
      font-size: 1.35rem;
      font-weight: 700;
      margin-bottom: 0.35rem;
    }

    .result-title.greedy { color: #d97706; }
    .result-title.dp { color: #059669; }
    .result-title.knn { color: #2563eb; }

    .result-desc {
      font-size: 0.92rem;
      color: #374151;
      line-height: 1.7;
      margin-bottom: 0.75rem;
    }

    .result-extra {
      font-size: 0.85rem;
      color: #4b5563;
      line-height: 1.6;
    }

    .score-row {
      margin-top: 0.7rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem 0.9rem;
      font-size: 0.78rem;
      color: #6b7280;
    }

    .score-pill {
      padding: 0.15rem 0.6rem;
      border-radius: 999px;
      background: #f3f4f6;
      border: 1px solid #d1d5db;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="badge">🎮 在 Steam 上，你怎麼決定要買哪一款？</div>
    <h1>你是哪一種「買買買演算法」玩家？</h1>

    <p class="subtitle">
      想像你正打開 Steam，願望清單滿滿一整頁。
      用直覺回答下面幾題，我們會幫你分類：
      <strong>貪婪演算法玩家</strong>、
      <strong>動態規劃玩家</strong>，或
      <strong>KNN（看鄰居）玩家</strong>！
    </p>

    <div class="questions">

      <!-- Q1 -->
      <div class="question-card">
        <div class="question-title">Q1. 你有多在意「立刻玩到」？</div>
        <div class="question-desc">看到一款喜歡的新遊戲，你會多想要<strong>立刻買來玩</strong>？</div>
        <div class="range-row">
          <span class="label">不急</span>
          <input type="range" id="q1" min="1" max="10" value="5">
          <span class="label">現在就要</span>
          <div class="range-value" data-for="q1">5</div>
        </div>
      </div>

      <!-- Q2 -->
      <div class="question-card">
        <div class="question-title">Q2. 你有多在意折扣跟史低？</div>
        <div class="question-desc">你會查價格紀錄、等史低嗎？</div>
        <div class="range-row">
          <span class="label">不會</span>
          <input type="range" id="q2" min="1" max="10" value="5">
          <span class="label">一定要查</span>
          <div class="range-value" data-for="q2">5</div>
        </div>
      </div>

      <!-- Q3 -->
      <div class="question-card">
        <div class="question-title">Q3. 朋友在玩對你有多大影響？</div>
        <div class="question-desc">朋友都在玩會讓你跟著買嗎？</div>
        <div class="range-row">
          <span class="label">完全不會</span>
          <input type="range" id="q3" min="1" max="10" value="5">
          <span class="label">超級會</span>
          <div class="range-value" data-for="q3">5</div>
        </div>
      </div>

      <!-- Q4 -->
      <div class="question-card">
        <div class="question-title">Q4. 你願意花時間規劃最划算的組合嗎？</div>
        <div class="question-desc">你會比價、開表單找「最優解」嗎？</div>
        <div class="range-row">
          <span class="label">懶得算</span>
          <input type="range" id="q4" min="1" max="10" value="5">
          <span class="label">會算到爆</span>
          <div class="range-value" data-for="q4">5</div>
        </div>
      </div>

      <!-- Q5 -->
      <div class="question-card">
        <div class="question-title">Q5. 預算限制對你重要嗎？</div>
        <div class="question-desc">你會抓預算、做整體規劃嗎？</div>
        <div class="range-row">
          <span class="label">不重要</span>
          <input type="range" id="q5" min="1" max="10" value="5">
          <span class="label">很重要</span>
          <div class="range-value" data-for="q5">5</div>
        </div>
      </div>

      <!-- Q6 -->
      <div class="question-card">
        <div class="question-title">Q6. 你會查評論、看別人在玩嗎？</div>
        <div class="question-desc">你會看 streamer 或 Steam 評論嗎？</div>
        <div class="range-row">
          <span class="label">不會</span>
          <input type="range" id="q6" min="1" max="10" value="5">
          <span class="label">一定會</span>
          <div class="range-value" data-for="q6">5</div>
        </div>
      </div>

    </div>

    <button id="calculateBtn">看結果</button>

    <div id="resultSection" class="result-section">
      <div class="result-tag">分析結果</div>
      <div id="resultTitle" class="result-title"></div>
      <p id="resultDesc" class="result-desc"></p>
      <p id="resultExtra" class="result-extra"></p>

      <div class="score-row" id="scoreRow"></div>
    </div>

  </div>

  <script>
    document.querySelectorAll('input[type="range"]').forEach(range => {
      const span = document.querySelector(`.range-value[data-for="${range.id}"]`);
      span.textContent = range.value;
      range.addEventListener('input', () => span.textContent = range.value);
    });

    document.getElementById("calculateBtn").addEventListener("click", () => {
      const v = id => parseInt(document.getElementById(id).value);
      const q1 = v("q1"), q2 = v("q2"), q3 = v("q3"), q4 = v("q4"), q5 = v("q5"), q6 = v("q6");

      const greedy = q1 + (11 - q4) + (11 - q5) + (11 - q6);
      const dp = q2 + q4 + q5;
      const knn = q3 + q6;

      let type = "greedy", max = greedy;
      if (dp >= max) { type = "dp"; max = dp; }
      if (knn >= max) { type = "knn"; max = knn; }

      const title = document.getElementById("resultTitle");
      title.classList.remove("greedy", "dp", "knn");

      if (type === "greedy") {
        title.textContent = "你是：貪婪演算法型玩家";
        title.classList.add("greedy");
        resultDesc.textContent =
          "你最重視「當下的爽感」。只要現在想玩，會立刻買下來，比起等待折扣或查史低，你更在意當下能不能玩到。";
        resultExtra.textContent =
          "你的行為就像貪婪演算法：每一步都選當下最好的選項，不回頭、不等未來。很適合喜歡衝首發、立即支持創作者的玩家。";
      } else if (type === "dp") {
        title.textContent = "你是：動態規劃型玩家";
        title.classList.add("dp");
        resultDesc.textContent =
          "你會查折扣、查史低，也會考慮整體預算和遊玩規劃。你會想：「如果這次特賣買 A+B 更划算，那我要調整一下組合。」";
        resultExtra.textContent =
          "你的思考方式像動態規劃：整體評估所有選項，找出最優解。你可能會開表單、比價、查便宜平台，是最會省錢的玩家族群。";
      } else {
        title.textContent = "你是：KNN（看鄰居）型玩家";
        title.classList.add("knn");
        resultDesc.textContent =
          "你很重視朋友在玩什麼、實況主推薦什麼、評論怎麼說。一起玩比玩什麼更重要。";
        resultExtra.textContent =
          "你的行為像 KNN：找出和你最相似的一群鄰居，再跟著他們做決定。你是最容易和朋友一起享受遊戲的玩家類型。";
      }

      document.getElementById("scoreRow").innerHTML = `
        <div class="score-pill">貪婪分數：${greedy}</div>
        <div class="score-pill">動態規劃：${dp}</div>
        <div class="score-pill">KNN：${knn}</div>
      `;

      document.getElementById("resultSection").style.display = "block";
      document.getElementById("resultSection").scrollIntoView({ behavior: "smooth" });
    });
  </script>

</body>
</html>