第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

目录
相关文章
|
1月前
|
移动开发 编解码 前端开发
摸鱼必备-80款在线HTML小游戏
本文推荐了80款精彩的HTML5在线小游戏,涵盖益智、冒险、射击、体育等多种类型,适合各年龄段玩家。无需下载安装,随时随地畅玩。地址:[https://game.share888.top/](https://game.share888.top/)
170 7
摸鱼必备-80款在线HTML小游戏
|
25天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
32 6
|
29天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
42 5
|
1月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
36 4
|
1月前
|
移动开发 HTML5
HTML5熊猫弹跳手机小游戏源码
一款html5手机端小游戏源码,熊猫跳跃小游戏源码下载。熊猫脚底有弹簧,长按变化力度跳跃,计分游戏,html5手机熊猫也疯狂小游戏源代码。
47 5
|
1月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
52 4
|
1月前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
78 4
|
1月前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
30 2
|
1月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
59 0
html5+three.js公路开车小游戏源码
|
1月前
|
前端开发 JavaScript API
前端开发的未来:从静态页面到动态交互的演变
前端开发的未来:从静态页面到动态交互的演变