index.html<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="ja">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <link rel="stylesheet" href="styles.css">\n <title>\u30de\u30eb\u30c1\u30d7\u30ec\u30a4\u30e4\u30fc\u6570\u5f53\u3066\u30b2\u30fc\u30e0<\/title>\n<\/head>\n<body>\n<header>\n <h1>\u30de\u30eb\u30c1\u30d7\u30ec\u30a4\u30e4\u30fc\u6570\u5f53\u3066\u30b2\u30fc\u30e0<\/h1>\n<\/header>\n\n<div class="player-registration">\n <input type="text" id="playerName" placeholder="\u30d7\u30ec\u30a4\u30e4\u30fc\u540d">\n <input type="file" id="profileImage" accept="image\/*">\n <button id="submitPlayer">\u30d7\u30ec\u30a4\u30e4\u30fc\u767b\u9332<\/button>\n<\/div>\n\n<!-- \u30e2\u30fc\u30c0\u30eb\u30a6\u30a3\u30f3\u30c9\u30a6\u306e\u8ffd\u52a0 -->\n<div id="modal" class="modal">\n <div class="modal-content">\n <span class="close-button">\u00d7<\/span>\n <p id="modalMessage"><\/p>\n <\/div>\n<\/div>\n\n<section class="game-rules">\n <h2>\u30b2\u30fc\u30e0\u306e\u30eb\u30fc\u30eb<\/h2>\n <p>1\u304b\u3089100\u307e\u3067\u306e\u6570\u5b57\u309210\u56de\u4ee5\u5185\u306b\u5f53\u3066\u3066\u304f\u3060\u3055\u3044\u3002\u6b63\u89e3\u3059\u308b\u3068\u30dd\u30a4\u30f3\u30c8\u304c\u7372\u5f97\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/section>\n\n<div class="game-container">\n <div class="user-stats">\n <p>\u7dcf\u30d7\u30ec\u30a4\u30b2\u30fc\u30e0\u6570: <span id="totalGamesPlayed">0<\/span><\/p>\n <p>\u6b63\u89e3\u7dcf\u6570: <span id="totalCorrectGuesses">0<\/span><\/p>\n <\/div>\n\n <div class="live-feedback" id="liveFeedback"><\/div>\n\n <input type="number" id="guessInput" min="1" max="100" placeholder="\u3042\u306a\u305f\u306e\u4e88\u60f3">\n <button id="guessButton">\u4e88\u60f3\u3059\u308b<\/button>\n <p id="message"><\/p>\n <p>\u6b8b\u308a\u4e88\u60f3\u56de\u6570: <span id="remainingGuesses">10<\/span><\/p>\n<\/div>\n\n<div class="leaderboard">\n <h2>\u30c8\u30c3\u30d7\u30d7\u30ec\u30a4\u30e4\u30fc<\/h2>\n <ul id="topPlayers"><\/ul>\n<\/div>\n\n<footer>\n <p>\u00a9 2023 \u6570\u5f53\u3066\u30b2\u30fc\u30e0\u958b\u767a\u8005<\/p>\n <p>\u304a\u554f\u3044\u5408\u308f\u305b: <a href="mailto:contact:tyosuke2010@gmail.com">contact:tyosuke2010@gmail.com<\/a><\/p>\n<\/footer>\n\n<script src="script.js"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre><\/div>\n\n\n\nscript.js<\/p>\n\n\n\n
document.addEventListener('DOMContentLoaded', () => {\n let secretNumber = Math.floor(Math.random() * 100) + 1;\n let guessesRemaining = 10;\n let gamesPlayed = 0;\n let correctGuesses = 0;\n\n const playerNameInput = document.getElementById('playerName');\n const submitPlayerButton = document.getElementById('submitPlayer');\n const guessInput = document.getElementById('guessInput');\n const guessButton = document.getElementById('guessButton');\n const message = document.getElementById('message');\n const totalGamesPlayed = document.getElementById('totalGamesPlayed');\n const totalCorrectGuesses = document.getElementById('totalCorrectGuesses');\n const remainingGuesses = document.getElementById('remainingGuesses');\n const liveFeedback = document.getElementById('liveFeedback');\n\n submitPlayerButton.addEventListener('click', () => {\n const playerName = playerNameInput.value;\n if (playerName) {\n alert(`\u3088\u3046\u3053\u305d\u3001${playerName}\u3055\u3093\uff01`);\n playerNameInput.disabled = true;\n submitPlayerButton.disabled = true;\n } else {\n alert('\u30d7\u30ec\u30a4\u30e4\u30fc\u540d\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\n }\n });\n\n guessButton.addEventListener('click', () => {\n const userGuess = parseInt(guessInput.value);\n if (!userGuess || userGuess < 1 || userGuess > 100) {\n alert('1\u304b\u3089100\u307e\u3067\u306e\u6570\u5b57\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\n return;\n }\n\n guessesRemaining--;\n remainingGuesses.textContent = guessesRemaining;\n\n if (userGuess === secretNumber) {\n correctGuesses++;\n totalCorrectGuesses.textContent = correctGuesses;\n message.textContent = `\u6b63\u89e3\uff01 ${userGuess} \u304c\u6b63\u3057\u3044\u6570\u5b57\u3067\u3059\uff01`;\n resetGame();\n } else if (guessesRemaining === 0) {\n message.textContent = `\u30b2\u30fc\u30e0\u30aa\u30fc\u30d0\u30fc\uff01\u6b63\u3057\u3044\u6570\u5b57\u306f ${secretNumber} \u3067\u3057\u305f\u3002`;\n resetGame();\n } else {\n message.textContent = userGuess > secretNumber ? '\u3082\u3063\u3068\u4f4e\u3044\u6570\u5b57\u3067\u3059\uff01' : '\u3082\u3063\u3068\u9ad8\u3044\u6570\u5b57\u3067\u3059\uff01';\n liveFeedback.textContent = `\u3042\u306a\u305f\u306e\u4e88\u60f3: ${userGuess}`;\n }\n });\n\n function resetGame() {\n secretNumber = Math.floor(Math.random() * 100) + 1;\n guessesRemaining = 10;\n remainingGuesses.textContent = guessesRemaining;\n guessInput.value = '';\n gamesPlayed++;\n totalGamesPlayed.textContent = gamesPlayed;\n }\n});\n<\/code><\/pre><\/div>\n\n\n\nstyle.css<\/p>\n\n\n\n
body {\n font-family: 'Arial', sans-serif;\n background-color: #f4f4f4;\n color: #333;\n line-height: 1.6;\n padding: 0;\n margin: 0;\n text-align: center;\n}\n\nheader {\n background: #333;\n color: #fff;\n padding: 1rem 0;\n margin-bottom: 15px;\n}\n\nheader h1 {\n margin: 0;\n}\n\n.player-registration, .game-container, .game-rules, .leaderboard {\n max-width: 600px;\n margin: 20px auto;\n padding: 20px;\n border: 1px solid #ddd;\n background: #fff;\n border-radius: 10px;\n box-shadow: 2px 2px 5px rgba(0,0,0,0.3);\n}\n\ninput[type='text'], input[type='number'], input[type='file'], button {\n display: block;\n width: 90%;\n padding: 10px;\n margin: 10px auto;\n border-radius: 5px;\n border: 1px solid #ddd;\n}\n\nbutton {\n background-color: #5f9ea0;\n color: #fff;\n border: none;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #486f70;\n}\n\nfooter {\n background: #333;\n color: #fff;\n text-align: center;\n padding: 1rem 0;\n position: absolute;\n bottom: 0;\n width: 100%;\n}\n\nfooter p {\n margin: 0;\n}\n\n\/* \u8ffd\u52a0\u30b9\u30bf\u30a4\u30eb *\/\nul {\n list-style-type: none;\n padding: 0;\n}\n\nli {\n margin-bottom: 5px;\n \n}\n<\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"index.html script.js style.css<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[4,6,44],"tags":[3,16],"class_list":["post-17971","post","type-post","status-publish","format-standard","hentry","category-programming","category-web","category-44","tag-programming","tag-webdev"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/17971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17971"}],"version-history":[{"count":2,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/17971\/revisions"}],"predecessor-version":[{"id":17977,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/17971\/revisions\/17977"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=17971"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=17971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}