Нефритовая пыль

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Нефритовая пыль » Личные темы » In the dust


In the dust

Сообщений 1 страница 5 из 5

1

https://i.pinimg.com/736x/28/a7/e8/28a7e8a4f5adcbd8a1a4b5578689d51a.jpg

0

2

[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>riddle_game.cpp</title>

<!-- Кайден, пошел вон из кода, своим умом разгадывай! Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай! -->

<style>
body {
  margin: 0;
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: Consolas, Monaco, 'Courier New', monospace;
}

.editor {
  max-width: 900px;
  margin: 40px auto;
  background: #252526;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,.6);
  overflow: hidden;
}

.titlebar {
  background: #333;
  padding: 8px 12px;
  font-size: 14px;
  color: #ccc;
}

.code {
  padding: 20px;
}

.comment {
  color: #6a9955;
  white-space: pre-line;
  margin-bottom: 10px;
}

.answer-btn {
  display: block;
  padding: 10px 20px;
  margin: 8px 0;
  background: transparent;
  border: none;
  color: #9cdcfe;
  text-align: left;
  cursor: pointer;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 14px;
}

.answer-btn:hover {
  background: #2a2d2e;
}

.question {
  display: none;
  margin-top: 20px;
  padding: 15px;
  border-left: 2px solid #444;
}

.question.active {
  display: block;
}

.result {
  padding-left: 20px;
  margin: 15px 0 20px;
  font-style: italic;
  display: none;
}

.result.show {
  display: block;
}

.result.right-text {
  color: #4ec9b0;
}

.result.wrong-text {
  color: #f44747;
}

.final {
  display: none;
  margin-top: 30px;
  padding: 20px;
  border-left: 2px solid #4ec9b0;
  color: #4ec9b0;
}

.final.active {
  display: block;
}

.images {
  display: none;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #444;
}

.images.active {
  display: block;
}

.images img {
  max-width: 300px;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 2px solid #333;
  cursor: pointer;
  transition: transform 0.2s;
}

.images img:hover {
  transform: scale(1.05);
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
}

.modal-close:hover {
  color: #aaa;
}

.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #1e1e1e;
}

.login-box {
  background: #252526;
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 0 20px rgba(0,0,0,.6);
  text-align: center;
}

.login-box h1 {
  color: #9cdcfe;
  margin-bottom: 30px;
  font-size: 24px;
}

.login-box input {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  margin: 15px 0;
  background: #1e1e1e;
  border: 1px solid #444;
  color: #d4d4d4;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.login-box input:focus {
  outline: none;
  border-color: #9cdcfe;
}

.login-box button {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  margin-top: 20px;
  background: #007ACC;
  border: none;
  color: #fff;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.login-box button:hover {
  background: #0098ff;
}

.error-msg {
  color: #f44747;
  margin-top: 15px;
  display: none;
}

.error-msg.show {
  display: block;
}

.game-container {
  display: none;
}

.game-container.active {
  display: block;
}
</style>
</head>

<body>

<script>
function checkPassword() {
  const password = document.getElementById('passwordInput').value.toLowerCase();
  const errorMsg = document.getElementById('errorMsg');
 
  if (password === 'kayden moore') {
    document.querySelector('.login-screen').style.display = 'none';
    document.querySelector('.game-container').classList.add('active');
    errorMsg.classList.remove('show');
  } else {
    errorMsg.classList.add('show');
    document.getElementById('passwordInput').value = '';
  }
}

function answer(questionIndex, isCorrect) {
  const questions = document.querySelectorAll('.question');
  const currentQuestion = questions[questionIndex];
 
  const results = currentQuestion.querySelectorAll('.result');
  results.forEach(r => r.classList.remove('show'));
 
  if (isCorrect) {
    currentQuestion.querySelector('.right-text').classList.add('show');
   
    setTimeout(() => {
      questions.forEach(q => q.classList.remove('active'));
     
      if (questionIndex < questions.length - 1) {
        questions[questionIndex + 1].classList.add('active');
      } else {
        document.querySelector('.final').classList.add('active');
        document.querySelector('.images').classList.add('active');
       
        // Запустить музыку и конфетти
        playVictoryMusic();
        createConfetti();
      }
    }, 3000);
  } else {
    currentQuestion.querySelector('.wrong-text').classList.add('show');
   
    setTimeout(() => {
      currentQuestion.querySelector('.wrong-text').classList.remove('show');
    }, 2000);
  }
}

