time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > html5 canvas--2.猜字母游戏

html5 canvas--2.猜字母游戏

时间:2012-09-09 23:10 点击:599次 字体:[ ]




   今天我们要用canvas制作一个猜字母的小游戏,先来张效果图。

html5 canvas--2.猜字母游戏_www.fengfly.com

  游戏设计很简单,系统会随机从a-z的26个字母中选择一个保存起来,你键盘输入一个字母,系统会提示你正确字符比你当前输入字母小还是大,直到你输入正确的字母游戏才结束。

  下面介绍js代码中需要用到的一些变量及其他们的含义,系统会在开始的时候初始化这些变量。

guesses:用户猜字母的次数;

message:帮助玩家如何玩游戏的说明;

letters:保存26个英文字母的数组;

today:当前时间;

letterToGuess:系统选中的字母,也就是你需要猜中的字母;

higherOrLower:提示用户当前输入的字母比答案大还是小;

lettersGuessed:用户已经猜过的字母;

gameOver:游戏是否结束。

 

  1. var guesses = 0; 
  2. var message = "Guess The Letter From a (lower) to z (higher)"
  3. var letters = ["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"]; 
  4. var today = new Date(); 
  5. var letterToGuess = ""
  6. var higherOrLower = ""
  7. var lettersGuessed; 
  8. var gameOver = false

 

  下面我们介绍响应键盘弹起的事件,用来判断用户输入的字母是否是正确答案:

$(window).bind('keyup', eventKeyPressed);

 

 

  1. function eventKeyPressed(e) { 
  2.     //首先判断游戏是否结束 
  3.     if (!gameOver) { 
  4.         //获取输入字母 
  5.         var letterPressed = String.fromCharCode(e.keyCode); 
  6.         //做小写处理 
  7.         letterPressed = letterPressed.toLowerCase(); 
  8.         //游戏次数加1 
  9.         guesses++; 
  10.         //把输入字母保存到已猜字母数组 
  11.         lettersGuessed.push(letterPressed); 
  12.  
  13.         //判断输入字母和答案是否一致,一致则游戏结束 
  14.         if (letterPressed == letterToGuess) { 
  15.             gameOver = true
  16.         } else { 
  17.             //获取答案在字母数组中的位置 
  18.             var letterIndex = letters.indexOf(letterToGuess); 
  19.             //获取输入字母在字母数组中的位置 
  20.             var guessIndex = letters.indexOf(letterPressed); 
  21.  
  22.             Debugger.log(guessIndex); 
  23.  
  24.             //判断大小 
  25.             if (guessIndex < 0) { 
  26.                 higherOrLower = "That is not a letter"
  27.             } else if (guessIndex > letterIndex) { 
  28.                 higherOrLower = "Letter is Lower than you entered"
  29.             } else { 
  30.                 higherOrLower = "Letter is Higher than you entered"
  31.             } 
  32.         } 
  33.  
  34.         //重绘canvas 
  35.         drawScreen(); 
  36.     } 

 

  这里需要注意的一点是,当我们需要对canvas中的图像做修改时,一般会重新绘制整个canvas对象。所以在我们每猜一次字母,都会执行drawScreen把整个canvas上的所有对象都绘制一遍。

  下面我们看看drawScreen都干了什么。

 

  1. function drawScreen() { 
  2.     //background 
  3.     context.fillStyle = '#ffffaa'
  4.     context.fillRect(0, 0, 500, 300); 
  5.  
  6.     //box 
  7.     context.strokeStyle = '#000000'
  8.     context.strokeRect(5, 5, 490, 290); 
  9.     context.textBaseLine = 'top'
  10.  
  11.     //date 
  12.     context.fillStyle = '#000000'
  13.     context.font = '10px_sans'
  14.     context.fillText(today, 150, 20); 
  15.  
  16.     //message 
  17.     context.fillStyle = '#ff0000'
  18.     context.font = '14px_sans'
  19.     context.fillText(message, 125, 40); 
  20.  
  21.     //guesses 
  22.     context.fillStyle = '#109910'
  23.     context.font = '16px_sans'
  24.     context.fillText('Guesses:' + guesses, 215, 60); 
  25.  
  26.     //higher or lower 
  27.     context.fillStyle = '#000000'
  28.     context.font = '16px_sans'
  29.     context.fillText('Higher or Lower:' + higherOrLower, 150, 125); 
  30.  
  31.     //letters guessed 
  32.     context.fillStyle = '#ff0000'
  33.     context.font = '16px_sans'
  34.     context.fillText('Letters Guessed:' + lettersGuessed.toString(), 10, 260); 
  35.  
  36.     if (gameOver) { 
  37.         context.fillStyle = "#FF0000"
  38.         context.font = "40px _sans"
  39.         context.fillText("You Got It!", 150, 180); 
  40.     } 

 

 

  代码很简单,就是绘制背景,还有文字信息。下面我们介绍导入图像的功能,当我们点击“Export Canvas Image”按钮的时候,会打开一个新的页面,显示当前的图像。注意toDataURL()方法,他会返回一个64位的png图片数据。

$('#createImageData').click(function () {   window.open(theCanvas.toDataURL(), 'canvasImage', 'left=0,top=0,width=' + theCanvas.width + ',height=' + theCanvas.height + ',toolbar=0,resizab         le=0'); });

  大家还是直接运行demo,查看最终效果吧。demo下载地址:html5canvas.guessTheLetter.zip

 



本文地址 : http://www.fengfly.com/plus/view-209185-1.html
标签: HTML5 canva
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: