借助HTML5 Canvas API制作一個簡單的猜字游戲

2020-03-24 17:56:38

字體：大中小

來源：轉載

供稿：網友

metacharset= utf-8 / scripttype= text/javascript src= chp1_guess_the_letter.js /script scripttype= text/javascript src= modernizr.custom.99886.js /script /head body canvasid= canvas_guess_the_letter width= 500 height= 300 你的瀏覽器不支持HTML5Canvas /canvas form inputtype= button id= createImageData html' target='_blank'>value= ExportCanvasImage / ; /form /body /html
*/ window.addEventListener( load ,eventWindowLoaded,false); varDebugger=function(){ }; Debugger.log=function(message){ try{ console.log(message); }catch(exception){ return; } } functioneventWindowLoaded(){ canvasApp(); } functioncanvasSupport(){ returnModernizr.canvas; } functioncanvasApp(){ varguesses=0; varmessage= GuessTheLetterFroma(lower)toz(higher) ; varletters=[ 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 ]; vartoday=newDate(); varletterToGuess= ; varhigherOrLower= ; varletterGuessed=[]; vargameOver=false; if(!canvasSupport()){ return; } vartheCanvas=document.getElementById( canvas_guess_the_letter ); varcontext=theCanvas.getContext( 2d ); initGame(); functioninitGame(){ varletterIndex=Math.floor(Math.random()*letters.length); letterToGuess=letters[letterIndex]; guesses=0; lettersGuessed=[]; gameOver=false; window.addEventListener( keyup ,eventKeyPressed,true); varformElement=document.getElementById( createImageData ); formElement.addEventListener('click',createImageDataPressed,false); drawScreen(); } functioneventKeyPressed(e){ if(!gameOver){ varletterPressed=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= 請輸入正確的字符 ; }elseif(guessIndex letterIndex){ higherOrLower= 小了 ; }else{ higherOrLower= 大了 ; } } drawScreen(); } } functiondrawScreen(){ //背景 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( 猜測次數： +guesses,215,60); //大還是小 context.fillStyle= #000000 ; context.font= 16px_sans ; context.fillText( 大還是小： +higherOrLower,150,135); //已經猜測的字符 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); } } functioncreateImageDataPressed(e){ window.open(theCanvas.toDataURL(), canvasImage , left=0,top=0,width= +theCanvas.width+ ,height= +theCanvas.height+ ,toolbar=0,resizable=0 ); } }
從游戲名稱可以看出，該游戲是猜字游戲。每局系統都會自動生成一個字母，玩家會按鍵盤來猜測該字母是哪一個。例如生成的是s，玩家按了h，則游戲就會提示《小了》，因為英文字母當中h的索引比s的索引更靠前。案例當中涉及的變量。guesses：猜測次數
message：文字提示，指導用戶如何玩該游戲
letters：文字數組，存放我們要猜測的文字的集合。這個例子用的是a到z
today：今天的日期
letterToGuess：要猜測的文字
higherOrLower：是《大了》還是《小了》
letterGuessed：已經猜測過得文字
gameOver：游戲是否結束，是布爾變量，開始的時候是false，猜對后設為true變量的聲明JavaScript Code復制內容到剪貼板
varguesses=0; varmessage= GuessTheLetterFroma(lower)toz(higher) ; varletters=[ 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 ]; vartoday=newDate(); varletterToGuess= ; varhigherOrLower= ; varletterGuessed=[]; vargameOver=false;
functioninitGame(){ varletterIndex=Math.floor(Math.random()*letters.length); letterToGuess=letters[letterIndex]; guesses=0; lettersGuessed=[]; gameOver=false; window.addEventListener( keyup ,eventKeyPressed,true); varformElement=document.getElementById( createImageData ); formElement.addEventListener('click',createImageDataPressed,false); drawScreen(); }
通過使用Math的random()函數和floor()函數，根據文字的數組生成要猜測的文字。并且當用戶按鍵盤的時候監聽《keyup》事件，根據傳遞過來的event，生成按下的鍵值。因猜測游戲對大小寫不敏感，為防止用戶按大寫字母，我們需要把值轉換成小寫形式。猜測次數+1猜測出來的文字添加到已經猜測的文字數組當中JavaScript Code復制內容到剪貼板
varletterPressed=String.fromCharCode(e.keyCode); letterPressed=letterPressed.toLowerCase(); guesses++; letterGuessed.push(letterPressed);
剩下的就只有判斷大和小了。通過indexOf函數我們可以判斷要猜測的文字和我們輸入的文字在字符集上面的索引值。如果我們輸入的更靠前則提示《小了》反之《大了》最終用戶猜對了要猜測的文字我們會在中央用大號字體顯示《你猜對了》JavaScript Code復制內容到剪貼板
letterIndex=letters.indexOf(letterToGuess); guessIndex=letters.indexOf(letterPressed); if(guessIndex 0){ higherOrLower= 請輸入正確的字符 ; }elseif(guessIndex letterIndex){ higherOrLower= 小了 ; }else{ higherOrLower= 大了 ; ｝
至此這個功能差不多完成了吧，我們還有一個小功能，那就是通過按下按鈕的方式可以把屏幕結果抓去出來。用的函數為toDataUrl()，有興趣的朋友研究一下。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。