index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>マルチプレイヤー数当てゲーム</title>
</head>
<body>
<header>
<h1>マルチプレイヤー数当てゲーム</h1>
</header>
<div class="player-registration">
<input type="text" id="playerName" placeholder="プレイヤー名">
<input type="file" id="profileImage" accept="image/*">
<button id="submitPlayer">プレイヤー登録</button>
</div>
<!-- モーダルウィンドウの追加 -->
<div id="modal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<p id="modalMessage"></p>
</div>
</div>
<section class="game-rules">
<h2>ゲームのルール</h2>
<p>1から100までの数字を10回以内に当ててください。正解するとポイントが獲得できます。</p>
</section>
<div class="game-container">
<div class="user-stats">
<p>総プレイゲーム数: <span id="totalGamesPlayed">0</span></p>
<p>正解総数: <span id="totalCorrectGuesses">0</span></p>
</div>
<div class="live-feedback" id="liveFeedback"></div>
<input type="number" id="guessInput" min="1" max="100" placeholder="あなたの予想">
<button id="guessButton">予想する</button>
<p id="message"></p>
<p>残り予想回数: <span id="remainingGuesses">10</span></p>
</div>
<div class="leaderboard">
<h2>トッププレイヤー</h2>
<ul id="topPlayers"></ul>
</div>
<footer>
<p>© 2023 数当てゲーム開発者</p>
<p>お問い合わせ: <a href="mailto:contact:tyosuke2010@gmail.com">contact:tyosuke2010@gmail.com</a></p>
</footer>
<script src="script.js"></script>
</body>
</html>
script.js
document.addEventListener('DOMContentLoaded', () => {
let secretNumber = Math.floor(Math.random() * 100) + 1;
let guessesRemaining = 10;
let gamesPlayed = 0;
let correctGuesses = 0;
const playerNameInput = document.getElementById('playerName');
const submitPlayerButton = document.getElementById('submitPlayer');
const guessInput = document.getElementById('guessInput');
const guessButton = document.getElementById('guessButton');
const message = document.getElementById('message');
const totalGamesPlayed = document.getElementById('totalGamesPlayed');
const totalCorrectGuesses = document.getElementById('totalCorrectGuesses');
const remainingGuesses = document.getElementById('remainingGuesses');
const liveFeedback = document.getElementById('liveFeedback');
submitPlayerButton.addEventListener('click', () => {
const playerName = playerNameInput.value;
if (playerName) {
alert(`ようこそ、${playerName}さん！`);
playerNameInput.disabled = true;
submitPlayerButton.disabled = true;
} else {
alert('プレイヤー名を入力してください。');
}
});
guessButton.addEventListener('click', () => {
const userGuess = parseInt(guessInput.value);
if (!userGuess || userGuess < 1 || userGuess > 100) {
alert('1から100までの数字を入力してください。');
return;
}
guessesRemaining--;
remainingGuesses.textContent = guessesRemaining;
if (userGuess === secretNumber) {
correctGuesses++;
totalCorrectGuesses.textContent = correctGuesses;
message.textContent = `正解！ ${userGuess} が正しい数字です！`;
resetGame();
} else if (guessesRemaining === 0) {
message.textContent = `ゲームオーバー！正しい数字は ${secretNumber} でした。`;
resetGame();
} else {
message.textContent = userGuess > secretNumber ? 'もっと低い数字です！' : 'もっと高い数字です！';
liveFeedback.textContent = `あなたの予想: ${userGuess}`;
}
});
function resetGame() {
secretNumber = Math.floor(Math.random() * 100) + 1;
guessesRemaining = 10;
remainingGuesses.textContent = guessesRemaining;
guessInput.value = '';
gamesPlayed++;
totalGamesPlayed.textContent = gamesPlayed;
}
});
style.css
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
padding: 0;
margin: 0;
text-align: center;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
margin-bottom: 15px;
}
header h1 {
margin: 0;
}
.player-registration, .game-container, .game-rules, .leaderboard {
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
background: #fff;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
input[type='text'], input[type='number'], input[type='file'], button {
display: block;
width: 90%;
padding: 10px;
margin: 10px auto;
border-radius: 5px;
border: 1px solid #ddd;
}
button {
background-color: #5f9ea0;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #486f70;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
position: absolute;
bottom: 0;
width: 100%;
}
footer p {
margin: 0;
}
/* 追加スタイル */
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 5px;
}