第45/90步《前端篇》第9章 重构游戏对象等 第26课
今天学习《前端篇》第9章 重构游戏对象等 第26课 设计模式重构一：单例模式、观察者模式和组合模式学习目标将Game改写为单例模式在Game上应用观察者模式使用组合模式改写用户记分板模块主要知识点/技能点略实践疑难点略小结这节课主要通过改写Game类，建立了项目的UI框架，实现了VBox、HBox等布局窗口，并在实践过程中学习使用了三个设计模式（单例模式、观察者模式、组合模式），这三个模式是开发....
第34/90步《前端篇》第8章 重构记分板、背景、页面和游戏对象 第25课
今天学习《前端篇》第8章 重构记分板、背景、页面和游戏对象 第25课 重构游戏对象，这节课我们继续模块化重构，将页面类拆分到单独的文件中，清除一些不再需要的变量等，让游戏代码的结构更加合理。学习目标一个文件只定义一个类为Game添加#currentPage变量解决30秒超时限制不起作用的问题移除#gameIsOver变量主要知识点/技能点重构就像反比例函数，可以无限接近于坐标轴，但永远不可能相交....
第33/90步《前端篇》第8章 重构记分板、背景、页面和游戏对象 第24课
今天学习《前端篇》第8章 重构记分板、背景、页面和游戏对象 第24课 创建页面对象，这节课开始创建游戏页面。学习目标创建游戏结束页面创建游戏主页对象主要知识点/技能点略实践疑难点略小结这节课主要创建两个页面对象，这两个页面对象具有基本一致的结构，但还不够完善，并且两个类都还处在game.js一个文件中。
第32/90步《前端篇》第8章 重构记分板、背景、页面和游戏对象 第23课
今天学习《前端篇》第8章 重构记分板、背景、页面和游戏对象 第23课 创建游戏背景对象和游戏对象，这节课我们尝试创建游戏背景对象和游戏对象。学习目标创建背景对象准备创建游戏对象让音频管理者接管单击音效实现游戏对象Game类拓展：复习使用bind改变this对象主要知识点/技能点略实践疑难点略小结这节课主要对背景对象实现了模块化，根据旧代码创建了游戏对象，让音频管理者接管了单击音效，在实践过程中练....
第31/90步《前端篇》第8章 重构记分板、背景、页面和游戏对象 第22课
今天学习《前端篇》第8章 重构记分板、背景、页面和游戏对象 第22课 创建记分板模块，这节课我们将实现记分板对象的模块化。目前，游戏中还没有记分板对象，在屏幕下方只有两个分数，一个是用户的，一个是系统的，这节课将仿照挡板的设计方法创建一个记分板基类，然后再派生出两个子类，即用户记分板与系统记分板。学习目标实现两个记分板拓展：复习ES Module的导出与导入使用工具方法drawText隐藏分数变....
第15/90步《前端篇》第2章 编写一个简单的HTML5小游戏：打造游戏界面 第6课
今天学习《前端篇》第2章 编写一个简单的HTML5小游戏：打造游戏界面 第6课 绘制分界线，这节课复习一下之前已经练习过的 lineTo、moveTo 方法，在实践中学习 JS 语言在逻辑控制语句、函数、作用域、闭包等方面的基础知识和技能。学习目标分别通过lineTo和渐变色绘制分界线学习CSS 颜色值有哪些格式使用函数绘制间隔效果学习如何定义和使用函数使用循环绘制分界线拓展：使用比较运算符、i....
第14/90步《前端篇》第2章 编写一个简单的HTML5小游戏：打造游戏界面 第5课
今天学习《前端篇》第2章 编写一个简单的HTML5小游戏：打造游戏界面 第5课 绘制小球，这节课我们将完成圆的绘制。学习目标使用弧线绘制圆形；使用arc直接绘制圆形。主要知识点/技能点arcTo方法用于在画布上创建一段介于两个切线之间的弧线。arc方法可以用于创建圆或圆的一部分。实践疑难点无小结这节课比较简单，主要练习了arc、arcTo这两个方法，使用它们绘制了曲线图形。不但普通的圆形可以用它....
第13/90步《前端篇》第2章 编写一个简单的HTML5小游戏：打造游戏界面 第4课
今天学习《前端篇》第2章 编写一个简单的HTML5小游戏：打造游戏界面 第4课 绘制挡板，这节课我们开始练习几何绘制，完成一个基本的游戏元素——挡板的绘制。学习目标在画布上绘制直线；拓展：JS的8个基本数据类型，如何作类型判断给画布添加背景加厚挡板；拓展：JS中的数值类型、布尔类型是如何进行类型转换的给挡板添加圆角、阴影效果使用路径填充和矩形绘制挡板如何使用颜色渐变对象和图像填充材质绘制挡板拓展....
第12/90步《前端篇》第2章 编写一个简单的HTML5小游戏：打造游戏界面 第3课
今天学习《前端篇》第2章 编写一个简单的HTML5小游戏：打造游戏界面 第3课 绘制游戏标题，本节课从绘制一个文本开始，最终实现将游戏标题“挡板小游戏”展示在屏幕正中。学习目标安装与配置Visual Studio Code学习使用HTML标记拓展：如何使用const 关键字拓展：如何给代码添加注释如何改变字体、字号和颜色拓展：在font-family中要使用中文字体如何给文本添加文本样式（斜体、....
「用前端重返童年」为黑神话悟空定制红白机版游戏开始动画
正篇 — 用前端重返童年网络异常，图片无法展示|我之前没有用过canvas，也是一点一点写的，代码质量不要吐槽哈～因为我知道这一次代码质量不行Hancao present to Game Science in 2021.既然要出的是一个有情怀的前端作品，我也是花了很长时间在设计上，也试了很多方法去体现我的创意，但是效果并不是很好，边coding边摸索，最终就出来了本次作品的设计，正如我的标题所说....
本页面内关键词为智能算法引擎基于机器学习所生成，如有任何问题，可在页面下方点击"联系我们"与我们沟通。
阿里巴巴终端技术
阿里巴巴终端技术最新内容汇聚在此，由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界，将面向未来，制定技术策略和目标并落地执行，推动终端技术发展，帮助工程师成长，打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号：阿里巴巴终端技术，欢迎关注。
+关注