第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小游戏的基本移植已经完成了。


目录
相关文章
|
2天前
|
机器学习/深度学习 前端开发 JavaScript
探寻前端巨变:从HTML到现代框架的发展历程
探寻前端巨变:从HTML到现代框架的发展历程
12 2
|
2天前
|
前端开发 JavaScript Go
构建高性能Web应用:优化前端资源加载
在构建现代Web应用时,优化前端资源加载是至关重要的一步。本文将介绍一些提升Web应用性能的关键策略,包括减少HTTP请求、压缩和合并资源、使用CDN加速、以及异步加载技术等。通过实施这些优化策略,开发人员可以显著提升网站的加载速度和用户体验。
|
3天前
|
前端开发 JavaScript UED
如何优化前端网页加载速度
在当今互联网时代,网页加载速度成为了用户体验的重要指标之一。本文将介绍一些优化前端网页加载速度的方法,包括压缩资源、使用CDN加速、延迟加载等技术手段,帮助开发者提升网页性能,提高用户满意度。
|
10天前
|
缓存 前端开发 UED
优化前端性能的六大技巧
在当今互联网高速发展的时代,优化前端性能是每个开发者都必须重视的任务。本文将介绍六大实用的技巧,帮助开发者提升前端应用的性能,提升用户体验。
|
11天前
|
存储 缓存 前端开发
前端如何利用indexDB进行数据优化
使用IndexedDB作为浏览器内置的客户端数据库,用于存储大量数据和实现离线支持。它能缓存常用数据,减少服务器请求,提高用户体验。IndexedDB支持数据索引、复杂查询及版本管理,允许离线操作并同步到服务器。但需熟悉其异步API,可借助Dexie.js、localForage等库简化使用。
|
13天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
20 1
|
14天前
|
机器学习/深度学习 前端开发 算法
使用机器学习优化前端用户体验
在当今高度竞争的互联网市场中,用户体验是至关重要的。本文将探讨如何利用机器学习技术来优化前端用户体验,从而提高用户满意度和留存率。我们将介绍如何利用机器学习算法分析用户行为数据,优化网站性能和内容推荐,以及如何实时调整界面设计和交互方式,从而实现个性化、智能化的用户体验。
|
15天前
|
前端开发 算法 JavaScript
如何优化前端性能:探索图片压缩与延迟加载技术
本文深入探讨了前端性能优化中的关键问题:图片压缩与延迟加载技术。通过介绍图片压缩的原理和方法,并结合实例说明了如何有效减少图片大小、提升加载速度;同时,详细解析了延迟加载技术的实现原理及其在提高页面加载性能中的作用,为前端开发者提供了实用的优化方案。
|
17天前
|
缓存 前端开发 JavaScript
如何优化前端网页加载速度:7个实用技巧
在当今互联网时代,网页加载速度对用户体验至关重要。本文将介绍7个实用的技巧,帮助前端开发者优化网页加载速度,提升用户体验。从压缩资源到异步加载,从图片优化到缓存策略,这些技巧将帮助你在前端开发中取得更好的效果。
|
25天前
|
前端开发 JavaScript UED
如何优化前端网页性能提升用户体验
本文将探讨如何通过一系列前端优化技术,提高网页加载速度、减少资源请求次数,从而优化用户体验。我们将介绍一些常用的性能优化技巧,包括资源压缩、懒加载、CDN 加速等方法,帮助开发者更好地构建高效、流畅的前端网页。