近年来，美国大学的计算机(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文件。

思考

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

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

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

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

以上就是我们今天分享的案例，欢迎大家登陆网站后下载项目源码，通过实践来加深理解。简单的疑问可以评论在文章下，陈欣老师将会在有空时予以解答。如果对我们的服务项目感兴趣，希望获取陈欣老师一对一指导的，可以加上小助手微信号aadps1。

重要通知

本文为AADPS原创，原始发布地址是https://aadps.net/2021/10164.html。如发现其他自媒体盗用文章，欢迎粉丝告知或协助我们举报。