Scribd
Upload
38 views14 pages

Text

The document outlines the structure and design of a web-based puzzle game called 'Mogoj Dholai: Clever Puzzles'. It includes HTML, CSS, and JavaScript code for the game's interface, which features various puzzle types, a loading overlay, and user interaction elements such as buttons for hints and retries. The game is designed to be visually appealing and user-friendly, with a focus on engaging puzzles for players to solve.

Uploaded by

i48104272
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
38 views14 pages

Text

The document outlines the structure and design of a web-based puzzle game called 'Mogoj Dholai: Clever Puzzles'. It includes HTML, CSS, and JavaScript code for the game's interface, which features various puzzle types, a loading overlay, and user interaction elements such as buttons for hints and retries. The game is designed to be visually appealing and user-friendly, with a focus on engaging puzzles for players to solve.

Uploaded by

i48104272
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<title>Mogoj Dholai: Clever Puzzles</title>
<!-- Google Fonts & Icons -->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Hind+Siliguri:wght@400;600;700&family=Poppins:wght@400;600;700&display=sw
ap" rel="stylesheet">
<link rel="stylesheet" href="[Link]
family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" />

<style>
/* CSS কোড এখানে */
:root {
--md-primary: #6200EE;
--md-secondary: #03DAC6;
--md-background: #F4F6F8;
--md-surface: #FFFFFF;
--md-error: #B00020;
--md-on-primary: #FFFFFF;
--md-on-secondary: #000000;
--md-on-surface: #000000;
--font-primary: 'Poppins', 'Hind Siliguri', sans-serif;
--font-secondary: 'Hind Siliguri', sans-serif;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}

html, body {
width: 100%;
height: 100%;
overflow: hidden;
}

body {
font-family: var(--font-secondary);
background-color: #212121;
display: flex;
justify-content: center;
align-items: center;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

#game-container {
width: 100%;
max-width: 420px;
height: 100dvh;
background-color: var(--md-background);
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

@media (min-width: 421px) {


#game-container {
border-radius: 24px;
max-height: 850px;
}
}

#loading-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: var(--md-background); z-index: 2000;
display: flex; justify-content: center; align-items: center;
transition: opacity 0.5s ease-out;
}
#[Link] {
opacity: 0;
pointer-events: none;
}
.spinner {
width: 50px; height: 50px;
border: 5px solid rgba(0,0,0,0.1);
border-top-color: var(--md-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.app-bar {
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background-color: var(--md-surface);
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
z-index: 10;
}
.app-bar .title {
font-family: var(--font-primary);
font-size: 1.2em;
font-weight: 600;
}
.chip {
display: flex;
align-items: center;
background-color: #f1f1f1;
padding: 6px 12px;
border-radius: 16px;
font-weight: 600;
}
.coin-icon {
font-size: 20px;
margin-right: 6px;
color: #FFC107;
}

#puzzle-area-container {
flex-grow: 1;
padding: 16px;
display: flex;
overflow: hidden;
}
.card {
width: 100%;
height: 100%;
background-color: var(--md-surface);
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
#question-text {
font-size: 1.4em;
font-weight: 600;
text-align: center;
margin-bottom: 20px;
color: var(--md-on-surface);
line-height: 1.4;
flex-shrink: 0;
cursor: default;
}
#puzzle-content {
width: 100%;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 15px;
position: relative;
overflow: hidden;
}

