《HTML5 Canvas开发详解》——1.9 第二个示例:猜字母

简介:

本节书摘来自异步社区《HTML5 Canvas开发详解》一书中的第1章,第1.9节,作者: 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.9 第二个示例:猜字母

现在来快速看一下另一个广泛提及的 “Hello World!”类型的应用程序示例——“猜字母”游戏。本章通过这个示例来说明用JavaScript编写Canvas程序比用Canvas API多了哪些工作量。

如图1-4所示的游戏当中,玩家要做的是猜出计算机从字母表中随即抽取的字母。游戏会记录玩家已经猜了多少次,列出已经猜过的字母,并且告诉玩家是需要往哪个方向猜(往Z方向猜还是往A方向猜)。


3bcd9f4b2cc91ca1f20516a11620a7a419df3719

1.9.1 游戏如何工作
这个游戏的基本结构与“Hello World!”的设置相同,canvasApp()是主函数,所有其他函数都定义为局部函数。这里使用drawScreen()函数在画布上显示文本。不过,本示例中也包括了其他一些函数,后面的章节会继续描述。

1.9.2 “猜字母”游戏的变量
这里是游戏中将要用到的所有变量的列表,它们都在canvasApp()中定义并初始化,因此它们的作用域都被限定在本地定义的封装函数内。

  • guesses:这个变量保存玩家按键的次数,次数越少说明他玩得越好。
  • message:这个变量用来向玩家提示游戏的玩法。
  • letters:这个数组保存字母表中的每一个字母,一方面用来随机挑选一个游戏的秘密字母,另一方面也用来计算字母在字母表中的相对位置。
  • today:这个变量保存当前日期,仅用于在屏幕上显示,并无其他目的。
  • letterToGuess:这个变量保存当前被猜的游戏秘密字母。
  • higherOrLower:这个变量存储文本 “Higher”或“Lower”,具体取决于最后一次猜的字母与秘密字母的位置关系。如果秘密字母离“a”更近,程序给出“L- ower”提示,如果离“z”更近,则给出“Higher”提示。
  • lettersGuessed:这个数组保存玩家已经猜过的字母集合。程序将把这些字母显示在屏幕上,提示玩家他已经猜过什么字母。
  • gameOver:这个变量在玩家获胜前都设为false,程序能通过它知道何时在屏幕上显示“You Win”信息,玩家赢了之后就不用再猜了。
    代码如下所示。
var guesses = 0;
var message = "Guess The Letter From a (lower)to z (higher)";
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"
      ];
var today = new Date();
var letterToGuess = "";
var higherOrLower = "";
var lettersGuessed;
var gameOver = false;

1.9.3 initGame()函数
initGame()函数为玩家初始化游戏。以下是两段重要的代码。第一段代码从字母数组中找出一个随机字母,然后将其储存在letterToGuess变量中。

var letterIndex = Math.floor(Math.random()* letters.length);
letterToGuess = letters[letterIndex];

第二段代码为DOM的window对象添加了一个事件监听器,以“监听”键盘的keyup事件。当某个键被按下时,将调用eventKeyPressed事件处理函数检测按下的字母。

window.addEventListener("keyup",eventKeyPressed,true);

以下是函数的全部代码。

function initGame(){
  var letterIndex = Math.floor(Math.random()* letters.length);
  letterToGuess = letters[letterIndex];
  guesses = 0;
  lettersGuessed = [];
  gameOver = false;
  window.addEventListener("keyup",eventKeyPressed,true);
  drawScreen();
}

1.9.4 eventKeyPressed()函数
当玩家按下一个键时将调用此函数,这个函数包含了游戏中的大部分操作。JavaScript中的每个事件处理函数都会传递event对象。该对象中包含发生事件的相关信息,这里使用e参数表示该对象。

首先检测gameOver变量是否为false,如果是false,则继续检测玩家按下的是哪个键。以下代码实现了该功能。第一行代码从事件中获得按键值,并将其转换为一个字母表中的字母,用于与letterToGuess中存储的字母进行比较。

var letterPressed = String.fromCharCode(e.keyCode);

下一行代码将这个字母转换为小写字母,如果玩家不小心打开大写锁定键也可以检测大写字母。

letterPressed = letterPressed.toLowerCase();

接下来增加guesses变量的计数,用于显示猜测次数。然后使用Array.push()方法将字母添加到lettersGuessed数组。

guesses++;
lettersGuessed.push(letterPressed);

现在检测游戏的当前状态并给玩家反馈。首先,测试letterPressed与letterToGuess是否相同,如果相同玩家就赢了。

