吃豆人制做

吃豆人网页小游戏制做

测试连接：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. 使用草料二维码将连接生成为二维码

完成！