function MainComponent() { const [word, setWord] = React.useState(""); const [guessedLetters, setGuessedLetters] = React.useState([]); const [remainingAttempts, setRemainingAttempts] = React.useState(6); const [gameStatus, setGameStatus] = React.useState("playing"); const halloweenWords = [ "PUMPKIN", "GHOST", "WITCH", "SKELETON", "VAMPIRE", "ZOMBIE", "CANDY", "SPIDER", "MONSTER", "SCARY" ]; React.useEffect(()=>{ const randomIndex = Math.floor(Math.random() * halloweenWords.length); setWord(halloweenWords[randomIndex]); }, []); const displayWord = word.split("").map((letter)=>guessedLetters.includes(letter) ? letter : "_").join(" "); const handleGuess = (letter)=>{ if (gameStatus !== "playing") return; if (!guessedLetters.includes(letter)) { const newGuessedLetters = [ ...guessedLetters, letter ]; setGuessedLetters(newGuessedLetters); if (!word.includes(letter)) { const newAttempts = remainingAttempts - 1; setRemainingAttempts(newAttempts); if (newAttempts === 0) { setGameStatus("lost"); } } else if (!word.split("").some((l)=>!newGuessedLetters.includes(l))) { setGameStatus("won"); } } }; const resetGame = ()=>{ const randomIndex = Math.floor(Math.random() * halloweenWords.length); setWord(halloweenWords[randomIndex]); setGuessedLetters([]); setRemainingAttempts(6); setGameStatus("playing"); }; const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1a1a1a] text-white font-sans p-4", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto text-center", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#ff6b00] mb-8", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "🎃 ハロウィンハングマン 👻"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-mono mb-4 tracking-wider", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, displayWord), /*#__PURE__*/ React.createElement("div", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "残りの試行回数: ", remainingAttempts), gameStatus === "won" && /*#__PURE__*/ React.createElement("div", { className: "text-2xl text-green-500 mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "おめでとう！勝ちました！ 🎉"), gameStatus === "lost" && /*#__PURE__*/ React.createElement("div", { className: "text-2xl text-red-500 mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "ゲームオーバー！正解は ", word, " でした 💀")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-2 mb-8", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, alphabet.map((letter)=>/*#__PURE__*/ React.createElement("button", { key: letter, onClick: ()=>handleGuess(letter), disabled: guessedLetters.includes(letter) || gameStatus !== "playing", className: `p-2 text-lg rounded ${guessedLetters.includes(letter) ? "bg-gray-600 cursor-not-allowed" : "bg-[#ff6b00] hover:bg-[#ff8533] cursor-pointer"} disabled:opacity-50`, __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, letter))), /*#__PURE__*/ React.createElement("button", { onClick: resetGame, className: "bg-[#ff6b00] hover:bg-[#ff8533] text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, "新しいゲーム"))); }

🎃 ハロウィン ハングマン 👻

🎃 ハロウィンハングマン 👻