if (letterPressed == letterToGuess){
  gameOver = true;

如果玩家没赢,程序需要分别获得letterToGuess以及letterPressed在数组letters中的索引。下面将用这些数值计算是应该显示“Higher”还是应该显示“Lower”,或者显示“That is not a letter.”(这不是一个字母)。为此,这里使用数组的indexOf()方法获得每个字母的对应索引。由于数组是按字母顺序排列的,所以判断显示哪条信息就非常容易。

} else {
  letterIndex = letters.indexOf(letterToGuess);
  guessIndex = letters.indexOf(letterPressed);

现在来进行检测。首先,如果guessIndex小于0,意味着indexOf()返回了-1,也就是说按键不是一个字母,那么就显示一条错误信息。

if (guessIndex < 0){
  higherOrLower = "That is not a letter";

剩下的测试就简单了。如果guessIndex大于letterIndex就把higherOrLower文本设为 “Lower”。反之,若guessIndex小于letterIndex就把higherOrLower文本设为 “Higher”。

} else if (guessIndex > letterIndex){
   higherOrLower = "Lower";
  } else {
   higherOrLower = "Higher";
  }
}

最后,调用drawScreen()在屏幕上进行绘制。

drawScreen();

以下是函数的全部代码。

function eventKeyPressed(e){
   if (!gameOver){
   var letterPressed = String.fromCharCode(e.keyCode);
   letterPressed = letterPressed.toLowerCase();
   guesses++;
   lettersGuessed.push(letterPressed);

   if (letterPressed == letterToGuess){
      gameOver = true;
    } else {

     letterIndex = letters.indexOf(letterToGuess);
     guessIndex = letters.indexOf(letterPressed);
     Debugger.log(guessIndex);
     if (guessIndex < 0){
      higherOrLower = "That is not a letter";
     } else if (guessIndex > letterIndex){
        higherOrLower = "Lower";
     } else {
      higherOrLower = "Higher";
     }
   }
   drawScreen();
   }
}

1.9.5 drawScreen()函数
下面开始编写drawScreen()函数。之前已经学习过其中的大部分代码了——代码几乎与“Hello World!”中的代码相同。例如,这里使用Canvas文本API在屏幕上绘制多个变量。仅需要设置一次context.textBaseline = 'top'就可以对所有显示的文本生效,还可以使用context.fillStyle改变颜色,并且可以使用ontext.font改变字体。

这里最有趣的事就是显示lettersGuessed数组的内容。在画布上,数组将显示为一组用逗号分隔的字符串,例如:

Letters Guessed: p,h,a,d

为了输出这个字符串,只需使用lettersGuessed数组的toString()方法,即可以使用逗号间隔的方式打印出玩家猜到的数组。

context.fillText ("Letters Guessed: " + lettersGuessed.toString(), 10, 260);

接下来还需检测gameOver变量。如果结果为真,程序在屏幕上使用大字号(40px)显示文本“You Got It!”(你胜利了),这样用户就知道自己获胜了。

以下是函数的完整代码。

function 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 (today, 150 ,10);
   //消息
    context.fillStyle = "#FF0000";
    context.font = "14px _sans";
    context.fillText (message,125,30);
    //猜测的次数
    context.fillStyle = "#109910";
    context.font = "16px _sans";
    context.fillText ('Guesses: ' + guesses, 215, 50);
    //显示Higher或Lower
    context.fillStyle = "#000000";
    context.font = "16px _sans";
    context.fillText ("Higher Or Lower: " + higherOrLower, 150,125);
    //猜过的字母
    context.fillStyle = "#FF0000";
    context.font = "16px _sans";
    context.fillText ("Letters Guessed: " + lettersGuessed.toString(), 10, 260);
    if (gameOver){
      context.fillStyle = "#FF0000";
      context.font = "40px _sans";
      context.fillText ("You Got It!", 150, 180);
    }
  }

1.9.6 导出Canvas到图像
之前,本章简要讨论了Canvas对象的toDataUrL()属性。这里将使用这个属性让用户能够随时创建一个游戏画面的图像。这就像基于Canvas制作的游戏中的屏幕捕捉功能。

此处需要在HTML页面上创建一个按钮,用户单击就可以获得屏幕捕捉的图像。下面将这个按钮添加到< form > 中,然后赋予其编号createImageData。

<form>
<input type="button" id="createImageData" value="Export Canvas Image">
</form>

在init()函数中,通过document对象的getElementById()方法获得了这个表单元素的参考。然后使用createImageDataPressed()方法为按钮的“单击”事件设置一个事件处理器。

var formElement = document.getElementById("createImageData");
formElement.addEventListener('click', createImageDataPressed, false);

在canvasApp()函数中,定义createImageDataPressed()函数作为事件处理器,这个函数调用window.open(),并将Canvas.toDataUrl()方法的返回数值传送给窗口,由于这个数据表单是一个有效的PNG,图像会在一个新窗口中显示。