function playVictoryMusic() {
  const audio = new Audio('https://assets.mixkit.co/active_storage/sfx/2869/2869-preview.mp3');
  audio.volume = 0.5;
  audio.play();
}

function createConfetti() {
  const confettiCount = 100;
  for (let i = 0; i < confettiCount; i++) {
    setTimeout(() => {
      const confetti = document.createElement('div');
      confetti.style.position = 'fixed';
      confetti.style.width = Math.random() * 10 + 5 + 'px';
      confetti.style.height = Math.random() * 10 + 5 + 'px';
      confetti.style.backgroundColor = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#6c5ce7', '#fd79a8', '#a29bfe'][Math.floor(Math.random() * 7)];
      confetti.style.left = Math.random() * 100 + '%';
      confetti.style.top = Math.random() * 20 - 20 + 'px';
      confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
      confetti.style.zIndex = '999';
      confetti.style.pointerEvents = 'none';
      confetti.style.transform = 'rotate(' + Math.random() * 360 + 'deg)';
     
      document.body.appendChild(confetti);
     
      const duration = 3 + Math.random() * 3;
      const xMove = (Math.random() - 0.5) * 600;
      const rotation = Math.random() * 720 - 360;
     
      let top = parseFloat(confetti.style.top);
      let left = parseFloat(confetti.style.left);
      let opacity = 1;
      let rotation_val = 0;
      const startTime = Date.now();
     
      const animate = () => {
        const elapsed = (Date.now() - startTime) / 1000;
        const progress = elapsed / duration;
       
        if (progress < 1) {
          top += 3 + Math.sin(elapsed * 5) * 2;
          left += xMove / (duration * 60);
          opacity = 1 - progress;
          rotation_val += rotation / (duration * 60);
         
          confetti.style.top = top + 'px';
          confetti.style.left = left + 'px';
          confetti.style.opacity = opacity;
          confetti.style.transform = 'rotate(' + rotation_val + 'deg)';
         
          requestAnimationFrame(animate);
        } else {
          confetti.remove();
        }
      };
      animate();
    }, i * 30);
  }
}

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('passwordInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      checkPassword();
    }
  });
});

function openModal(img) {
  const modal = document.getElementById('imageModal');
  const modalImg = document.getElementById('modalImg');
  modalImg.src = img.src;
  modal.classList.add('active');
}

function closeModal() {
  const modal = document.getElementById('imageModal');
  modal.classList.remove('active');
}
</script>

<div class="login-screen">
<div class="login-box">
  <h1>Введите пароль</h1>
  <input type="password" id="passwordInput" placeholder="Пароль">
  <button onclick="checkPassword()">Войти</button>
  <div class="error-msg" id="errorMsg">Неверный пароль</div>
</div>
</div>

<div class="game-container">
<div class="editor">
<div class="titlebar">riddle_game.cpp — Run</div>
<div class="code">

<!-- STEP 1 -->
<div class="question active">
<div class="comment">/*
На колени всех поставит,
Танцевать людей заставит,
Будут все ходить тихонько,
Потому, что очень... ммм, больно.
*/</div>

<button class="answer-btn" onclick="answer(0, false)">string answer = "Лего";</button>
<button class="answer-btn" onclick="answer(0, true)">string answer = "Ленни";</button>
<button class="answer-btn" onclick="answer(0, false)">string answer = "Гололёд";</button>

<div class="result wrong-text">// Да, ну, бровь...</div>
<div class="result right-text">// Ай, умничка, догадливый</div>
</div>

<!-- STEP 2 -->
<div class="question">
<div class="comment">/*
Его мы в руки взяли,
Немножечко помяли —
Стал твердым наш дружок,
Зовут его...
*/</div>

<button class="answer-btn" onclick="answer(1, true)">string answer = "мистер Ривера";</button>
<button class="answer-btn" onclick="answer(1, false)">string answer = "Снег";</button>
<button class="answer-btn" onclick="answer(1, false)">string answer = "Писька! Писька!";</button>

<div class="result wrong-text">// Ты как будто на форуме не бываешь</div>
<div class="result right-text">// Ему только не говори</div>
</div>

<!-- STEP 3 -->
<div class="question">
<div class="comment">/*
Под елкой спать уж улеглись.
Они как свинки напились
И раскидали свои кости.
Ну да, конечно, это...
*/</div>

