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

简介: 今天学习《前端篇》第3章完成交互功能的第10课,控制游戏音效,添加单击音效和背景音乐。

image.png

今天学习《前端篇》第3章完成交互功能的第10课,控制游戏音效,添加单击音效和背景音乐。


学习目标


  • 学习使用<audio>标签;
  • 学习使用JS播放声音;
  • 添加循环背景音乐;
  • 创建背景音乐状态切换按钮;
  • 处理自定义图片按钮的互动;
  • 学习使用条件运算符。

主要知识点/技能点


  • 一般会在HTML5页面上添加一个来播放音频,audio 组件允许有多个 source 元素,每个 source 可以链接不同类型的音频文件,浏览器将使用第一个识别的格式。

  • ogg、mp3、wav是三种常见的音频格式,没有一个浏览器是同时支持三种格式的,如果想让标签表现正常,至少需要定义两个source。

  • HTML5 DOM API有一个 canPlayType 方法,它返回浏览器是否能播放指定类型的音频/视频文件,用这个方法可以实现<source>标签实现的功能。canPlayType返回三种值:"probably"、"maybe"、""(空字符串)。

  • 静音按钮需要有两个状态:一个为常态,单击后音乐停止;另一种是静音态,单击后音乐恢复播放。

  • 可以在这个游戏资源网站上查找、下载背景音乐素材:opengameart.org/

  • 可以从这个游戏资源网站上查找、下载图标,网址为:www.flaticon.com/

  • Audio对象并没有playing或isPlaying这样的属性,但我们可以通过另外两个属性组合判断,如果 currentTime 大于 0,并且 paused 为 false,可以认为音频在播放。

  • 在 HTML开发中,createElement 方法通过指定元素名称创建一个元素,其调用语法为:

document.createElement(nodeName)

  • 浏览器标签栏的图标可以由下面代码控制:

<link rel="shortcut icon" href="favicon.ico">

  • 事实上当绘制对象只有一个时,也可以直接使用 drawImage 绘制,不需要创建离屏画布。
  • 当在画布上判断点击了哪个对象时,我们可以在监听后依据单击点的位置判断单击的是哪一个对象。

  • 条件运算符? : ,有时也叫三元运算符或三目运算符,其标准语法为:

let result = expression ? sentence1 : sentence2

  • 如果expression为true,执行sentence1,否则执行sentence2。

实践疑难点


有时候HTML5页面中的Canvas缩放,会影响单击位置的判断,这时候要注意重设画布的原始大小。


小结


阶段性运行截图:


image.pngimage.png

image.png

目录
相关文章
|
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

相关产品

  • 云迁移中心