借助HTML5 Canvas API制作一个简单的猜字游戏

网络
看淡拥有，不刻意追求某些东西，落叶归根，那些属于你的，总会回来。劳动的意义不仅在于追求业绩，更在于完善人的心灵。

二话不说，先上效果图以及源代码~

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <!doctypehtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="utf-8"/>
  5. <scripttype="text/javascript"src="chp1_guess_the_letter.js"></script>
  6. <scripttype="text/javascript"src="modernizr.custom.99886.js"></script>
  7. </head>
  8. <body>
  9. <canvasid="canvas_guess_the_letter"width="500"height="300">
  10. 你的浏览器不支持HTML5Canvas
  11. </canvas>
  12. <form>
  13. <inputtype="button"id="createImageData"value="ExportCanvasImage"/>;
  14. </form>
  15. </body>
  16. </html>

JS代码

JavaScript Code复制内容到剪贴板
  1. /**
  2. *@authorRafael
  3. */
  4. window.addEventListener("load",eventWindowLoaded,false);
  6. varDebugger=function(){
  8. };
  9. Debugger.log=function(message){
  10. try{
  11. console.log(message);
  12. }catch(exception){
  13. return;
  14. }
  15. }
  17. functioneventWindowLoaded(){
  18. canvasApp();
  19. }
  21. functioncanvasSupport(){
  22. returnModernizr.canvas;
  23. }
  25. functioncanvasApp(){
  26. varguesses=0;
  27. varmessage="GuessTheLetterFroma(lower)toz(higher)";
  28. varletters=["a","b","c","d","e","f","g","h","i","j","k","l",
  29. "m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
  30. vartoday=newDate();
  31. varletterToGuess="";
  32. varhigherOrLower="";
  33. varletterGuessed=[];
  34. vargameOver=false;
  36. if(!canvasSupport()){
  37. return;
  38. }
  40. vartheCanvas=document.getElementById("canvas_guess_the_letter");
  41. varcontext=theCanvas.getContext("2d");
  43. initGame();
  45. functioninitGame(){
  46. varletterIndex=Math.floor(Math.random()*letters.length);
  47. letterToGuess=letters[letterIndex];
  48. guesses=0;
  49. lettersGuessed=[];
  50. gameOver=false;
  51. window.addEventListener("keyup",eventKeyPressed,true);
  52. varformElement=document.getElementById("createImageData");
  53. formElement.addEventListener('click',createImageDataPressed,false);
  54. drawScreen();
  55. }
  57. functioneventKeyPressed(e){
  58. if(!gameOver){
  59. varletterPressed=String.fromCharCode(e.keyCode);
  60. letterPressed=letterPressed.toLowerCase();
  61. guesses++;
  62. letterGuessed.push(letterPressed);
  63. if(letterPressed==letterToGuess){
  64. gameOver=true;
  65. }else{
  66. letterIndex=letters.indexOf(letterToGuess);
  67. guessIndex=letters.indexOf(letterPressed);
  68. if(guessIndex<0){
  69. higherOrLower="请输入正确的字符";
  70. }elseif(guessIndex<letterIndex){
  71. higherOrLower="小了";
  72. }else{
  73. higherOrLower="大了";
  74. }
  75. }
  76. drawScreen();
  77. }
  78. }
  80. functiondrawScreen(){
  81. //背景
  82. context.fillStyle="#ffffaa";
  83. context.fillRect(0,0,500,300);
  85. //箱子
  86. context.strokeStyle="#000000";
  87. context.strokeRect(5,5,490,290);
  88. context.textBaseLine="top";
  90. //日期
  91. context.fillStyle="#000000";
  92. context.font="10px_sans";
  93. context.fillText(today,150,20);
  95. //消息
  96. context.fillStyle="#FF0000";
  97. context.font="14px_sans";
  98. context.fillText(message,125,40);
  100. //猜测次数
  101. context.fillStyle="#109900";
  102. context.font="16px_sans";
  103. context.fillText("猜测次数："+guesses,215,60);
  105. //大还是小
  106. context.fillStyle="#000000";
  107. context.font="16px_sans";
  108. context.fillText("大还是小："+higherOrLower,150,135);
  110. //已经猜测的字符
  111. context.fillStyle="#FF0000";
  112. context.font="16px_sans";
  113. context.fillText("已经猜测的字符："+letterGuessed.toString(),10,260);
  115. if(gameOver){
  116. context.fillStyle="#FF0000";
  117. context.font="40px_sans";
  118. context.fillText("你猜中了",150,180);
  119. }
  120. }
  122. functioncreateImageDataPressed(e){
  123. window.open(theCanvas.toDataURL(),"canvasImage","left=0,top=0,width="+theCanvas.width+",height="+theCanvas.height+",toolbar=0,resizable=0");
  124. }
  125. }

从游戏名称可以看出，该游戏是猜字游戏。每局系统都会自动生成一个字母，玩家会按键盘来猜测该字母是哪一个。

例如生成的是s，玩家按了h，则游戏就会提示《小了》，因为英文字母当中h的索引比s的索引更靠前。

案例当中涉及的变量。

guesses：猜测次数
message：文字提示，指导用户如何玩该游戏
letters：文字数组，存放我们要猜测的文字的集合。这个例子用的是a到z
today：今天的日期
letterToGuess：要猜测的文字
higherOrLower：是《大了》还是《小了》
letterGuessed：已经猜测过得文字
gameOver：游戏是否结束，是布尔变量，开始的时候是false，猜对后设为true

变量的声明

JavaScript Code复制内容到剪贴板
  1. varguesses=0;
  2. varmessage="GuessTheLetterFroma(lower)toz(higher)";
  3. varletters=["a","b","c","d","e","f","g","h","i","j","k","l",
  4. "m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
  5. vartoday=newDate();
  6. varletterToGuess="";
  7. varhigherOrLower="";
  8. varletterGuessed=[];
  9. vargameOver=false;


初始化游戏

JavaScript Code复制内容到剪贴板
  1. functioninitGame(){
  2. varletterIndex=Math.floor(Math.random()*letters.length);
  3. letterToGuess=letters[letterIndex];
  4. guesses=0;
  5. lettersGuessed=[];
  6. gameOver=false;
  7. window.addEventListener("keyup",eventKeyPressed,true);
  8. varformElement=document.getElementById("createImageData");
  9. formElement.addEventListener('click',createImageDataPressed,false);
  10. drawScreen();
  11. }

通过使用Math的random()函数和floor()函数，根据文字的数组生成要猜测的文字。

并且当用户按键盘的时候监听《keyup》事件，根据传递过来的event，生成按下的键值。

因猜测游戏对大小写不敏感，为防止用户按大写字母，我们需要把值转换成小写形式。

猜测次数+1

猜测出来的文字添加到已经猜测的文字数组当中

JavaScript Code复制内容到剪贴板
  1. varletterPressed=String.fromCharCode(e.keyCode);
  2. letterPressed=letterPressed.toLowerCase();
  3. guesses++;
  4. letterGuessed.push(letterPressed);

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

通过indexOf函数 我们可以判断要猜测的文字和我们输入的文字在字符集上面的索引值。

如果我们输入的更靠前则提示《小了》反之《大了》

最终用户猜对了要猜测的文字 我们会在中央用大号字体显示《你猜对了》

JavaScript Code复制内容到剪贴板
  1. letterIndex=letters.indexOf(letterToGuess);
  2. guessIndex=letters.indexOf(letterPressed);
  3. if(guessIndex<0){
  4. higherOrLower="请输入正确的字符";
  5. }elseif(guessIndex<letterIndex){
  6. higherOrLower="小了";
  7. }else{
  8. higherOrLower="大了";
  9. ｝

至此这个功能差不多完成了吧，我们还有一个小功能，那就是通过按下按钮的方式可以把屏幕结果抓去出来。

用的函数为toDataUrl()，有兴趣的朋友研究一下。

以上就是借助HTML5 Canvas API制作一个简单的猜字游戏。世界上在忧虑的永远不会是天才或庸人，而是介于这两者之间的人。这些人有点小聪明，却又不够聪明，不懒，但也不够勤奋。他们就这样在自己的位置来回走动。更多关于借助HTML5 Canvas API制作一个简单的猜字游戏请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
html5 canvas-2.用canvas制作一个猜字母的小游戏
如何使用canvas对video视频某一刻截图功能
Canvas绘制像素风图片的示例代码
canvas画图被放大且模糊的如何解决方法
Canvas获取视频第一帧缩略图的如何实现