<button class="answer-btn" onclick="answer(2, false)">string answer = "Гости";</button>
<button class="answer-btn" onclick="answer(2, true)">string answer = "Студентики";</button>
<button class="answer-btn" onclick="answer(2, false)">string answer = "Собаки";</button>

<div class="result wrong-text">// Не тот билд, чувак</div>
<div class="result right-text">// Classic хе-хе</div>
</div>

<!-- STEP 4 -->
<div class="question">
<div class="comment">/*
Дед Мороз с собою носит,
Чтоб в сугробах не застрять.
Никогда его не бросит,
Даже если денег дать.
*/</div>

<button class="answer-btn" onclick="answer(3, false)">string answer = "Лопата";</button>
<button class="answer-btn" onclick="answer(3, true)">string answer = "Мистер Хантер";</button>
<button class="answer-btn" onclick="answer(3, false)">string answer = "Посох";</button>

<div class="result wrong-text">// А ты не слышал слухи про деда, да?</div>
<div class="result right-text">// Любоф рулит и в новом году</div>
</div>

<!-- STEP 5 -->
<div class="question">
<div class="comment">/*
Может быть он не большим,
Может быть огромным,
Может быть он и худым,
Может быть и толстым!
И у каждого он свой,
Каждый год он новый!
*/</div>

<button class="answer-btn" onclick="answer(4, true)">string answer = "Персонаж";</button>
<button class="answer-btn" onclick="answer(4, false)">string answer = "Подарок";</button>
<button class="answer-btn" onclick="answer(4, false)">string answer = "Тут тоже писька!";</button>

<div class="result wrong-text">// Нет, я знаю, что бывают исключения</div>
<div class="result right-text">// Ага, да, да, улыбнись</div>
</div>

<!-- STEP 6 -->
<div class="question">
<div class="comment">/*
Шубою прикрыта,
Имеет яркий вид.
И в Новый год обычно,
В тарелочке лежит.
*/</div>

<button class="answer-btn" onclick="answer(5, false)">string answer = "Селёдка";</button>
<button class="answer-btn" onclick="answer(5, true)">string answer = "Мадам Хибино нажралась";</button>
<button class="answer-btn" onclick="answer(5, false)">string answer = "Тайна пепельного архива";</button>

<div class="result wrong-text">// Так, ну, не порть мне праздник</div>
<div class="result right-text">// Не рассказывай ей</div>
</div>

<!-- STEP 7 -->
<div class="question">
<div class="comment">/*
На утреннике нашем
Все девочки и мальчики
Прекрасные снежинки
И маленькие...
*/</div>

<button class="answer-btn" onclick="answer(6, true)">string answer = "Пидоры";</button>
<button class="answer-btn" onclick="answer(6, false)">string answer = "Зайчики";</button>
<button class="answer-btn" onclick="answer(6, false)">string answer = "Снежки";</button>

<div class="result wrong-text">// Слишком невинно для моих заданий</div>
<div class="result right-text">// Последний тест на нашего пройден</div>
</div>

<div class="final">
  // Поздравляю! Ты прошел все загадки!
  <br><br>
  // Вот твоя награда:
</div>

<div class="images">
  <img src="https://i.imgur.com/xSr7BE8.jpeg" onclick="openModal(this)">
  <img src="https://i.imgur.com/C6jeoxM.jpeg" onclick="openModal(this)">
</div>

<div class="modal" id="imageModal">
  <span class="modal-close" onclick="closeModal()">&times;</span>
  <img class="modal-content" id="modalImg">
</div>

</div>
</div>

</div>
</div>

</body>
</html>[/html]

0

3

