基于HTML5 canvas的画图板设计外文翻译资料

Chapter 2

Dice Game

In this chapter, we will cover

drawing on canvas

random processing

game logic

form output

Introduction

Among the most important new features in HTML5 is the canvas. This element provides a way for

developers to make line drawings, include images, and position text in a totally free-form fashion, a

significant improvement over the older HTML. Although you could do some fancy formatting in the earlier

versions, layouts tended to be boxy and pages less dynamic. How do you draw on the canvas? You use a

scripting language, usually JavaScript. I will show you how to draw on canvas and I?ll explain the important

features of JavaScript that we?ll need to build an implementation of the dice game called craps: how to

define a function, how to invoke what is termed pseudo-random behavior, how to implement the logic of

this particular game, and how to display information to a player. Before we go any further, though, you

need to understand the basics of the game.

The game of craps has the following rules:

The player throws a pair of dice. The sum of the two top faces is what matters so a 1 and a 3 is the

same as 2 and 2. The sum of two 6-sided dice can be any number from 2 to 12. If the player throws

a 7 or 11 on the first throw, the player wins. If the player throws a 2, 3, or 12, the player loses. For

any other result (4, 5, 6, 8, 9, 10), this result is recorded as what is called the players point and a

follow-up throw is required. On follow-up throws, a throw of 7 loses and a throw of the players point

wins. For anything else, the game continues with the follow-up throw rules.

Let?s see what our game play might look like. Figure 2-1 shows the result of a throw of two ones at the start

of the game.

CHAPTER 2

22

Figure 2-1. First throw, resulting in a loss for the player

It is not apparent here, but our dice game application draws the die faces each time using the canvas tag.

This means it?s not necessary to download images of individual die faces.

A throw of two 1s means a loss for the player since the rules define 2, 3, or 12 on a first throw as a loss.

The next example shows a win for the player, a 7 on a first throw, as shown in Figure 2-2.

Figure 2-2. A 7 on a first throw means the player wins.

Figure 2-3 shows the next throw—an 8. This is neither a win nor a loss, but means there must be a followup

throw.

DICE GAME

23

Figure 2-3. An 8 means a follow-up throw with a player?s point of 8 carried over.

Lets assume that the player eventually throws an 8 again, as indicated in Figure 2-4.

Figure 2-4. It?s another throw of 8, the point value, so the player wins.

As the previous sequence shows, the only thing that counts is the sum of the values on the faces of the

dice. The point value was set with two 4s, but the game was won with a 2 and a 6.

The rules indicate that a game will not always take the same number of throws of the dice. The player can

win or lose on the first throw, or there may be any number of follow-up throws. It is the game builders job is

to build a game that works—and working means following the rules, even if that means play goes on and

on. My students sometimes act as if their games only work if they win. In a correct implementation of the

game, players will win and lose.

CHAPTER 2

24

Critical requirements

The requirements for building the dice game begin with simulating the random throwing of dice. At first, this

seems impossible since programming means specifying exactly what the computer will do. Luckily,

JavaScript, like most other programming languages, has a built-in facility that produces results that

appear to be random. Sometimes languages make use of the middle bits (1s and 0s) of a very long string

of bits representing the time in milliseconds. The exact method isn?t important to us. We will assume that

the JavaScript furnished by the browser does an okay job with this, which is called pseudo-random

processing.

Assuming now that we can randomly get any number from 1 to 6 and do it twice for the two die faces, we

need to implement the rules of the game. This means we need a way to keep track of whether we are at a

first throw or a follow-up throw. The formal name for this is the application state, which means the way

things are right now, and is important in both games and other types of applications. Then we need to use

constructs that make decisions based on conditions. Conditional constructs such as if and switch are a

standard part of programming languages, and you?ll soon understand why computer science teachers like

me—who have never been in a casino or a back alley—really like the game of craps.

We need to give the player a way to throw the dice, so we?ll implement a button on the screen to click for

that. Then we need to provide information back to the player on what happened. For this application, I

produced graphical feedback by drawing dice faces on the screen and also displayed information as text

to indicate the stage of the game, the point value, and the result. The older term for interactions with users

was input-output (I/O), back when that interaction mainly involved text. The term graphical user interface

(GUI) is now commonly used to indicate the vast variety of ways that users interact with computer

systems

剩余内容已隐藏，支付完成后下载完整资料

---

第二章

