怎么用HTML5的Canvas API制作一個(gè)簡單猜字游戲

本文小編為大家詳細(xì)介紹“怎么用HTML5的Canvas API制作一個(gè)簡單猜字游戲”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“怎么用HTML5的Canvas API制作一個(gè)簡單猜字游戲”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(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   

        </ canvas >  

        <表格>  

            <輸入類型= “按鈕” id = “ createImageData”值= “導(dǎo)出畫布圖像” /> ;       

        </表單>  

    </ body >  

</ html >  

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 猜測= 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];   

        猜測= 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（）;   

            猜測++;   

            letterGuessed.push（letterPressed）;   

            如果（letterPressed == letterToGuess）{   

                gameOver =  true ;   

            } 其他 {   

                letterIndex = letters.indexOf（letterToGuess）;   

                guessIndex = letters.indexOf（letterPressed）;   

                如果（guessIndex <0）{   

                    HigherOrLower =  “請輸入正確的字符” ;   

                } 否則，如果（guessIndex <letterIndex）{    

                    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）;   

        //猜測次數(shù)   

        context.fillStyle =  “＃109900” ;   

        context.font =  “ 16px _sans” ;   

        context.fillText（“猜測次數(shù)：” + guesses，215，60 ）;   

        //大還是小   

        context.fillStyle =  “＃000000” ;   

        context.font =  “ 16px _sans” ;   

        context.fillText（“大還是?。骸?+ higherOrLower，150，135）;   

        //已經(jīng)猜測的字符   

        context.fillStyle =  “＃FF0000” ;   

        context.font =  “ 16px _sans” ;   

        context.fillText（“已經(jīng)猜測的字符：” + 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)都會自動(dòng)生成一個(gè)字母，玩家會按鍵盤來猜測該字母是哪一個(gè)。

例如生成的是s，玩家按了h，則游戲就會提示《小了》，因?yàn)橛⑽淖帜府?dāng)中h的索引比s的索引更靠前。

案例當(dāng)中涉及的變量。

猜測：猜測次數(shù)消息：文字提示，指導(dǎo)用戶如何玩該游戲字母：文字分散，放置我們要猜測的文字的集合。這個(gè)例子用的是a到z今天：今天的日期letterToGuess：要猜測的文字更高或更低：是《大了》還是《小了》letterGuessed：已經(jīng)猜測過得文字gameOver：游戲是否結(jié)束，是布爾變量，開始的時(shí)候是false，猜對后設(shè)置true

變量的聲明

JavaScript代碼將內(nèi)容復(fù)制到

VAR 猜測= 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];   

        猜測= 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ù)文字的堆積生成要猜測的文字。

并且當(dāng)用戶按鍵盤的時(shí)候監(jiān)聽《 keyup》事件，根據(jù)傳遞過來的事件，生成點(diǎn)擊的鍵值。

因猜測游戲?qū)Υ笮懖幻舾?，為防止用戶按大寫字母，我們需要把值轉(zhuǎn)換成小寫形式。

猜測次數(shù)+1

猜測出來的文字添加到已經(jīng)猜測的文字重疊當(dāng)中

JavaScript代碼將內(nèi)容復(fù)制到

var  letterPressed = String.fromCharCode（e.keyCode）;   

letterPressed = letterPressed.toLowerCase（）;   

猜測++;   

letterGuessed.push（letterPressed）;   

剩下的就只有判斷大和小了。

通過indexOf函數(shù)我們可以判斷要猜測的文字和我們輸入的文字在字符集上方的索引值。

如果我們輸入的更靠前則提示《小了》反之《大了》

最終用戶猜對了要猜測的文字我們會在中央用大號字體顯示《你猜對了》

JavaScript代碼將內(nèi)容復(fù)制到

letterIndex = letters.indexOf（letterToGuess）;   

guessIndex = letters.indexOf（letterPressed）;   

如果（guessIndex <0）{   

    HigherOrLower =  “請輸入正確的字符” ;   

} 否則，如果（guessIndex <letterIndex）{    

    HigherOrLower =  “小了” ;   

} 其他 {   

    HigherOrLower =  “大了” ;   

｝  

讀到這里，這篇“怎么用HTML5的Canvas API制作一個(gè)簡單猜字游戲”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。