HTML小游戲是一種非常有趣的學習HTML的方式。無論您是初學者還是資深的Web開發人員，都可以從這些小游戲中學到很多有用的知識。在本文中，我們將為您介紹一些優秀的HTML小游戲源代碼，以便您學習和掌握HTML的基本概念。
<html>
<head>
<title>My First Game</title>
</head>
<body>
<h1>Welcome to My First Game</h1>
<p>Click the button to start playing!</p>
<button onclick="alert('You win!')">Play Now</button>
</body>
</html>以上是一個非常簡單的HTML游戲代碼。它包括一個按鈕，當點擊該按鈕時，將彈出一個消息框，表明您贏得了游戲。這種類型的HTML游戲非常適合新手，可以幫助他們理解HTML中的基本元素，例如標題，段落和按鈕。
<html>
<head>
<title>Memory Game</title>
<style>
.card {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 20px;
display: inline-block;
cursor: pointer;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>Memory Game</h1>
<p>Click the cards to reveal their images. Match all the images to win!</p>
<div class="card" onclick="reveal(this, 'cat.jpg')"></div>
<div class="card" onclick="reveal(this, 'dog.jpg')"></div>
<div class="card" onclick="reveal(this, 'bird.jpg')"></div>
<div class="card" onclick="reveal(this, 'cat.jpg')"></div>
<div class="card" onclick="reveal(this, 'dog.jpg')"></div>
<div class="card" onclick="reveal(this, 'bird.jpg')"></div>
<script>
var firstCard = null;
function reveal(card, image) {
card.style.backgroundImage = 'url(' + image + ')';
if (!firstCard) {
firstCard = card;
} else if (firstCard.style.backgroundImage === card.style.backgroundImage) {
alert('You win!');
} else {
setTimeout(function() {
card.style.backgroundImage = '';
firstCard.style.backgroundImage = '';
firstCard = null;
}, 1000);
}
}
</script>
</body>
</html>以上是一個更復雜的HTML游戲，名為記憶游戲。該游戲讓您點擊卡片來揭示它們的圖像。如果您成功地匹配了所有圖像，則贏得游戲。此代碼還演示了如何使用CSS將樣式應用于HTML元素，并使用JavaScript創建交互式體驗。
總的來說，HTML小游戲是一種極其有趣和有用的學習HTML的方法。無論您是HTML的新手還是專家，您都可以從學習HTML游戲源代碼中獲益。