🎮ArcadeLab

لعبة OUT

by LaserWolf30
668 lines20.1 KB
▶ Play
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>لعبة OUT</title>
<style>
@import url('https://cdn.jsdelivr.net/npm/@fontsource/cairo@5.0.0/index.css');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Cairo', sans-serif; }

:root {
  --pistachio: #93C572;
  --pistachio-light: #B8E09A;
  --pistachio-dark: #6BA34D;
  --canary: #FFE873;
  --canary-light: #FFF3A3;
  --canary-dark: #E6CF3D;
  --white: #FFFFFF;
  --dark: #2D3A2D;
  --danger: #E74C3C;
  --success: #27AE60;
}

body {
  background: linear-gradient(135deg, var(--pistachio-light) 0%, var(--canary-light) 50%, var(--pistachio) 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

.screen {
  display: none;
  min-height: 100vh;
  padding: 20px;
  animation: fadeIn 0.5s ease;
}
.screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes bounceIn { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.game-title {
  font-size: 4rem;
  font-weight: bold;
  color: var(--dark);
  text-shadow: 3px 3px 0 var(--canary), 6px 6px 0 var(--pistachio-dark);
  margin: 30px 0;
  animation: float 3s ease-in-out infinite;
  letter-spacing: 5px;
}

.subtitle { font-size: 1.3rem; color: var(--dark); margin-bottom: 30px; opacity: 0.8; }

.card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 24px;
  padding: 30px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
  border: 3px solid var(--pistachio);
}

.btn {
  padding: 14px 36px;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Cairo', sans-serif;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: linear-gradient(135deg, var(--pistachio), var(--pistachio-dark)); color: white; }
.btn-secondary { background: linear-gradient(135deg, var(--canary), var(--canary-dark)); color: var(--dark); }
.btn-danger { background: linear-gradient(135deg, #E74C3C, #C0392B); color: white; }
.btn-success { background: linear-gradient(135deg, #27AE60, #1E8449); color: white; }

.input-field {
  width: 100%;
  padding: 14px 20px;
  border: 3px solid var(--pistachio);
  border-radius: 16px;
  font-size: 1.1rem;
  font-family: 'Cairo', sans-serif;
  outline: none;
  background: white;
}
.input-field:focus { border-color: var(--pistachio-dark); box-shadow: 0 0 15px rgba(147, 197, 114, 0.4); }

.player-list { list-style: none; margin: 20px 0; }
.player-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  margin: 8px 0;
  background: linear-gradient(135deg, var(--canary-light), var(--pistachio-light));
  border-radius: 16px;
  animation: bounceIn 0.4s ease;
  border: 2px solid var(--pistachio);
}
.player-item .name { font-size: 1.1rem; font-weight: bold; color: var(--dark); }
.player-item .number {
  background: var(--pistachio-dark);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-left: 10px;
}
.remove-btn {
  background: var(--danger);
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.category-card {
  background: linear-gradient(135deg, var(--canary-light), var(--canary));
  border: 3px solid var(--pistachio);
  border-radius: 16px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: bold;
  color: var(--dark);
}
.category-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.category-card.selected {
  background: linear-gradient(135deg, var(--pistachio), var(--pistachio-dark));
  color: white;
  border-color: var(--canary);
}
.category-card .emoji { font-size: 2rem; display: block; margin-bottom: 6px; }

.out-badge {
  background: var(--danger);
  color: white;
  padding: 8px 24px;
  border-radius: 50px;
  font-size: 1.3rem;
  font-weight: bold;
  display: inline-block;
  animation: pulse 1.5s infinite;
  margin: 10px 0;
}

.vote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 20px 0;
  width: 100%;
}
.vote-card {
  background: white;
  border: 3px solid var(--pistachio);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}
.vote-card:hover { transform: scale(1.05); border-color: var(--canary-dark); }
.vote-card.selected {
  background: linear-gradient(135deg, var(--canary), var(--canary-dark));
  border-color: var(--pistachio-dark);
  transform: scale(1.05);
}

.scoreboard { width: 100%; }
.score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  margin: 8px 0;
  background: white;
  border-radius: 16px;
  border: 2px solid var(--pistachio);
}
.score-row:first-child {
  background: linear-gradient(135deg, var(--canary), var(--canary-light));
  border-color: var(--canary-dark);
  transform: scale(1.02);
}
.score-row .rank { font-size: 1.5rem; font-weight: bold; color: var(--pistachio-dark); width: 40px; }
.score-row .score-name { flex: 1; font-weight: bold; font-size: 1.1rem; }
.score-row .score-points {
  background: var(--pistachio);
  color: white;
  padding: 6px 16px;
  border-radius: 50px;
  font-weight: bold;
}

.footer {
  margin-top: auto;
  padding: 20px;
  text-align: center;
  color: var(--dark);
  font-weight: bold;
  opacity: 0.7;
}

.round-info {
  background: var(--pistachio);
  color: white;
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: bold;
  display: inline-block;
}

.notification {
  position: fixed;
  top: 20px;
  right: 50%;
  transform: translateX(50%);
  padding: 15px 30px;
  border-radius: 16px;
  font-weight: bold;
  font-size: 1.2rem;
  z-index: 1000;
  animation: bounceIn 0.5s ease;
}
.notification.correct { background: var(--success); color: white; }
.notification.wrong { background: var(--danger); color: white; }

.sound-indicator {
  position: fixed;
  top: 20px;
  left: 20px;
  background: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  z-index: 100;
  border: 2px solid var(--pistachio);
}

.item-display {
  background: linear-gradient(135deg, var(--canary-light), var(--canary));
  border: 3px solid var(--pistachio-dark);
  border-radius: 20px;
  padding: 25px;
  text-align: center;
  margin: 15px 0;
  animation: bounceIn 0.5s ease;
}
.item-display .item-emoji { font-size: 6rem; margin: 10px 0; }
.item-display .item-name {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--dark);
  margin-top: 10px;
}
.item-display .item-category {
  font-size: 1rem;
  color: var(--pistachio-dark);
  margin-top: 5px;
}

.question-step {
  background: white;
  border: 3px solid var(--pistachio);
  border-radius: 20px;
  padding: 20px;
  margin: 15px 0;
  animation: slideIn 0.5s ease;
  width: 100%;
}
.question-step .step-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--dark);
  flex-wrap: wrap;
}
.question-step .arrow { font-size: 1.5rem; color: var(--pistachio-dark); }
.question-step .player-tag {
  background: var(--pistachio);
  color: white;
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: bold;
}
.question-step .q-number {
  background: var(--canary);
  color: var(--dark);
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 10px;
  display: inline-block;
}

.choices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 15px 0;
}
.choice-btn {
  background: white;
  border: 3px solid var(--pistachio);
  border-radius: 16px;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: bold;
  color: var(--dark);
  font-family: 'Cairo', sans-serif;
  font-size: 1rem;
}
.choice-btn:hover { transform: scale(1.05); border-color: var(--canary-dark); }
.choice-btn.selected {
  background: linear-gradient(135deg, var(--canary), var(--canary-dark));
  border-color: var(--pistachio-dark);
}
.choice-btn.correct { background: var(--success); color: white; border-color: var(--success); }
.choice-btn.wrong { background: var(--danger); color: white; border-color: var(--danger); }

.vote-result {
  background: white;
  border: 2px solid var(--pistachio);
  border-radius: 16px;
  padding: 12px 20px;
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: bounceIn 0.4s ease;
}
.vote-result .voter { font-weight: bold; color: var(--pistachio-dark); }
.vote-result .arrow { font-size: 1.3rem; color: var(--canary-dark); margin: 0 10px; }
.vote-result .voted-for { font-weight: bold; color: var(--dark); }
.vote-result.correct-vote { background: rgba(39, 174, 96, 0.15); border-color: var(--success); }
.vote-result.wrong-vote { background: rgba(231, 76, 60, 0.1); border-color: var(--danger); }

.result-icon { font-size: 1.5rem; }

.progress-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.progress-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(147, 197, 114, 0.3);
  border: 2px solid var(--pistachio);
  transition: all 0.3s;
}
.progress-dot.done { background: var(--pistachio); }
.progress-dot.current { background: var(--canary); border-color: var(--canary-dark); transform: scale(1.3); }

