第21/90步《前端篇》第4章 编写一个简单的HTML5小游戏:移植及优化 第12课

简介: 今天学习《前端篇》第4章移植及优化的第12课,移植音频和事件。

image.png

今天学习《前端篇》第4章移植及优化的第12课,移植音频和事件。


学习目标


  • 处理getElementById is not a function错误;
  • 处理Audio is not defined错误;
  • 处理Audio错误:canPlayType is not a function;
  • 处理currentTime错误:currentTime是只读属性,完成音频移植;
  • 处理Image is not defined错误;
  • 学习条件运算符和短路评估表达式;
  • 认识小游戏的触摸事件:TouchStart、TouchMove、TouchEnd和TouchCancel;
  • 了targetTouches、touches和changedTouches的区别;
  • 改写click事件与mousemove事件;
  • 了解小游戏的运行环境;

主要知识点/技能点


  • 在微信小游戏中是没有DOM API的,原来在HTML5中我们使用getElementById查询Canvas对象,现在getElementById接口不能使用了,但我们可以用wx.createCanvas代替。

  • 原来由getElementById获取预置的img对象的代码,可以改用wx.createImage创建。

  • 微信小游戏/小程序接口均是以wx开头的,并且可以在任何一个JS文件中使用,无须事先引入。
  • 在小游戏中,Audio无法通过new关键字实例化,但可以使用wx.createInnerAudioContext这个方法创建一个InnerAudioContext 对象,用其代替HTML5中的Audio对象。

  • 小游戏不需要像浏览器那样做音频格式兼容,Android与iOS支持的音频类型有4类:m4a、aac、mp3和 wav。

  • 微信小游戏的Canvas API尽管与HTML5很像,但还是有差异的。在HTML5中,Audio的currentTime是一个读取属性,在小游戏中,InnerAudioContext对象的currentTime属性是只读的。

  • 在小游戏开发中,与Audio对象一样,Image也不能直接使用new关键字实例化,new Image()可以由wx.createImage()方法代替。

  • 两种短路评估表达式:(1)a && b;(2)a || b。

  • 小游戏有自己的事件体系,HTML5这种以addEventListener方法添加事件监听的方式,是不被支持的。在小游戏中,当用户手指触屏时,会产生TouchStart、TouchMove、TouchEnd和TouchCancel这 4类事件,分别对应了触摸开始、移动、完成触摸事件和取消触摸。

  • targetTouches、touches和changedTouches都是触摸事件的触摸点列表,但不同的是:(1)touches是当前屏幕上所有触摸点的集合;(2)targetTouches是绑定事件的那个元素上的触摸点的集合;(3)changedTouches是触发事件时发生改变的触摸点的集合。

  • 与HTML5中的鼠标事件不同的是,小游戏中与触摸事件相关的对象不是一个对象,而是一个事件对象的数组。

  • 一般用touchEnd改写click事件,用touchMove改写mousemove事件。

实践疑难点


  • 注意changedTouches与touches的区别,对于wx.onTouchEnd监听,我们要从changedTouches中取事件对象;对于wx.onTouchMove监听,我们才可以从touches中取事件对象。

小结


小游戏三端的脚本执行环境以及用于渲染环境是各不相同的。由于三端执行JS及渲染视图的环境存在差异,所以在模拟器中正常的代码,在手机上不一定正常,这在测试中要注意。手机上的非正常效果如下所示:



image.png

image.png

