{"id":552,"date":"2025-06-16T14:55:56","date_gmt":"2025-06-16T05:55:56","guid":{"rendered":"https:\/\/dod77.synology.me\/wordpress\/?p=552"},"modified":"2025-10-23T18:55:02","modified_gmt":"2025-10-23T09:55:02","slug":"game1-2","status":"publish","type":"post","link":"https:\/\/dod77.synology.me\/wordpress\/552\/","title":{"rendered":"\ub208 \uae5c\uc9dd \ud560 \uc0ac\uc774 \uce74\ub4dc \ud55c\uc790"},"content":{"rendered":"\n<div class=\"jk-game-board-container\" id=\"jk-gameBoardContainer\">\n  <div class=\"jk-game-board\" id=\"jk-gameBoard\">\n    <div id=\"jk-inputContainer\">\n      <textarea id=\"jk-userInput\" placeholder=\"\ucd5c\ub300 50\uc790\uc758 \uae00\uc790\ub97c \uc785\ub825\ud558\uc138\uc694\"><\/textarea>\n\n      <!-- [NEW] \ud50c\ub808\uc774 + \uc635\uc158 (\ub79c\ub364 \uccb4\ud06c) \ud55c \uc904 -->\n      <div id=\"jk-optionsRow\">\n        <button id=\"jk-playButton\" class=\"jk-button\">\ud50c\ub808\uc774<\/button>\n        <label class=\"jk-option\">\n          <input type=\"checkbox\" id=\"jk-randomMode\">\n          \ub79c\ub364\uc73c\ub85c \ubcf4\uc5ec\uc8fc\uae30\n        <\/label>\n        <!-- \uae30\ubcf8\uc740 \uccb4\ud06c \ud574\uc81c(=\uc21c\uc11c\ub300\ub85c) -->\n      <\/div>\n    <\/div>\n\n    <div id=\"jk-cardContainer\" style=\"display: none;\">\n      <div class=\"card\">\n        <div class=\"card-front\"><\/div>\n        <div class=\"card-back\">?<\/div>\n      <\/div>\n    <\/div>\n\n    <div id=\"jk-buttonContainer\" style=\"display: none;\">\n      <button class=\"jk-showButton\" data-time=\"180\">0.18s<\/button>\n      <button class=\"jk-showButton\" data-time=\"200\">0.20s<\/button>\n      <button class=\"jk-showButton\" data-time=\"220\">0.22s<\/button>\n      <button class=\"jk-showButton\" data-time=\"240\">0.24s<\/button>\n      <button class=\"jk-showButton\" data-time=\"260\">0.26s<\/button>\n      <button class=\"jk-showButton\" data-time=\"280\">0.28s<\/button>\n      <button class=\"jk-showButton\" data-time=\"300\">0.30s<\/button>\n      <button class=\"jk-showButton\" data-time=\"350\">0.35s<\/button>\n      <button class=\"jk-showButton\" data-time=\"400\">0.40s<\/button>\n      <button class=\"jk-showButton\" data-time=\"500\">0.50s<\/button>\n      <button class=\"jk-showButton\" data-time=\"600\">0.60s<\/button>\n      <button class=\"jk-showButton\" data-time=\"700\">0.70s<\/button>\n      <button class=\"jk-showButton\" data-time=\"800\">0.80s<\/button>\n      <button id=\"jk-nextButton\" class=\"jk-button\">\ub2e4\uc74c<\/button>\n    <\/div>\n\n    <div id=\"jk-restartContainer\" style=\"display: none;\">\n      <button id=\"jk-restartButton\" class=\"jk-button\">\ub2e4\uc2dc\ud558\uae30<\/button>\n      <button id=\"jk-homeButton\" class=\"jk-button\">\ucc98\uc74c\uc73c\ub85c<\/button>\n    <\/div>\n\n    <button id=\"jk-fullscreenButton\" class=\"jk-button\">\uc804\uccb4 \ud654\uba74<\/button>\n    <button id=\"jk-musicButton\" class=\"jk-music-button\">\u25b6<\/button>\n\n    <!-- \uc74c\uc545 \ubc84\ud2bc \uc624\ub978\ucabd\uc5d0 \uc2ac\ub77c\uc774\ub354 -->\n    <input type=\"range\" id=\"jk-cardSizeSlider\" min=\"50\" max=\"150\" value=\"100\" style=\"position: absolute; top: 12px; left: 60px; width: 150px;\" title=\"\uce74\ub4dc \ud06c\uae30 \uc870\uc808 (100%)\">\n  <\/div>\n<\/div>\n\n<style>\n@font-face {\n  font-family: 'UnGungseo';\n  src: url('https:\/\/dod77.synology.me\/wordpress\/wp-content\/themes\/oceanwp\/customgamecode\/font\/UnGungseo-2.ttf') format('truetype');\n}\n\n.jk-game-board-container {\n  width: 100%;\n  max-width: 100vw;\n  padding-top: 46.875%; \/* 16:7.5 \ube44\uc728 \uc720\uc9c0 *\/\n  position: relative;\n  margin: 0 auto;\n}\n\n.jk-game-board {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #FFF9C4;  \/* \uc5f0\ud55c \ub178\ub791 *\/\n  border: 2px solid #000;\n  border-radius: 15px;\n  box-shadow: 0 0 10px rgba(0,0,0,0.5);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  font-family: 'HakgyoansimBunpilR', sans-serif;\n}\n\n#jk-inputContainer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n}\n\n#jk-optionsRow {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n}\n\n#jk-optionsRow .jk-option {\n  font-size: 0.95em;\n  user-select: none;\n}\n\n#jk-userInput {\n  width: 80%;\n  height: 100px;\n  padding: 10px;\n  font-size: 1.2em;\n  border: 2px solid #000;\n  border-radius: 10px;\n  resize: none;\n}\n\n.card {\n  width: 100%;\n  height: 150%;\n  max-width: 600px;\n  max-height: 900px;\n  position: relative;\n  transform-style: preserve-3d;\n  transition: transform 0.6s;\n  transform: rotateY(0deg);\n  z-index: 1;\n}\n\n.card-front, .card-back {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  backface-visibility: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n}\n\n.card-front {\n  background-color: #000;\n  color: #fff;\n  transform: rotateY(180deg);\n  border-radius: 10px;\n  font-size: 31.2em;  \/* JS\uc5d0\uc11c \uc7ac\uc124\uc815\ub428 *\/\n  font-family: 'UnGungseo', sans-serif;\n}\n\n.card-back {\n  background-color: #FFCC80; \/* \ubd80\ub4dc\ub7ec\uc6b4 \uc0b4\uad6c\uc0c9 *\/\n  color: #5D4037;\n  border-radius: 20px;\n  box-shadow: 0 4px 8px rgba(0,0,0,0.3);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 36em;   \/* JS\uc5d0\uc11c \uc7ac\uc124\uc815\ub428 *\/\n  font-family: sans-serif;\n}\n\n.card.flipped {\n  transform: rotateY(180deg);\n}\n\n.jk-button, .jk-showButton {\n  padding: 10px 20px;\n  border: 2px solid #000;\n  border-radius: 10px;\n  cursor: pointer;\n  font-size: 1em;\n  background-color: #87cefa;\n  color: #000;\n  margin-top: 10px;\n  transition: background-color 0.3s, transform 0.3s;\n}\n\n#jk-buttonContainer, #jk-restartContainer {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 5px;\n  margin-top: 20px;\n  z-index: 10;\n}\n\n#jk-fullscreenButton {\n  position: absolute;\n  bottom: 10px;\n  left: 10px;\n}\n\n#jk-musicButton {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  font-size: 1.5em;\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: none;\n}\n\n.jk-hide {\n  display: none;\n}\n\n.jk-button:hover, .jk-showButton:hover {\n  background-color: #00bfff;\n  transform: scale(1.05);\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n  const card = document.querySelector('.card');\n  const cardFront = document.querySelector('.card-front');\n  const fullscreenButton = document.getElementById('jk-fullscreenButton');\n  const musicButton = document.getElementById('jk-musicButton');\n  const playButton = document.getElementById('jk-playButton');\n  const nextButton = document.getElementById('jk-nextButton');\n  const restartButton = document.getElementById('jk-restartButton');\n  const homeButton = document.getElementById('jk-homeButton');\n  const inputContainer = document.getElementById('jk-inputContainer');\n  const cardContainer = document.getElementById('jk-cardContainer');\n  const buttonContainer = document.getElementById('jk-buttonContainer');\n  const restartContainer = document.getElementById('jk-restartContainer');\n  const userInput = document.getElementById('jk-userInput');\n  const randomCheckbox = document.getElementById('jk-randomMode');\n\n  let userCharacters = [];\n  let remainingCharacters = [];\n  let isRandomMode = false;  \/\/ [NEW] \ubaa8\ub4dc \uc0c1\ud0dc\n  let currentIndex = 0;      \/\/ [NEW] \uc21c\uc11c\ub300\ub85c \ubaa8\ub4dc\uc6a9 \uc778\ub371\uc2a4\n\n  const sizeSlider = document.getElementById('jk-cardSizeSlider');\n  const cardBack = document.querySelector('.card-back');\n\n  sizeSlider.addEventListener('input', () => {\n    const scale = sizeSlider.value \/ 100; \/\/ 100% \uae30\uc900\n    \/\/ \uce74\ub4dc \ud06c\uae30 \uc870\uc808\n    card.style.width = `${600 * scale}px`;\n    card.style.height = `${900 * scale}px`;\n    \/\/ \uae00\uc790 \ud06c\uae30 \uc870\uc808(\uae30\uc900 39em\/45em)\n    cardFront.style.fontSize = `${39 * scale}em`;\n    cardBack.style.fontSize  = `${45 * scale}em`;\n  });\n\n  \/\/ \ucd08\uae30 \uce74\ub4dc \ud06c\uae30\uc640 \uae00\uc790 \ud06c\uae30 \uc124\uc815\n  (function initCardSize() {\n    const scale = sizeSlider.value \/ 100;\n    card.style.width = `${600 * scale}px`;\n    card.style.height = `${900 * scale}px`;\n    cardFront.style.fontSize = `${39 * scale}em`;\n    cardBack.style.fontSize  = `${45 * scale}em`;\n  })();\n\n  const musicFiles = [\n    \"(I've Got A) Baby Sister - Reed Mathis.mp3\",\n    \"Birthday Cake - Reed Mathis.mp3\",\n    \"Calimba - E's Jammy Jams.mp3\",\n    \"Good Morning! - Reed Mathis.mp3\",\n    \"Kazoom - Quincas Moreira.mp3\",\n    \"My Dog Is Happy - Reed Mathis.mp3\",\n    \"Sunny Day - Reed Mathis.mp3\",\n    \"Try To Catch Me - Reed Mathis.mp3\"\n  ];\n\n  const musicFolderPath = 'https:\/\/dod77.synology.me\/wordpress\/wp-content\/themes\/oceanwp\/customgamecode\/music\/background\/';\n  const effectSoundPath = 'https:\/\/dod77.synology.me\/wordpress\/wp-content\/themes\/oceanwp\/customgamecode\/music\/effect\/turnpage-99756.mp3';\n  let audio = new Audio();\n  let isPlaying = false;\n  let effectAudio = new Audio(effectSoundPath);\n\n  playButton.addEventListener('click', () => {\n    let inputText = userInput.value.trim().replace(\/\\s+\/g, ''); \/\/ \uacf5\ubc31 \uc81c\uac70\n\n    \/\/ [NEW] \uc785\ub825 \uc720\ud6a8\uc131\n    if (inputText.length === 0) {\n      alert('\ud55c \uae00\uc790 \uc774\uc0c1 \uc785\ub825\ud574 \uc8fc\uc138\uc694.');\n      return;\n    }\n    if (inputText.length > 50) {\n      alert('50\uc790 \uc774\ub0b4\ub85c \uc785\ub825\ud574 \uc8fc\uc138\uc694.');\n      return;\n    }\n\n    \/\/ [NEW] \ubaa8\ub4dc \uc124\uc815\n    isRandomMode = !!randomCheckbox.checked;\n\n    \/\/ \uc0c1\ud0dc \ucd08\uae30\ud654\n    userCharacters = Array.from(inputText);\n    currentIndex = 0;\n    remainingCharacters = [...userCharacters];\n\n    inputContainer.style.display = 'none';\n    cardContainer.style.display = 'block';\n    buttonContainer.style.display = 'flex';\n    restartContainer.style.display = 'none';\n\n    \/\/ \uccab \uae00\uc790 \ud45c\uc2dc\n    showNextCharacter();\n\n    \/\/ \ub79c\ub364 \ubc30\uacbd\uc74c\uc545 \uc7ac\uc0dd\n    playRandomMusic();\n  });\n\n  document.querySelectorAll('.jk-showButton').forEach(button => {\n    button.addEventListener('click', () => {\n      const displayTime = parseInt(button.getAttribute('data-time'), 10);\n      effectAudio.playbackRate = 1000 \/ displayTime;\n      effectAudio.volume = 1;  \/\/ \ud6a8\uacfc\uc74c \ubcfc\ub968 \ucd5c\ub300\n      try {\n        effectAudio.pause();\n        effectAudio.currentTime = 0;\n        effectAudio.play();\n      } catch(e) {}\n      card.classList.add('flipped');\n      setTimeout(() => {\n        card.classList.remove('flipped');\n      }, displayTime);\n    });\n  });\n\n  nextButton.addEventListener('click', showNextCharacter);\n  restartButton.addEventListener('click', restartGame);\n  homeButton.addEventListener('click', goHome);\n  musicButton.addEventListener('click', toggleMusic);\n  audio.addEventListener('ended', playRandomMusic);\n  fullscreenButton.addEventListener('click', toggleFullscreen);\n\n  function showNextCharacter() {\n    \/\/ \uc21c\uc11c\ub300\ub85c \ubaa8\ub4dc\n    if (!isRandomMode) {\n      if (currentIndex >= userCharacters.length) {\n        endSequence();\n        return;\n      }\n      cardFront.textContent = userCharacters[currentIndex++];\n      return;\n    }\n\n    \/\/ \ub79c\ub364 \ubaa8\ub4dc\n    if (remainingCharacters.length === 0) {\n      endSequence();\n      return;\n    }\n    const randomIndex = Math.floor(Math.random() * remainingCharacters.length);\n    const randomCharacter = remainingCharacters.splice(randomIndex, 1)[0];\n    cardFront.textContent = randomCharacter;\n  }\n\n  function endSequence() {\n    cardContainer.style.display = 'none';\n    buttonContainer.style.display = 'none';\n    restartContainer.style.display = 'flex';\n  }\n\n  function restartGame() {\n    currentIndex = 0;\n    remainingCharacters = [...userCharacters]; \/\/ \ub79c\ub364 \ubaa8\ub4dc \ub300\ube44\n    cardContainer.style.display = 'block';\n    buttonContainer.style.display = 'flex';\n    restartContainer.style.display = 'none';\n    showNextCharacter();\n  }\n\n  function goHome() {\n    inputContainer.style.display = 'flex';\n    cardContainer.style.display = 'none';\n    buttonContainer.style.display = 'none';\n    restartContainer.style.display = 'none';\n    userInput.value = '';\n    userCharacters = [];\n    remainingCharacters = [];\n    currentIndex = 0;\n    stopMusic();\n  }\n\n  function toggleFullscreen() {\n    const container = document.getElementById('jk-gameBoardContainer');\n    if (!document.fullscreenElement) {\n      container.requestFullscreen().catch(err => {\n        alert(`Error attempting to enable full-screen mode: ${err.message}`);\n      });\n    } else {\n      document.exitFullscreen();\n    }\n  }\n\n  let lastMusicIndex = -1;\n  function playRandomMusic() {\n    let idx;\n    do { idx = Math.floor(Math.random() * musicFiles.length); }\n    while (musicFiles.length > 1 && idx === lastMusicIndex);\n    lastMusicIndex = idx;\n\n    audio.src = musicFolderPath + musicFiles[idx];\n    audio.volume = 0.2;  \/\/ \ubc30\uacbd\uc74c\uc545 \ubcfc\ub968\n    audio.play().then(() => {\n      isPlaying = true;\n      musicButton.textContent = '\u23f8';\n    }).catch(()=>{});\n  }\n\n  function toggleMusic() {\n    if (isPlaying) {\n      audio.pause();\n      musicButton.textContent = '\u25b6';\n    } else {\n      audio.play().then(()=>{\n        musicButton.textContent = '\u23f8';\n      }).catch(()=>{});\n    }\n    isPlaying = !isPlaying;\n  }\n\n  function stopMusic() {\n    audio.pause();\n    audio.currentTime = 0;\n    musicButton.textContent = '\u25b6';\n    isPlaying = false;\n  }\n\n  document.addEventListener('fullscreenchange', () => {\n    if (!document.fullscreenElement) {\n      fullscreenButton.innerText = '\uc804\uccb4 \ud654\uba74';\n      fullscreenButton.classList.remove('jk-hide');\n    } else {\n      fullscreenButton.classList.add('jk-hide');\n    }\n  });\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud50c\ub808\uc774 \ub79c\ub364\uc73c\ub85c \ubcf4\uc5ec\uc8fc\uae30 ? 0.18s 0.20s 0.22s 0.24s 0.26s 0.28s 0.30s 0.35s 0.40s 0.50s 0.60s 0.70s 0.80s \ub2e4\uc74c \ub2e4\uc2dc\ud558\uae30 \ucc98\uc74c\uc73c\ub85c \uc804\uccb4 \ud654\uba74 \u25b6<\/p>\n","protected":false},"author":1,"featured_media":1184,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":[],"categories":[12],"tags":[],"_links":{"self":[{"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/posts\/552"}],"collection":[{"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/comments?post=552"}],"version-history":[{"count":0,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/posts\/552\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/media\/1184"}],"wp:attachment":[{"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/media?parent=552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/categories?post=552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/tags?post=552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}