html5 canvas-2.用canvas製作一個猜字母的小遊戲_html5教學技巧

今天我們要用canvas製作一個猜字母的小遊戲，先來張效果圖。
 
遊戲設計很簡單，系統會隨機從a-z的26個字母中選擇一個保存起來，你鍵盤輸入一個字母，系統會提示你正確字符比你當前輸入字母小還是大，直到你輸入正確的字母遊戲才結束。
以下介紹js程式碼中需要用到的一些變數及其他們的意義，系統會在開始的時候初始化這些變數。
guesses：使用者猜字母的次數；
message：幫助玩家如何玩遊戲的說明；
letters：儲存26個英文字母的陣列；
today：目前時間；
letterToGuess：系統選取的字母，也就是你需要猜中的字母；
higherOrLower：提示使用者目前輸入的字母比答案大還是小；
lettersGuessed：使用者已經猜過的字母；
gameOver：遊戲是否結束。

複製程式碼

程式碼如下:

var guesses = 0; message = "Guess The Letter From a (lower) to z (higher)";
var letters = ["a", "b", "c", "d", "e", "f", " g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s" , "t", "u", "v", "w", "x", "y", "z"];
var today = new Date();
var letterToGuess = "";
var higherOrLower = "";
var lettersGuessed;
var gameOver = false;

下面我們介紹響應鍵盤彈起的事件，用來判斷使用者輸入的字母是否是正確答案：

複製程式碼程式碼如下:

$(window). bind('keyup', eventKeyPressed);

複製代碼代碼如下:

function eventKeyPressed(e) {
//先判斷遊戲是否結束
if (!gameOver) {
//取得輸入字母
var letterPressed = String.fromCharCode(e .keyCode);
//做小寫處理
letterPressed = letterPressed.toLowerCase();
//遊戲次數加1
guesses ;
//猜把字母輸入字母到已猜測字母陣列
lettersGuessed.push(letterPressed);
//判斷輸入字母與答案是否一致，一致則遊戲結束
if (letterPressed == letterToGuess) {
gameOver = true
}
}; else {
//取得答案在字母數組中的位置
var letterIndex = letters.indexOf(letterToGuess);
//取得輸入字母在字母數組中的位置
var guessIndex = letters. indexOf(letterPressed);
Debugger.log(guessIndex);
//判斷大小
if (guessIndex higherOrLower = "That is not a letter"; } else if (guessIndex > letterIndex) {
higherOrLower = "Letter is Lower than you entered";
} else {
higherOrLower = "Letter is Higher than you entered";


🎜>//重繪canvas
drawScreen();
}
}

這裡需要注意的一點是，當我們需要對canvas中的圖像做修改時，一般會重新繪製整個canvas物件。所以在我們每猜一次字母，都會執行drawScreen把整個canvas上的所有物件都繪製一遍。
下面我們來看看drawScreen都做了什麼。

複製程式碼程式碼如下:

function drawScreen() {
//背景
context.fillStyle = '#ffffaa';
context.fillRect(0, 0, 500, 300);
//框
context.行程Style = '#000000';
context.中風矩形(5, 5, 490, 290);
context.textBaseLine = '頂部';
//日期
context.textBaseLine = '頂部';
//日期
context.fillStyle = '#000000';
context.font = '10px_sans';
context.fillText(今天, 150, 20);
//訊息
context.fillStyle = ' ff0000';
context.font = '14px_sans';
context.fillText(訊息, 125, 40);
//猜測
context.fillStyle = '#109910'; .font = '16px_sans';
context.fillText('猜測：' 猜測, 215, 60);
//更高或更低
context.fillStyle = '#0000000';
context.font = '16px_sans';
context.fillText('更高或更低：' upperOrLower, 150, 125);
//猜出的字母
context.fillStyle = '#ff0000' ;
context.font = '16px_sans';
context.fillText('猜出的字母：' letterGuessed.toString(), 10, 260);
if (gameOver) {
context. fillStyle = "#FF0000";
context.font = "40px _sans";
context.fillText("你明白了！", 150, 180);
}
}

}


程式碼很簡單，就是相關背景，還有文字資訊。下面我們點擊匯入介紹圖像的功能，當我們「匯出畫布圖像」按鈕的時候，會開啟一個新的頁面，顯示目前的圖片。注意toDataURL()方法，他會回傳一個64位元的png圖片資料。

複製程式碼

程式碼如下：


$('lickcateImage (function () {
window.open(theCanvas.toDataURL(), 'canvasImage' , 'left=0,top=0,width='theCanvas.width',height='theCanvas.height',toolbar=0 ,resizab le=0')

});
大家還是直接運行demo，看看最終效果吧。 demo下載位址：html5canvas.guessTheLetter.zip