.info-box {
  background: rgba(231, 76, 60, 0.1);
  border: 2px dashed var(--danger);
  border-radius: 16px;
  padding: 15px;
  margin: 15px 0;
  text-align: center;
  color: var(--dark);
}

@media (max-width: 600px) {
  .game-title { font-size: 2.5rem; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 20px; }
  .vote-grid { grid-template-columns: repeat(2, 1fr); }
  .choices-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>

<div class="sound-indicator" id="soundToggle" onclick="toggleSound()">🔊</div>

<!-- Screen 1: Welcome -->
<div class="screen active" id="welcomeScreen">
  <div class="game-title">OUT</div>
  <p class="subtitle">🎮 لعبة التحدي والاكتشاف 🎮</p>
  <div class="card" style="text-align: center;">
    <p style="font-size: 1.1rem; margin-bottom: 20px; color: var(--dark);">
      مرحباً بك في لعبة OUT!<br>
      لعبة ممتعة حيث يحاول الجميع اكتشاف من هو اللاعب "OUT" الذي لا يعرف الشيء!
    </p>
    <div style="margin: 20px 0;"><span style="font-size: 3rem;">🕵️</span></div>
    <button class="btn btn-primary" onclick="showScreen('setupScreen')" style="font-size: 1.3rem; padding: 16px 50px;">
      🚀 ابدأ اللعبة
    </button>
  </div>
  <div class="footer">صمم من طرف Bounendjas Khaled 2026</div>
</div>

<!-- Screen 2: Player Setup -->
<div class="screen" id="setupScreen">
  <h1 style="color: var(--dark); margin: 20px 0;">👥 إعداد اللاعبين</h1>
  <div class="card">
    <p style="margin-bottom: 15px; color: var(--dark);">أضف أسماء اللاعبين (3 على الأقل)</p>
    <div style="display: flex; gap: 10px; margin-bottom: 15px;">
      <input type="text" class="input-field" id="playerNameInput" placeholder="اسم اللاعب..." onkeypress="if(event.key==='Enter')addPlayer()">
      <button class="btn btn-primary" onclick="addPlayer()">➕</button>
    </div>
    <ul class="player-list" id="playerList"></ul>
    <p id="playerCount" style="text-align: center; color: var(--pistachio-dark); font-weight: bold;"></p>
    <div style="text-align: center; margin-top: 20px;">
      <button class="btn btn-success" id="startGameBtn" onclick="startGame()" style="display: none;">
        🎮 ابدأ اللعب
      </button>
    </div>
  </div>
  <div class="footer">صمم من طرف Bounendjas Khaled 2026</div>
</div>

<!-- Screen 3: Category Selection -->
<div class="screen" id="categoryScreen">
  <h1 style="color: var(--dark); margin: 20px 0;">📂 اختر الفئة</h1>
  <div class="card" style="text-align: center;">
    <p style="margin-bottom: 15px;">الجولة: <span class="round-info" id="roundNumber">1</span></p>
    <div class="category-grid" id="categoryGrid"></div>
    <button class="btn btn-primary" id="confirmCategoryBtn" onclick="confirmCategory()" style="display: none; margin-top: 15px;">
      ✅ تأكيد الفئة
    </button>
  </div>
  <div class="footer">صمم من طرف Bounendjas Khaled 2026</div>
</div>

<!-- Screen 4: Reveal Roles -->
<div class="screen" id="revealScreen">
  <h1 style="color: var(--dark); margin: 20px 0;">🔍 كشف الأدوار</h1>
  <div class="card" style="text-align: center;">
    <p style="margin-bottom: 15px; font-size: 1.1rem;">
      مرر الجهاز لكل لاعب ليعرف دوره سراً
    </p>
    <div id="revealContent"></div>
    <button class="btn btn-primary" id="revealNextBtn" onclick="revealNext()">
      👁️ اضغط للكشف
    </button>
  </div>
  <div class="footer">صمم من طرف Bounendjas Khaled 2026</div>
</div>

<!-- Screen 5: Questions Phase (8 questions) -->
<div class="screen" id="questionsScreen">
  <h1 style="color: var(--dark); margin: 20px 0;">❓ مرحلة الأسئلة</h1>
  <div class="card" style="text-align: center;">
    <p style="margin-bottom: 10px;">الفئة: <strong id="qCategory"></strong></p>
    <div class="progress-dots" id="progressDots"></div>
    <div id="questionsArea"></div>
    <button class="btn btn-primary" id="nextQuestionBtn" onclick="nextQuestion()" style="margin-top: 15px;">
      ➡️ التالي
    </button>
  </div>
  <div class="footer">صمم من طرف Bounendjas Khaled 2026</div>
</div>

<!-- Screen 6: Voting (BEFORE OUT player choice) -->
<div class="screen" id="voteScreen">
  <h1 style="color: var(--dark); margin: 20px 0;">🗳️ التصويت</h1>
  <div class="card" style="text-align: center;">
    <p style="margin-bottom: 15px;">صوّت على من تعتقد أنه اللاعب OUT!</p>
    <div class="info-box">
      <p style="font-size: 0.95rem;">⚠️ اللاعب OUT لا يصوت</p>
    </div>
    <div id="currentVoter" style="font-size: 1.3rem; font-weight: bold; color: var(--pistachio-dark); margin-bottom: 15px;"></div>
    <div class="vote-grid" id="voteGrid"></div>
    <button class="btn btn-primary" id="confirmVoteBtn" onclick="confirmVote()" style="display: none; margin-top: 15px;">
      ✅ تأكيد التصويت
    </button>
  </div>
  <div class="footer">صمم من طرف Bounendjas Khaled 2026</div>
</div>

<!-- Screen 7: Show Votes -->
<div class="screen" id="showVotesScreen">
  <h1 style="color: var(--dark); margin: 20px 0;">📊 نتائج التصويت</h1>
  <div class="card" style="text-align: center;">
    <div id="votesDisplay"></div>
    <button class="btn btn-primary" onclick="startOutChoice()" style="margin-top: 20px;">
      🎯 مرحلة اللاعب OUT
    </button>
  </div>
  <div class="footer">صمم من طرف Bounendjas Khaled 2026</div>
</div>

<!-- Screen 8: OUT Player Choice -->
<div class="screen" id="outChoiceScreen">
  <h1 style="color: var(--dark); margin: 20px 0;">🎯 اختيار اللاعب OUT</h1>
  <div class="card" style="text-align: center;">
    <div id="outChoiceContent"></div>
  </div>
  <div class="footer">صمم من طرف Bounendjas Khaled 2026</div>
</div>

<!-- Screen 9: Results -->
<div class="screen" id="resultsScreen">
  <h1 style="color: var(--dark); margin: 20px 0;">🏆 النتائج النهائية</h1>
  <div class="card" style="text-align: center;">
    <div id="resultsContent"></div>
    <div class="scoreboard" id="scoreboard"></div>
    <div style="margin-top: 20px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;">
      <button class="btn btn-primary" onclick="nextRound()">🔄 جولة جديدة</button>
      <button class="btn btn-secondary" onclick="resetGame()">🏠 القائمة الرئيسية</button>
    </div>
  </div>
  <div class="footer">صمم من طرف Bounendjas Khaled 2026</div>
</div>

<script>
// ========== Game State ==========
let players = [];
let scores = {};
let currentRound = 1;
let selectedCategory = null;
let outPlayerIndex = -1;
let currentItem = null;
let votes = {};
let currentVoterIndex = 0;
let selectedVotePlayer = -1;
let soundEnabled = true;
let revealStep = 0;
let questionPairs = [];
let currentQuestionIndex = 0;
let outPlayerChoice = -1;
let outAnswerCorrect = false;
let votingPlayers = []; // Players who will vote (excluding OUT player)

// ========== Audio ==========
const AudioCtx = window.AudioContext || window.webkitAudioContext;
let audioCtx;

function initAudio() {
  if (!audioCtx) {
    try { audioCtx = new AudioCtx(); } catch(e) {}
  }
}

function playCorrectSound() {
  if (!soundEnabled) return;
  initAudio();
  if (!audioCtx) return;
  try {
    const now = audioCtx.currentTime;
    const osc1 = audioCtx.createOscillator();
    const osc2 = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc1.connect(gain);
    osc2.connect(gain);
    gain.connect(audioCtx.destination);
    osc1.frequency.setValueAtTime(523, now);
    osc1.frequency.setValueAtTime(659, now + 0.1);
    osc1.frequency.setValueAtTime(784, now + 0.2);
    osc2.frequency.setValueAtTime(784, now + 0.3);
    gain.gain.setValueAtTime(0.25, now);
    gain.gain.exponentialRampToValueAtTime(0.01, now + 0.6);
    osc1.start(now); osc1.stop(now + 0.3);
    osc2.start(now + 0.3); osc2.stop(now + 0.6);
  } catch(e) {}
}

function playWrongSound() {
  if (!soundEnabled) return;
  initAudio();
  if (!audioCtx) return;
  try {
    const now = audioCtx.currentTime;
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.connect(gain);
    gain.connect(audioCtx.destination);
    osc.type = 'sawtooth';
    osc.frequency.setValueAtTime(300, now);
    osc.frequency.exponentialRampToValueAtTime(100, now + 0.4);
    gain.gain.setValueAtTime(0.25, now);
    gain.gain.exponentialRampToValueAtTime(0.01, now + 0.5);
    osc.start(now);
    osc.stop(now + 0.5);
  } catch(e) {}
}

function playClickSound() {
  if (!soundEnabled) return;
  initAudio();
  if (!audioCtx) return;
  try {
    const now = audioCtx.currentTime;
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.connect(gain);
    gain.connect(audioCtx.destination);
    osc.frequency.setValueAtTime(800, now);
    gain.gain.setValueAtTime(0.1, now);
    gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
    osc.start(now);
    osc.stop(now + 0.1);
  } catch(e) {}
}

function toggleSound() {
  soundEnabled = !soundEnabled;
  document.getElementById('soundToggle').textContent = soundEnabled ? '🔊' : '🔇';
}

// ========== Categories Data ==========
const categories = [
  {
    name: 'بلدان',
    emoji: '🌍',
    items: [
      { name: 'فرنسا', emoji: '🇫🇷' },
      { name: 'اليابان', emoji: '🇯🇵' },
      { name: 'البرازيل', emoji: '🇧🇷' },
      { name: 'مصر', emoji: '🇪🇬' },
      { name: 'السعودية', emoji: '🇸🇦' },
      { name: 'أمريكا', emoji: '🇺🇸' },
      { name: 'إيطاليا', emoji: '🇮🇹' },
      { name: 'الصين', emoji: '🇨🇳' },
      { name: 'المغرب', emoji: '🇲🇦' },
      { name: 'الجزائر', emoji: '🇩

Game Source: لعبة OUT

Creator: LaserWolf30

Libraries: none

Complexity: complex (668 lines, 20.1 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: out-laserwolf30" to link back to the original. Then publish at arcadelab.ai/publish.