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

简介: 今天学习《前端篇》第4章移植及优化的第13课,移植文本与图像。

image.png

今天学习《前端篇》第4章移植及优化的第13课,移植文本与图像。


学习目标


  • 了解多端文本渲染的异同;
  • 换一种方式实现渐变、阴影效果;
  • 了解材质重复渲染可能存在的问题;
  • 监听播放结束事件,使背景音乐循环播放;
  • 游戏元素的参数调整;
  • 在测试时静音。

主要知识点/技能点


  • 三端对阴影和颜色渐变的支持是不同的,在模拟器中支持阴影和渐变色绘制,但手机上却不完全支持。

  • PC微信客户端与微信开发发工具中的模块器是不同的执行环境。

  • 小游戏在五端(模拟器、PC微信客户端、Mac微信客户端、iOS手机端、Android手机端)的实现都是不同的,我们的产品最终是在手机端与微信客户端与用户见面的,除模拟器之外的四端是上线前必须要认真测试的环境。

  • 至少在2.19.5基础库版本中,Shadow和Gradient相关的功能都不好用,多端渲染结果可能不一致,在使用时要克制。

  • 如果我们真的需要在游戏中绘制渐变文本、使用阴影效果怎么办?可以使用图片代替,在图片上设计好渐变、阴影效果,然后直接在项目中使用,使用图片没有限制。

  • autoplay属性默认为false,将其设置为true,才会自动播放。

  • 游戏代码中像挡板宽度、背景音乐的大小和位置这样在多个地方用到的信息,都不宜写死,都应该声明为常量或变量。

实践疑难点


  • 注意小游戏中多端可用的本地路径写法:img.src = "static/images/mood.png"。
  • 关于左挡板在底部不显示的问题,真正的原因在于材质填充对象panelPattern,因为我们使用了不重复填充,纵向材质被填充完了,因此未被显示。
  • 使用pause方法暂停的音频,使用onStop监听不到停止事件,只有stop方法停止的音频,onStop才能监听到。

小结


现在,我们对原HTML5小游戏的基本移植已经完成了。


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