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

本文小編為大家詳細介紹“怎么用HTML5的Canvas API制作一個簡單猜字游戲”，內容詳細，步驟清晰，細節處理妥當，希望這篇“怎么用HTML5的Canvas API制作一個簡單猜字游戲”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

<！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”值= “導出畫布圖像” /> ;       

        </表單>  

    </ body >  

</ html >  

JS代碼

JavaScript代碼將內容復制到

/ **  

 * @作者拉斐爾  

 * /  

window.addEventListener（“ load” ，eventWindowLoaded，  false ）;   

var  Debugger =  function （）{   

};   

Debugger.log = 函數（消息）{   

    嘗試 {   

        console.log（消息）;   

    } 捕獲（例外）{   

        回報;   

    }   

}   

函數 eventWindowLoaded（）{   

    canvasApp（）;   

}   

函數 canvasSupport（）{   

    返回 Modernizr.canvas;   

}   

函數 canvasApp（）{   

    VAR 猜測= 0;   

    var  message =  “猜字母從a（低）到z（高）的字母” ；   

    變數 字母= [ “” 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（））{   

        回報;   

    }   

    var  theCanvas = document.getElementById（“ canvas_guess_the_letter” ）;   

    var  context = theCanvas.getContext（“ 2d” ）;   

    initGame（）;   

    函數 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（）;   

    }   

    函數 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（）;   

        }   

    }   

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

        //猜測次數   

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

        如果（gameOver）{   

            context.fillStyle =  “＃FF0000” ;   

            context.font =  “ 40px _sans” ;   

            context.fillText（“你猜中了” ，150，180 ）;   

        }   

    }   

    函數 createImageDataPressed（e）{   

        window.open（theCanvas.toDataURL（），  “ canvasImage” ，“ left = 0，top = 0，width =” + theCanvas.width + “，height =” + theCanvas.height + “，工具欄= 0，可調整大小= 0” ） ;   

    }   

}  

每局系統都會自動生成一個字母，玩家會按鍵盤來猜測該字母是哪一個。

例如生成的是s，玩家按了h，則游戲就會提示《小了》，因為英文字母當中h的索引比s的索引更靠前。

案例當中涉及的變量。

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

變量的聲明

JavaScript代碼將內容復制到

VAR 猜測= 0;   

var  message =  “猜字母從a（低）到z（高）的字母” ；   

變數 字母= [ “” 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代碼將內容復制到

函數 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（）函數和floor（）函數，根據文字的堆積生成要猜測的文字。

并且當用戶按鍵盤的時候監聽《 keyup》事件，根據傳遞過來的事件，生成點擊的鍵值。

因猜測游戲對大小寫不敏感，為防止用戶按大寫字母，我們需要把值轉換成小寫形式。

猜測次數+1

猜測出來的文字添加到已經猜測的文字重疊當中

JavaScript代碼將內容復制到

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

letterPressed = letterPressed.toLowerCase（）;   

猜測++;   

letterGuessed.push（letterPressed）;   

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

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

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

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

JavaScript代碼將內容復制到

letterIndex = letters.indexOf（letterToGuess）;   

guessIndex = letters.indexOf（letterPressed）;   

如果（guessIndex <0）{   

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

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

    HigherOrLower =  “小了” ;   

} 其他 {   

    HigherOrLower =  “大了” ;   

｝  

讀到這里，這篇“怎么用HTML5的Canvas API制作一個簡單猜字游戲”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。