[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>ne_pepelniy_zapiska.cpp</title>

<!-- Кайден, пошел вон из кода, своим умом разгадывай! Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай!  Кайден, пошел вон из кода, своим умом разгадывай! -->

<style>
body {
  margin: 0;
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: Consolas, Monaco, 'Courier New', monospace;
}

.editor {
  max-width: 900px;
  margin: 40px auto;
  background: #252526;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,.6);
  overflow: hidden;
}

.titlebar {
  background: #333;
  padding: 8px 12px;
  font-size: 14px;
  color: #ccc;
}

.code {
  padding: 20px;
}

.comment {
  color: #6a9955;
  white-space: pre-line;
  margin-bottom: 10px;
}

.answer-btn {
  display: block;
  padding: 10px 20px;
  margin: 8px 0;
  background: transparent;
  border: none;
  color: #9cdcfe;
  text-align: left;
  cursor: pointer;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 14px;
}

.answer-btn:hover {
  background: #2a2d2e;
}

.question {
  display: none;
  margin-top: 20px;
  padding: 15px;
  border-left: 2px solid #444;
}

.question.active {
  display: block;
}

.result {
  padding-left: 20px;
  margin: 15px 0 20px;
  font-style: italic;
  display: none;
}

.result.show {
  display: block;
}

.result.right-text {
  color: #4ec9b0;
}

.result.wrong-text {
  color: #f44747;
}

.tour-card {
  display: none;
  text-align: center;
  padding: 40px;
  border: 2px solid #4ec9b0;
  border-radius: 8px;
  margin: 30px 0;
}

.tour-card.active {
  display: block;
}

.tour-card h2 {
  color: #4ec9b0;
  font-size: 28px;
  margin-bottom: 20px;
}

.tour-card p {
  color: #9cdcfe;
  font-size: 16px;
  margin-bottom: 30px;
}

.tour-card button {
  padding: 15px 40px;
  background: #007ACC;
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-family: Consolas, Monaco, 'Courier New', monospace;
}

.tour-card button:hover {
  background: #0098ff;
}

.ball-game {
  display: none;
}

.ball-game.active {
  display: block;
}

.ball-game-area {
  position: relative;
  width: 100%;
  height: 500px;
  background: url('https://i.imgur.com/MgI1b2d.jpeg') center/cover no-repeat;
  background-size: cover;
  border: 2px solid #4ec9b0;
  border-radius: 8px;
  margin: 20px 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.ball-game-area::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.christmas-ball {
  position: absolute;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 35px;
  line-height: 40px;
  user-select: none;
  transition: all 0.3s ease-out;
}

.christmas-ball:hover {
  transform: scale(1.1);
}

.ball-counter {
  font-size: 24px;
  color: #4ec9b0;
  margin: 20px 0;
}

.ball-game h2 {
  color: #9cdcfe;
  font-family: Consolas, Monaco, 'Courier New', monospace;
}

.ball-game p {
  color: #9cdcfe;
  font-family: Consolas, Monaco, 'Courier New', monospace;
}

.final {
  display: none;
  margin-top: 30px;
  padding: 20px;
  border-left: 2px solid #4ec9b0;
  color: #4ec9b0;
}

.final.active {
  display: block;
}

.images {
  display: none;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #444;
}

.images.active {
  display: block;
}

.images img {
  max-width: 300px;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 2px solid #333;
  cursor: pointer;
  transition: transform 0.2s;
}

.images img:hover {
  transform: scale(1.05);
}

.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #1e1e1e;
}

.login-box {
  background: #252526;
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 0 20px rgba(0,0,0,.6);
  text-align: center;
}

.login-box h1 {
  color: #9cdcfe;
  margin-bottom: 30px;
  font-size: 24px;
}

.login-box input {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  margin: 15px 0;
  background: #1e1e1e;
  border: 1px solid #444;
  color: #d4d4d4;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.login-box input:focus {
  outline: none;
  border-color: #9cdcfe;
}

.login-box button {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  margin-top: 20px;
  background: #007ACC;
  border: none;
  color: #fff;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.login-box button:hover {
  background: #0098ff;
}

.error-msg {
  color: #f44747;
  margin-top: 15px;
  display: none;
}

.error-msg.show {
  display: block;
}

.game-container {
  display: none;
}

.game-container.active {
  display: block;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
}

.modal-close:hover {
  color: #aaa;
}
</style>
</head>

<body>

<script>
function checkPassword() {
  const password = document.getElementById('passwordInput').value.toLowerCase();
  const errorMsg = document.getElementById('errorMsg');
 
  if (password === 'kayden moore') {
    document.querySelector('.login-screen').style.display = 'none';
    document.querySelector('.game-container').classList.add('active');
    errorMsg.classList.remove('show');
  } else {
    errorMsg.classList.add('show');
    document.getElementById('passwordInput').value = '';
  }
}

function startTour1() {
  document.querySelector('.tour-card').classList.remove('active');
  const questions = document.querySelectorAll('.question');
  questions[0].classList.add('active');
}

function answer(questionIndex, isCorrect) {
  const questions = document.querySelectorAll('.question');
  const currentQuestion = questions[questionIndex];
 
  const results = currentQuestion.querySelectorAll('.result');
  results.forEach(r => r.classList.remove('show'));
 
  if (isCorrect) {
    currentQuestion.querySelector('.right-text').classList.add('show');
   
    setTimeout(() => {
      questions.forEach(q => q.classList.remove('active'));
     
      if (questionIndex < questions.length - 1) {
        questions[questionIndex + 1].classList.add('active');
      } else {
        // Показать карточку тура 2
        showTour2Card();
      }
    }, 3000);
  } else {
    currentQuestion.querySelector('.wrong-text').classList.add('show');
   
    setTimeout(() => {
      currentQuestion.querySelector('.wrong-text').classList.remove('show');
    }, 2000);
  }
}

function showTour2Card() {
  const questions = document.querySelectorAll('.question');
  questions.forEach(q => q.classList.remove('active'));
  document.querySelector('.tour-card-2').classList.add('active');
}

function startTour2() {
  document.querySelector('.tour-card-2').classList.remove('active');
  startBallGame();
}

let ballCaught = 0;

function startBallGame() {
  ballCaught = 0;
  document.querySelector('.ball-game').classList.add('active');
  moveBall();
  document.addEventListener('mousemove', runAwayFromMouse);
}

function runAwayFromMouse(e) {
  const ball = document.getElementById('christmasBall');
  if (!ball || !document.querySelector('.ball-game').classList.contains('active')) return;
 
  const ballRect = ball.getBoundingClientRect();
  const gameArea = document.querySelector('.ball-game-area');
  const gameRect = gameArea.getBoundingClientRect();
 
  const ballCenterX = ballRect.left + ballRect.width / 2;
  const ballCenterY = ballRect.top + ballRect.height / 2;
 
  const mouseX = e.clientX;
  const mouseY = e.clientY;
 
  const distance = Math.sqrt(Math.pow(mouseX - ballCenterX, 2) + Math.pow(mouseY - ballCenterY, 2));
 
  if (distance < 100) {
    const angle = Math.atan2(ballCenterY - mouseY, ballCenterX - mouseX);
    const runDistance = 80;
   
    let newX = ballRect.left - gameRect.left + Math.cos(angle) * runDistance;
    let newY = ballRect.top - gameRect.top + Math.sin(angle) * runDistance;
   
    newX = Math.max(0, Math.min(newX, gameRect.width - 40));
    newY = Math.max(0, Math.min(newY, gameRect.height - 40));
   
    ball.style.left = newX + 'px';
    ball.style.top = newY + 'px';
  }
}

function moveBall() {
  const ball = document.getElementById('christmasBall');
  const gameArea = document.querySelector('.ball-game-area');
 
  const maxX = gameArea.clientWidth - 40;
  const maxY = gameArea.clientHeight - 40;
 
  const randomX = Math.random() * maxX;
  const randomY = Math.random() * maxY;
 
  ball.style.left = randomX + 'px';
  ball.style.top = randomY + 'px';
}

function catchBall() {
  ballCaught++;
  document.getElementById('ballCount').textContent = ballCaught + ' / 10';
 
  if (ballCaught < 10) {
    moveBall();
  } else {
    finishBallGame();
  }
}

function finishBallGame() {
  document.querySelector('.ball-game').classList.remove('active');
  document.querySelector('.final').classList.add('active');
  document.querySelector('.images').classList.add('active');
 
  playVictoryMusic();
  createConfetti();
}

function openModal(img) {
  const modal = document.getElementById('imageModal');
  const modalImg = document.getElementById('modalImg');
  modalImg.src = img.src;
  modal.classList.add('active');
}

function closeModal() {
  const modal = document.getElementById('imageModal');
  modal.classList.remove('active');
}

function playVictoryMusic() {
  const audio = new Audio('https://assets.mixkit.co/active_storage/sfx/2869/2869-preview.mp3');
  audio.volume = 0.5;
  audio.play();
}

function createConfetti() {
  const confettiCount = 100;
  for (let i = 0; i < confettiCount; i++) {
    setTimeout(() => {
      const confetti = document.createElement('div');
      confetti.style.position = 'fixed';
      confetti.style.width = Math.random() * 10 + 5 + 'px';
      confetti.style.height = Math.random() * 10 + 5 + 'px';
      confetti.style.backgroundColor = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#6c5ce7', '#fd79a8', '#a29bfe'][Math.floor(Math.random() * 7)];
      confetti.style.left = Math.random() * 100 + '%';
      confetti.style.top = Math.random() * 20 - 20 + 'px';
      confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
      confetti.style.zIndex = '999';
      confetti.style.pointerEvents = 'none';
      confetti.style.transform = 'rotate(' + Math.random() * 360 + 'deg)';
     
      document.body.appendChild(confetti);
     
      const duration = 3 + Math.random() * 3;
      const xMove = (Math.random() - 0.5) * 600;
      const rotation = Math.random() * 720 - 360;
     
      let top = parseFloat(confetti.style.top);
      let left = parseFloat(confetti.style.left);
      let opacity = 1;
      let rotation_val = 0;
      const startTime = Date.now();
     
      const animate = () => {
        const elapsed = (Date.now() - startTime) / 1000;
        const progress = elapsed / duration;
       
        if (progress < 1) {
          top += 3 + Math.sin(elapsed * 5) * 2;
          left += xMove / (duration * 60);
          opacity = 1 - progress;
          rotation_val += rotation / (duration * 60);
         
          confetti.style.top = top + 'px';
          confetti.style.left = left + 'px';
          confetti.style.opacity = opacity;
          confetti.style.transform = 'rotate(' + rotation_val + 'deg)';
         
          requestAnimationFrame(animate);
        } else {
          confetti.remove();
        }
      };
      animate();
    }, i * 30);
  }
}

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('passwordInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      checkPassword();
    }
  });
});
</script>

