网站设计制作公司地址,商标注册费用一般是多少钱,市场调研报告怎么写范文,免费制作二维码的网站2019独角兽企业重金招聘Python工程师标准 创造一个游戏世界 这章教会你如何通过内存中储存的信息创造一个游戏世界。介绍了基本类型和变量并且这些变量是如何储存和改变信息的。接下来#xff0c;你会看到如何用对象储存更复杂的信息#xff0c;里面包含成员变… 2019独角兽企业重金招聘Python工程师标准 创造一个游戏世界 这章教会你如何通过内存中储存的信息创造一个游戏世界。介绍了基本类型和变量并且这些变量是如何储存和改变信息的。接下来你会看到如何用对象储存更复杂的信息里面包含成员变量和方法。 基本类型和变量 先前的章节几次讨论到了内存。你已经看到了如何执行一个简单的指令譬如canvasContext.fillStyle “blue”为画布设置一个颜色。在这章例子里你使用内存储存临时信息是为了记住一些简单运算的结果。在这个例子里你使用经过的时间来改变背景色。 类型 类型或者数据类型代表不同类型的信息。先前的例子使用了不同类型的信息当做参数传递给了函数。例如fillRect函数需要4个整数start函数需要一个文本标识引用自canvasupdate和draw函数不需要任何信息。浏览器/解释器可以区分这些不同类型的信息并且很多情况下可以把一个类型的信息转换成另一个类型的信息。比如在JavaScript里你可以使用单引号或者双引号来标识文本。如下的两句指令是一样的 canvas document.getElementById(myCanvas);
canvas document.getElementById(myCanvas);浏览器可以自动的在不同类型的信息间进行转换。比如下面的语句不会导致语法错误 canvas document.getElementById(12);这个当做参数传递的整数会被转换成文本。在这种情况下当然这里没有ID叫做12的canvas所以这个程序是不正确的。如果你像下面一样替换canvas的ID程序就会正常运行 canvas id12 width800 height480/canvas浏览器自动的在文本和数字之间进行转换。 现代编程语言都比JavaScript严格的多。比如Java和C#不同类型之间转换是有限制的。大多时候你必须明确的告诉编译器这里有一个类型转换。 为什么对类型转换需要这么严格的限制呢首先一个函数或方法中明确的类型参数可以让程序员简单的使用函数。比如下面这样 function playAudio (audioFileId)简单的看一下你并不确定audioFileId是一个数字还是文本。在C#里这个函数会类似这样 void playAudio(string audioFileId)可以看出不仅有参数名而且还附有参数类型。类型是string也就是字符串。此外在函数名前面还有void这个单词表示这个函数没有返回值。 声明和变量赋值 在JavaScript里面储存信息和使用信息都是很简单的。你需要做的只是为你要引用的信息提供一个名字。这个名字就叫做变量。当你想在程序里使用变量时在使用之前声明它是一个好习惯。下面是如何声明一个变量 var red;在这里red就是变量名。你可以在你随后的程序用它储存信息。 当你声明了一个变量你不需要提供你需要储存信息的类型。变量仅仅是内存里有一个名字。有些编程语言要求在变量声明时确定变量的类型。比如在Java或者C里。然而很多的脚本语言包括JavaScript允许你声明一个变量而不需要指定其类型。当编程语言声明变量时不要指定类型这个编程语言就有松散类型。在JavaScript里你可以声明不止一个变量比如: var red, green, fridge, grandMa, applePie;这里你声明了5个不同的变量。当你声明这些变量时你没有赋值。在这种情况下变量是未定义的。你可以用赋值指令为变量赋值。比如给red赋值 red 3;赋值指令包含下面这些 变量名”“符号变量值一个分号你可以发现赋值指令中间有个等号。然而在JavaScript里最好把”“看成”变为“而不是”等于“。毕竟变量还没有等于右边的值它在指令执行之后才变成那个值。下面的语法图描述了赋值指令。图3-1 省略图3-1 现在知道如何声明一个变量和给变量赋值了。如果你在声明变量时就知道给变量赋什么值你可以声明的同时进行赋值。比如 var red 3;当执行这句后内存中就会有3这个值如图3-2所示。 省略图3-2 这里有更多关于数值变量的声明和赋值 var age 16;
var numberOfBananas;
numberOfBananas 2;
var a, b;
a 4;
var c 4, d 15, e -3;
c d;
numberOfBananas age 12;在第四行你可以发现一次可以声明多个变量。也可以像第六行一样有多个变量进行了声明赋值。在赋值的右边你可以放置其它变量或者数学表达式正如最后两行所示。指令 c d;让储存在d中的值也储存在了c里面。因为d是15所以执行这条指令后c也是15.最后一条指令让age加上12把结果储存在numberOfBananas里面。概括来说执行这些指令后这些内存值看起来就像图3-3所示 省略图3-3 全局变量和严格模式 除了在使用变量之前进行声明javascript也可以直接使用变量而不用声明它。比如下面这样 var a 3;
var b;
b 4;
x a b;如上所示前两行指令通过var关键字声明了变量a和b。变量x从来没有声明但是它用来储存a和b的和。javascript允许这样。这很糟糕而且这也是它为什么糟糕的原因。问题在于没有声明的变量javascript解释器会自动的把它进行声明而你却完全不知道。如果你在其它地方使用同样名字的变量你的程序可能发生你意想不到的结果。另外如果你使用了很多不同的变量你最好同时记录这些变量。但是最大的问题是下面这个 var myDaughtersAge 12;
var myAge 36;
var ourAgeDifference myAge - mydaughtersAge;当编写这些指令时你希望的是ourAgeDifference的值是24.但是这个值是未定义的。这是因为第三行这里有个打字错误。变量的名字不是mydaughtersAge而是myDaughtersAge。这种情况下浏览器/解释器是悄悄的声明一个叫做mydaughtersAge的变量而不是抛出一个错误停止运行脚本。因为变量没有定义所有与此变量有关的计算都是未定义的。因此变量ourAgeDifference也是未定义的。 这个问题真的很棘手。幸运的是新的EMCAScript5标准有个叫做严格模式的东西。当脚本用严格模式来解释时它不允许在没有声明变量之前使用变量。如果你想你的脚本在严格模式下执行你需要做的仅仅只是在脚本开始加上下面这行例如 use strict;
var myDaughtersAge 12;
var myAge 36;
var ourAgeDifference myAge - mydaughtersAge;“use strict”告诉了解释器在严格模式下解释脚本。如果你现在执行这段代码浏览器会停止运行且抛出错误告知有变量没有进行声明。 除了能检查变量在使用之前是否声明了严格模式也包含了其他一些能让书写正确javascript代码更简单的东西。 我非常推荐你在严格模式下书写你所有的javascript代码。所以本书的所有javascript代码都是严格模式下书写的这能帮程序员省掉很多麻烦且这样的代码在未来版本的javascript也是无可挑剔的。 指令和表达式 如果你看到语法图里面的元素你可能已经注意到一些在赋值语句右边的值或者程序片段它们被叫做表达式。那么表达式和指令有什么不同呢两者不同的是指令某种方式上改变内存而表达式有一个值。指令通常使用表达式。这里有几个表达式的例子 16
numberOfBananas
2
a 4
numberOfBananas 12 - a
-3
myCanvas所有的这些表达式代表了一个确定的类型。除了最后一行所有的表达式都是数值。最后一行是字符串。除了数值和字符串还有其他类型的表达式。我讨论的是本书最重要的表达式。比如下节我会讨论运算符的表达式第7章会讲使用函数或者方法作为一个表达式。 运算符和更复杂的表达式 这节讨论javascript中不同的运算符。你会了解到运算符的优先级。你也可以了解到有些时候在javascript中表达式也能相当的复杂。比如一个变量可以包含多个值或者可以代表一个函数。 算术运算符 省略 运算符优先级 省略 把一个函数赋值给变量 在javascript中函数被储存在内存里。正因为如此函数也是表达式。所以可以给一个变量赋值为函数。例如 var someFunction function () {
// do something
}这个例子声明了一个变量并进行了赋值。这个变量的值是一个无名函数。如果你想执行这个函数你可以通过变量名字调用如下 someFunction();那么像下面这样定义一个函数和你之前看到的有什么不同呢 function someFunction () {
// do something
}实际上这并没有什么不同。主要是如果不像传统方式那样定义一个函数那么这个函数在定义之前不能使用。当浏览器执行一个javascript文件有两个步骤。第一个步骤浏览器构造一个函数的列表。第二步浏览器解释剩下的脚本。这对正确执行脚本很有必要浏览器需要知道哪个函数是有效的。比如下面的这段代码可以运行即使这个在后面被定义 someFunction();
function someFunction () {
// do something
}然而如果一个函数被赋值给一个变量那么就只剩上述的第二步了。意味着下面的代码会报错。 someFunction();
var someFunction function () {
// do something
}浏览器会告知有一个变量没有进行声明。在定义之后进行调用就可以了比如 someFunction();
var someFunction function () {
// do something
}多个值组成的变量 一个变量可以由多个值组成而不是只能单一值。这就像函数里面做的一样把指令组合在一起。比如 function mainLoop () {
canvasContext.fillStyle blue;
canvasContext.fillRect(0, 0, canvas.width, canvas.height);
update();
draw();
window.setTimeout(mainLoop, 1000 / 60);
}跟函数一样你可以把一些变量放在一个更大的变量里面。这个更大的变量就有了更多的值。就像下面这个例子 var gameCharacter {
name : Merlin,
skill : Magician,
health : 100,
power : 230
};这是一个复合变量的例子。变量gameCharacter有一些变量。这些变量有名字和值。因此在某种意义上说变量gameCharacter由其它一些变量组成。每个子变量都有一个名字冒号后面是值。这个包含名字的表达式和花括号之间的值被叫做对象字变量。图3-6显示了对象字变量的的语法图 省略图3-6 在声明和实例化变量gameCharacter之后这块内存看起来如图3-7 省略3-7 你可以像下面这样获取一个复合变量的值。 gameCharacter.name Arjan;
var damage gameCharacter.power * 10;正如你看到的那样你可以获取gameCharacter变量中的某个变量通过在gameCharacter后面加上一个点和子变量名。javascript甚至允许在声明和实例化复合变量后修改这个复合变量的值。举个例子看下面这段代码 var anotherGameCharacter {
name : Arthur,
skill : King,
health : 25,
power : 35000
};anotherGameCharacter.familyName Pendragon;现在anotherGameCharacter有5部分了name, skill, health, power, familyName。 因为变量也可以指向函数所以你可以包含一个指向函数的子变量。如下所示 var anotherGameCharacter {
name : Arthur,
familyName : Pendragon,
skill : King,
health : 25,
power : 35000,
healMe : function () {
anotherGameCharacter.health 100;
}
};像之前一样你可以在这之后也能为其子变量添加一个函数。 anotherGameCharacter.killMe function () {
anotherGameCharacter.health 0;
};你可以调用其他变量一样调用这些函数。下面的指令恢复了游戏角色的生命 anotherGameCharacter.healMe();如果你想杀死角色可以调用anotherGameCharacter.killMe()组合变量和函数最棒的地方在于你可以把相关的变量和函数放在一起。这个例子就是把与同一个游戏角色相关的变量放在了一起同时增加了几个相关的函数。从现在开始如果一个函数属于一个变量我把这个函数叫做方法。把一个由其他变量组成的变量叫做对象。如果一个变量是对象的一部分这个变量叫做成员变量。 你可以想象对象和方法的能量有多强大。它们提供了一个进入复杂游戏世界的方式。如果javascript没有这种能力那么在程序的开头你会声明一长串的变量并且不知道这些变量之间如何相关且能做什么。把变量装进对象里且给对象提供方法你可以写出更容易理解的程序。在下节你就要使用这种强大的能力来写一个简单的移动方块程序。 方块移动游戏 这节实现了一个方块在画布上移动的简单程序。主要有两个目的 关于游戏循环里Update和draw函数的更多细节如何使用对象来结构化程序在写这个程序之前让我们再一次看看BasicGame例子的代码 var canvas undefined;
var canvasContext undefined;
function start () {
canvas document.getElementById(myCanvas);
canvasContext canvas.getContext(2d);
mainLoop();
}
document.addEventListener(DOMContentLoaded, start);
function update () {
}
function draw () {
canvasContext.fillStyle blue;
canvasContext.fillRect(0, 0, canvas.width, canvas.height);
}
function mainLoop () {
update();
draw();
window.setTimeout(mainLoop, 1000 / 60);
}我们现在用上面学到的关于对象的知识来把这段代码重新整理成一个游戏程序。如下 use strict;
var Game {
canvas : undefined,
canvasContext : undefined
};Game.start function () {
Game.canvas document.getElementById(myCanvas);
Game.canvasContext Game.canvas.getContext(2d);
Game.mainLoop();
};
document.addEventListener(DOMContentLoaded, Game.start);
Game.update function () {
};
Game.draw function () {
Game.canvasContext.fillStyle blue;
Game.canvasContext.fillRect(0, 0, Game.canvas.width, Game.canvas.height);
};
Game.mainLoop function () {
Game.update();
Game.draw();
window.setTimeout(mainLoop, 1000 / 60);
};你创建了一个叫做Game的复合变量。这个对象有两个成员变量canvas和canvasContext。此外你给这个对象添加了几个方法包括构成这个游戏循环的方法。你分开定义了这个对象的方法。这样做的原因是你可以清楚的分辨出这些数据和方法组成的对象可以如何与数据打交道。需要注意的是像我推荐的一样添加了“use strict”。 现在让我们对这个程序进行扩展。它需要显示一个在屏幕上移动的方块。你想随着时间改变方块的X坐标值。为了做到这些你必须把现在的X坐标值储存在变量里。那样你就可以在update里面给变量进行赋值并且使用这个值在draw方法里画出这个方块。放置这个变量的地方是在Game对象里你可以像下面一样声明和实例化 var Game {
canvas : undefined,
canvasContext : undefined,
rectanglePosition : 0
};使用变量rectanglePosition来储存在方块的X坐标值。在draw方法里你可以使用这个值在屏幕上画出方块。这个例子里绘画出一个不超过画布大小的方块下面是draw方法的内容: Game.draw function () {
Game.canvasContext.fillStyle blue;
Game.canvasContext.fillRect(Game.rectanglePosition, 100, 50, 50);
}现在你需要做的就是计算X的坐标值。在update方法里计算X值因为改变X值以为着更新着游戏世界。在这个例子里我们基于时间的流逝来改变方块的坐标值。在javascript获取系统的时间值 var d new Date();
var currentSystemTime d.getTime();在此之前你还没看过像第一行那样的符号。现在假设new Date()创造了一个复合变量对象里面有跟时间相关的信息还有一些有用的方法。其中一个方法是getTime。你通过对象d调用此方法并储存在currentSystemTime里。现在这个变量就有了从1970年1月1日开始的时间。你可以想象到这个变量值有点大。如果你想设置X坐标值那么就要一个很大的屏幕。当然不可能这样做你用时间对画布的宽度求余余数作为X坐标值。那样你始终得到的是一个在0到画布宽度之间的值。update方法如下 Game.update function () {
var d new Date();
Game.rectanglePosition d.getTime() % Game.canvas.width;
};如你所知update和draw方法顺序调用大约每秒60帧。每一次时间改变系统时间也改变意味着方块的坐标值也改变那么方块显示的地方就与之前不一样。 在这个例子运行的如你所想之前你还要做一件事情。如果你像这样运行程序一个蓝色的条将出现在屏幕上。因为你在旧的方块上绘画了新的方块。为了解决这个问题每次画方块之前你需要清除画布。清除画布用clearRect方法。这个方法清除掉指定大小的画布。举例 Game.canvasContext.clearRect(0, 0, Game.canvas.width, Game.canvas.height);为了方便把这条指令放在一个叫做clearCanvas的方法里如下 Game.clearCanvas function () {
Game.canvasContext.clearRect(0, 0, Game.canvas.width, Game.canvas.height);
};你需要做的就是在游戏循环里在update和draw方法之前调用上面的方法。 Game.mainLoop function() {
Game.clearCanvas();
Game.update();
Game.draw();
window.setTimeout(Game.mainLoop, 1000 / 60);
};这个例子就完成了。运行结果如图3-8所示 省略图3-8 变量的范围 你声明变量的地方决定了你能在哪些地方使用这些变量。看上面程序的d变量。它声明在update方法里所以它只能在update方法里面使用。就是说你不能在draw方法里面使用这个变量。当然你可以在draw方法里面重新申请一个d变量但是需要意识到的是这里的d变量和update方法里面的d变量是不一样的。 相对的你在一个对象的水平上声明一个变量你就可以在任何地方使用这个变量。你需要在update和draw方法里面使用方块的X坐标因为在update里面需要更新坐标值draw里面需要绘画出方块。因此需要在对象这个水平上声明变量那样对象的所有方法都可以使用这个变量。 变量可以在哪里使用叫做变量范围。在这个例子里面d的变量范围是update方法Game.recentPostion是全局范围。 你学到了什么 在这章里你学到了 怎样使用变量在内存里储存信息怎样创建含有变量和方法的对象怎样通过变量和update方法改变游戏世界和draw方法在屏幕上显示游戏世界 转载于:https://my.oschina.net/u/1587304/blog/399862
