HTML小游戲是一種很有趣的Web應用形式，它可以在瀏覽器中運行，提供用戶與網站互動的方式。其中，jQuery是一種很常用的JavaScript庫，用來簡化DOM操作和事件處理。下面我們來介紹一個用jQuery實現的HTML小游戲，它是一款猜數字游戲。

首先，在HTML代碼中創建一個包含輸入框、提交按鈕和游戲提示的表單。我們可以使用Bootstrap框架來美化界面。代碼如下：

<form class="form-inline">
<div class="form-group">
<label for="guess">Guess a number between 1 and 100:</label>
<input type="number" class="form-control" id="guess" name="guess" min="1" max="100">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<div id="message"></div>
</form>

上面的代碼中，我們使用了Bootstrap提供的.form-inline和.form-control類來實現表單的水平布局和樣式。同時，我們在提交按鈕的type屬性中指定為submit，以便在用戶點擊按鈕后觸發表單的提交事件。

接著，在JavaScript代碼中使用jQuery來處理表單的提交事件，并對用戶輸入的數字進行判斷。代碼如下：

$("form").submit(function(event) {
event.preventDefault(); // 阻止表單的默認行為
var guessInput = $("#guess");
var guess = guessInput.val();
if (isNaN(guess) || guess< 1 || guess >100) {
$("#message").html("Please enter a valid number between 1 and 100.");
} else if (guess == numberToGuess) {
$("#message").html("Congratulations! You guessed the number!");
guessInput.attr("disabled", true); // 禁用輸入框
} else {
var diff = Math.abs(guess - numberToGuess);
var message;
if (diff<= 10) {
message = "Very hot!";
} else if (diff<= 20) {
message = "Hot!";
} else if (diff<= 30) {
message = "Warm.";
} else if (diff<= 50) {
message = "Cold.";
} else {
message = "Very cold!";
}
$("#message").html(message);
}
});

上面的代碼中，我們使用了submit方法來綁定表單的提交事件，在事件處理函數中使用val方法獲取輸入框的值，對用戶輸入的數字進行判斷，并根據猜測結果更新提示信息。同時，我們在猜中數字后禁用了輸入框，以防止用戶繼續猜測。

最后，在JavaScript代碼中生成一個隨機數作為游戲的答案，并將其存儲在一個全局變量中。代碼如下：

var numberToGuess = getRandomNumber(1, 100);
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

上面的代碼中，我們使用了Math對象的floor和random方法來生成一個介于min和max之間的隨機整數。這個隨機數作為游戲的答案，將在用戶提交表單時進行比對。

在完成上述步驟之后，我們就完成了一款使用jQuery實現的猜數字小游戲。通過這個例子，我們可以看到，使用jQuery可以很方便地實現DOM操作和事件處理，讓HTML小游戲的實現變得更加簡單。