<div class="login-screen">
<div class="login-box">
  <h1>Введите пароль</h1>
  <input type="password" id="passwordInput" placeholder="Пароль">
  <button onclick="checkPassword()">Войти</button>
  <div class="error-msg" id="errorMsg">Неверный пароль</div>
</div>
</div>

<div class="game-container">
<div class="editor">
<div class="titlebar">ne_pepelniy_zapiska.cpp — Run</div>
<div class="code">

<!-- КАРТОЧКА ТУР 1 -->
<div class="tour-card active">
  <h2>> ТУР 1: ЗАГАДКИ</h2>
  <p>Ответь на 7 новогодних загадок</p>
  <button onclick="startTour1()">[ НАЧАТЬ ТУР 1 ]</button>
</div>

<!-- ЗАГАДКИ ТУР 1 -->
<div class="question">
<div class="comment">/*
На колени всех поставит,
Танцевать людей заставит,
Будут все ходить тихонько,
Потому, что очень... ммм, больно.
*/</div>

<button class="answer-btn" onclick="answer(0, false)">string answer = "Лего";</button>
<button class="answer-btn" onclick="answer(0, true)">string answer = "Ленни";</button>
<button class="answer-btn" onclick="answer(0, false)">string answer = "Гололёд";</button>

<div class="result wrong-text">// Да, ну, брось...</div>
<div class="result right-text">// Ай, умничка, догадливый</div>
</div>

