使用HTML編寫小游戲的源代碼是每個前端工程師的必備技能之一。而今天，我們將會分享一款免費的HTML小游戲的源代碼，希望能夠對大家有所幫助。
首先，我們需要準備一個HTML模板，代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>免費HTML小游戲代碼</title>
</head>
<body>
<div id="container">
<p id="sentence"></p>
<input type="text" id="input" onkeypress="return runGame(event)">
<p id="score">Score: <span id="scoreNum">0</span></p>
</div>
<script>
// 聲明變量
var sentences = [
'Hello, World!',
'Happy coding!',
'Welcome to HTML world.',
'Keep learning and fun!',
'I love HTML, how about you?'
];
var score = 0;
var index = 0;
var maxIndex = sentences.length;
var gameStarted = false;
// 初始化游戲
function initGame() {
gameStarted = true;
updateSentence();
}
// 更新句子
function updateSentence() {
var sentence = sentences[index];
var sentenceElement = document.getElementById('sentence');
sentenceElement.innerHTML = sentence;
}
// 檢查輸入
function checkInput() {
var input = document.getElementById('input');
var sentence = sentences[index];
var inputText = input.value.trim();
var scoreNum = document.getElementById('scoreNum');
if (inputText === sentence) {
score += sentence.length;
scoreNum.innerHTML = score;
input.value = '';
index++;
if (index === maxIndex) {
alert('Congratulations, you have passed the game!');
location.reload();
} else {
updateSentence();
}
}
}
// 運行游戲
function runGame(event) {
if (event.keyCode === 13) {
if (!gameStarted) {
initGame();
} else {
checkInput();
}
}
}
</script>
</body>
</html>以上代碼是一個簡單的輸入游戲，游戲需要隨機從一個預定義的句子列表中選擇一個句子，將該句子展示在頁面上。當用戶在輸入框中輸入完整的該句子后，就可以通過一個彈窗來恭喜用戶通過該游戲。
以上便是一個簡單HTML小游戲的源代碼的全部。如果你想改進這個小游戲代碼，可以修改變量sentences的值添加更多難度更大的句子，或者在JavaScript代碼的函數中，添加更多的游戲規則和條件。
總之，使用HTML和JavaScript編寫小游戲是一項非常有趣和有挑戰性的任務，我們希望大家可以享受編寫HTML小游戲的過程，也希望有各種各樣的小游戲更為出色的問世。