XML / HTML代码将内容复制到文本
<！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 = “大了” ;
｝
至此这个功能差不多完成了吧，我们还有一个小功能，那就是通过点击按钮的方式可以把屏幕结果抓去出来。
用的函数为toDataUrl（），有兴趣的朋友研究一下。9685
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h61240.shtml
