本文小編為大家詳細(xì)介紹“怎么用HTML5的Canvas API制作一個(gè)簡(jiǎn)單猜字游戲”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“怎么用HTML5的Canvas API制作一個(gè)簡(jiǎn)單猜字游戲”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括內(nèi)鄉(xiāng)網(wǎng)站建設(shè)、內(nèi)鄉(xiāng)網(wǎng)站制作、內(nèi)鄉(xiāng)網(wǎng)頁(yè)制作以及內(nèi)鄉(xiāng)網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，內(nèi)鄉(xiāng)網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到內(nèi)鄉(xiāng)省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
<！doctype html >
< html lang = “ en” >
<頭>
< meta charset = “ utf-8” />
<腳本類型= “ text / javascript” src = “ chp1_guess_the_letter.js” >
<腳本類型= “ text / javascript” src = “ modernizr.custom.99886.js” >
<身體>
< canvas id = “ canvas_guess_the_letter”寬度= “ 500”高度= “ 300” >
你的瀏覽器不支持HTML5 Canvas
<表格>
<輸入類型= “按鈕” id = “ createImageData”值= “導(dǎo)出畫布圖像” /> ;
JS代碼
JavaScript代碼將內(nèi)容復(fù)制到
/ **
* @作者拉斐爾
* /
window.addEventListener（“ load” ，eventWindowLoaded， false ）;
var Debugger = function （）{
};
Debugger.log = 函數(shù)（消息）{
嘗試 {
console.log（消息）;
} 捕獲（例外）{
回報(bào);
}
}
函數(shù) eventWindowLoaded（）{
canvasApp（）;
}
函數(shù) canvasSupport（）{
返回 Modernizr.canvas;
}
函數(shù) canvasApp（）{
VAR 猜測(cè)= 0;
var message = “猜字母從a（低）到z（高）的字母” ；
變數(shù) 字母= [ “” 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 = 新的 Date（）;
var letterToGuess = “” ;
var HigherOrLower = “” ;
var letterGuessed = [];
var gameOver = false ;
如果（！canvasSupport（））{
回報(bào);
}
var theCanvas = document.getElementById（“ canvas_guess_the_letter” ）;
var context = theCanvas.getContext（“ 2d” ）;
initGame（）;
函數(shù) initGame（）{
var letterIndex = Math.floor（Math.random（）* letters.length）;
letterToGuess =字母[letterIndex];
猜測(cè)= 0;
letterGuessed = [];
gameOver = false ;
window.addEventListener（“ keyup” ，eventKeyPressed， true ）;
var formElement = document.getElementById（“ createImageData” ）;
formElement.addEventListener（'click' ，createImageDataPressed， false ）;
drawScreen（）;
}
函數(shù) eventKeyPressed（e）{
如果（！gameOver）{
var letterPressed = String.fromCharCode（e.keyCode）;
letterPressed = letterPressed.toLowerCase（）;
猜測(cè)++;
letterGuessed.push（letterPressed）;
如果（letterPressed == letterToGuess）{
gameOver = true ;
} 其他 {
letterIndex = letters.indexOf（letterToGuess）;
guessIndex = letters.indexOf（letterPressed）;
如果（guessIndex <0）{
HigherOrLower = “請(qǐng)輸入正確的字符” ;
} 否則，如果（guessIndex HigherOrLower = “小了” ; } 其他 { HigherOrLower = “大了” ; } } drawScreen（）; } } 函數(shù) 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（今天150、20）; //消息 context.fillStyle = “＃FF0000” ; context.font = “ 14px _sans” ; context.fillText（message，125，40）; //猜測(cè)次數(shù) 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）; //已經(jīng)猜測(cè)的字符 context.fillStyle = “＃FF0000” ; context.font = “ 16px _sans” ; context.fillText（“已經(jīng)猜測(cè)的字符：” + letterGuessed.toString（），10，260）; 如果（gameOver）{ context.fillStyle = “＃FF0000” ; context.font = “ 40px _sans” ; context.fillText（“你猜中了” ，150，180 ）; } } 函數(shù) createImageDataPressed（e）{ window.open（theCanvas.toDataURL（）， “ canvasImage” ，“ left = 0，top = 0，width =” + theCanvas.width + “，height =” + theCanvas.height + “，工具欄= 0，可調(diào)整大小= 0” ） ; } } 每局系統(tǒng)都會(huì)自動(dòng)生成一個(gè)字母，玩家會(huì)按鍵盤來(lái)猜測(cè)該字母是哪一個(gè)。 例如生成的是s，玩家按了h，則游戲就會(huì)提示《小了》，因?yàn)橛⑽淖帜府?dāng)中h的索引比s的索引更靠前。 案例當(dāng)中涉及的變量。 猜測(cè)：猜測(cè)次數(shù)消息：文字提示，指導(dǎo)用戶如何玩該游戲字母：文字分散，放置我們要猜測(cè)的文字的集合。這個(gè)例子用的是a到z今天：今天的日期letterToGuess：要猜測(cè)的文字更高或更低：是《大了》還是《小了》letterGuessed：已經(jīng)猜測(cè)過得文字gameOver：游戲是否結(jié)束，是布爾變量，開始的時(shí)候是false，猜對(duì)后設(shè)置true 變量的聲明 JavaScript代碼將內(nèi)容復(fù)制到 VAR 猜測(cè)= 0; var message = “猜字母從a（低）到z（高）的字母” ； 變數(shù) 字母= [ “” 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 = 新的 Date（）; var letterToGuess = “” ; var HigherOrLower = “” ; var letterGuessed = []; var gameOver = false ; 初始化游戲 JavaScript代碼將內(nèi)容復(fù)制到 函數(shù) initGame（）{ var letterIndex = Math.floor（Math.random（）* letters.length）; letterToGuess =字母[letterIndex]; 猜測(cè)= 0; letterGuessed = []; gameOver = false ; window.addEventListener（“ keyup” ，eventKeyPressed， true ）; var formElement = document.getElementById（“ createImageData” ）; formElement.addEventListener（'click' ，createImageDataPressed， false ）; drawScreen（）; } 通過使用Math的random（）函數(shù)和floor（）函數(shù)，根據(jù)文字的堆積生成要猜測(cè)的文字。 并且當(dāng)用戶按鍵盤的時(shí)候監(jiān)聽《 keyup》事件，根據(jù)傳遞過來(lái)的事件，生成點(diǎn)擊的鍵值。 因猜測(cè)游戲?qū)Υ笮懖幻舾?，為防止用戶按大寫字母，我們需要把值轉(zhuǎn)換成小寫形式。 猜測(cè)次數(shù)+1 猜測(cè)出來(lái)的文字添加到已經(jīng)猜測(cè)的文字重疊當(dāng)中 JavaScript代碼將內(nèi)容復(fù)制到 var letterPressed = String.fromCharCode（e.keyCode）; letterPressed = letterPressed.toLowerCase（）; 猜測(cè)++; letterGuessed.push（letterPressed）; 剩下的就只有判斷大和小了。 通過indexOf函數(shù)我們可以判斷要猜測(cè)的文字和我們輸入的文字在字符集上方的索引值。 如果我們輸入的更靠前則提示《小了》反之《大了》 最終用戶猜對(duì)了要猜測(cè)的文字我們會(huì)在中央用大號(hào)字體顯示《你猜對(duì)了》 JavaScript代碼將內(nèi)容復(fù)制到 letterIndex = letters.indexOf（letterToGuess）; guessIndex = letters.indexOf（letterPressed）; 如果（guessIndex <0）{ HigherOrLower = “請(qǐng)輸入正確的字符” ; } 否則，如果（guessIndex HigherOrLower = “小了” ; } 其他 { HigherOrLower = “大了” ; ｝ 讀到這里，這篇“怎么用HTML5的Canvas API制作一個(gè)簡(jiǎn)單猜字游戲”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前題目：怎么用HTML5的CanvasAPI制作一個(gè)簡(jiǎn)單猜字游戲
文章來(lái)源：http://weahome.cn/article/pocghh.html
重慶分公司
重慶分公司
