memory-game/index.html at main · ashikscript/memory-game · 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
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🃏 মেমোরি কার্ড গেম</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>🃏 মেমোরি কার্ড গেম</h1>
<p class="subtitle">কার্ড উল্টে একই জোড়া খুঁজে পাও!</p>

<!-- MENU SCREEN -->
<div class="screen active" id="menuScreen">
  <div class="menu-card">
    <h2>🎮 গেম মোড বেছে নাও</h2>
    <button class="btn btn-p1" onclick="startGame('single')">👤 একক খেলা (১ জন)</button>
    <button class="btn btn-2p" onclick="startGame('two')">👥 দুইজন খেলা</button>
    <button class="btn btn-bot" onclick="startGame('bot')">🤖 বটের সাথে খেলো</button>
  </div>

  <div class="menu-card">
    <h2>⚙️ সেটিংস</h2>

    <label>কঠিনতা (বট মোডের জন্য):</label>
    <div class="difficulty">
      <button class="diff-btn selected" id="diff-easy" onclick="setDiff('easy')">সহজ 😊</button>
      <button class="diff-btn" id="diff-medium" onclick="setDiff('medium')">মাঝারি 😐</button>
      <button class="diff-btn" id="diff-hard" onclick="setDiff('hard')">কঠিন 😈</button>
    </div>

    <label>গ্রিড সাইজ:</label>
    <div class="difficulty">
      <button class="diff-btn selected" id="grid-4x5" onclick="setGrid(5)">৪×৫</button>
      <button class="diff-btn" id="grid-4x6" onclick="setGrid(6)">৪×৬</button>
      <button class="diff-btn" id="grid-6x7" onclick="setGrid67()">৬×৭</button>
    </div>

    <label>খেলোয়াড় ১ এর নাম:</label>
    <input type="text" id="p1Name" value="খেলোয়াড় ১" />

    <label>খেলোয়াড় ২ এর নাম (দুইজন মোডে):</label>
    <input type="text" id="p2Name" value="খেলোয়াড় ২" />
  </div>
</div>

<!-- GAME SCREEN -->
<div class="screen" id="gameScreen">
  <div class="game-header">
    <div class="player-info p1 active-turn" id="p1Info">
      <div class="player-name" id="p1Label">খেলোয়াড় ১</div>
      <div class="player-score" id="p1Score">০</div>
      <div class="turn-badge">তোমার পালা ▶</div>
    </div>

    <div style="text-align:center; padding: 0 8px;">
      <div style="font-size:11px; color:var(--muted)">জোড়া</div>
      <div style="font-size:18px; font-weight:700; color:var(--gold)" id="pairsLeft">০</div>
      <div style="font-size:10px; color:var(--muted)">বাকি</div>
    </div>

    <div class="player-info p2" id="p2Info">
      <div class="player-name" id="p2Label">খেলোয়াড় ২</div>
      <div class="player-score" id="p2Score">০</div>
      <div class="turn-badge">তোমার পালা ▶</div>
    </div>
  </div>

  <div class="bot-thinking" id="botThinking">
    🤖 বট ভাবছে<span class="dot">.</span><span class="dot">.</span><span class="dot">.</span>
  </div>

  <div class="grid-wrap">
    <div class="grid" id="grid"></div>
  </div>

  <div class="status-bar" id="statusBar">খেলা শুরু হয়েছে!</div>

  <button class="btn btn-gray" style="margin-top:12px; width:100%;" onclick="showMenu()">🏠 মেনুতে ফিরে যাও</button>
</div>

<!-- RESULT SCREEN -->
<div class="screen" id="resultScreen">
  <div class="result-card">
    <div class="result-title" id="resultEmoji">🎉</div>
    <div class="result-winner" id="resultWinner">বিজয়ী!</div>
    <div class="result-scores" id="resultScores"></div>
    <button class="btn btn-gold" onclick="replayGame()">🔄 আবার খেলো</button>
    <button class="btn btn-gray" style="margin-top:0" onclick="showMenu()">🏠 মেনু</button>
  </div>
</div>

<script src="script.js"></script>
</body>
</html>