HTML5游戏_基于DOM平台跳跃小游戏开发
动画帧
- 视频讲解
HTML5基于DOM平台跳跃小游戏开发
-
效果图
-
本章的知识点:
-
window.requestAnimationFrame() 告诉浏览器你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画.该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行
- requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
- 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
-
requestAnimationFrame(回调函数) 简单说就是在浏览器每次刷新时请求动画帧进行调用回调函数,即浏览器每帧调用指定的回调函数更新动画.同时每个游戏场景基本只定义一个requestAnimationFrame.
-
Math.min(数字a, 数字b) 返回参数中最小的值.
- 我们来定义动画帧显示的函数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html跳跃小游戏</title>
</head>
<body>
<!--在body添加一个显示浏览器fps的标签-->
<h3 id="fps"></h3>
<!--JS脚本-->
<script>
//运行帧动画函数 传递 执行每帧动作方法
运行帧动画(function(每帧执行时间)
{
/*这个方法是游戏里每帧运行的所有内容,包括动画/判断碰撞/按键监听等*/
//计算每秒帧数并保留两位小数
document.getElementById("fps").innerHTML = "FPS=" + (1 / 每帧执行时间).toFixed(2);
//执行每帧动作方法 返回false时结束运行帧动画, 返回其他则继续执行动画
return true;
});
/**
*@描述: 运行帧动画 函数
*@传参: 执行每帧动作方法(执行每帧动作的方法,返回布尔值变量)
*@参数:
*@返回值: 无
*@创建人: 王天宇
*@创建时间:2021/02/24
*@修改人和其它信息:
**/
function 运行帧动画(执行每帧动作方法)
{
//声明变量 上一帧时间 记录上一帧执行时的时间
let 上一帧时间 = null;
//动画帧 requestAnimationFrame调用方法 会传递 当前帧时间 参数单位时毫秒
function 动画帧(当前帧时间)
{
//声明变量 停止动画
let 停止动画 = false;
//判断 上一帧时间=null 说明当前时第一帧
if (上一帧时间 != null)
{
//声明变量 每帧执行时间 保存计算得到的每帧执行时间单位秒
const 每帧执行时间 = Math.min(当前帧时间 - 上一帧时间, 100) / 1000;
//执行每帧动作方法
停止动画 = 执行每帧动作方法(每帧执行时间) === false;
}
//将上一帧时间=当前帧时间;
上一帧时间 = 当前帧时间;
//判断是否停止动画
if (!停止动画)
{
//继续调用动画帧
requestAnimationFrame(动画帧);
}
}
//window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画.
requestAnimationFrame(动画帧);
}
</script>
</body>
</html>
运行效果
- 最后别忘了把 运行帧动画 函数 写成 运行帧动画.js文件
- B站讲解视频:https://www.bilibili.com/video/BV1xr4y1A7zG/
1209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