<div class="question">
<div class="comment">/*
Его мы в руки взяли,
Немножечко помяли —
Стал твердым наш дружок,
Зовут его...
*/</div>

<button class="answer-btn" onclick="answer(1, true)">string answer = "мистер Ривера";</button>
<button class="answer-btn" onclick="answer(1, false)">string answer = "Снег";</button>
<button class="answer-btn" onclick="answer(1, false)">string answer = "Пластилин";</button>

<div class="result wrong-text">// Ты как будто на форуме не бываешь</div>
<div class="result right-text">// Ему только не говори</div>
</div>

<div class="question">
<div class="comment">/*
Под елкой спать уж улеглись.
Они как свинки напились
И раскидали свои кости.
Ну да, конечно, это...
*/</div>

<button class="answer-btn" onclick="answer(2, false)">string answer = "Собаки";</button>
<button class="answer-btn" onclick="answer(2, true)">string answer = "Студентики";</button>
<button class="answer-btn" onclick="answer(2, false)">string answer = "Зомби";</button>

<div class="result wrong-text">// Не тот билд, чувак</div>
<div class="result right-text">// Classic хе-хе</div>
</div>

<div class="question">
<div class="comment">/*
Дед Мороз с собою носит,
Чтоб в сугробах не застрять.
Никогда его не бросит,
Даже если денег дать.
*/</div>

