今天我們要用canvas制作一個(gè)猜字母的小游戲，先來(lái)張效果圖。
游戲設(shè)計(jì)很簡(jiǎn)單，系統(tǒng)會(huì)隨機(jī)從a-z的26個(gè)字母中選擇一個(gè)保存起來(lái)，你鍵盤輸入一個(gè)字母，系統(tǒng)會(huì)提示你正確字符比你當(dāng)前輸入字母小還是大，直到你輸入正確的字母游戲才結(jié)束。
下面介紹js代碼中需要用到的一些變量及其他們的含義，系統(tǒng)會(huì)在開始的時(shí)候初始化這些變量。
guesses：用戶猜字母的次數(shù)；
message：幫助玩家如何玩游戲的說(shuō)明；
letters：保存26個(gè)英文字母的數(shù)組；
today：當(dāng)前時(shí)間；
letterToGuess：系統(tǒng)選中的字母，也就是你需要猜中的字母；
higherOrLower：提示用戶當(dāng)前輸入的字母比答案大還是小；
lettersGuessed：用戶已經(jīng)猜過(guò)的字母；
gameOver：游戲是否結(jié)束。
var guesses = 0;
var 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;
下面我們介紹響應(yīng)鍵盤彈起的事件，用來(lái)判斷用戶輸入的字母是否是正確答案：
$(window).bind('keyup', eventKeyPressed);
function eventKeyPressed(e) {
//首先判斷游戲是否結(jié)束
if (!gameOver) {
//獲取輸入字母
var letterPressed = String.fromCharCode(e.keyCode);
//做小寫處理
letterPressed = letterPressed.toLowerCase();
//游戲次數(shù)加1
guesses++;
//把輸入字母保存到已猜字母數(shù)組
lettersGuessed.push(letterPressed);
//判斷輸入字母和答案是否一致，一致則游戲結(jié)束
if (letterPressed == letterToGuess) {
gameOver = true;
} else {
//獲取答案在字母數(shù)組中的位置
var letterIndex = letters.indexOf(letterToGuess);
//獲取輸入字母在字母數(shù)組中的位置
var guessIndex = letters.indexOf(letterPressed);
Debugger.log(guessIndex);
//判斷大小
if (guessIndex < 0) {
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();
}
}
這里需要注意的一點(diǎn)是，當(dāng)我們需要對(duì)canvas中的圖像做修改時(shí)，一般會(huì)重新繪制整個(gè)canvas對(duì)象。所以在我們每猜一次字母，都會(huì)執(zhí)行drawScreen把整個(gè)canvas上的所有對(duì)象都繪制一遍。
下面我們看看drawScreen都干了什么。
function drawScreen() {
//background
context.fillStyle = '#ffffaa';
context.fillRect(0, 0, 500, 300);
//box
context.strokeStyle = '#000000';
context.strokeRect(5, 5, 490, 290);
context.textBaseLine = 'top';
//date
context.fillStyle = '#000000';
context.font = '10px_sans';
context.fillText(today, 150, 20);
//message
context.fillStyle = '#ff0000';
context.font = '14px_sans';
context.fillText(message, 125, 40);
//guesses
context.fillStyle = '#109910';
context.font = '16px_sans';
context.fillText('Guesses:' + guesses, 215, 60);
//higher or lower
context.fillStyle = '#000000';
context.font = '16px_sans';
context.fillText('Higher or Lower:' + higherOrLower, 150, 125);
//letters guessed
context.fillStyle = '#ff0000';
context.font = '16px_sans';
context.fillText('Letters Guessed:' + lettersGuessed.toString(), 10, 260);
if (gameOver) {
context.fillStyle = "#FF0000";
context.font = "40px _sans";
context.fillText("You Got It!", 150, 180);
}
}
代碼很簡(jiǎn)單，就是繪制背景，還有文字信息。下面我們介紹導(dǎo)入圖像的功能，當(dāng)我們點(diǎn)擊“Export Canvas Image”按鈕的時(shí)候，會(huì)打開一個(gè)新的頁(yè)面，顯示當(dāng)前的圖像。注意toDataURL()方法，他會(huì)返回一個(gè)64位的png圖片數(shù)據(jù)。
$('#createImageData').click(function () {
window.open(theCanvas.toDataURL(), 'canvasImage', 'left=0,top=0,width=' + theCanvas.width + ',height=' + theCanvas.height + ',toolbar=0,resizab le=0');
});
大家還是直接運(yùn)行demo，查看最終效果吧。demo下載地址：html5canvas.guessTheLetter.zip
