计算机专业实用技能导引 (17).pdf

《计算机专业实用技能导引 (17).pdf》由会员分享，可在线阅读，更多相关《计算机专业实用技能导引 (17).pdf（2页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页游戏开发 相信大家对网页游戏并不陌生从2048、合成大西瓜，到课前准备中展示的三个小游戏。在这堂课中，我们将了解一些网页游戏开发的基本知识和技术，并通过实例上手一些简单的网页小游戏。所有课堂演示的完整代码均会在课后下发。搭建场景 利用 DOM 元素 示例：connect4/playground/index.html要点：document对象中getElementById、getElementsByClassName、querySelector等方法可以实现 DOM 元素的选择。你也可以使用更现代的工具，如 jQuery 等。修改 DOM 元素对象的innerHTML成员的值，可以改变这个

2、DOM 元素的子元素。通过设置div元素的样式，可以绘制出矩形、圆形、三角形等基本图案。缺点：能够绘制的图形有限，且无法表达复杂的位置关系。JavaScript 与 DOM 元素交互的性能较低。只能绘制二维场景。利用 Canvas 示例：examples/canvas.html要点：canvas元素的默认宽度为300px，默认高度为150px。直接使用canvas元素的width和height属性进行设置即可。HTML 中的canvas元素只是图形容器，您必须使用脚本来绘制图形。通常需要调用canvas元素对象的getContext方法来获取绘制图形的上下文。缺点：添加文本的操作较为复杂。没有

3、简单的清除指定元素的方式，因此通常只适用于绘制 2D 静态图片。利用 three.js 示例：examples/threejs.html要点：three.js基于 WebGL。场景用于描述 3D 物体的摆放，相机则确定了观察场景的视角。three.js实质上是创建了一个canvas对象，并把它添加到 DOM 中。缺点：性能受制于 JavaScript 和 WebGL。虽然在业界应用广泛，但并不是一个真正的游戏引擎。响应事件 Hilo 框架 示例：flappy-bird/index.html要点：资源管理是游戏引擎的重要功能。Hilo 并没有提供完备的资源管理功能，但可以通过Hilo.LoadQueue对象创建资源加载队列。在 Hilo 中，游戏中的物体和游戏的场景都是一个个对象，继承自对应的 Hilo 基类。它的构造函数可以接收一个字典作为参数，用来进行初始化。在任何游戏引擎中，onUpdate等方法都是至关重要的，因为游戏场景中通常充满了需要利用onUpdate实时渲染的动态元素。缺点：全是代码，没有图形化界面，毫无易用性。只适合用来写一些小型游戏。其它框架 网页游戏开发框架呈现出了“百花齐放，百家争鸣”的场面。在此列出一些常见的框架，感兴趣的同学可以自己探索。PlayCanvasCocosUnityUnreal