博弈游戏

在这个章节，我们将涉及

• 在canvas画图
• 随机处理
• 游戏逻辑
• 输出形式

介绍

在整个HTML5中最重要的特性应该就是canvas了，该元素为开发者提供了一种现线性构图的方式，，包括图片，以及位置文本的自由改变，这是对于旧的html的一个显著改进，尽管你可以做一些奇特的格式化在早期的版本中，布局偏向于四四方方的并且页面动态变化较少，你如何在canvas上画图呢？你使用一种脚本语言，通常是javascript,我将向你展示如何在cnavas上画图并且我将说明javascript的重要特性，我们将用这个来构建一个可实现的叫做骰子赌博游戏：如何定义一个方法，如何调用专业术语中叫做 pseudo-random behavior(假随机的行为)，如何实现这个详细游戏的逻辑，以及如何向玩家展示信息，在我们进一步深入之前，你还是需要去理解游戏的基础：

掷骰子游戏有以下几点规则：

玩家投掷一副骰子，取朝上面的数字总和就像1和3与2和2是一样的，两个面的总和可能为2-12中间的任何数字，如果玩家第一次投掷扔出7或11，则该玩家获胜。如果玩家扔出数字总和为2,3或者12，则该玩家输。对于其他结果（4,5,6,7,8,9,10），将被记录为玩家的得分并接着投掷，在接下来的投掷中，掷到7输，掷到与玩家得分相同的数字则获胜，无论如何，游戏随着接下来的投掷规则继续。

让我们看看我们的游戏可能看起来是什么样子。图2-1展示了两个人在游戏一开始的投掷结果图2

图2-1.第一次投掷，结果表明玩家失败

这里不够明明显，但我们的投掷游戏每次会用cnavas标签画出一个死亡表情，

这意味着没必要去下载一个个人独特的死亡表情。

一次投掷结果为2意味着玩家的一次失败，因为规则定义了在第一次投掷出2,3,12记为失败；

图2-2.A 第一次掷出7意味着玩家胜出。

图2-3展示了下一次投掷出了一个8。这既不表示胜利也不表示失败，但是意味着必须进行下一次投掷。

图2-3 一个8意味着投掷者分数记为8并继续；

我们假设玩家最后又一次掷出了8，如图2-4所示。

图2-4.这是投掷为8的另一种组合方式，与得分一致，因此该玩家获胜。

正如之前的投掷结果显示，唯一的值就是两个骰子的正面数值的和；骰子的点数为两个4，

但是游戏获胜的条件为一个2和一个6。

规则指出这个游戏不会经常掷出两个相同的点数，玩家可以通过一次投掷便获取胜利或失败，

或者之后的投掷可能会出现任何情况的数值。游戏创造者的职责在于创建一个可以运行的游戏同时，可以运行意味着遵守规则，即使这意味着游戏可能不断进行下去，我的学生有的时候假装只有在他们取得胜利这个游戏才是正常运行的。对于一个正常运行的游戏，玩家可能取胜也可能失败。

决定性的要求

建立一个骰子游戏的最重要的要求是从模拟骰子的投掷开始。首先，这个看似不可能因为设计意味着我们要精准的说明电脑将会做什么。幸运的是，JavaScript,像其他编程语言，拥有一项嵌入的设计能够随机的生成结果。有时语言利用中间位(0和1)的一个很长的字符串位代表的时间,以毫秒为单位。准确的方法对我们来说不重要，我们将假设由浏览器的JavaScript提供一个好的工作,叫做伪随机处理。

假设我们现在能随机得到1到6中随机的一个数字，并且做连词获取两个向上面的结果，我们需要去落实游戏的规则，这意味着我们需要去记录那一次是我们第一次投掷，那一次是紧接着的投掷。这个的学术名称叫做应用状态，从这样看来是正确的，并且这在游戏和其他应用中是很正确的，然后我们需要通过基础条件作出决策，基于条件的设计是编程语言的基础，之后你将会理解为什么像我这样的计算机科学老师从来没在赌场参与过掷骰子的游戏。

