怎么用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制作一个简单猜字游戏”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。