核心步骤
笨鸟设计思路
一: 游戏js
初始化帧数 设置一个run的游戏入口 里面开个定时器执行 游戏开始的函数 还需要游戏暂停 游戏结束函数
二:帧率js
初始化 总帧数 开始时间 开始帧数 真实帧数 里面定义一个方法计算真实帧数(帧数统计函数)
该函数让总帧数每帧都递增 记录当前时间 只有当前时间-开始时间>1S的时候 才开始计算真实帧率
计算方法是 总帧数-开始的帧数 最后别忘了更新开始时间和开始帧数 开始时间=当前时间 开始帧数等于当前总帧数
然后在Game js 文件初始化里面 实例化该帧率对象 顺便获取上下文绘图 传入ID获得 然后在游戏开始函数把帧数和时间
绘制到画布上 利用实例化对象执行帧数统计函数 当然有画布肯定需要清屏 把真实帧数和总帧数绘制到画布上
三:加载本地数据
LoadSourceTools
初始化 一个对象用来保存所有的加载出来的图片 ,定义一个方法用来加载本地图片
利用AJAX 创建请求对象 监听状态码 onreadystatechang 判断状态码
请求对象.readyState==4 请求对象.status==200 表示请求成功
定义一个变量记录加载图片数量 获取请求的数据 请求对象.responseText
把获得数据转换为json格式 JSON.parse 建立一个图片数组接收json数据里面的.images
遍历数组创建图片对象 src 索引 在每一张图片加载完后 记录图片的个数++
拿到数据里面的对应的名字 然后给用来保存图片的对象动态添加名字把image传入到该对象中
通过一个回调函数来获得该对象 ,图片数组的长度,图片的个数
最后请求对象通过.open('get',数据名称) 获得数据
请求对象.send(null) get方法可以不写字符串
最后在游戏js 初始化中 实例化加载本地数据对象 调用该方法 获取里面的图片
四:绘制背景 并且运动
初始化所需要的数据
图片资源 x坐标 y坐标 图片宽高 速度用来移动 总格数,当前页面显示的个数
定义3个方法 一个用来渲染 一个用来让图片移动 一个停止
渲染方法 需要画2倍的个数 因为需要无限循坏 通过drawImage画
具体参数为 当前图片 x坐标+对应i*宽度, y坐标 图片宽高
更新方法 让x坐标按照指定的速度递减 当走过一个一个屏幕也就是总个数*图片宽是后,要让x坐标回到原点
达到无限循环效果
停止方法就是让速度变为0
在游戏js 的游戏运入口放法里面实话对应的对象 通过之前指定的图片名称 在初始化里面判断所有图片是否加载
完成,加载完成就调用run方法 然后在游戏运行方法里面执行对应的渲染和移动方法
第五步 绘制管道
初始化所需要的数据,图片资源 一个控制管道口方向的变量 图片宽度 图片的高度
x坐标 画布最右侧 y坐标口向下为0 口向上为画布高度-(地板+图片高度) 速度
定义三个3个方法 和绘制背景一样 不同的是 更新的时候当坐标x小于图片的宽时候就
移除管道 在游戏js 入口定义一个数据把实例化对象装起来 每100帧绘制一个管道 调用
渲染和移动方法
六步 小鸟的自由落体
x坐标 画布1/3 y坐标100 宽图片宽 高图片高 翅膀状态 对应图片的三个状态
用012表示 翅膀煽动的频率 小鸟下落时当前的总帧数 下落速度
下落速度有个公式 0.001*0.5*9.8*Math.pow(帧数差,2)
在游戏js 初始化实例化小鸟对象 在游戏运行调用移动和渲染方法
七步 小鸟自由落体加旋转
初始化一个旋转角度
在渲染方法里面先把坐标位移到图片中心再旋转
在移动方法里面角度+1
八步 点击让小鸟飞
初始化一个小鸟状态,记录小鸟当前的状态,0为自由落体,1为点击向上飞 再定义一个空气阻力,
这个空气阻力用来判断假如用户不点击 会把小鸟状态转换为自由落体
飞到画布顶端判断不让飞出顶端
定义一个点击方法 用来改变小鸟的状态 改变角度,头向上,每次点击初始化空气阻力
九步 碰撞检测
初始化一个变量用来记录小鸟是否死亡 小鸟死亡的状态 碰到地板和管道 都调用gameOver函数
小鸟本身和管道和小鸟关系
小鸟本身控制 碰到地板游戏结束 调用gameOver函数
管道和小鸟 碰到游戏结束 具体关系用图表示
十步 鸟死亡特效加游戏结束
鸟方法 初始化一个变量记录鸟是否死亡 一个动画索引
在渲染方法判断鸟是否死亡 定义死亡图片宽高 定义一个列和行用来截取图片位置 把图片绘制到
对应小鸟死亡的位置上 把游戏结束的图片绘制到画布上 return 结束函数
在移动方法让动画索引递增,当动画索引等于列*行的时候就结束游戏 return 结束程序
废话不多说 看代码
游戏主体文件
帧率计算文件
因为没服务器,加载本地数据
背景图片
管道
小鸟
碰撞检测图示
小鸟自己碰撞 地板和天空
管道和小鸟之间的关系