footer {
flex-shrink: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 16px;
gap: 16px;
}
.fab-btn {
width: 60px; height: 60px;
border-radius: 50%;
border: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--md-on-primary);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
margin: 0 auto;
}
.fab-btn:active {
transform: scale(0.95);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.[Link] { background-color: var(--md-primary); }
.[Link] { background-color: #FBC02D; }
.[Link] { background-color: var(--md-error); }
.fab-btn .material-symbols-outlined { font-size: 28px; }
.fab-btn .cost { font-size: 0.7em; font-weight: bold; position:
absolute; bottom: 8px; }

#modal-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex; justify-content: center; align-items: center;
z-index: 1000; opacity: 1; transition: opacity 0.3s ease;
}
#[Link] {
opacity: 0;
pointer-events: none;
}
.dialog-box {
background-color: var(--md-surface);
border-radius: 20px;
padding: 24px;
width: 85%;
max-width: 340px;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
transform: scale(0.95);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
#modal-overlay:not(.hidden) .dialog-box {
transform: scale(1);
opacity: 1;
}
.dialog-box h2 { font-family: var(--font-primary); font-size: 1.5em;
margin-bottom: 12px; }
.dialog-box p { font-size: 1.1em; margin-bottom: 24px; color: #555; }
.dialog-actions { text-align: right; }
.flat-button {
background: none; border: none;
color: var(--md-primary);
font-family: var(--font-primary);
font-weight: 700;
font-size: 1em;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s;
}
.flat-button:hover { background-color: rgba(98, 0, 238, 0.08); }

.clickable-item { cursor: pointer; }


#answer-input {
padding: 12px; font-size: 1.2em; width: 180px; text-align: center;
border: 2px solid #ccc; border-radius: 8px;
}
#submit-answer {
padding: 12px 24px; font-size: 1em; cursor: pointer;
background-color: var(--md-secondary); color: var(--md-on-
secondary);
border: none; border-radius: 8px; font-weight: bold;
}
.draggable { cursor: grab; z-index: 100; touch-action: none; }
.draggable:active { cursor: grabbing; }

.seq-btn {
padding: 15px; font-size: 1.2em; border-radius: 12px;
border: 2px solid #ccc; background-color: #fff; cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
}
.seq-btn:active {
transform: scale(0.95);
background-color: #e0e0e0;
}
.shake-anim { animation: shake-anim 0.5s cubic-bezier(.36,.07,.19,.97)
both; }
@keyframes shake-anim {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(2px, 0, 0); }
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(4px, 0, 0); }
}
</style>
</head>
<body>
<div id="loading-overlay">
<div class="spinner"></div>
</div>

<div id="game-container">
<header class="app-bar">
<div id="level-indicator" class="title">Level 1</div>
<div id="coin-counter" class="chip">
<span class="material-symbols-outlined coin-
icon">monetization_on</span>
<span id="coin-amount">100</span>
</div>
</header>

<main id="puzzle-area-container">
<div class="card">
<p id="question-text">প্রশ্ন লোড হচ্ছে...</p>
<div id="puzzle-content">
<!-- Dynamic puzzle elements go here -->
</div>
</div>
</main>

<footer>
<button id="retry-btn" class="fab-btn secondary" aria-label="Retry
Level">
<span class="material-symbols-outlined">refresh</span>
</button>
<button id="hint-btn" class="fab-btn primary" aria-label="Get Hint">
<span class="material-symbols-outlined">lightbulb</span>
<span id="hint-cost" class="cost">(20)</span>
</button>
<button id="skip-btn" class="fab-btn accent" aria-label="Skip
Level">
<span class="material-symbols-outlined">skip_next</span>
<span id="skip-cost" class="cost">(50)</span>
</button>
</footer>
</div>

<div id="modal-overlay" class="hidden">


