<!DOCTYPE html>
<html dir="rtl" lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>بازی رمز کلمات | حروف نامرتب - دبستان پاسداران</title>
<style>
* {
box-sizing: border-box;
user-select: none; /* جلوگیری از انتخاب متن برای کشیدن بهتر */
}
body {
background: linear-gradient(145deg, #1e7c8f 0%, #0e4b5e 100%);
font-family: 'Vazir', 'Comic Neue', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
/* جعبه اصلی بازی */
.game-container {
max-width: 1300px;
width: 100%;
background: rgba(255, 242, 204, 0.95);
border-radius: 70px;
box-shadow: 0 25px 40px rgba(0,0,0,0.3), inset 0 1px 3px rgba(255,255,255,0.5);
padding: 20px 25px 35px;
text-align: center;
backdrop-filter: blur(2px);
}
/* هدر مدرسه و طراح */
.school-header {
background: #2d5f3e;
border-radius: 50px 50px 30px 30px;
padding: 8px 20px;
margin-bottom: 15px;
color: #ffefb9;
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
font-weight: bold;
box-shadow: inset 0 -2px 0 #1e3a28, 0 4px 8px rgba(0,0,0,0.2);
}
.school-name {
font-size: 1.4rem;
background: #ffd966;
padding: 4px 18px;
border-radius: 40px;
color: #2d4515;
}
.designer-name {
font-size: 1rem;
background: #e9c27c;
padding: 4px 18px;
border-radius: 40px;
color: #2c2b1f;
}
/* سرصفحه با توضیح دوستانه */
.game-header {
background: #ffd966;
padding: 15px 20px;
border-radius: 60px;
margin-bottom: 25px;
box-shadow: 0 8px 0 #b97f10;
}
h1 {
font-size: 2.2rem;
margin: 0;
color: #3b2a1f;
display: inline-block;
background: white;
padding: 5px 25px;
border-radius: 50px;
box-shadow: inset 0 -2px 0 #ccc;
}
.teacher-talk {
background: #fff7e0;
border-radius: 50px;
padding: 12px 20px;
margin-top: 15px;
font-size: 1.3rem;
font-weight: bold;
color: #2c5a2e;
border-right: 12px solid #ffaa33;
box-shadow: 0 5px 12px rgba(0,0,0,0.1);
text-align: right;
}
.teacher-talk span {
background: #ffaa33;
padding: 5px 12px;
border-radius: 40px;
margin-left: 10px;
font-size: 1.7rem;
}
/* بخش امتیاز و ستاره ها */
.score-area {
background: #f5e7d3;
border-radius: 50px;
padding: 8px 20px;
display: inline-flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
box-shadow: inset 0 1px 4px #b5986e, 0 6px 0 #b5986e;
}
.star-row {
display: flex;
gap: 8px;
font-size: 2rem;
}
.score-text {
font-size: 1.6rem;
font-weight: bold;
background: #412e1c;
color: #ffd966;
padding: 5px 18px;
border-radius: 40px;
}
/* شبکه کلمات */
.words-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
margin: 30px 0;
}
.word-card {
background: #feffd2;
border-radius: 48px;
padding: 15px;
box-shadow: 0 12px 0 #b9a67b;
transition: all 0.1s ease;
}
.word-card.completed {
background: #cbefb6;
box-shadow: 0 6px 0 #6f9e3f;
transform: translateY(4px);
}
.jumbled-box {
background: #ffb882;
border-radius: 50px;
padding: 12px;
margin-bottom: 15px;
}
.jumbled-title {
font-size: 1rem;
background: #fff0bb;
display: inline-block;
padding: 4px 18px;
border-radius: 30px;
color: #a15506;
}
.letters-jumbled {
display: flex;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
margin: 20px 0;
}
.letter-tile {
background: #ffe0a3;
width: 70px;
height: 70px;
font-size: 2.5rem;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border-radius: 30px;
box-shadow: 0 7px 0 #b97f45;
cursor: pointer;
transition: 0.07s linear;
font-family: 'Vazir', 'Comic Neue', monospace;
color: #3c280f;
}
.letter-tile:active {
transform: translateY(4px);
box-shadow: 0 2px 0 #b97f45;
}
.build-area {
background: #efd6ac;
border-radius: 50px;
padding: 12px;
margin: 12px 0;
}
.answer-slots {
display: flex;
justify-content: center;
gap: 12px;
margin: 10px 0;
flex-wrap: wrap;
}
.slot {
background: #fff1cf;
width: 70px;
height: 70px;
border-radius: 25px;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 3px #f6bc7c, 0 2px 5px rgba(0,0,0,0.1);
color: #4a2e12;
font-weight: bold;
}
.slot.filled {
background: #ffe1a0;
box-shadow: inset 0 0 0 3px #f29e4a;
}
.check-btn {
background: #3b9e3d;
border: none;
font-size: 1.2rem;
font-family: inherit;
font-weight: bold;
padding: 10px 25px;
border-radius: 40px;
color: white;
margin-top: 15px;
cursor: pointer;
box-shadow: 0 5px 0 #1f6421;
transition: 0.05s linear;
}
.check-btn:active {
transform: translateY(3px);
box-shadow: 0 1px 0 #1f6421;
}
.feedback {
font-size: 1.1rem;
margin-top: 12px;
background: #f5ddb1;
border-radius: 50px;
padding: 5px;
min-height: 55px;
}
.message {
font-weight: bold;
color: #b4410e;
}
.next-level {
background: #ffaa33;
padding: 12px 20px;
border-radius: 50px;
margin-top: 15px;
font-size: 1.2rem;
}
button {
background: #ff9f2e;
border: none;
font-family: inherit;
font-size: 1.2rem;
padding: 10px 25px;
border-radius: 40px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 5px 0 #a70c;
}
@media (max-width: 700px) {
.letter-tile, .slot { width: 55px; height: 55px; font-size: 2rem; }
.school-header { flex-direction: column; align-items: center; }
}
</style>
</head>
<body>
<div class="game-container">
<!-- هدر دبستان و طراح -->
<div class="school-header">
<div class="school-name">🏫 دبستان پاسداران</div>
<div class="designer-name">✏️ طراح: آقای دهقان</div>
</div>
<div class="game-header">
<h1>🧩 رمز کلمات 🎲</h1>
<div class="teacher-talk">
<span>🧸 توضیح مربی:</span>
«سلام باهوشها! اینجا چند تا حرف نامرتب داریم مثل تکههای پازل. باید حرفها رو بکشی یا بزنی تا جای درستش بشینه. هر کلمه که درست بسازی، یه ستاره میگیری! بیا ببینیم چندتا کلمه میسازیم.»
</div>
</div>
<div class="score-area">
<div class="star-row" id="starContainer">⭐️⭐️⭐️⭐️⭐️⭐️</div>
<div class="score-text">امتیاز: <span id="scoreValue">0</span> از <span id="totalWordsCount">0</span></div>
</div>
<div id="wordsContainer" class="words-grid">
<!-- داینامیک جاوااسکریپت کارتها رو میسازه -->
</div>
<div style="margin-top: 20px;">
<button id="resetGameBtn">🔄 بازی دوباره</button>
</div>
</div>
<script>
// -------- کلمات و حروف نامرتب (کلمهی جدید به جای "باب" : "خرس") ----------
const wordsData = [
{ correct: "خرس", jumbled: "خ ر س", hint: "🧸 حیوان پشمالوی جنگل، عروسک نرم کودکان" },
{ correct: "شیر", jumbled: "ش ی ر", hint: "🦁 حیوان جنگل با یال" },
{ correct: "نان", jumbled: "ن ا ن", hint: "🍞 خوردنی صبحانه" },
{ correct: "کتاب", jumbled: "ک ت ا ب", hint: "📖 چیزی که داستان داره" },
{ correct: "مدرسه", jumbled: "م د ر س ه", hint: "🏫 جایی که معلم و دوستات هستن" },
{ correct: "پروانه", jumbled: "پ ر و ا ن ه", hint: "🦋 حشره رنگی که بال میزنه" }
];
// وضعیت هر کلمه : { currentBuild: [], completed: false, lettersRemaining: [] }
let gameState = [];
let score = 0;
const wordsContainer = document.getElementById('wordsContainer');
const scoreSpan = document.getElementById('scoreValue');
const starContainer = document.getElementById('starContainer');
const totalWordsSpan = document.getElementById('totalWordsCount');
// ذخیره کپی از حروف اولیه برای ریست
function initGameState() {
gameState = wordsData.map((wordItem, idx) => {
// حروف صحیح کلمه به صورت آرایه
const correctLetters = wordItem.correct.split('');
// حروف نامرتب (از روی jumbled میگیریم)
let jumbledLetters = wordItem.jumbled.split(' ');
// برای تنوع شبیه به بازی: shuffle می زنیم تا جذابتر شود
function shuffleArray(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
let initialScrambled = shuffleArray([...jumbledLetters]);
return {
id: idx,
correctWord: wordItem.correct,
correctLettersArray: correctLetters,
currentBuild: new Array(correctLetters.length).fill(''), // جای خالی
remainingLetters: [...initialScrambled], // حروفی که هنوز استفاده نشده
completed: false,
hint: wordItem.hint
};
});
updateScoreStats();
}
function updateScoreStats() {
const completedCount = gameState.filter(s => s.completed === true).length;
score = completedCount;
scoreSpan.innerText = score;
totalWordsSpan.innerText = gameState.length;
// ستاره ها را نمایش بده
const total = gameState.length;
let starsHtml = '';
for (let i = 0; i < total; i++) {
if (i < score) starsHtml += '⭐️';
else starsHtml += '☆';
}
starContainer.innerHTML = starsHtml;
}
// ذخیره وضعیت و رندر کل کارتها
function renderGame() {
wordsContainer.innerHTML = '';
gameState.forEach((state, idx) => {
const card = document.createElement('div');
card.className = 'word-card';
if (state.completed) card.classList.add('completed');
// بخش حروف نامرتب
const jumbledDiv = document.createElement('div');
jumbledDiv.className = 'jumbled-box';
jumbledDiv.innerHTML = `<div class="jumbled-title">🔀 حروف بهم ریخته :</div>`;
const lettersContainer = document.createElement('div');
lettersContainer.className = 'letters-jumbled';
// نمایش هر حرف باقیمانده به عنوان یک tile قابل کلیک
state.remainingLetters.forEach((letter, lIdx) => {
const tile = document.createElement('div');
tile.className = 'letter-tile';
tile.innerText = letter;
// کلیک روی حرف = انتقال به اولین خانه خالی
tile.addEventListener('click', (e) => {
e.stopPropagation();
if (state.completed) return;
// اولین جای خالی پیدا کن
const emptyIndex = state.currentBuild.findIndex(ch => ch === '');
if (emptyIndex !== -1 && state.remainingLetters.length > 0) {
// انتقال حرف
const movedLetter = state.remainingLetters[lIdx];
state.currentBuild[emptyIndex] = movedLetter;
state.remainingLetters.splice(lIdx, 1);
renderGame();
} else if (emptyIndex === -1) {
showTemporaryMessage(`✅ اول جای خالی رو پر کن، بعد میتونی عوض کنی`, idx);
}
});
lettersContainer.appendChild(tile);
});
jumbledDiv.appendChild(lettersContainer);
// بخش ساخت کلمه (جای خالی ها)
const buildDiv = document.createElement('div');
buildDiv.className = 'build-area';
const slotsDiv = document.createElement('div');
slotsDiv.className = 'answer-slots';
state.currentBuild.forEach((letter, slotIndex) => {
const slot = document.createElement('div');
slot.className = 'slot';
if (letter !== '') slot.classList.add('filled');
slot.innerText = letter !== '' ? letter : '؟';
// کلیک روی اسلات برای برگرداندن حرف به حروف باقیمانده
slot.addEventListener('click', () => {
if (state.completed) return;
if (state.currentBuild[slotIndex] !== '') {
const letterToReturn = state.currentBuild[slotIndex];
state.currentBuild[slotIndex] = '';
state.remainingLetters.push(letterToReturn);
renderGame();
}
});
slotsDiv.appendChild(slot);
});
buildDiv.appendChild(slotsDiv);
// راهنما و دکمه چک
const hintDiv = document.createElement('div');
hintDiv.style.fontSize = '0.9rem';
hintDiv.style.margin = '8px';
hintDiv.innerHTML = `📌 راهنما: ${state.hint}`;
const checkBtn = document.createElement('button');
checkBtn.innerText = '✅ چـک کلمه';
checkBtn.className = 'check-btn';
checkBtn.addEventListener('click', () => {
if (state.completed) {
showTemporaryMessage('🎉 این کلمه رو قبلاً درست کردی!', idx);
return;
}
const builtWord = state.currentBuild.join('');
if (builtWord === state.correctWord) {
// درست است
if (!state.completed) {
state.completed = true;
// همه جای خالی پر شده، بقیه حروف رو پاک میکنیم
state.remainingLetters = [];
updateScoreStats();
renderGame();
showTemporaryMessage('🎉 عالی! کلمه درست بود +1 ستاره', idx);
}
} else {
showTemporaryMessage('❌ نه! دقت کن. حروف رو جابهجا کن و دوباره تلاش کن 🔄', idx);
}
});
const feedbackDiv = document.createElement('div');
feedbackDiv.className = 'feedback';
feedbackDiv.id = `feedback-${idx}`;
buildDiv.appendChild(hintDiv);
buildDiv.appendChild(checkBtn);
buildDiv.appendChild(feedbackDiv);
card.appendChild(jumbledDiv);
card.appendChild(buildDiv);
wordsContainer.appendChild(card);
});
}
function showTemporaryMessage(msg, cardId) {
const feedbackDiv = document.getElementById(`feedback-${cardId}`);
if (feedbackDiv) {
feedbackDiv.innerHTML = `<div class="message">${msg}</div>`;
setTimeout(() => {
if (feedbackDiv) feedbackDiv.innerHTML = '';
}, 1500);
}
}
// ریست کامل بازی
function resetGame() {
initGameState();
renderGame();
updateScoreStats();
}
// آماده سازی اولیه
initGameState();
renderGame();
updateScoreStats();
document.getElementById('resetGameBtn').addEventListener('click', resetGame);
</script>
</body>
</html>
:: بازدید از این مطلب : 0
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
