对于网页游戏开发的视频教学课程，你可以在各大在线教育平台如Coursera、Udemy、YouTube、B站等找到。以下是一些推荐的平台和课程：

1. Coursera：Coursera上有来自世界顶级大学和行业专家的课程，例如"Web Development"系列课程，涵盖了HTML、CSS、JavaScript等前端开发技术，以及"Game Development"专项课程，如"Unity Game Development"等，适合有一定编程基础的学习者。

2. Udemy：Udemy上有很多专门针对网页游戏开发的课程，比如使用Unity、Photon等工具开发网页游戏的教程，有的课程针对初学者，有的适合有一定经验的开发者。

3. YouTube：YouTube上有大量的免费教程，如Codecademy、Traversy Media、The New Boston等频道都有网页游戏开发的系列视频，从基础到进阶都有覆盖。

4. B站（哔哩哔哩）：中国的B站也有很多游戏开发教程，如"Unity教程"、"HTML5游戏开发"等，适合国内的学习者。

在选择课程时，可以根据自己的基础水平、学习目标和预算来决定，同时实践项目和动手开发是提高技能的关键。祝你学习顺利！

preload//是DOMString反映preloadHTML属性的，指示应该预加载哪些数据（如果有）。可能的值有：none，metadata，auto。

buffered//buffered属性会告诉浏览器哪一部分的媒体已经被下载（如果浏览器支持的话），按照标准会返回一个TimeRanges对象

作为HTML5规范的一部分，HTMLMediaElement(包括了video和audio元素) API提供允许你以编程方式来控制视频和音频播放的功能—例如 HTMLMediaElement.play(), HTMLMediaElement.pause()等。该接口对

网页游戏开发视频教学课程

本节主要学习我们最感兴趣的controls属性，它会启用默认的播放设置。如果没有指定该属性，则播放器中不会显示相关控件。你可能会觉得这个属性作用不大，但是它确实很有优势。使用原生浏览器控件的一个很大的问题在于我的世界盒子游戏侵权，它们在各个浏览器中都不相同 — 对于跨浏览器的支持并不是很好！另一个问题是，在大多数浏览器中原生控件难以通过键盘来操作。你可以通过隐藏本地控件（通过删除controls属性），然后使用HTML，CSS和JavaScript编写自己的代码来解决这两个问题。

Your browser doesn't support HTML5 video. Here is a link to the video instead.

HTML5提供了用于在文档中嵌入富媒体的元素 —

本节是第四讲的第二十三小节，上一节课为大家介绍了JavaScript绘制图形的方法（Canvas API），本节将为大家介绍多媒体播放控制器的开发包括音频和视频。

更新次序变量，准备绘制下一个三角形。length 的值减一，使三角形每次迭代都变小一些；小幅增加 moveOffset 的值，使得下一个三角形略微错位；用一个新函数 rotate() 来旋转整块画布，在绘制下个三角形前画布旋转 5°。

画一条直线，终点坐标为 (moveOffset+length, moveOffset)。即一条长度为 length 与 X 轴平行的线。

在每次迭代中：设置 fillStyle 为略透明的紫色渐变色。渐变由每次迭代时 length 值的改变实现。随着循环的运行， length 值逐渐变小，从而使连续的三角形颜色逐渐变亮。

translate()，可用于移动画布的原点，将 canvas 按原始 x点的水平方向、原始的 y点垂直方向进行平移变换。

第一个参数为图片引用。参数 2、3 表示裁切部分左上顶点的坐标，参考原点为原图片本身左上角的坐标。原图片在该坐标左、上的部分均不会绘制出来。参数 4、5 表示裁切部分的长、宽。参数 6、7 表示裁切部分左上顶点在画布中的位置坐标，参考原点为画布左上顶点。参数 8、9 表示裁切部分在画布中绘制的长、宽。

arc() 函数有六个参数。前两个指定圆心的位置坐标，第三个是圆的半径，第四、五个是绘制弧的起、止角度（给定 0° 和 360° 便能绘制一个完整的圆），第六个是绘制方向（false 是顺时针，true 是逆时针）。

通过基本三角函数可得：临边长度乘以角的正切等于对边长度。于是可得三角形的高为 50 * Math.tan(degToRad(60))。由于 Math.tan() 接受数值的单位为弧度，于是我们用刚才的 degToRad() 函数将 60° 换算为弧度。有了三角形的高，我们来绘制另一条线，终点坐标为 (100, 50+triHeight)。

首先绘制一条直线，终点坐标为 (150, 50)。此时路径沿 x 轴向右行走 100 像素。然后利用三角函数来计算等边三角形的高。这里我们要绘制的三角形是朝下的。等边三角形每个角均为 60°，为计算高的值，我们可以将三角形从正中心分割为两个直角三角形，每个直角三角形的三个角分别为 90°、60°、30°。

可以通过绘制路径来绘制比矩形更复杂的图形。路径中至少要包含钢笔运行精确路径的代码以确定图形的形状。画布提供了许多函数用来绘制直线、圆、贝塞尔曲线等等。

目前我们绘制的矩形都是填充颜色的，我们也可以绘制仅包含外部框线（图形设计中称为描边）的矩形。你可以使用 strokeStyle 属性来设置描边颜色，使用 strokeRect 来绘制一个矩形的轮廓。默认的描边宽度是 1 像素，可以通过调整 lineWidth 属性的值来修改。

通过指定半透明的颜色来绘制半透明的图形，比如使用 rgba()。 a 指定了“α 通道”的值，也就是颜色的透明度。值越高透明度越高，底层的内容就越清晰。

画布上将出现一个红色的矩形。其左边和顶边与画布边缘距离均为 50 像素（由前两个参数指定），宽 100 像素、高 150 像素（由后两个参数指定）。

