一石二鸟：开发游戏为申美国名校加码

一石二鸟：开发游戏为申美国名校加码

美本留学观察 2017-10-04

近年来，美国大学的计算机(Computer Science, CS)和电子工程(Electrical Engineering, EE)专业录取要求随着申请人数的增加逐渐水涨船高。但另一方面，国内的相关工程教育却基本是缺位的。为了弥补这种差距，陈欣老师在过去的几年里，通过我们的规划项目辅导了一批学员。通过身体力行的学习利用专业知识解决生活中的问题，他们走出了自己的舒适区。事实证明，学校对这份努力也是相当认可的。

为了帮助到更多的人，陈欣老师在此整理一些往年的成功项目经验，并同简化过的项目源代码一道与大家分享。希望能够抛砖引玉，给同学们一些思路和帮助，为之后的申请助一臂之力。毕竟短期看，CS/EE是在美国本土就业的捷径，能够较为迅速的收回教育投资；长远看，CS/EE的相关技能也能在诸多行业里起到点石成金之效。

问题

对于我们上一次的分享，有家长提出疑问，觉得孩子如果没有游泳队的特殊背景，是否就没办法做出那样“高大上”的项目呢？事实上不是这样子的。陈欣老师认为工程项目的含金量，很大程度上还是在于孩子自己的兴趣、创意和深入程度。而这几个元素都是可以在之后的美国大学申请过程充分体现出来的。相对而言，做项目的契机反而没有那么重要。原则上只要是生活中的、感兴趣的问题，都可以来用技术手段尝试解决。

我们今天分享的这个案例，之前对AADPS有关注的朋友们应该有些印象。这是一个对电脑游戏（具体来说，是点击式的冒险游戏）有特别热情的小姑娘。在我的指导下，她自己撰写了剧本，并用手机拍摄和录制了图片以及语音素材，最终以自己的日常生活为蓝本完成了生平第一个游戏。在十二月的校友面试中，她在自己的手机上向面试官展示了游戏，得到了很大的认可，最终也如愿入读了ED的名校。下面就让我们来看一看，这个游戏背后的原理是怎样的吧。

工具

JavaScript语言

JavaScript是一种动态、无数据类型的高级解释型语言。名字里带有的Java字样只是当初由于市场宣传考虑而做出的决定，虽然语法上的确与Java有一定相似性，但是本质上是完全不同的东西。JavaScript与HTML和CSS一起并称互联网三大核心技术。几乎所有的现代浏览器都支持JavaScript，因此是开发网页应用和游戏所必不可少的工具。随着JavaScript平台技术的改进，这一语言由于其方便快捷的特性，运用的领域也扩展到游戏编程、桌面程序和服务器应用等。

CreateJS

CreateJS是一组模块化的JavaScript库，用于开发基于HTML5现代互联网互动内容。几个主要组件有与HTML5 Canvas交互用于绘制图形和响应触控事件的EaselJS，生成过渡动画的TweenJS，播放声音和音乐的SoundJS以及加载资源素材的PreloadJS。可以在这里下载CreateJS。

Atom

由于JavaScript在浏览器里执行的特性，我们一般不需要单独的集成开发环境(IDE)，可以利用浏览器自带的调试工具进行调试。对于代码的编辑，可以使用Github开发的Atom。Atom是一个本身基于JavaScript的现代跨平台代码编辑器，可以任意更换主题或者安装插件以扩展新功能。可以在这里下载Atom。

原理

Bitmap位图对象

Bitmap是CreateJS提供的基础对象之一，用于实现在stage上渲染图像素材。Bitmap可以用图片的路径初始化，也可以用现成的HTML元素（比如已经被PreloadJS加载好的素材）来初始化。

通过stage的addChild方法，可以渲染位图对象。反过来使用removeChild可以从画面上移除已渲染的对象。

x与y位置坐标

x和y表示Bitmap在上层stage或者说容器里面的相对坐标，是大于零的整数。注意对于电脑和手机屏幕的绘图，坐标系和我们常见的数学平面直角坐标系略有不同。编程中的坐标系以屏幕的左上角为原点，然后y轴的方向要反过来。像下面这样。

regX与regY参考点坐标

reg在这里是参考点(registration point)的缩写。regX代表参考点相对于位图左上角原点在X轴上向右的位移，regY则代表参考点相对于位图左上角原点在Y轴上向下的位移。

举例来说，我们希望在stage的正中央显示一个素材。直接把x和y分别设置成stage的宽(width)和高(height)的一半，效果会是这样：

显然这不是我们需要的结果。因为是把素材左上角的原点和stage的中心对齐了，而我们是希望素材的中心对齐stage中心。因此应该同时把regX和regY分别设置成素材本身宽和高的一半，就能得到正确的结果：

scaleX与scaleY缩放比例

顾名思义，是在横轴和纵轴上对素材大小进行缩放。如果设置scale大于1，则是拉伸；小于1，则是压缩。一般没有特殊需求的话，会把scaleX和scaleY设置成同样的值，这样素材就会均匀的放大或者缩小。

面向过程编程与面向对象/事件编程

从本质上来说，计算机的编程都是面向过程的编程。这是因为我们目前所用到的所有电脑都是基于冯·诺伊曼结构(von Neumann architecture)，要求中央处理单元按顺序读取和处理指令。当然，指令本身可以有无条件或者有条件的跳转，然后在更高的层面上就可以进行循环和分支等复杂操作。但是究其更本，这一过程是线性的、机械的。

那么为了让程序的开发过程与人们生活的直观感受更加一致，也提升程序本身的可读性与可维护性。计算机科学家们提出了面向对象/事件编程的理论并开发了相关的工具。对这个新的编程模型而言，对象内部含有表述自身状态的数据或称属性，可以有一系列函数或称方法来与外界互动。更妙的是，程序员可以设定对象针对用户的一系列操作事件进行响应。仅当事件在不特定时刻发生以后，才执行对应的操作。当然，在幕布后面，本质上代码的执行还是过程式的。比如事件的响应实质上是由持续不断的循环来实现的。现代微处理器的速度是如此之快，能够间歇性的运行这个循环，定期检查每一个事件是否被触发，而不让用户感到丝毫卡顿。

就我们具体的例子而言，在loadScene函数里，通过循环的方式把每一个物件的mousedown事件（手机触摸屏的点击实质上也是触发mousedown事件）绑定到了onMousedown这个自定义的函数上。然后onMousedown自身根据所触发事件的对象和当前stage里各对象的状态来进行不同的响应。一个明显的例子是当拾起物件时，可以把画面背景切换到模糊的版本，造成视觉上的景深特效。

示例

上图展示了项目源码实际执行的场景。在运行miniweb.exe这个本机服务器之后，即可在浏览器地址栏里输入localhost:8000加载游戏。单击窗口中的箭头按钮后，游戏切换到示例场景。接着第一个物件——石板被自动点击拾起，可以在点击一下查看提示。依次找到三个物件并查看提示后示例场景结束并黑屏。

浏览器里单击F12可以打开调试工具。对于源代码的编辑，可以用Atom File菜单里的Add Project Folder...打开htdocs目录。其中index.html是游戏的载体网页，游戏主程序是src目录下的myapp.js文件。

思考

我们知道，大家平时是习惯竖屏使用智能手机的。但是对于游戏来说，很多情况下横屏的显示效果要更好。那么怎样来处理原始素材和坐标系，能够直接（指不打开屏幕依据重力感应自动旋转的选项）实现横屏显示的效果呢？对于不同屏幕尺寸，又怎样能确保物件不会错位？

对于流程较长的游戏，需要有中途保存和之后恢复进度继续游完的手段。可以通过哪些途径（提示：至少有三种以上方案）达到这个目的呢？

在目前的示例程序里，如果事先知道特殊物件的位置，就有可能跳过既定的流程。那么通过什么办法，在目前事件驱动的基础上可以引入更加有挑战性的解谜流程？

假定游戏已经完成了。你没有收费的打算，但是希望更多的人可以体验到你的作品，有哪些分发的途径呢？在游戏本身的设计里可以加入哪些元素来鼓励大家分享？

版权申明

本文为AADPS原创。我们每年夏季会更新最新美国大学本科申请文书题目和权威院校指南，欢迎把网站aadps.net加入电脑浏览器收藏夹。