SQL Server 2008 數據庫鏡像安排實例之二 設置裝備擺設鏡像,實行手動毛病轉移。本站提示廣大學習愛好者:(SQL Server 2008 數據庫鏡像安排實例之二 設置裝備擺設鏡像,實行手動毛病轉移)文章只能為提供參考,不一定能成為您想要的結果。以下是SQL Server 2008 數據庫鏡像安排實例之二 設置裝備擺設鏡像,實行手動毛病轉移正文
明天我們要用canvas制造一個猜字母的小游戲,先來張後果圖。
游戲設計很簡略,體系會隨機從a-z的26個字母當選擇一個保留起來,你鍵盤輸出一個字母,體系會提醒你准確字符比你以後輸出字母小照樣年夜,直到你輸出准確的字母游戲才停止。
上面引見js代碼中須要用到的一些變量及其他們的寄義,體系會在開端的時刻初始化這些變量。
guesses:用戶猜字母的次數;
message:贊助玩家若何玩游戲的解釋;
letters:保留26個英文字母的數組;
today:以後時光;
letterToGuess:體系選中的字母,也就是你須要料中的字母;
higherOrLower:提醒用戶以後輸出的字母比謎底年夜照樣小;
lettersGuessed:用戶曾經猜過的字母;
gameOver:游戲能否停止。
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;
上面我們引見呼應鍵盤彈起的事宜,用來斷定用戶輸出的字母能否是准確謎底:
$(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 < 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();
}
}
這裡須要留意的一點是,當我們須要對canvas中的圖象做修正時,普通會從新繪制全部canvas對象。所以在我們每猜一次字母,都邑履行drawScreen把全部canvas上的一切對象都繪制一遍。
上面我們看看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);
}
}
代碼很簡略,就是繪制配景,還有文字信息。上面我們引見導入圖象的功效,當我們點擊“Export Canvas Image”按鈕的時刻,會翻開一個新的頁面,顯示以後的圖象。留意toDataURL()辦法,他會前往一個64位的png圖片數據。
$('#createImageData').click(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