我们需要给玩家一种掷骰子的方式，因此我们在屏幕上设置一个按钮来进行投掷操作，然后我们要将投掷的结果返回给玩家，对于这个应用，我产生图形反馈通过骰子的脸在屏幕上同时显示为文本信息，显示游戏的阶段, 对于这个应用程序,我产生图形反馈通过骰子的脸在屏幕上同时显示为文本信息，显示游戏的阶段,价值,和结果。与用户交互过去的术语叫做
输入输出(I / O),那时的互动主要涉及文本。图形用户界面(GUI)现在常用来表示巨大的各种方式,用户与计算机交互系统。这包括使用鼠标点击屏幕上的一个特定点或点击结合拖来模拟移动一个对象的影响(参见第4章中的弹弓游戏),在屏幕上作画需要使用一个坐标系统指定点。坐标系统的电脑屏幕上实现以大多数相似的变成语言，正如我已经简单介绍过的。

HTML5，CSS和JavaScript特性

现在让我们看看HTML5,CSS,和JavaScript的提供我们需要的具体特性，实现了掷骰子赌博游戏。

随机过程和数学解释

伪随机处理JavaScript执行使用一个内置的方法称为math . random。在形式上,随机是数学类的方法。的数学。随机方法生成一个数字从0开始,但不包括1,导致一个十进制数,例如,0.253012。这看起来对我们目前没什么用,但实际上是一个非常简单的过程，这一数字转换成一个。我们把那个号码,不管它是什么,到6,产生一个数字从0到但不包括6。例如,如果我们用。253012年6我们得到1.518072。这几乎就是我们所想要的,但不完全正确。下一步是要去掉的部分和保持整个号码。为此,我们利用另一种数学方法,Math.floor。这种方法会产生一个整数后删除任何分数部分。顾名思义,floor的方法流传下来。在特定的情况下,我们开始。253012,然后到达1.518072,所以结果是整个数字1。一般来说,当我们用从1到6的随机数字i我们将得到从0到5的一个数字，最终结果需要加1，因为我们的目标是获取从1到6中的某个数字，一遍又一遍，没有特别的形式。

您可以使用类似的方法来得到整数范围。例如,如果您想要得到1至13中的某个数字，你可以重复的获取到13的数字然后加1，这对纸牌游戏很有用，在这本书中看到类似的例子。

我们可以把所有这些步骤结合在一起变成所谓的一个表达式。表达式是constants,calls,methods,和功能和一些我们所期待的东西的组合，探索接下来的事情我们把这些物品使用操作符统一操作,例如 加法和乘法的*。

记得从第一章如何组合标签标,一行一个标签JavaScript代码中使用我们最喜欢的网站应用程序:

document.write(Date());

我们可以使用类似的过程。而不是写随机调用,然后用floor方法作为单独的语句,我们可以通过随机调用作为参数的方法。看一看这段代码:

1 Math.floor(Math.random()*6)

这个表达式会产生一个数从1到6。我把它叫做一个代码片段,因为它不是相当声明。运营商 和*指算术运算和you?d是一样的使用正常的数学。从内部操作的顺序启动和工作。

调用Math.random()方法去获取从0到1的小数，不包括1；

将得到的结果乘以6；

用math.floor方法取走一部分数字；

加1

你将会在最后的代码部分看到最终结果，但是我们不会覆盖其他的；

变量赋值语句