<div class="dialog-box">
<h2 id="modal-title">সাবাশ!</h2>
<p id="modal-message">সঠিক উত্তর।</p>
<div class="dialog-actions">
<button id="modal-close-btn" class="flat-button">পরবর্তী</button>
</div>
</div>
</div>
<script>
// JavaScript কোড এখানে
[Link]('DOMContentLoaded', () => {
const elements = {
loadingOverlay: [Link]('loading-overlay'),
levelIndicator: [Link]('level-indicator'),
coinAmount: [Link]('coin-amount'),
questionText: [Link]('question-text'),
puzzleContent: [Link]('puzzle-content'),
retryBtn: [Link]('retry-btn'),
hintBtn: [Link]('hint-btn'),
skipBtn: [Link]('skip-btn'),
modalOverlay: [Link]('modal-overlay'),
modalTitle: [Link]('modal-title'),
modalMessage: [Link]('modal-message'),
modalCloseBtn: [Link]('modal-close-btn'),
hintCost: [Link]('hint-cost'),
skipCost: [Link]('skip-cost')
};

const HINT_COST = 20;


const SKIP_COST = 50;

let gameState = {
currentLevel: 0,
coins: 100,
};
let currentSequence = [];
let activeListeners = [];

// <<< ধাঁধার ভান্ডার >>>


// ৬০০+ ধাঁধা যোগ করা একটি বিশাল সৃজনশীল কাজ।
// আমি আপনাকে একটি শক্তিশালী কাঠামো এবং প্রায় ২০টি বিভিন্ন ধরণের ধাঁধার
উদাহরণ দিয়ে দিচ্ছি।
// আপনি এই কাঠামো অনুসরণ করে সহজেই আরও ধাঁধা যোগ করতে পারবেন।
const puzzles = [
{
"level": 1, "question": "কোন প্রাণীটি ছবিতে নেই?", "type": "click",
"hint": "ভালো করে ভাবুন, হাতি কি সত্যি একটি প্রাণী? নাকি অন্য কিছু ?",
"elements": [
{ "type": "img", "src": "[Link]
"isCorrect": false, "style": "width: 90px; cursor: pointer;" },
{ "type": "img", "src": "[Link]
"isCorrect": false, "style": "width: 90px; cursor: pointer;" },
{ "type": "div", "text": "হাতি", "isCorrect": true, "id":
"correct-text", "style": "font-size: 2em; font-weight: bold; padding: 10px;
cursor: pointer;" }
]
},
{
"level": 2, "question": "এই শার্টে কয়টি ছিদ্র আছে?", "type":
"input", "hint": "শুধু সামনের ছিদ্রগুলোই নয়, গলা, হাত এবং শার্টের নিচের অংশও কিন্তু ছিদ্র!
মোট ৮টি।", "solution": "8",
"elements": [
{ "type": "img", "src": "[Link]
[Link]", "style": "width: 180px; margin-bottom: 20px;" },
{ "type": "input", "id": "answer-input", "placeholder":
"উত্তর?", "attributes": {"type": "number", "inputmode": "numeric"} },
{ "type": "button", "id": "submit-answer", "text": "Submit" }
]
},
{
"level": 3, "question": "সবুজ বাতিটি জ্বালান।", "type": "drag",
"hint": "শক্তির উৎস কোথায়? তার ছাড়া কি বাতি জ্বলবে? তারটিকে পাওয়ার সকেটের সাথে সংযুক্ত
করুন।",
"elements": [
{ "type": "div", "id": "bulb", "style": "width: 80px; height:
120px; background-image: url('[Link]
background-size: contain; background-repeat: no-repeat; position: absolute; top:
20%; left: 40%;" },
{ "type": "div", "id": "wire", "class": "draggable", "style":
"width: 100px; height: 10px; background-color: #555; position: absolute; top:
70%; left: 10%; border-radius: 5px;" },
{ "type": "div", "id": "power-socket", "class": "droptarget",
"style": "width: 60px; height: 60px; background-color: #ddd; border: 2px dashed
#999; position: absolute; top: 65%; left: 70%;" }
]
},
{
"level": 4, "question": "ফোনটি ঝাঁকান!", "type": "shake", "hint":
"আপনার মোবাইল ফোনটি হাতে নিয়ে হালকা করে ঝাঁকু নি দিন।",
"elements": [ { "type": "img", "src":
"[Link] "style": "width: 200px;" } ]
},
{
"level": 5, "question": "ক্রমানুসারে ক্লিক করুন: এক, দুই, তিন",
"type": "sequence", "hint": "লেখা এবং সংখ্যার মধ্যে পার্থক্য করুন। আপনাকে কথায় লেখা
গুলো ক্লিক করতে হবে।", "solution": ["one", "two", "three"],
"elements": [
{ "type": "button", "id": "two-num", "text": "2", "class":
"seq-btn" },
{ "type": "button", "id": "one", "text": "এক", "class": "seq-
btn" },
{ "type": "button", "id": "three", "text": "তিন", "class":
"seq-btn" },
{ "type": "button", "id": "one-num", "text": "1", "class":
"seq-btn" },
{ "type": "button", "id": "two", "text": "দুই", "class": "seq-
btn" }
]
},
{
"level": 6, "question": "কোনটা সবচেয়ে ভারী?", "type": "click",
"hint": "বাস্তবে কোনটা সবচেয়ে ভারী? তু লা নাকি লোহা?",
"elements": [
{ "type": "div", "text": "১ কেজি তু লা", "isCorrect": false,
"style": "font-size: 1.5em; padding: 15px; border: 1px solid #ccc; border-
radius: 8px; cursor: pointer;" },
{ "type": "div", "text": "১ কেজি লোহা", "isCorrect": true,
"id": "correct-text", "style": "font-size: 1.5em; padding: 15px; border: 1px
solid #ccc; border-radius: 8px; cursor: pointer;" },
]
},
{
"level": 7, "question": "এই প্রশ্নের উত্তর দাও।", "type": "click",
"hint": "প্রশ্নটি কোথায় আছে?", "isCorrect": true, "id": "question-text"
},
{
"level": 8, "question": "বিড়ালটিকে ধরুন।", "type": "drag", "hint":
"বিড়ালটি আপনার মাউস/আঙু ল থেকে দূরে পালাচ্ছে। তাকে কোণায় আটকে ফেলুন।",

🐈
"elements": [ { "type": "div", "id": "cat", "class":
"draggable", "text": " ", "style": "font-size: 50px; position: absolute; left:
50%; top: 50%;" } ],
"setup": () => {
const cat = [Link]('cat');
const puzzleContent = [Link];
const moveCat = (e) => {
const touch = [Link] ? [Link][0] : e;
const catRect = [Link]();
const puzzleRect =
[Link]();
if ([Link] > [Link] && [Link] <
[Link] && [Link] > [Link] && [Link] < [Link])
{
// Move away logic
let newX = [Link] + ([Link] -
([Link] - [Link]));
let newY = [Link] + ([Link] -
([Link] - [Link]));
[Link] = `${[Link](0, [Link](newX,
[Link] - [Link]))}px`;
[Link] = `${[Link](0, [Link](newY,
[Link] - [Link]))}px`;
}
};
[Link]('mousemove', moveCat);
[Link]('touchmove', moveCat);
[Link]({target: puzzleContent, type:
'mousemove', handler: moveCat});
[Link]({target: puzzleContent, type:
'touchmove', handler: moveCat});
}
},
{
"level": 9, "question": "৩টি আপেল খুঁজুন।", "type": "multi-
click", "solution": 3, "hint": "কিছু আপেল হয়তো লুকানো আছে। একটিকে সরিয়ে দেখুন।",
"elements": [
{ "type": "img", "src":
"[Link] "class": "clickable-item", "style":
"width: 80px; position: absolute; left: 20%; top: 40%; z-index: 2;" },
{ "type": "img", "src":
"[Link] "class": "clickable-item draggable",
"style": "width: 80px; position: absolute; left: 50%; top: 40%; z-index: 3;" },
{ "type": "img", "src":
"[Link] "class": "clickable-item", "style":
"width: 80px; position: absolute; left: 52%; top: 42%; z-index: 1; display:
none;", "id": "hidden-apple" }
],
"setup": () =>
{ [Link]('.draggable').addEventListener('mousedown', () =>
[Link]('hidden-apple').[Link] = 'block');
[Link]('.draggable').addEventListener('touchstart', () =>
[Link]('hidden-apple').[Link] = 'block'); }
},
{
"level": 10, "question": "কত হয়? 5 + 8 + 3 = ?", "type":
"input", "solution": "16", "hint": "সঠিকভাবে যোগ করুন।",
"elements": [
{ "type": "input", "id": "answer-input", "placeholder":
"উত্তর?", "attributes": {"type": "number"} },
{ "type": "button", "id": "submit-answer", "text": "Submit" }
]
},
{
"level": 11, "question": "Level ??", "type": "click", "hint":
"লেভেল নম্বরটি দেখুন।", "isCorrect": true, "id": "level-indicator"
},
{
"level": 12, "question": "সবকিছু একসাথে মেলান।", "type": "drag-
all", "hint": "সবগুলো জিনিসকে একটির উপর আরেকটি টেনে আনুন।",
"elements": [
{"type": "div", "class": "draggable", "text": "A", "style":
"font-size: 2em; padding: 10px; border: 1px solid; position: absolute; left:
10%; top: 20%; background: white;"},
{"type": "div", "class": "draggable", "text": "B", "style":
"font-size: 2em; padding: 10px; border: 1px solid; position: absolute; left:
70%; top: 30%; background: white;"},
{"type": "div", "class": "draggable", "text": "C", "style":
"font-size: 2em; padding: 10px; border: 1px solid; position: absolute; left:
40%; top: 60%; background: white;"}
]
},
{
"level": 13, "question": "আমার বয়স কত যদি ৫ বছর পর আমার বয়স
দ্বিগুণ হয়?", "type": "input", "solution": "5", "hint": "যদি এখন বয়স x হয়, তবে x+5
= 2x।",
"elements": [
{ "type": "input", "id": "answer-input", "placeholder":
"বয়স?", "attributes": {"type": "number"} },
{ "type": "button", "id": "submit-answer", "text":
"Submit" }
]
},
{
"level": 14, "question": "সবচেয়ে ছোট বৃত্তটিতে ক্লিক করুন।", "type":
"click", "hint": "সবচেয়ে ছোট বৃত্তটি কি আপনার চোখের সামনেই আছে?",
"elements": [
{"type": "div", "style": "width: 50px; height: 50px;
background: blue; border-radius: 50%;"},
{"type": "div", "style": "width: 80px; height: 80px;
background: green; border-radius: 50%;"},
{"type": "div", "text": ".", "isCorrect": true, "id":
"correct-dot", "style": "font-size: 50px; line-height: 0; cursor: pointer;
position: absolute; right: 25px; top: 20px;"} // The dot in the question
]
},
{
"level": 15, "question": "আগুন নেভান।", "type": "drag", "hint":
"মেঘ কি বৃষ্টি ঝরাতে পারে?",
"elements": [
🔥
{"type": "div", "text": " ", "id": "fire", "style": "font-
size: 80px; position: absolute; bottom: 20%; left: 45%;"},
{"type": "div", "text": "☁️", "id": "cloud", "class":
"draggable", "style": "font-size: 80px; position: absolute; top: 10%; left:
30%;"}
],
"setup": () => {
const cloud = [Link]('cloud');
const fire = [Link]('fire');
const onEnd = () => {
const cloudRect = [Link]();
const fireRect = [Link]();
if ([Link] < [Link] && [Link] >
[Link] && [Link] > [Link]) {
💨
[Link] = " ";
setTimeout(() => handleAnswer(true), 500);
}
};
[Link]('mouseup', onEnd);
[Link]('touchend', onEnd);
[Link]({target: document, type: 'mouseup',
handler: onEnd});
[Link]({target: document, type: 'touchend',
handler: onEnd});
}
},
{
"level": 16, "question": "গোপন পাসওয়ার্ডটি কী?", "type": "input",
"hint": "ওয়েলকাম!", "solution": "welcome",
"elements": [
{ "type": "p", "text": "WELCOME", "style": "font-size: 2em;
letter-spacing: 15px; font-family: monospace;"},
{ "type": "input", "id": "answer-input", "placeholder":
"পাসওয়ার্ড", "attributes": {"type": "text"} },
{ "type": "button", "id": "submit-answer", "text": "Submit" }
]
}
// <<< এখানে নতু ন ধাঁধা যোগ করুন >>>
// পরবর্তী ধাঁধার জন্য কমা (,) দিয়ে নতু ন অবজেক্ট যোগ করুন।
];

function init() {
setupEventListeners();
loadGame();
loadLevel([Link]);
[Link]('hidden');
}

function saveGame() {
try {
[Link]('mogojDholaiGameState',
[Link](gameState));
} catch (e) { [Link]("Failed to save game state:", e); }
}

function loadGame() {
try {
const savedState =
[Link]('mogojDholaiGameState');
if (savedState) {
const parsedState = [Link](savedState);
if ([Link] < [Link]) gameState
= parsedState;
}
} catch (e) { [Link]("Failed to load game state:", e); }
}

function updateUI() {
const puzzle = puzzles[[Link]];
[Link] = `Level ${puzzle?.level ||
1}`;
[Link] = [Link];
[Link] = `(${HINT_COST})`;
[Link] = `(${SKIP_COST})`;
}

function clearPreviousListeners() {
[Link](({target, type, handler}) =>
[Link](type, handler));
activeListeners = [];
}

let multiClickCount = 0;
function loadLevel(levelIndex) {
clearPreviousListeners();
multiClickCount = 0;

if (levelIndex >= [Link]) {


showModal("অভিনন্দন!", "আপনি সব লেভেল শেষ করেছেন!", true);
return;
}

const puzzle = puzzles[levelIndex];


[Link] = [Link];
[Link] = '';
currentSequence = [];

if ([Link]) {
[Link](elData => {
const el = [Link]([Link]);
[Link](elData).forEach(attr => {
if (['type', 'isCorrect', 'style', 'attributes',
'text'].includes(attr)) return;
el[attr] = elData[attr];
});
if ([Link]) [Link] = [Link];
if ([Link]) [Link] = [Link];
if ([Link]) {
for (const [key, value] of
[Link]([Link])) {
[Link](key, value);
}
}
[Link](el);
setupInteraction(puzzle, el, elData);
});
}

// For puzzles that interact with existing UI elements


if ([Link] && [Link]([Link])) {
const targetEl = [Link]([Link]);
const handler = () => handleAnswer([Link]);
[Link]('click', handler);
[Link]({target: targetEl, type: 'click',
handler: handler});
}

if ([Link]) [Link]();
updateUI();
}

function setupInteraction(puzzle, el, elData) {


switch ([Link]) {
case 'click':
[Link]('click', () =>
handleAnswer([Link]));
break;
case 'multi-click':
[Link]('click', () => {
multiClickCount++;
[Link] = '0.5';
if(multiClickCount === [Link]){
handleAnswer(true);
}
});
break;
case 'input':
if ([Link] === 'submit-answer') {
[Link]('click', () => {
const inputField =
[Link]('answer-input');

handleAnswer([Link]().toLowerCase() ===
[Link]());
});
}
break;
case 'drag': case 'drag-all':
if ([Link]('draggable'))
makeDraggable(el, puzzle);
break;
case 'shake':
handleShake();
break;
case 'sequence':
if([Link]('seq-btn')){
[Link]('click', () =>
handleSequenceClick([Link], puzzle));
}
break;
}
}

function handleAnswer(isCorrect) {
if (isCorrect) correctAnswer();
else wrongAnswer();
}

function correctAnswer() {
clearPreviousListeners();
[Link] += 10;
showModal("সাবাশ!", "সঠিক উত্তর! +10 কয়েন।");
[Link]++;
saveGame();
}

function wrongAnswer() {
[Link]('shake-anim');
setTimeout(() => [Link]('shake-anim'),
500);
if (puzzles[[Link]].type === 'sequence')
currentSequence = [];
}

function handleShake() {
if (!('DeviceMotionEvent' in window)) {
alert("আপনার ডিভাইস এই লেভেলটি সমর্থন করে না। Skip করুন।");
return;
}
const motionHandler = (event) => {
const acc = [Link];
const threshold = 15;
if (acc && ([Link](acc.x) > threshold || [Link](acc.y) >
threshold)) {
handleAnswer(true);
}
};
[Link]('devicemotion', motionHandler);
[Link]({target: window, type: 'devicemotion',
handler: motionHandler});
}

function handleSequenceClick(id, puzzle) {


[Link](id);
if ([Link] === [Link]) {
handleAnswer([Link](currentSequence) ===
[Link]([Link]));
}
}

function makeDraggable(element, puzzle) {


let isDragging = false;
function onStart(e) {
isDragging = true;
[Link] = 'grabbing';
[Link] = 1000;
}
function onEnd(e) {
if (!isDragging) return;
isDragging = false;
[Link] = 'grab';
[Link] = 'auto';

if ([Link] === 'drag-all') {


const draggables =
[Link]('.draggable');
let allOverlapped = true;
for(let i=1; i<[Link]; i++){
const rect1 = draggables[0].getBoundingClientRect();
const rect2 = draggables[i].getBoundingClientRect();
if([Link] < [Link] || [Link] >
[Link] || [Link] < [Link] || [Link] > [Link]){
allOverlapped = false;
break;
}
}
if(allOverlapped) handleAnswer(true);
}
}
function onMove(e) {
if (!isDragging) return;
[Link]();
const touch = [Link] === 'touchmove' ? [Link][0] : e;
const parentRect =
[Link]();
let x = [Link] - [Link] -
([Link] / 2);
let y = [Link] - [Link] -
([Link] / 2);
x = [Link](0, [Link](x, [Link] -
[Link]));
y = [Link](0, [Link](y, [Link] -
[Link]));
[Link] = `${x}px`;
[Link] = `${y}px`;
}

[Link]('mousedown', onStart);
[Link]('mouseup', onEnd);
[Link]('mousemove', onMove);
[Link]('touchstart', onStart, { passive:
true }); [Link]('touchend', onEnd);
[Link]('touchmove', onMove, { passive: false });
[Link]({target: element, type: 'mousedown',
handler: onStart}); [Link]({target: document, type: 'mouseup',
handler: onEnd}); [Link]({target: document, type: 'mousemove',
handler: onMove});
[Link]({target: element, type: 'touchstart',
handler: onStart}); [Link]({target: document, type: 'touchend',
handler: onEnd}); [Link]({target: document, type: 'touchmove',
handler: onMove});
}
function showModal(title, message, isEnd = false) {
[Link] = title;
[Link] = message;
[Link]('hidden');
[Link] = isEnd ? "পুনরায় শুরু" :
"পরবর্তী";
[Link] = () => {
[Link]('hidden');
if (isEnd) {
[Link] = 0;
[Link] = 100;
saveGame();
}
loadLevel([Link]);
};
}

function setupEventListeners() {
[Link]('click', () =>
loadLevel([Link]));
[Link]('click', () => {
if ([Link] >= HINT_COST) {
[Link] -= HINT_COST;
updateUI(); saveGame();
alert(`ইঙ্গিত: ${puzzles[[Link]].hint}`);
} else alert("힌্ট দেখার জন্য পর্যাপ্ত কয়েন নেই!");
});
[Link]('click', () => {
if ([Link] >= SKIP_COST) {
if (confirm(`আপনি কি ${SKIP_COST} কয়েন দিয়ে এই লেভেলটি
Skip করতে চান?`)) {
[Link] -= SKIP_COST;
handleAnswer(true);
}
} else alert("লেভেল Skip করার জন্য পর্যাপ্ত কয়েন নেই!");
});
}

init();
});
</script>
</body>
</html>

You might also like