function createImageDataPressed(e){

  window.open(theCanvas.toDataURL(),"canvasImage","left=0,top=0,width=" +
  theCanvas.width + ",height=" + theCanvas.height +",toolbar=0,resizable=0");
  }

1.9.7 最终的游戏代码
例1-4显示了猜字母游戏的完整代码

例1-4 猜字母游戏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH1EX4: Guesss The Letter Game</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">

window.addEventListener('load', eventWindowLoaded, false);

var Debugger = function (){ };
Debugger.log = function (message){
  try {
    console.log(message);
  } catch (exception){
    return;
  }
}
function eventWindowLoaded(){
  canvasApp();
}
function canvasSupport (){
   return Modernizr.canvas;
}
function eventWindowLoaded(){
  canvasApp();
}
function canvasApp(){
  var guesses = 0;
  var message = "Guess The Letter From a (lower)to z (higher)";
  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"
         ];
  var today = new Date();
  var letterToGuess = "";
  var higherOrLower = "";
  var lettersGuessed;
  var gameOver = false;

  if (!canvasSupport()){
      return;
     }
  var theCanvas = document.getElementById("canvasOne");
  var context = theCanvas.getContext("2d");

initGame();

  function initGame(){
   var letterIndex = Math.floor(Math.random()* letters.length);
   letterToGuess = letters[letterIndex];
   guesses = 0;
   lettersGuessed = [];
   gameOver = false;
   window.addEventListener("keyup",eventKeyPressed,true);
   var formElement = document.getElementById("createImageData");
   formElement.addEventListener('click', createImageDataPressed, false);
   drawScreen();
  }
  function eventKeyPressed(e){
   if (!gameOver){
     var letterPressed = String.fromCharCode(e.keyCode);
     letterPressed = letterPressed.toLowerCase();
     guesses++;
     lettersGuessed.push(letterPressed);

     if (letterPressed == letterToGuess){
      gameOver = true;
     } else {
      letterIndex = letters.indexOf(letterToGuess);
      guessIndex = letters.indexOf(letterPressed);
      Debugger.log(guessIndex);
      if (guessIndex < 0){
        higherOrLower = "That is not a letter";
      } else if (guessIndex > letterIndex){
        higherOrLower = "Lower";
      } else {
        higherOrLower = "Higher";
      }
     }
     drawScreen();
    }
  }
  function 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 (today, 150 ,10);
   //消息
   context.fillStyle = "#FF0000";
   context.font = "14px _sans";
   context.fillText (message, 125, 30);
   //猜测的次数
   context.fillStyle = "#109910";
   context.font = "16px _sans";
   context.fillText ('Guesses: ' + guesses, 215, 50);
   //显示Higher或Lower
   context.fillStyle = "#000000";
   context.font = "16px _sans";
   context.fillText ("Higher Or Lower: " + higherOrLower, 150,125);
   //猜过的字母
   context.fillStyle = "#FF0000";
   context.font = "16px _sans";
   context.fillText ("Letters Guessed: " + lettersGuessed.toString(), 10, 260);
   if (gameOver){
     context.fillStyle = "#FF0000";
     context.font = "40px _sans";
     context.fillText ("You Got It!", 150, 180);
   }
  }

  function createImageDataPressed(e){

   window.open(theCanvas.toDataURL(),"canvasImage","left=0,top=0,width=" +
   theCanvas.width + ",height=" + theCanvas.height +",toolbar=0,resizable=0");
  }
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
<form>
<input type="button" id="createImageData" value="Export Canvas Image">
</form>
</div>
</body>
</html>
相关文章
|
25天前
|
Ubuntu C++ Docker
Docker的基本指令和HTML/PYTHON/C++的简单创建示例
Docker的基本指令和HTML/PYTHON/C++的简单创建示例
|
1月前
|
移动开发 前端开发 API
HTML5 Canvas渐进填充与透明
HTML5 Canvas渐进填充与透明
26 7
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas鼠标与键盘事件
HTML5 Canvas鼠标与键盘事件
34 5
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas平移,放缩,旋转演示
HTML5 Canvas平移,放缩,旋转演示
26 4
|
1月前
|
移动开发 前端开发 API
HTML5 Canvas 填充与描边(Fill And Stroke)
HTML5 Canvas 填充与描边(Fill And Stroke)
54 3
|
15天前
|
前端开发 JavaScript
HTML 全局属性介绍及示例
HTML 全局属性介绍及示例
13 2
|
15天前
HTML表格的跨行与跨列:《红楼梦》人物与小学课表示例
HTML表格的跨行与跨列:《红楼梦》人物与小学课表示例
9 1
|
1月前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
29 2
|
1月前
|
移动开发 前端开发 JavaScript
纯HTML5 Canvas实现的饼图
纯HTML5 Canvas实现的饼图
21 6
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas动画效果演示
HTML5 Canvas动画效果演示
29 5