二話不說(shuō)，先上效果圖以及源代碼~
HTML代碼
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <script type="text/javascript" src="chp1_guess_the_letter.js"></script>
- <script type="text/javascript" src="modernizr.custom.99886.js"></script>
- </head>
- <body>
- <canvas id="canvas_guess_the_letter" width="500" height="300">
- 你的瀏覽器不支持HTML5 Canvas
- </canvas>
- <form>
- <input type="button" id="createImageData" value="Export Canvas Image" />;
- </form>
- </body>
- </html>
JS代碼
JavaScript Code復(fù)制內(nèi)容到剪貼板
-
-
-
- window.addEventListener("load", eventWindowLoaded, false);
-
- var Debugger = function() {
-
- };
- Debugger.log = function(message) {
- try {
- console.log(message);
- } catch(exception) {
- return;
- }
- }
-
- function eventWindowLoaded() {
- canvasApp();
- }
-
- function canvasSupport() {
- return Modernizr.canvas;
- }
-
- function canvasApp() {
- 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 letterGuessed = [];
- var gameOver = false;
-
- if(!canvasSupport()) {
- return;
- }
-
- var theCanvas = document.getElementById("canvas_guess_the_letter");
- var context = theCanvas.getContext("2d");
-
- initGame();
-
- function initGame() {
- var letterIndex = Math.floor(Math.random() * letters.length);
- letterToGuess = letters[letterIndex];
- guesses = 0;
- lettersGuessed = [];
- gameOver = false;
- window.addEventListener("keyup", eventKeyPressed, true);
- var formElement = document.getElementById("createImageData");
- formElement.addEventListener('click', createImageDataPressed, false);
- drawScreen();
- }
-
- function eventKeyPressed(e) {
- if(!gameOver) {
- var letterPressed = String.fromCharCode(e.keyCode);
- letterPressed = letterPressed.toLowerCase();
- guesses++;
- letterGuessed.push(letterPressed);
- if(letterPressed == letterToGuess) {
- gameOver = true;
- } else {
- letterIndex = letters.indexOf(letterToGuess);
- guessIndex = letters.indexOf(letterPressed);
- if(guessIndex < 0) {
- higherOrLower = "請(qǐng)輸入正確的字符";
- } else if(guessIndex < letterIndex) {
- higherOrLower = "小了";
- } else {
- higherOrLower = "大了";
- }
- }
- drawScreen();
- }
- }
-
- function drawScreen() {
-
- context.fillStyle = "#ffffaa";
- context.fillRect(0, 0, 500, 300);
-
-
- context.strokeStyle = "#000000";
- context.strokeRect(5, 5, 490, 290);
- context.textBaseLine = "top";
-
-
- context.fillStyle = "#000000";
- context.font = "10px _sans";
- context.fillText(today, 150, 20);
-
-
- context.fillStyle = "#FF0000";
- context.font = "14px _sans";
- context.fillText(message, 125, 40);
-
-
- context.fillStyle = "#109900";
- context.font = "16px _sans";
- context.fillText("猜測(cè)次數(shù)： "+guesses, 215, 60);
-
-
- context.fillStyle = "#000000";
- context.font = "16px _sans";
- context.fillText("大還是小： "+higherOrLower, 150, 135);
-
-
- context.fillStyle = "#FF0000";
- context.font = "16px _sans";
- context.fillText("已經(jīng)猜測(cè)的字符： "+letterGuessed.toString(), 10, 260);
-
- if(gameOver) {
- context.fillStyle = "#FF0000";
- context.font = "40px _sans";
- context.fillText("你猜中了", 150, 180);
- }
- }
-
- function createImageDataPressed(e) {
- window.open(theCanvas.toDataURL(), "canvasImage","left=0, top=0, width="+theCanvas.width+", height="+theCanvas.height+", toolbar=0, resizable=0");
- }
- }
從游戲名稱(chēng)可以看出，該游戲是猜字游戲。每局系統(tǒng)都會(huì)自動(dòng)生成一個(gè)字母，玩家會(huì)按鍵盤(pán)來(lái)猜測(cè)該字母是哪一個(gè)。
例如生成的是s，玩家按了h，則游戲就會(huì)提示《小了》，因?yàn)橛⑽淖帜府?dāng)中h的索引比s的索引更靠前。
案例當(dāng)中涉及的變量。
guesses：猜測(cè)次數(shù)
message：文字提示，指導(dǎo)用戶(hù)如何玩該游戲
letters：文字?jǐn)?shù)組，存放我們要猜測(cè)的文字的集合。這個(gè)例子用的是a到z
today：今天的日期
letterToGuess：要猜測(cè)的文字
higherOrLower：是《大了》還是《小了》
letterGuessed：已經(jīng)猜測(cè)過(guò)得文字
gameOver：游戲是否結(jié)束，是布爾變量，開(kāi)始的時(shí)候是false，猜對(duì)后設(shè)為true
變量的聲明
JavaScript Code復(fù)制內(nèi)容到剪貼板
- 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 letterGuessed = [];
- var gameOver = false;
初始化游戲
JavaScript Code復(fù)制內(nèi)容到剪貼板
- function initGame() {
- var letterIndex = Math.floor(Math.random() * letters.length);
- letterToGuess = letters[letterIndex];
- guesses = 0;
- lettersGuessed = [];
- gameOver = false;
- window.addEventListener("keyup", eventKeyPressed, true);
- var formElement = document.getElementById("createImageData");
- formElement.addEventListener('click', createImageDataPressed, false);
- drawScreen();
- }
通過(guò)使用Math的random()函數(shù)和floor()函數(shù)，根據(jù)文字的數(shù)組生成要猜測(cè)的文字。
并且當(dāng)用戶(hù)按鍵盤(pán)的時(shí)候監(jiān)聽(tīng)《keyup》事件，根據(jù)傳遞過(guò)來(lái)的event，生成按下的鍵值。
因猜測(cè)游戲?qū)Υ笮?xiě)不敏感，為防止用戶(hù)按大寫(xiě)字母，我們需要把值轉(zhuǎn)換成小寫(xiě)形式。
猜測(cè)次數(shù)+1
猜測(cè)出來(lái)的文字添加到已經(jīng)猜測(cè)的文字?jǐn)?shù)組當(dāng)中
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var letterPressed = String.fromCharCode(e.keyCode);
- letterPressed = letterPressed.toLowerCase();
- guesses++;
- letterGuessed.push(letterPressed);
剩下的就只有判斷 大和小了。
通過(guò)indexOf函數(shù) 我們可以判斷要猜測(cè)的文字和我們輸入的文字在字符集上面的索引值。
如果我們輸入的更靠前則提示《小了》反之《大了》
最終用戶(hù)猜對(duì)了要猜測(cè)的文字 我們會(huì)在中央用大號(hào)字體顯示《你猜對(duì)了》
JavaScript Code復(fù)制內(nèi)容到剪貼板
- letterIndex = letters.indexOf(letterToGuess);
- guessIndex = letters.indexOf(letterPressed);
- if(guessIndex < 0) {
- higherOrLower = "請(qǐng)輸入正確的字符";
- } else if(guessIndex < letterIndex) {
- higherOrLower = "小了";
- } else {
- higherOrLower = "大了";
- ｝
至此這個(gè)功能差不多完成了吧，我們還有一個(gè)小功能，那就是通過(guò)按下按鈕的方式可以把屏幕結(jié)果抓去出來(lái)。
用的函數(shù)為toDataUrl()，有興趣的朋友研究一下。
