通过HTML5 Canvas API制作一个简单的猜字游戏

1、通过html5 canvas api制作一个简单的猜字游戏xml / html代码将内容复制到文本 你的扫瞄器不支持html5 canvas ; js代码javascript代码将内容复制到/ * * 作者拉斐尔 * / window.addeventlistener（ load ，eventwindowloaded， false ）; var debugger = function （） ;debugger.log = 函数（消息） 尝试 console.log（消息）; 捕捉（例外） 回报; 函数 eventwindowloaded（） canvasapp（）; 函数 canvassupp

2、ort（） 返回 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 = fa

3、lse ; 假如（！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 ;

4、 window.addeventlistener（ keyup ，eventkeypressed， true ）; var formelement = document.getelementbyid（ createimagedata ）; formelement.addeventlistener（&39;click&39; ，createimagedatapressed， false ）; drawscreen（）; 函数 eventkeypressed（e） 假如（！gameover） var letterpressed = string.fromcharcode（e.key

5、code）; letterpressed = letterpressed.tolowercase（）; 猜想+; letterguessed.push（letterpressed）; 假如（letterpressed = lettertoguess） gameover = true ; 其他 letterindex = letters.indexof（lettertoguess）; guessindex = letters.indexof（letterpressed）; 假如（guessindex <0） higherorlower = 请输入正确的字符 ; 否则，假如（guessind

6、ex <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.fon

7、t = 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

8、 _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 ）; 函数 createi

9、magedatapressed（e） window.open（thecanvas.todataurl（）， canvasimage ， left = 0，top = 0，width = + thecanvas.width + ，height = + thecanvas.height + ，工具栏= 0，可调节大小= 0 ） ; 每局系统都会自动生成一个字母，玩家会按键盘来猜想该字母是哪一个。例如生成的是s，玩家按了h，则嬉戏就会提醒小了，由于英文字母当中h的索引比s的索引更靠前。案例当中涉及的变量。猜想：猜想次数消息：文字提醒，指导用户如何玩该嬉戏字母：文字簇拥，放置我们要猜想的文字的集合。这

10、个例子用的是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 =

11、 新的 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

12、 ，eventkeypressed， true ）; var formelement = document.getelementbyid（ createimagedata ）; formelement.addeventlistener（&39;click&39; ，createimagedatapressed， false ）; drawscreen（）; 通过用法math的random（）函数和floor（）函数，按照文字的积累生成要猜想的文字。并且当用户按键盘的时候监听 keyup大事，按照传递过来的大事，生成点击的键值。因猜想嬉戏对大小写不敏感，为防止用户按大写字母，我们

13、需要把值转换成小写形式。猜想次数+1猜想出来的文字添加到已经猜想的文字重叠当中javascript代码将内容复制到var letterpressed = string.fromcharcode（e.keycode）;letterpressed = letterpressed.tolowercase（）;猜想+;letterguessed.push（letterpressed）;剩下的就惟独推断大和小了。通过indexof函数我们可以推断要猜想的文字和我们输入的文字在字符集上方的索引值。假如我们输入的更靠前则提醒小了反之大了终于用户猜对了要猜想的文字我们会在中心用大号字体显示你猜对了javascript代码将内容复制到letterindex = letters.indexof（lettertoguess）;guessindex = letters.indexof（letterpressed）;假如（guessin