所有绘画操作都离不开 CanvasRenderingContext2D 对象（这里叫做 ctx）。许多操作都需要提供坐标来指示绘图的确切位置，如下图所示，画布左上角的坐标是(0, 0)，横坐标（x）轴向右延伸，纵坐标（y）轴向下延伸。

本节是第四讲的第二十二小节，上一节课为大家介绍了Ajax技术，包括XmlHttpRequest对象和FetchAPI的基本用法，本节为大家继续介绍JavaScript绘制图形的方法（Canvas API），有关WebGL的实例请参见视频课程的内容。

Javascript游戏开发完整指南

Phaser 是一个用 Javascript 创建基于 HTML 的游戏的框架。它的使用和入门非常简单。它提供了一套完整的功能来创建准备在不同平台上发布的专业游戏。例如 Facebook Instant Games、IOS 或 Android 平台。

怎样用JavaScript开发一个Web版的迷宫游戏？这是第二讲。

我采用的双画布绘制，可移动目标单独绘制在一张画布上，其它静止的对象绘制在另一张画布上。目标移动过程中，需要不断重绘画布。这样做有一个好处，就是可以大幅减少计算量和重绘次数，这可以提高性能，因为我们仅需重绘可移动目标所在的画布。

value: function(){ // override A.prototype.doSomething.apply(this, arguments);

// 以上函数 A 的定义中，既然 A.prototype.varA 总是会被 this.varA 遮蔽，// 那么将 varA 加入到原型（prototype）中的目的是什么？

在使用原型继承编写复杂代码之前，理解原型继承模型是至关重要的。此外，请注意代码中原型链的长度，并在必要时将其分解，以避免可能的性能问题。此外，原生原型不应该被扩展，除非它是为了与新的 JavaScript 特性兼容。

这种技术被称为猴子补丁并且会破坏封装。尽管一些流行的框架（如 Prototype.js）在使用该技术，但仍然没有足够好的理由使用附加的非标准方法来混入内置原型。

注意：检查属性是否为 undefined 是不能够检查其是否存在的。该属性可能已存在，但其值恰好被设置成了 undefined。

遍历对象的属性时，原型链上的每个可枚举属性都会被枚举出来。要检查对象是否具有自己定义的属性，而不是其原型链上的某个属性，则必须使用所有对象从 Object.prototype 继承的 hasOwnProperty 方法。下面给出一个具体的例子来说明它：

在原型链上查找属性比较耗时，对性能有副作用，这在性能要求苛刻的情况下很重要。另外，试图访问不存在的属性时会遍历整个原型链。

console.log(d.hasOwnProperty); // undefined, 因为d没有继承Object.prototype

ECMAScript 5 中引入了一个新方法：Object.create()。可以调用这个方法来创建一个新对象。新对象的原型就是调用 create 方法时传入的第一个参数：

console.log("doSomething.prototype.foo: " + doSomething.prototype.foo);

console.log("doSomething.prototype.prop: " + doSomething.prototype.prop);

console.log("doSomeInstancing.foo: " + doSomeInstancing.foo);

console.log("doSomeInstancing.prop: " + doSomeInstancing.prop);

doSomeInstancing.prop = "some value"; // add a property onto the object

doSomething.prototype.foo = "bar"; // add a property onto the prototype

正如之前提到的，在 JavaScript 中，函数（function）是允许拥有属性的。所有的函数会有一个特别的属性 —— prototype 。请注意，以下的代码是独立的（出于严谨，假定页面没有其他的JavaScript代码）。为了最佳的学习体验，我们强烈建议阁下打开浏览器的控制台（在Chrome和火狐浏览器中，按Ctrl+Shift+I即可），进入“console”选项卡，然后把如下的JavaScript代码复制粘贴到窗口中，最后通过按下回车键运行代码。

JavaScript 并没有其他基于类的语言所定义的“方法”。在 JavaScript 里，任何函数都可以添加到对象上作为对象的属性。函数的继承与其他的属性继承没有差别单机游戏三国可以换武器，包括上面的“属性遮蔽”（这种情况相当于其他语言的方法重写）。

但它不应该与构造函数 func 的 prototype 属性相混淆。被构造函数创建的实例对象的 [[Prototype]] 指向 func 的 prototype 属性。Object.prototype 属性表示 Object 的原型对象。

JavaScript 对象是动态的属性“包”（指其自己的属性）。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

尽管这种原型继承通常被认为是 JavaScript 的弱点之一，但是原型继承模型本身实际上比经典模型更强大。例如，在原型模型的基础上构建经典模型相当简单。

对于使用过基于类的语言 (如 Java 或 C++) 的开发人员来说，JavaScript 有点令人困惑，因为它是动态的，并且本身不提供一个 class 实现。（在 ES2015/ES6 中引入了 class 关键字，但那只是语法糖，JavaScript 仍然是基于原型的）。

本节是第四讲的第二十九小节，上一节我们为大家介绍了JavaScript的一个重要概念闭包，本节将继续介绍一个重要或者说JavaScript面向对象编程的关键概念原项链与继承。

游戏开发之旅-JavaScript对象基础

这看起来很像访问一个数组的元素，从根本上来说是一回事儿，你使用了关联了值的名字，而不是索引去选择元素。难怪对象有时被称之为关联数组(associative array)了——对象做了字符串到值的映射，而数组做的是数字到值的映射。

使用了点表示法(dot notation)来访问对象的属性和方法。对象的名字表现为一个命名空间(namespace)，它必须写在第一位——当你想访问对象内部的属性或方法时，然后是一个点(.)，紧接着是你想要访问的项目，标识可以是简单属性的名字(name)，或者是数组属性的一个子元素，又或者是对象的方法调用。例如：person.name[0]，person.gender，person.greeting()