第16/90步《前端篇》第3章 编写一个简单的HTML5小游戏:完成交互功能 第7课

简介: 今天学习《前端篇》第3章 编写一个简单的HTML5小游戏:完成交互功能 第7课 实现动画:让小球动起来,这节课将实现动画,让小球动起来。

image.png

今天学习《前端篇》第3章 编写一个简单的HTML5小游戏:完成交互功能 第7课 实现动画:让小球动起来,这节课将实现动画,让小球动起来。


学习目标


  • 学习使用定时器实现动画;
  • 学习JavaScript的异步执行机制;
  • 了解JS的13种复合赋值运算符;
  • 学习清屏;
  • 学习实现简单的碰撞检测;
  • 复习使用if else if 语句;
  • 学习使用requestAnimationFrame函数实现动画;

主要知识点/技能点


  • 在 JS 语言中,有两个定时器方法可以让小球动起来,一个是 setInterval,另一个是 setTimeout,前者用于实现每隔一段时间就执行某一段代码,后者用于实现延时执行某一段代码。

  • setInterval 以指定毫秒数为间隔,不停地执行回调函数;setTimeout 在暂停指定毫秒数后,执行回调函数,且仅执行一次。

  • JS 是单线程,同一时间只能执行一个任务,同步任务在主线程中会依次执行。在主线程上发起的异步操作,会交给另外一个看不见的异步线程执行和管理,不会阻塞主线程的执行。

  • 当主线程空闲的时候(例如每个帧渲染周期的空隙),它会去异步线程那里询问,有没有可被执行的异步代码。如果某个异步操作(例如 Ajax 网络请求的回调函数,或者某个定时器的回调函数)可以执行了,便会被放到主线程队列中排队执行。

  • 定时器是一种异步任务。在浏览器宿主环境中有一个独立的定时器模块,定时器的延迟时间是由定时器模块管理的,如果某个定时器时间到了,它的回调函数就会被加入主线程队列中。

  • JS 有 13 种复合赋值运算符,复合赋值运算符等于先运算,再以运算结果赋值。

  • 在 Canvas API中,clearRect 方法可以清空画布上给定矩形区域内的像素。

  • 如果分支足够多,可以有许多个 else if 存在。一般将出现概率最高的条件分支放在最上面,这样可以减少条件检查的次数。

实践疑难点


  • 在实际动画时,不但变化的小球需要重绘,其它静止对象也需要重绘。

  • 挡板不见了,原因在于我们以500毫秒的间隔执行render函数,这个时间太短,不足以让img的onload回调函数(第4行)在每帧都得到执行。

  • 我们可以将画布四周看作墙壁,当小球触达四周边线时,让其反弹。反弹涉及的变化,是速度方向的变化。当球触及顶边或底边时,x 轴方向速度不变,y轴方向速度取反;当触及左右边界时依此类推,均是在边线垂直的方向改变运动方向。

  • 每次小球在碰到边界时,有半个球几乎都会陷入墙壁中。这是由于碰撞检测的坐标是以小球的圆心为准的,如果以圆弧边界进行检测,或者将画布的四周边界值都减少一个小球半径的宽度,问题应该就会解决。

小结


这节课主要使用擦除重绘的方法让小球动了起来,并让小球与四壁之间实现了简单的碰撞检测,在实践过程中我们学习了JS的定时器、异步执行机制、复合赋值运算符、if else逻辑控制语句及优化动画性能的requestAnimationFrame全局函数。


目录
相关文章
|
6天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
19 1
|
9天前
|
前端开发 JavaScript 数据安全/隐私保护
前端秘法基础式(HTML)(第二卷)
前端秘法基础式(HTML)(第二卷)
|
9天前
|
前端开发
前端秘法基础式(HTML)(第一卷)
前端秘法基础式(HTML)(第一卷)
|
9天前
|
前端开发 JavaScript Windows
前端秘法引言(配置vscode, 以及html的基础)
前端秘法引言(配置vscode, 以及html的基础)
|
10天前
|
移动开发 前端开发 HTML5
分享83个Html前端模板,总有一款适合您
分享83个Html前端模板,总有一款适合您
23 4
|
10天前
|
移动开发 前端开发 程序员
分享90个Html前端模板,总有一款适合您
分享90个Html前端模板,总有一款适合您
11 2
|
10天前
|
移动开发 前端开发 JavaScript
分享79个Html前端模板,总有一款适合您
分享79个Html前端模板,总有一款适合您
15 0
|
10天前
|
移动开发 开发框架 前端开发
分享78个Html前端模板,总有一款适合您
分享78个Html前端模板,总有一款适合您
10 0
|
11天前
|
移动开发 前端开发 JavaScript
分享76个Html前端模板,总有一款适合您
分享76个Html前端模板,总有一款适合您
17 5
|
11天前
|
移动开发 前端开发 新能源
分享80个Html前端模板,总有一款适合您
分享80个Html前端模板,总有一款适合您
13 0

相关产品

  • 云迁移中心