<button class="answer-btn" onclick="answer(3, false)">string answer = "Пенсионное удостоверение";</button>
<button class="answer-btn" onclick="answer(3, true)">string answer = "Мистер Хантер";</button>
<button class="answer-btn" onclick="answer(3, false)">string answer = "Посох";</button>

<div class="result wrong-text">// А ты не слышал слухи про деда, да?</div>
<div class="result right-text">// Любоф рулит и в новом году</div>
</div>

<div class="question">
<div class="comment">/*
Может быть он не большим,
Может быть огромным,
Может быть он и худым,
Может быть и толстым!
И у каждого он свой,
Каждый год он новый!
*/</div>

<button class="answer-btn" onclick="answer(4, true)">string answer = "Персонаж";</button>
<button class="answer-btn" onclick="answer(4, false)">string answer = "Подарок";</button>
<button class="answer-btn" onclick="answer(4, false)">string answer = "Член мужицкий!";</button>

<div class="result wrong-text">// Нет, я знаю, что бывают исключения</div>
<div class="result right-text">// Ага, да, да, улыбнись</div>
</div>

<div class="question">
<div class="comment">/*
Шубою прикрыта,
Имеет яркий вид.
И в Новый год обычно,
В тарелочке лежит.
*/</div>

<button class="answer-btn" onclick="answer(5, false)">string answer = "Селёдка";</button>
<button class="answer-btn" onclick="answer(5, true)">string answer = "Мадам Хибино нажралась";</button>
<button class="answer-btn" onclick="answer(5, false)">string answer = "Идея на пост";</button>

<div class="result wrong-text">// Так, ну, не порть мне праздник</div>
<div class="result right-text">// Не рассказывай ей</div>
</div>

<div class="question">
<div class="comment">/*
На утреннике нашем
Все девочки и мальчики
Прекрасные снежинки
И маленькие...
*/</div>

<button class="answer-btn" onclick="answer(6, true)">string answer = "Пидоры";</button>
<button class="answer-btn" onclick="answer(6, false)">string answer = "Зайчики";</button>
<button class="answer-btn" onclick="answer(6, false)">string answer = "Снежки";</button>

<div class="result wrong-text">// Слишком невинно для моих заданий</div>
<div class="result right-text">// Последний тест на нашего пройден</div>
</div>

<!-- КАРТОЧКА ТУР 2 -->
<div class="tour-card tour-card-2">
  <h2>> ТУР 2: ПОЙМАЙ ДЕДА МОРОЗА</h2>
  <p>Стукни Деда Мороза 10 раз, прежде чем он убежит</p>
  <button onclick="startTour2()">[ НАЧАТЬ ТУР 2 ]</button>
</div>

<!-- ИГРА ТУР 2 -->
<div class="ball-game">
  <h2>$ Поймай Деда Мороза! Вперёд, мой юный буллер!</h2>
  <p>// Нажимай на Деда Мороза столько раз, чтобы его поймать 10 раз</p>
  <div class="ball-game-area">
    <div class="christmas-ball" id="christmasBall" onclick="catchBall()">��</div>
  </div>
  <div class="ball-counter">
    Поймано: <span id="ballCount">0 / 10</span>
  </div>
</div>

<!-- ФИНАЛ -->
<div class="final">
  // Поздравляю, птичка! Ты прошел все туры!
  <br><br>
  // ФИНАЛ:
</div>

<div class="images">
  <img src="https://i.imgur.com/xSr7BE8.jpeg" onclick="openModal(this)">
  <img src="https://i.imgur.com/C6jeoxM.jpeg" onclick="openModal(this)">
</div>

</div>
</div>

</div>
</div>

<div class="modal" id="imageModal">
  <span class="modal-close" onclick="closeModal()">&times;</span>
  <img class="modal-content" id="modalImg">
</div>

</body>
</html>[/html]

0

4

https://i.pinimg.com/originals/d4/05/1d/d4051d8b9f3284ad8a5c609566b97fbf.gif

0

5

@Kayden Moore

https://i.pinimg.com/originals/d4/05/1d/d4051d8b9f3284ad8a5c609566b97fbf.gif

0


Вы здесь » Нефритовая пыль » Личные темы » In the dust


Рейтинг форумов | Создать форум бесплатно