吃豆人制做

吃豆人網頁小遊戲製做

測試連接：http://1.yuanxin0427.applinzi.com/%E6%88%90%E5%93%81/index.html

遊戲介紹：支持瀏覽器：谷歌、IE等。觸屏操做，點擊屏幕箭頭移動吃豆人吃豆，當吃下全部的豆子時遊戲結束勝利，觸碰到怪物時，角色死亡，吃到大豆子時吃豆人變大，能夠吃怪物

運行截圖

開發製做軟件：Construct 2

遊戲開發製做步驟

1. 製做背景
2. 製做素材（吃豆人、豆子、怪物）
3. 導入素材，場景佈置
4. 添加運行腳本
5. 測試發佈
6. 上傳至新浪雲服務器

1、製做背景

使用Microsoft PowerPoint 2010 製做遊戲背景圖

2、製做素材

所需素材：

1. 怪獸gif
2. 吃豆人gif
3. 大豆
4. 小豆

由於遊戲中的gif效果爲逐幀動畫，使用ps自行繪製所需素材的png序列圖，如圖

3、導入素材 佈置場景

1. 建立工程 1.capx
2. 添加背景，調節工程和背景至適當大小並將圖層命名爲bg（background）後鎖定

1. 建立sprite吃豆人
2. 將吃豆人（player）的png序列導入

3. 設置循環方式loop爲yes

4. 同理導入怪物png序列 大豆 小豆 png序列

5. 建立4個按鈕組件分別爲上下左右，以此控制player的移動

6. 建立牆體!

7. 建立文字以用來介紹、打分
8. 將素材進行大小的合理縮放並放到合適位置，進行佈局

9. 修改吃豆人和怪物的屬性，使其不能穿越牆體。

10. 建立完以後的全部組件如圖

4、添加運行腳本

1. 定義兩個全局變量分別爲分數（score）和速度（speed）

2. 添加四個方向鍵按鈕的控制，使按下按鈕時，吃豆人移動，而且方向朝移動方向

3. 建立判斷，判斷吃豆人和怪物的相對位置，使怪物看向吃豆人，而且朝他移動

4. 添加吃豆功能，當吃豆人和都碰撞，score++，豆子destory

5. 當場上的豆子數量小於等於0時，遊戲勝利

6. 添加吃超能豆和吃怪物效果
7. 當吃豆人和怪物的距離小於5像素時，吃豆人狀態存活。而且當吃豆人與超能豆碰撞像素小於5像素，即爲吃到超能豆。吃豆人變大，超能豆消失（destory）

8. 設置吃豆人的大小狀態
9. 建立吃豆人的 intance variables：isbig（bool）和bigtime（number）

10. 增長無敵狀態爲3秒，並設置吃豆人的大小

11. 運行測試

5、測試發佈

1. 保存爲本地html文件代碼包

6、上傳發布

1. 註冊新浪雲服務帳號，並建立一個新的sae雲應用

2. 建立新版本1

3. 上傳本地代碼包

4. 進入雲調試，打開index.html文件

5. 獲取url

6. 使用草料二維碼將連接生成爲二維碼

完成！