与其他编程语言一样,JavaScript构造称为变量,它本质上是一个放置一个值,比如一个数字。它是一种将一个名称与值。您可以使用值后,通过引用这个名字。一个比喻是办公室的持有者。“在美国,我们说话总统。“现在,在2010年,总统巴拉克bull;奥巴马(Barack Obama)。在2009年1月21日,乔治bull;布什(George W。布什。持有的价值“总统”这一术语的变化。在程序设计中,变量的值各不相同,因此这个名字。

var是用来声明一个变量。

变量和函数的名称,在下一节中所描述的那样,取决于程序员。有规则:没有内部空白和名称必须以英文字母开始。不要把名字只要你不想类型太多,但也不要让他们这么短你忘记它们是什么。你做需要是一致的,但你不需要遵守规定的英语拼写。例如,如果你想设置一个变量来保存值的总和,你相信和的英文拼写为som,你只需要记住你始终用到的都是som这个变量。但如果你想参考JavaScript,如的一部分函数或文档或随机的,您需要使用JavaScript预计的拼写。

您应该避免使用JavaScript内置构造的名字(如random或floor)给你变量命名。试图让独特的名称,但仍然很容易理解。一个常见的写作方法变量名称是使用驼峰命名方式，那么使用大写字母来表示当一个新的词开始,例如,numberOfTurns。你可以看到为什么他称为驼峰命名.“humps”你并不是必须要使用这种命名方式，但这对于大多数程序员来说是一种默认的约定。

这行代码将伪随机表达式在前一节中解释特定类型的语句称为一个赋值语句。例如,

var ch = 1 Math.floor(Math.random()*);

设置值的变量命名ch的结果表达式的右边等号。var语句中使用时,它也被称为一个初始化语句。=符号是用于设置初始值的变量,在这种情况下和赋值语句被描述。我选择使用ch简称选择的名称。这对我来说是有意义的。在一般,不过,如果你需要选择一个短名称和时间,你会记得,选择时间越长!注意语句以分号结束。你可能会问,为什么不是一个时期?答案是,一段中使用两个其他情况:作为一个小数点和访问方法和属性的对象,如document . write。

赋值语句是最常见的类型的语句编程。这边有一个例子的一个变量的赋值语句已经定义:

bookname = 'The Essential Guide to HTML5';

等号的使用可能会让人困惑。认为它是左边真的等于右边，遇到许多其他变量和其他用途的运营商在这本书中,赋值语句中。

警告:var声明定义一个变量被称为声明语句。JavaScript不像许多其他语言,允许程序员忽略声明语句就开始使用变量。我尽量避免这样做,但是你可以在许多在线的例子。

掷骰子赌博的游戏,我们需要定义游戏的状态变量,即是头一遭扔或后续扔,球员的点是什么(记住点的值以前的扔)。在我们的实现中,这些值会被所谓的全局变量,变量定义了var语句以外的任何函数定义,以保持其值的值函数中声明的变量在函数停止执行)的时候消失。

你总是需要使用变量.例如,这里我们创建第一个应用程序设置变量持有的水平和垂直位置骰子。我可以把文字数字代码,因为我不改变这些数字,但自从我指在几个不同的地方,这些值存储值变量的意思是,如果我想改变一个或两个,我只需要一个地方的变化。

程序员定于的方法

JavaScript有很多内置函数和methods,但它doesn?t拥有一切你可能需要的为据我所知,它没有专门为模拟功能的投掷骰子。所以JavaScript可以让我们定义和使用我们自己的函数。这些函数可以把参数,如数学。楼的方法,不信,像math . random。参数值传递给函数。把它们作为额外的信息。函数定义的格式是紧随其后的是这个词功能这个名字你想给这个函数,其次是括号持有任何参数的名称,紧随其后的是一个开括号时,一些代码,然后一个封闭的支架。正如我在前面的部分,请注意程序员选择这个名字。这里有一个函数定义的一个例子,它返回的这两个参数。顾名思义,你可以用它来计算长方形的面积。

function areaOfRectangle(wd,ln) {

return wd * ln;

}

注意到返回关键字。这告诉JavaScript函数的结果发送回我们。在我们的例子,这让我们写一些像通过rect1 = areaOfRectangle(5、10),这将分配一个值在在50(5810)通过rect1 variable函数定义是写成脚本中的代码元素。它可能会或可能没有意义来定义这个函数在现实生活中,因为它很容易写代码中的乘法,但它作为一个有用的例子programmer-defined函数。一旦执行这个定义,这可能是当加载HTML文件,其他代码使用这个函数通过调用它的名字,如areaOfRectangle(100，200)或areaOfRectangle(x2 -x1,y2-y1)。

第二个表达式假定x1,x2,y1,y2指别处定义的坐标值。函数也可以调用通过设置特定的标记属性。例如,body标签可以包括onLoad属性设置:

lt;body onLoad='init();'gt;

JavaScript代码包含一个函数的定义我调用init。把这个body元素意味着JavaScript调用init函数当浏览器首先加载HTML文档或当玩家点击重新加载/刷新按钮。同样,利用的一个新特性HTML5,我可能包括按钮元素:

lt;button onClick='throwdice();'gt;Throw dice lt;/buttongt;

这将创建一个按钮的文本扔骰子。当玩家点击它时,JavaScript调用throwdice函数在脚本中定义元素。

表单元素,描述后,可以调用一个函数以类似的方式。

条件语句：if 和 switch

掷骰子赌博游戏的规则集。总结的规则的一个方法

剩余内容已隐藏，支付完成后下载完整资料

---

资料编号：[30954]，资料为PDF文档或Word文档，PDF文档可免费转换为Word