近年來，美國大學的計算機(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。如發現其他自媒體盜用文章，歡迎粉絲告知或協助我們舉報。

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的计算机美国学游戏开发,【工程与计算机】一石二鸟：开发游戏为申美国名校加码...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。