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


目录
相关文章
|
4天前
|
移动开发 编解码 前端开发
摸鱼必备-80款在线HTML小游戏
本文推荐了80款精彩的HTML5在线小游戏,涵盖益智、冒险、射击、体育等多种类型,适合各年龄段玩家。无需下载安装,随时随地畅玩。地址:[https://game.share888.top/](https://game.share888.top/)
47 7
摸鱼必备-80款在线HTML小游戏
|
5天前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
13 3
|
14天前
|
搜索推荐 前端开发 UED
哪些 HTML 全局属性在 SEO 优化中比较重要?
【10月更文挑战第27天】这些HTML全局属性通过不同的方式为搜索引擎提供了更丰富、准确的页面信息,有助于提高页面的可索引性、相关性和用户体验,从而在SEO优化中发挥着重要的作用。开发者应充分重视并合理运用这些属性,以提升网站在搜索引擎中的排名和流量。
|
9天前
|
移动开发 HTML5
HTML5熊猫弹跳手机小游戏源码
一款html5手机端小游戏源码,熊猫跳跃小游戏源码下载。熊猫脚底有弹簧,长按变化力度跳跃,计分游戏,html5手机熊猫也疯狂小游戏源代码。
27 5
|
14天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
35 6
|
10天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
34 0
html5+three.js公路开车小游戏源码
|
16天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
46 7
|
14天前
|
前端开发 搜索推荐 算法
|
15天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
29 2
|
22天前
|
缓存 前端开发 JavaScript
前端性能优化:打造流畅用户体验的秘籍
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘籍
32 3