吃豆人制作

吃豆人网页小游戏制作

测试链接：http://1.yuanxin0427.applinzi.com/%E6%88%90%E5%93%81/index.html

游戏介绍：支持浏览器：谷歌、IE等。触屏操作，点击屏幕箭头移动吃豆人吃豆，当吃下所有的豆子时游戏结束胜利，触碰到怪物时，角色死亡，吃到大豆子时吃豆人变大，可以吃怪物

运行截图

开发制作软件：Construct 2

游戏开发制作步骤

1. 制作背景
2. 制作素材（吃豆人、豆子、怪物）
3. 导入素材，场景布置
4. 添加运行脚本
5. 测试发布
6. 上传至新浪云服务器

一、制作背景

使用Microsoft PowerPoint 2010 制作游戏背景图

二、制作素材

所需素材：

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

因为游戏中的gif效果为逐帧动画，使用ps自行绘制所需素材的png序列图，如图

三、导入素材 布置场景

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. 创建完之后的所有组件如图

四、添加运行脚本

1. 定义两个全局变量分别为分数（score）和速度（speed）

1. 添加四个方向键按钮的控制，使按下按钮时，吃豆人移动，并且方向朝移动方向

2. 创建判断，判断吃豆人和怪物的相对位置，使怪物看向吃豆人，并且朝他移动

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

4. 当场上的豆子数量小于等于0时，游戏胜利

5. 添加吃超能豆和吃怪物效果
6. 当吃豆人和怪物的距离小于5像素时，吃豆人状态存活。并且当吃豆人与超能豆碰撞像素小于5像素，即为吃到超能豆。吃豆人变大，超能豆消失（destory）

7. 设置吃豆人的大小状态
8. 创建吃豆人的 intance variables：isbig（bool）和bigtime（number）

9. 增加无敌状态为3秒，并设置吃豆人的大小

10. 运行测试

五、测试发布

1. 保存为本地html文件代码包

六、上传发布

1. 注册新浪云服务账号，并创建一个新的sae云应用

1. 创建新版本1

2. 上传本地代码包

3. 进入云调试，打开index.html文件

4. 获取url

5. 使用草料二维码将链接生成为二维码

完成！

来源：oschina

链接：https://my.oschina.net/u/4460763/blog/3176320