第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

目录
打赏
0
0
0
0
2
分享
相关文章
|
11天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
31 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
83 25
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
摸鱼必备-80款在线HTML小游戏
本文推荐了80款精彩的HTML5在线小游戏,涵盖益智、冒险、射击、体育等多种类型,适合各年龄段玩家。无需下载安装,随时随地畅玩。地址:[https://game.share888.top/](https://game.share888.top/)
787 7
摸鱼必备-80款在线HTML小游戏
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
70 6
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
91 5
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
82 4
|
3月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
111 11
HTML5熊猫弹跳手机小游戏源码
一款html5手机端小游戏源码,熊猫跳跃小游戏源码下载。熊猫脚底有弹簧,长按变化力度跳跃,计分游戏,html5手机熊猫也疯狂小游戏源代码。
71 5
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
98 4

热门文章

最新文章

  • 1
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    21
  • 2
    VSCode AI提效工具,通义灵码前端开发体验
    58
  • 3
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    4
  • 4
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    34
  • 5
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    65
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    31
  • 7
    巧用通义灵码,提升前端研发效率
    96
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    148
  • 9
    详解智能编码在前端研发的创新应用
    106
  • 10
    智能编码在前端研发的创新应用
    83