目录
相关文章
|
5天前
|
前端开发
从零开始学习前端开发:HTML基础
HTML是前端开发的基础,它是网页内容的结构化描述语言。本文将介绍HTML的基本语法、标签和元素,以及如何使用它们来创建简单的网页。
|
7天前
|
缓存 前端开发 JavaScript
如何优化前端性能:关键步骤和技巧
提高前端性能是网站和应用程序开发中至关重要的一步。本文将介绍一些关键的优化步骤和技巧,帮助开发人员有效地提升前端性能,包括资源压缩、减少HTTP请求、使用CDN加速、优化图片等方面的方法。
|
1天前
|
缓存 前端开发 JavaScript
前端性能优化
在前端重构项目中,为提升用户体验和页面响应速度,采用React框架。遇到页面加载慢和白屏问题,主要归因于数据渲染效率低和状态管理复杂。通过路由懒加载减少初次加载时间,使用Redux Toolkit和immer优化状态管理,配合精细化数据缓存策略。此外,借助React.memo和shouldComponentUpdate避免不必要的渲染,并实施预加载和预渲染策略。关键在于性能意识、技术工具选择、状态管理和用户体验优先。前端开发是技术、用户体验和性能的综合艺术,需持续学习和优化。
|
1天前
|
Web App开发 前端开发 UED
前端开发之移动端体验优化
在一个前端项目中,面对移动端网页加载慢的问题,团队使用Chrome开发者工具和Lighthouse进行性能分析,发现资源加载、重绘回流和首屏空白是瓶颈。通过压缩图片和视频、使用懒加载、优化CSS样式、预加载内容及利用阿里云CDN,成功提升加载速度,改善用户体验,强调了前端性能优化的关键性。
74 0
前端开发之移动端体验优化
|
1天前
|
缓存 监控 前端开发
前端性能优化以及解决方案
前端性能优化关乎用户体验和网站竞争力,包括减少HTTP请求、使用CDN、压缩资源、延迟加载、利用浏览器缓存等策略。制定优化计划,使用监控工具,遵循最佳实践并持续学习,能提升网站速度和稳定性。
16 0
|
2天前
|
前端开发 JavaScript UED
探索前端性能优化技巧:提升用户体验的关键
在现代Web应用程序开发中,前端性能优化变得至关重要。本文将介绍一些关键的前端性能优化技巧,帮助开发者提高网页加载速度、响应能力和用户体验。我们将探讨优化资源加载、减少HTTP请求、优化代码结构等方面的方法,并分享一些实用的工具和技术,让您的Web应用程序更快、更高效。
|
3天前
|
存储 缓存 监控
深入理解前端性能优化:从网络到渲染
网络优化包括减少HTTP请求、使用HTTP/2、开启GZIP压缩和缓存策略。资源加载优化涉及懒加载、预加载和预读取。渲染优化建议使用Critical CSS、减少CSS和JavaScript阻塞以及避免强制同步布局。Service Worker实现离线存储,性能监控使用Lighthouse等工具。动态导入和代码拆分减少初始加载时间,响应式图片适应不同设备。Web Workers处理耗时任务,避免内存泄漏。
25 3
|
7天前
|
缓存 前端开发 JavaScript
优化前端性能:提升网页加载速度的10个技巧
在当今互联网时代,网页加载速度已成为用户体验的重要指标之一。本文将介绍10个有效的前端优化技巧,帮助开发人员提升网页加载速度,提升用户体验,包括减少HTTP请求、压缩资源、优化图像等方面的实用建议。
|
7天前
|
前端开发 测试技术 持续交付
《跨界合作:前端与后端如何优化协作效率》
在当今软件开发领域,前端和后端开发团队通常是分开工作的,但他们的协作质量直接影响着项目的成功与否。本文将探讨如何通过优化前端与后端的协作方式,提高开发效率和项目质量,从而实现更好的跨界合作。
|
7天前
|
缓存 前端开发 UED
实战指南:如何优化前端性能提升用户体验
本文探讨了在当今互联网时代,前端性能优化对于提升用户体验的重要性,以及如何利用各种技术手段实现前端性能的优化。通过介绍前端性能优化的原则、常见的性能优化技巧和工具,以及实际案例分析,帮助开发者深入了解并掌握提升前端性能的方法,从而提升网站的加载速度、响应速度,提高用户的满意度和留存率。