Skip to content

Z
zetcode-zh

OpenDocCN / zetcode-zh
9 个月 前同步成功

通知 2
Star 157
Fork 40
Z
zetcode-zh

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 c63ccec1 编写于 作者: W wizardforcel
浏览文件
操作

2020-06-17 15:54:20

上级 a32e10ff
隐藏空白更改
内联 并排
Showing with 58 addition and 58 deletion
docs/graph/50.md
浏览文件 @ c63ccec1
......@@ -79,7 +79,7 @@ mtx = cairo.Matrix(1.0, 0.5,
```
此变换将 y 值剪切为 x 值的 0.5。
此变换将`y`值剪切为`x`值的 0.5。
```
cr.transform(mtx)
......@@ -115,7 +115,7 @@ def on_draw(self, wid, cr):
```
我们绘制三个 90x90px 的矩形。 在其中两个上，我们执行缩放操作。
我们绘制三个`90x90px`的矩形。 在其中两个上，我们执行缩放操作。
```
cr.scale(0.6, 0.6)
......@@ -135,7 +135,7 @@ cr.fill()
```
在这里，我们以 0.8 的系数执行另一个缩放操作。 如果看图片，我们可以看到第三个黄色矩形是最小的一个。 即使我们使用了较小的比例因子。 这是因为变换操作是累加的。 实际上，第三个矩形的缩放比例为 0.528（0.6x0.8）。
在这里，我们以 0.8 的系数执行另一个缩放操作。 如果看图片，我们可以看到第三个黄色矩形是最小的一个。 即使我们使用了较小的比例因子。 这是因为变换操作是累加的。 实际上，第三个矩形的缩放比例为 0.528（`0.6x0.8`）。
![Scaling operation](img/dc2f78572081f11a43a4e1938cae600c.jpg)
......
docs/graph/51.md
浏览文件 @ c63ccec1
......@@ -157,7 +157,7 @@ cr.show_text("ZetCode")
```
第二个文本用灰色墨水绘制。 它向右和向下移动了 3px。
第二个文本用灰色墨水绘制。 它向右和向下移动了`3px`。
![Shaded text](img/aa48c80d2848ae1dd206e4ed11ddb33c.jpg)
......@@ -320,7 +320,7 @@ if __name__ == "__main__":
```
在我们的示例中，我们将在 GTK 窗口上逐个字母地绘制“ ZetCode”字符串，并稍作延迟。
在我们的示例中，我们将在 GTK 窗口上逐个字母地绘制“ZetCode”字符串，并稍作延迟。
```
self.text = [ "Z", "e", "t", "C", "o", "d", "e" ]
......@@ -348,7 +348,7 @@ for i in range(self.count):
```
在这里，我们逐个字母地绘制文本。 我们获得每个字母的宽度并计算 x 轴上的距离。
在这里，我们逐个字母地绘制文本。 我们获得每个字母的宽度并计算`x`轴上的距离。
## 字形
......@@ -383,7 +383,7 @@ glyphs = []
```
字形列表将存储三个整数值。 第一个值是字形到所选字体类型的索引。 第二和第三值是字形的 x，y 位置。
字形列表将存储三个整数值。 第一个值是字形到所选字体类型的索引。 第二和第三值是字形的`x`，`y`位置。
```
cr.show_glyphs(glyphs)
......
docs/graph/52.md
浏览文件 @ c63ccec1
......@@ -173,7 +173,7 @@ cr.paint()
```
`Gdk.cairo_set_source_pixbuf()`方法将 pixbuf 设置为绘画源。
`Gdk.cairo_set_source_pixbuf()`方法将`pixbuf`设置为绘画源。
## 水印
......
docs/graph/53.md
浏览文件 @ c63ccec1
......@@ -186,7 +186,7 @@ pb = Gdk.pixbuf_get_from_window(root_win, 0, 0, width, height)
```
我们使用`Gdk.pixbuf_get_from_window()`方法调用从根窗口中获得一个 pixbuf。 pixbuf 是描述内存中图像的对象。 GTK 库使用它。
我们使用`Gdk.pixbuf_get_from_window()`方法调用从根窗口中获得一个`pixbuf`。 `pixbuf`是描述内存中图像的对象。 GTK 库使用它。
```
cr = cairo.Context(ims)
......
docs/graph/55.md
浏览文件 @ c63ccec1
......@@ -6,23 +6,23 @@ HTML5 画布教程的这一部分是对 JavaScript 语言的 HTML5 画布编程
## 关于
这是 HTML5 画布教程。 它是针对初学者的。 本教程将教您 HTML5 canvas 元素的 JavaScript 图形编程基础。 可以在此处下载本教程中使用的图像。
这是 HTML5 画布教程。 它是针对初学者的。 本教程将教您 HTML5 `canvas`元素的 JavaScript 图形编程基础。 可以在此处下载本教程中使用的图像。
HTML5 画布元素提供了可同时处理矢量和栅格图形的工具。
## HTML5 画布
HTML5 canvas 元素提供了一个与分辨率有关的位图区域，该区域可用于动态绘制图形，游戏图形，艺术作品或其他可视图像。 简单来说，canvas 是 HTML5 中的新元素，它使您可以使用 JavaScript 绘制图形。 Canvas 无需将插件插入 Flash，Silverlight 或 Java，即可将动画带入网页。
HTML5 `canvas`元素提供了一个与分辨率有关的位图区域，该区域可用于动态绘制图形，游戏图形，艺术作品或其他可视图像。 简单来说，`canvas`是 HTML5 中的新元素，它使您可以使用 JavaScript 绘制图形。 `Canvas`无需将插件插入 Flash，Silverlight 或 Java，即可将动画带入网页。
HTML5 canvas 最初由 Apple 于 2004 年推出，用于 Mac OS X WebKit，以为仪表板应用及其 Safari Web 浏览器提供动力。 从那时起，它已被 Mozilla 和 Opera 所采用。 后来，W3C 在 HTML5 规范中采用了它。 如今，所有现代 Web 浏览器都支持它。
HTML5 `canvas`最初由 Apple 于 2004 年推出，用于 Mac OS X WebKit，以为仪表板应用及其 Safari Web 浏览器提供动力。 从那时起，它已被 Mozilla 和 Opera 所采用。 后来，W3C 在 HTML5 规范中采用了它。 如今，所有现代 Web 浏览器都支持它。
## 画布上下文
canvas 上下文是一个对象，它公开 Canvas API 来执行绘图。 它提供对象，方法和属性，以在画布绘图表面上绘制和操纵图形。 使用`getContext()`方法检索上下文。 方法的参数指定所需的 API：用于二维图形的`"2d"`或用于二维和三维图形的`"webgl"`。 如果不支持给定的上下文 ID，则返回`null`。
`canvas`上下文是一个对象，它公开画布 API 来执行绘图。 它提供对象，方法和属性，以在画布绘图表面上绘制和操纵图形。 使用`getContext()`方法检索上下文。 方法的参数指定所需的 API：用于二维图形的`"2d"`或用于二维和三维图形的`"webgl"`。 如果不支持给定的上下文 ID，则返回`null`。
## 画一个矩形
我们创建一个简单的 HTML5 canvas 图形渲染示例。
我们创建一个简单的 HTML5 `canvas`图形渲染示例。
`rectangle.html`
......@@ -50,14 +50,14 @@ canvas 上下文是一个对象，它公开 Canvas API 来执行绘图。 它提
```
该代码示例在网页的左上角绘制一个 cadetblue 矩形。
该代码示例在网页的左上角绘制一个`cadetblue`矩形。
```
<!DOCTYPE html>
```
文档类型声明或 DOCTYPE 是对 Web 浏览器的有关 HTML 文档性质的指令。 这个特定的声明告诉浏览器该网页是 HTML5 文档。 canvas 元素最初是在 HTML5 标准中引入的。
文档类型声明或`DOCTYPE`是对 Web 浏览器的有关 HTML 文档性质的指令。 这个特定的声明告诉浏览器该网页是 HTML5 文档。 `canvas`元素最初是在 HTML5 标准中引入的。
```
<script>
......@@ -75,7 +75,7 @@ var canvas = document.getElementById('myCanvas');
```
通过`getElementById()`方法，我们获得对 canvas 元素的引用。
通过`getElementById()`方法，我们获得对`canvas`元素的引用。
```
var ctx = canvas.getContext('2d');
......@@ -96,7 +96,7 @@ ctx.fillRect(0, 0, 100, 100);
```
我们用指定的颜色绘制一个矩形。 矩形的尺寸在方法的参数中给出。 前两个参数是 x 和 y 坐标。 接下来的两个参数是矩形的宽度和高度。
我们用指定的颜色绘制一个矩形。 矩形的尺寸在方法的参数中给出。 前两个参数是`x`和`y`坐标。 接下来的两个参数是矩形的宽度和高度。
```
<body onload="draw();">
......@@ -111,7 +111,7 @@ ctx.fillRect(0, 0, 100, 100);
```
canvas 元素是使用`&lt;canvas&gt;`和`&lt;/canvas&gt;`标签创建的。 `width`和`height`属性设置页面内 canvas 元素的大小。 `id`属性标识 DOM 层次结构中的元素。
`canvas`元素是使用`&lt;canvas&gt;`和`&lt;/canvas&gt;`标签创建的。 `width`和`height`属性设置页面内 canvas 元素的大小。 `id`属性标识 DOM 层次结构中的元素。
![HTML5 canvas rectangle](img/b4bff4c4863a93a3a99ec3dd907db8dd.jpg)
......
docs/graph/56.md
浏览文件 @ c63ccec1
......@@ -4,7 +4,7 @@
线是简单的图形基元。 线是连接两个点的对象。
在 HTML5 画布中，使用 path 对象创建一行。 路径是由线段连接的点的列表，这些线段可以具有不同的形状（弯曲或不弯曲），不同的宽度和不同的颜色。 在路径对象内，使用`lineTo()`方法创建一条线。
在 HTML5 画布中，使用`path`对象创建一行。 路径是由线段连接的点的列表，这些线段可以具有不同的形状（弯曲或不弯曲），不同的宽度和不同的颜色。 在路径对象内，使用`lineTo()`方法创建一条线。
## 直线
......@@ -58,14 +58,14 @@ ctx.moveTo(20, 20);
```
`moveTo()`方法将笔移动到 x 和 y 指定的坐标。
`moveTo()`方法将笔移动到`x`和`y`指定的坐标。
```
ctx.lineTo(250, 150);
```
`lineTo()`方法从当前绘制位置到 x 和 y 指定的位置绘制一条线。
`lineTo()`方法从当前绘制位置到`x`和`y`指定的位置绘制一条线。
```
ctx.stroke();
......
docs/graph/57.md
浏览文件 @ c63ccec1
......@@ -51,7 +51,7 @@ ctx.fillRect(100, 10, 100, 60);
```
`fillRect()`方法用于绘制正方形和矩形。 前两个参数是要绘制的形状的 x 和 y 坐标。 最后两个参数是形状的宽度和高度。
`fillRect()`方法用于绘制正方形和矩形。 前两个参数是要绘制的形状的`x`和`y`坐标。 最后两个参数是形状的宽度和高度。
![Rectangles](img/88d5111ebdc9ff8aa2dbdd76a396f36e.jpg)
......@@ -136,7 +136,7 @@ ctx.fill();
```
用`arc()`方法绘制一个圆。 该方法将弧添加到创建的路径。 前两个参数定义圆弧中心点的 x 和 y 坐标。 接下来的两个参数指定圆弧的起点和终点。 角度以弧度定义。 最后一个参数是可选的； 它指定绘制圆弧的方向。 默认方向为顺时针。
用`arc()`方法绘制一个圆。 该方法将弧添加到创建的路径。 前两个参数定义圆弧中心点的`x`和`y`坐标。 接下来的两个参数指定圆弧的起点和终点。 角度以弧度定义。 最后一个参数是可选的； 它指定绘制圆弧的方向。 默认方向为顺时针。
```
ctx.beginPath();
......
docs/graph/58.md
浏览文件 @ c63ccec1
......@@ -74,7 +74,7 @@ Figure: Colours
在计算机图形学中，渐变是从浅到深或从一种颜色到另一种颜色的阴影的平滑混合。 在 2D 绘图程序和绘画程序中，渐变用于创建彩色背景和特殊效果以及模拟灯光和阴影。
有两种类型的渐变：线性渐变和径向渐变。 第一个示例演示了 HTML5 canvas 中的线性渐变。
有两种类型的渐变：线性渐变和径向渐变。 第一个示例演示了 HTML5 `canvas`中的线性渐变。
`linear_gradient.html`
......@@ -114,7 +114,7 @@ var lgr = ctx.createLinearGradient(150, 0, 150, 160);
```
`createLinearGradient()`方法沿着由参数表示的坐标给出的直线创建一个渐变。 参数是起点和终点的 x 和 y 坐标。
`createLinearGradient()`方法沿着由参数表示的坐标给出的直线创建一个渐变。 参数是起点和终点的`x`和`y`坐标。
```
lgr.addColorStop(0.2, "black");
......@@ -188,7 +188,7 @@ var rgr = ctx.createRadialGradient(canvas.width/2, canvas.height/2, 5,
```
`createRadialGradient()`方法创建由参数表示的两个圆的坐标给定的径向渐变。 我们将圆圈设置在画布的中间。 前两个参数设置起始圆的 x 和 y 坐标。 第三个参数是起始圆的半径。 接下来的两个参数是结束圆的 x 和 y 坐标。 最后一个参数指定末端线圈的半径。
`createRadialGradient()`方法创建由参数表示的两个圆的坐标给定的径向渐变。 我们将圆圈设置在画布的中间。 前两个参数设置起始圆的`x`和`y`坐标。 第三个参数是起始圆的半径。 接下来的两个参数是结束圆的`x`和`y`坐标。 最后一个参数指定末端线圈的半径。
```
rgr.addColorStop(0, "black");
......
docs/graph/59.md
浏览文件 @ c63ccec1
......@@ -61,7 +61,7 @@ var alpha = i * 0.1;
```
`alpha`值在 for 循环中动态变化。 在每个循环中，它减少了 10% 。
`alpha`值在`for`循环中动态变化。 在每个循环中，它减少了 10% 。
```
ctx.globalAlpha = alpha;
......@@ -75,7 +75,7 @@ ctx.fillRect(50*i, 20, 40, 40);
```
`fillRect()`方法绘制一个填充的矩形。 它的参数是 x 和 y 坐标以及矩形的宽度和高度。
`fillRect()`方法绘制一个填充的矩形。 它的参数是`x`和`y`坐标以及矩形的宽度和高度。
![Transparent rectangles](img/0d383992f77c6eb0f0c2eccbe990f749.jpg)
......
docs/graph/60.md
浏览文件 @ c63ccec1
......@@ -2,7 +2,7 @@
> 原文： [https://zetcode.com/gfx/html5canvas/compositing/](https://zetcode.com/gfx/html5canvas/compositing/)
在 HTML5 canvas 教程的这一部分中，我们使用合成操作。
在 HTML5 `canvas`教程的这一部分中，我们使用合成操作。
合成是将来自不同来源的视觉元素组合成单个图像。 它们被用来创建一种幻觉，即所有这些元素都是同一场景的一部分。 合成在电影行业中被广泛使用来创造人群，否则将是昂贵或不可能创造的整个新世界。
......@@ -12,7 +12,7 @@
[developer.mozilla.org](https://developer.mozilla.org) 在其[合成和剪辑](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing)一章中列出了 26 种不同的合成操作。 我们在下一个代码示例中展示其中的一些。
假设我们要在画布上绘制两个对象。 绘制的第一个对象称为目标，第二个称为源。 canvas 上下文的`globalCompositeOperation`属性确定如何将这两个对象混合在一起。 例如，在`source-over`规则（这是默认的构图操作）中，新形状会在现有形状的顶部绘制。
假设我们要在画布上绘制两个对象。 绘制的第一个对象称为目标，第二个称为源。 `canvas`上下文的`globalCompositeOperation`属性确定如何将这两个对象混合在一起。 例如，在`source-over`规则（这是默认的构图操作）中，新形状会在现有形状的顶部绘制。
`compositing.html`
......@@ -107,7 +107,7 @@ function init() {
```
在`init()`函数内部，我们获得对 canvas 对象及其绘制上下文的引用。
在`init()`函数内部，我们获得对`canvas`对象及其绘制上下文的引用。
```
ctx.save();
......
docs/graph/61.md
浏览文件 @ c63ccec1
# HTML5 canvas 中的变换
# HTML5 `canvas`中的变换
> 原文： [https://zetcode.com/gfx/html5canvas/transformations/](https://zetcode.com/gfx/html5canvas/transformations/)
......@@ -112,7 +112,7 @@ Figure: Rotation
## 缩放
缩放是通过`scale()`方法完成的。 该方法采用两个参数：x 比例因子和 y 比例因子。
缩放是通过`scale()`方法完成的。 该方法采用两个参数：`x`比例因子和`y`比例因子。
`scaling.html`
......@@ -300,6 +300,6 @@ for (var deg = 0; deg < 360; deg += 5) {
```
我们创建 36 个椭圆。 椭圆旋转。 `ellipse()`方法采用以下参数：椭圆中心点的 x 和 y 坐标，椭圆的长轴半径，椭圆的短轴半径，旋转，起始角度和终止角度。
我们创建 36 个椭圆。 椭圆旋转。 `ellipse()`方法采用以下参数：椭圆中心点的`x`和`y`坐标，椭圆的长轴半径，椭圆的短轴半径，旋转，起始角度和终止角度。
在 Java 2D 教程的这一部分中，我们讨论了变换。
\ No newline at end of file
docs/graph/62.md
浏览文件 @ c63ccec1
......@@ -12,7 +12,7 @@
## 绘制文字
HTML5 canvas 上下文有两种绘制文本的方法：`strokeText()`和`fillText()`。 不同之处在于`fillText()`方法绘制文本的内部，而`strokeText()`方法绘制文本的轮廓。
HTML5 `canvas`上下文有两种绘制文本的方法：`strokeText()`和`fillText()`。 不同之处在于`fillText()`方法绘制文本的内部，而`strokeText()`方法绘制文本的轮廓。
`drawing_text.html`
......@@ -50,14 +50,14 @@ ctx.font = "28px serif";
```
canvas 上下文`font`属性指定绘制文本时使用的当前文本样式。 我们指定字体大小和字体系列。
`canvas`上下文`font`属性指定绘制文本时使用的当前文本样式。 我们指定字体大小和字体系列。
```
ctx.fillText("ZetCode", 15, 25);
```
`fillText()`方法的第一个参数是要渲染的文本。 接下来的两个参数是文本起点的 x 和 y 坐标。
`fillText()`方法的第一个参数是要渲染的文本。 接下来的两个参数是文本起点的`x`和`y`坐标。
![Drawing text](img/bae807fe0c204349165aa6fc57b03350.jpg)
......@@ -121,7 +121,7 @@ Figure: Text font
## 文字基线
canvas 2D API 的`textBaseline`属性指定在绘制文本时使用的当前文本基线。 它接受以下值：顶部，底部，中间，字母，悬挂，表意。 默认为字母。
Canvas 2D API 的`textBaseline`属性指定在绘制文本时使用的当前文本基线。 它接受以下值：顶部，底部，中间，字母，悬挂，表意。 默认为字母。
`text_baseline.html`
......@@ -195,7 +195,7 @@ Figure: Text baseline
## 文字对齐
Canvas 2D API 的`textAlign`属性指定在绘制文本时使用的当前文本对齐方式。 对齐基于`fillText()`方法的 x 值。 可能的值为：左，右，居中，开始和结束。
Canvas 2D API 的`textAlign`属性指定在绘制文本时使用的当前文本对齐方式。 对齐基于`fillText()`方法的`x`值。 可能的值为：左，右，居中，开始和结束。
`text_alignment.html`
......@@ -258,7 +258,7 @@ var cw = canvas.width/2;
```
我们计算画布中间点的 x 坐标。 我们的文字围绕这一点对齐。
我们计算画布中间点的`x`坐标。 我们的文字围绕这一点对齐。
```
ctx.beginPath();
......
docs/graph/63.md
浏览文件 @ c63ccec1
......@@ -2,15 +2,15 @@
> 原文： [https://zetcode.com/gfx/html5canvas/animation/](https://zetcode.com/gfx/html5canvas/animation/)
在本章中，我们将在 HTML5 canvas 中创建动画。
在本章中，我们将在 HTML5 `canvas`中创建动画。
动画是连续的图像，使人产生了运动的幻觉。 但是，动画不仅限于运动。 随时间改变对象的背景也被视为动画。
在 HTML5 canvas 中创建动画的功能有以下三个：
在 HTML5 `canvas`中创建动画的功能有以下三个：
* setInterval（函数，延迟）
* setTimeut（函数，延迟）
* requestAnimationFrame（回调）
* `setInterval(function, delay)`
* `setTimeut(function, delay)`
* `requestAnimationFrame(callback)`
`setInterval()`函数每隔延迟毫秒重复执行一次传递的函数。 `setTimeout()`以毫秒为单位执行指定的功能。 为了创建动画，从执行的函数中调用`setTimeout()`。 `requestAnimationFrame()`功能允许浏览器在下一次重绘之前调用指定的功能来更新动画。 浏览器进行了一些优化。
......@@ -96,7 +96,7 @@ function draw() {
```
`draw()`方法使用`clearRect()`方法清除画布，并绘制具有更新的 x 和 y 坐标的新圆。
`draw()`方法使用`clearRect()`方法清除画布，并绘制具有更新的`x`和`y`坐标的新圆。
```
function move_ball() {
......@@ -113,7 +113,7 @@ function move_ball() {
```
在`move_ball()`功能中，我们更新圆心的 x 和 y 坐标。 我们检查球是否已通过画布的右边缘，然后调用`draw()`方法重绘画布。
在`move_ball()`功能中，我们更新圆心的`x`和`y`坐标。 我们检查球是否已通过画布的右边缘，然后调用`draw()`方法重绘画布。
## 淡出
......@@ -221,7 +221,7 @@ function onClicked(e) {
```
在`onClicked()`功能内，我们可以计算出鼠标单击的 x 和 y 坐标。 我们将鼠标坐标与 Rectagle 的外部边界进行比较，如果鼠标坐标落在 Rectagle 的区域内，则将调用`fadeout()`方法。
在`onClicked()`功能内，我们可以计算出鼠标单击的`x`和`y`坐标。 我们将鼠标坐标与矩形的外部边界进行比较，如果鼠标坐标落在矩形的区域内，则将调用`fadeout()`方法。
```
if (alpha < 0) {
......@@ -234,7 +234,7 @@ if (alpha < 0) {
```
当 Rectagle 完全透明时，我们将移走侦听器并以不透明的白色填充该区域。 return 语句结束`fadeout()`函数的递归调用。
当矩形完全透明时，我们将移走侦听器并以不透明的白色填充该区域。 `return`语句结束`fadeout()`函数的递归调用。
```
ctx.clearRect(rx, ry, rw, rh);
......@@ -400,7 +400,7 @@ function Circle(x, y, r, c) {
```
这是`Circle`对象的构造函数。 除了 x 和 y 坐标以及半径之外，它还包含颜色值的 c 属性。
这是`Circle`对象的构造函数。 除了`x`和`y`坐标以及半径之外，它还包含颜色值的属性。
```
circles = new Array(NUMBER_OF_CIRCLES);
......@@ -630,7 +630,7 @@ this.move = function(speed) {
```
`move()`方法移动星星； 它增加了它的 y 坐标。
`move()`方法移动星星； 它增加了它的`y`坐标。
```
this.draw = function(col) {
......
docs/graph/64.md
浏览文件 @ c63ccec1
# HTML5 画布中的 Snake
# HTML5 画布中的贪食蛇
> 原文： [https://zetcode.com/gfx/html5canvas/snake/](https://zetcode.com/gfx/html5canvas/snake/)
......@@ -6,7 +6,7 @@
## Snake
Snake 是较旧的经典视频游戏。 它最初是在 70 年代后期创建的。 后来它被带到 PC 上。 在这个游戏中，玩家控制蛇。 目的是尽可能多地吃苹果。 蛇每次吃一个苹果，它的身体就会长大。 蛇必须避开墙壁和自己的身体。 该游戏有时称为 Nibbles 。
贪食蛇是较旧的经典视频游戏。 它最初是在 70 年代后期创建的。 后来它被带到 PC 上。 在这个游戏中，玩家控制蛇。 目的是尽可能多地吃苹果。 蛇每次吃一个苹果，它的身体就会长大。 蛇必须避开墙壁和自己的身体。 该游戏有时称为 Nibbles 。
## 开发
......@@ -277,7 +277,7 @@ var y = new Array(ALL_DOTS);
```
这两个数组存储蛇的所有关节的 x 和 y 坐标。
这两个数组存储蛇的所有关节的`x`和`y`坐标。
```
function init() {
......@@ -339,7 +339,7 @@ function checkApple() {
```
如果头部与苹果相撞，我们会增加蛇的关节数。 我们称`locateApple()`方法为随机放置一个新的 Apple 对象。
如果头部与苹果相撞，我们会增加蛇的关节数。 我们称`locateApple()`方法为随机放置一个新的`Apple`对象。
在`move()`方法中，我们有游戏的密钥算法。 要了解它，请看一下蛇是如何运动的。 我们控制蛇的头。 我们可以使用光标键更改其方向。 其余关节在链上向上移动一个位置。 第二关节移动到第一个关节的位置，第三关节移动到第二个关节的位置，依此类推。
......@@ -397,7 +397,7 @@ function locateApple() {
```
`locateApple()`随机选择苹果对象的 x 和 y 坐标。 `apple_x`和`apple_y`是苹果图像左上点的坐标。
`locateApple()`随机选择苹果对象的`x`和`y`坐标。 `apple_x`和`apple_y`是苹果图像左上点的坐标。
```
function gameCycle() {
......@@ -431,4 +431,4 @@ if ((key == LEFT_KEY) && (!rightDirection)) {
Figure: Snake
这是 HTML5 画布中的 Snake 游戏。
\ No newline at end of file
这是 HTML5 画布中的贪食蛇游戏。
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或