ホームページ >ウェブフロントエンド >jsチュートリアル >HTML、CSS、JS で Wordle ゲームを作成する
HTML、CSS、JS で Wordle ゲームを作成する
- WBOYオリジナル
- 2024-09-08 22:30:33937ブラウズ
index.html という名前のファイルを作成します:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wordle Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Wordle Game</h1>
<div id="game-board"></div>
<input type="text" id="guess-input" maxlength="5" placeholder="Enter your guess">
<button id="submit-btn">Submit</button>
<p id="message"></p>
</div>
<script src="script.js"></script>
</body>
</html>
styles.css という名前のファイルを作成します:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
#game-board {
display: grid;
grid-template-columns: repeat(5, 40px);
gap: 10px;
margin-bottom: 20px;
}
.cell {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ddd;
font-size: 18px;
}
.correct {
background-color: #6aaa64;
color: white;
}
.present {
background-color: #c9b458;
color: white;
}
.absent {
background-color: #787c7e;
color: white;
}
script.js という名前のファイルを作成します:
const possibleWords = ['apple', 'brave', 'crane', 'dough', 'eagle']; // List of possible words
const targetWord = possibleWords[Math.floor(Math.random() * possibleWords.length)]; // Random target word
const gameBoard = document.getElementById('game-board');
const guessInput = document.getElementById('guess-input');
const submitBtn = document.getElementById('submit-btn');
const message = document.getElementById('message');
function createBoard() {
for (let i = 0; i < 6; i++) { // 6 rows for 6 guesses
for (let j = 0; j < 5; j++) { // 5 columns for 5 letters
const cell = document.createElement('div');
cell.classList.add('cell');
gameBoard.appendChild(cell);
}
}
}
function checkGuess(guess) {
const cells = gameBoard.querySelectorAll('.cell');
const targetWordArray = targetWord.split('');
const guessArray = guess.split('');
let index = 0;
for (let i = 0; i < 5; i++) {
if (guessArray[i] === targetWordArray[i]) {
cells[index].classList.add('correct');
} else if (targetWordArray.includes(guessArray[i])) {
cells[index].classList.add('present');
} else {
cells[index].classList.add('absent');
}
cells[index].textContent = guessArray[i];
index++;
}
}
function handleSubmit() {
const guess = guessInput.value.toLowerCase();
if (guess.length !== 5 || !possibleWords.includes(guess)) {
message.textContent = 'Invalid word. Try again.';
return;
}
checkGuess(guess);
guessInput.value = '';
// Additional game logic (e.g., end game if correct guess or number of attempts) can be added here
}
createBoard();
submitBtn.addEventListener('click', handleSubmit);
直接クローンを作成することもできます: https://github.com/prince-dev007/wordle-game
Wordle ゲームについて詳しく読む
以上がHTML、CSS、JS で Wordle ゲームを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。