帅比九日-CSDN博客

原创【教程向】从零开始创建浏览器插件（六）实战篇

至此我们已经完成了全部功能，在浏览器中加载该文件夹即可在页面中测试功能。本文通过一个实际的例子展示了如何在浏览器扩展中使用IndexedDB进行数据的存储与管理。通过封装操作逻辑，我们可以更加方便地在扩展中进行数据处理，从而增强扩展的功能和用户体验。希望这篇文章能帮助你理解并实践IndexedDB在浏览器。

2024-05-13 19:32:11 1856 1

原创一篇看懂！Docker + Nginx 零基础部署前端，从此告别“我电脑上能跑”

尝试按照步骤操作，遇到问题欢迎留言讨论。下一步，你可以探索 Docker Compose、持续集成（CI/CD），向更高效的部署迈进！，带你理解 Docker、Nginx 的核心概念，并手把手教你完成一次前端部署。

2025-04-08 15:39:45 699

原创【canvas】一键自动布局：如何让流程图节点自动找到最佳位置

通过力导向算法实现的自动布局功能，彻底改变了流程图设计的体验。用户只需关注业务逻辑和节点连接关系，而无需花时间在繁琐的布局调整上。这不仅提高了效率，也保证了视觉上的专业性和一致性。

2025-03-18 13:49:42 1361

原创【年度总结】2024年技术博主成长之路：在创新中突破，在分享中进步

2024年伊始，作为一名技术博主，我持续在前端开发领域深耕，从传统Web前端到HarmonyOS NEXT的探索，每一篇文章都承载着技术积累和创新思考。让我们一起回顾这段充实的技术分享之旅。

2025-01-21 10:41:21 469

原创【H5】H5移动端音频自动播放问题深度解析与解决方案（Uncaught (in promise) DOMException: play() can only be initiated by a us）

这个错误提示我们：音频播放必须由用户手势触发。这是现代浏览器出于用户体验和安全考虑而设置的限制。

2025-01-21 09:28:03 1643

原创基于@ohos/axios深入学习HarmonyOS Next的网络数据请求

ohos/axios 是 Axios 在 HarmonyOS 平台的适配版本。Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 环境中使用。@ohos/axios 保留了 Axios 的主要特性，同时适配了 HarmonyOS 的网络 API。在某些情况下，我们可能希望为不同的 API 提供不同的错误处理逻辑。我们可以通过在服务层定义自定义的错误处理函数来实现这一点。});// 设置默认错误拦截器// 自定义错误处理},

2024-11-29 16:02:49 1213 1

原创【HarmonyOS NEXT】深入解析HarmonyOS NEXT中的媒体处理功能

在HarmonyOS NEXT中，媒体处理功能是应用开发的核心部分，包括照片上传、拍照上传、文件下载和文件预览。本文将详细介绍这些功能的实现方法和代码细节，帮助你更好地理解和应用HarmonyOS NEXT的API。

2024-11-25 09:25:12 1212 1

原创【HarmonyOS NEXT】实战——登录页面

这段代码实现了一个完整的登录页面，包括用户名和密码的输入、记住密码功能、忘记密码功能以及登录逻辑。它使用了 HarmonyOS NEXT 的组件和 API，通过状态变量管理页面的状态，通过异步方法处理登录、权限获取和页面跳转等操作。

2024-11-14 09:12:08 1293 1

原创【HarmonyNext】显示提示文字的方法

在 HarmonyNext 中，自定义弹窗是实现复杂提示信息的一种有效方式。我们可以创建一个自定义的对话框组件，并通过控制器来管理其显示和关闭。以下是一个简单的示例代码，展示如何创建和使用自定义弹窗。TextDialogbuild() {Column() {Text(`${thisimport {build() {Column() {`)在这段代码中，我们定义了一个TextDialog组件，它包含一个文字提示和一些基本的样式设置。// 导入自定义对话框组件@Entry。

2024-11-11 09:36:58 535

原创【HarmonyOS Next】封装一个网络请求模块

为了更好地处理 API 响应，我们定义一个泛型接口data: T;message?: string;code?: string;// 统一为字符串类型msg?: string;通过上述步骤，我们成功地在鸿蒙 Next 中封装了一个强大的网络请求模块。这个模块不仅简化了网络请求的代码，还通过请求和响应拦截器增强了请求的健壮性和用户体验。

2024-11-08 17:52:28 1290

原创【HarmonyOS Next】数据本地存储：@ohos.data.preferences

是 HarmonyOS 提供的轻量级本地存储解决方案，适用于存储简单的键值对。例如保存用户的设置或者应用的配置信息。这一模块提供了一套简便的接口，便于开发者读写数据，持久化存储。

2024-11-05 11:32:58 1839

原创【HarmonyOS NEXT】在 HarmonyOS NEXT 中实现优雅的加载动画

首先，我们需要定义一个状态变量以追踪加载状态。在页面未加载完成之前，我们需要显示加载动画，而一旦加载完成，我们便隐藏这个动画。这里的loaded变量初始值为false，表示页面尚未加载完成。

2024-11-01 18:18:24 727

原创【echarts】ECharts 解决地图标签重叠问题的技术实践

在使用 ECharts 绘制地图时，遇到的一个常见问题是某些地区的名称标签会因为地理位置接近而出现重叠，导致可读性变差。为了提升地图的展示效果，确保每个地区的名称都能清晰可见，我们可以通过自定义标签格式和位置偏移来解决这个问题。本文将分享一个实际的解决方案，并详细解释其实现思路。

2024-08-21 18:23:51 2114 1

原创【前端】如何在 Vue.js 中使用 Mock 数据：教程与技巧

在开发过程中，为了测试和开发前端功能，你常常需要用到模拟（mock）数据。Vue.js 提供了灵活的方式来处理数据请求和更新，但在没有真实后端的情况下，我们可以使用 Mock 数据来代替真实 API 请求。本文将介绍如何在 Vue.js 项目中设置和使用 Mock 数据。

2024-08-05 14:39:04 1688

原创为什么不推荐在Vue.js中混用v-for和v-if：从一个实际报错谈起【Failed to execute ‘insertBefore‘ on ‘Node‘...】

通过预处理数据和简化模板逻辑，可以有效避免错误，并提高代码的性能和可维护性。预处理数据：在渲染之前，对数据进行过滤和处理，确保传递给模板的数据是已经处理好的。简化模板逻辑：将复杂的逻辑放在JavaScript代码中处理，而不是在模板中混用v-for和v-if。确保唯一的key属性：在v-for中使用唯一的key属性，帮助Vue.js正确追踪每个节点。希望通过本文的介绍，大家能够更好地理解为什么不推荐在Vue.js中混用v-for和v-if，并在实际开发中避免类似问题的发生。

2024-08-05 14:33:08 1208

原创【HarmonyOS】HarmonyOS NEXT学习日记：八、组件通信

通过前面的学习我们基本上掌握了如何封装组件，但是实际使用过程中组件之间的状态需要互相之间关联通讯，涉及到父子组件，后代组件之间的相互通信。

2024-07-31 19:23:54 1281

原创【Git】如何将一个分支的某个提交合并到另一个分支

命令可以将某个分支上的特定提交应用到当前分支上。与merge或rebase不同，只关注指定的提交，而不处理整个分支的变更历史。是一个非常有用的命令，可以帮助我们将特定的提交从一个分支应用到另一个分支。在使用过程中，遇到冲突时需要手动解决，并可以利用一些高级选项来增强的功能。通过掌握这些技巧，能够更灵活地管理项目的版本控制。

2024-07-29 17:27:56 7292

原创【HarmonyOS】HarmonyOS NEXT学习日记：七、页面与组件的生命周期

页面显示------ 组件生命周期 ------组件将要出现组件的渲染和交互用户按下返回按钮组件将要消失页面隐藏。

2024-07-25 20:38:42 1660

原创【微信小程序】微信小程序设置本地背景图片在真机无法显示的解决方案

使用网络图片：将图片上传到服务器，然后在 CSS 中引用网络地址。使用 Base64 编码：将图片转换为 Base64 编码，然后在 CSS 中引用。使用标签代替：在 WXML 文件中使用标签来显示图片。

2024-07-22 18:22:47 3762 2

原创【HarmonyOS】HarmonyOS NEXT学习日记：六、渲染控制、样式&结构重用

渲染控制包含了条件渲染和循环渲染，所谓条件渲染，即更具状态不同，选择性的渲染不同的组件。而循环渲染则是用于列表之内的、多个重复元素组成的结构中。

2024-07-22 18:14:25 1142

原创【HarmonyOS】HarmonyOS NEXT学习日记：五、交互与状态管理

在之前我们已经学习了页面布局相关的知识，绘制静态页面已经问题不大。那么今天来学习一下如何让页面动起来、并且结合所学完成一个代码实例。

2024-07-20 18:28:27 1469

原创【HarmonyOS】HarmonyOS NEXT学习日记：四、布局与容器组件

学习了基础组件之后，想要利用基础组件组装成一个页面，自然就要开始学习布局相关的知识。我理解的ArkUI的布局分为两个部分一、组件自身的通用属性，诸如weight、height、margin、padding等二、容器组件，ArkUI提供了很多容器组件，可以用来实现flex布局、网格布局等。熟练掌握了以上两个方面，我们基本上就能写出一个基础页面了。

2024-07-19 18:06:52 1559

原创【HarmonyOS】HarmonyOS NEXT学习日记：三、初识ArkUI

这里学习了一些常用的组件的用法、作为ArkUI的最小单位，熟悉了这些就能实现一些基本的页面。明天我打算再学习一些布局知识，这样就可以着手实现一个简单页面了。arkUI提供的基础组件不止上面提到的这些，详情可以查看官方文档，提供了更多的诸如富文本渲染、日期选择、svg等多种组件，需要的时候在查看文档，边用边学即可，没必要一口气学完。

2024-07-17 23:21:04 1200

原创【ECharts】使用 ECharts 处理不同时间节点的数据系列展示

假设我们有多个测站（stations），每个测站有多个目标（targets），每个目标在不同的时间点采集数据。为了将这些数据在同一个图表中展示，我们需要对时间点进行统一处理，使得每个时间点都有相应的数据值。以下代码演示了如何将不同时间节点的数据系列重新采样到统一的时间轴上，并生成新的数据结构，以便在 ECharts 中展示。遍历所有的测站和目标，收集所有的生产时间点，找到最小时间点和最大时间点，并生成包含所有时间点的数组。遍历每个测站和目标，将旧时间点和数据映射到新的时间点数组上。对象，以便进行时间计算。

2024-07-17 17:18:03 937

原创【HarmonyOS】HarmonyOS NEXT学习日记：二、ArkTs语法

众所周知TS是JS的超集,而ArkTs则可以理解为是Ts的超集。他们的基础都基于JS，所以学习之前最好就JS基础。我的学习重点也是放在ArkTs和JS的不同点上。文章主要跟着学习，跳过了一些和js相同的地方，保留了一些js和ts不同的地方，同时在一些概念上添加了额外的解读和代码注释。方便ts基础不太扎实或者还没接触过的同学阅读。

2024-07-16 21:46:44 1214

原创【HarmonyOS】HarmonyOS NEXT学习日记：一、创建和运行一个页面

直接到官网的下载即可正常下载、解压、安装完成后正常来说不会有项目，并且是英文界面。需要汉化的话可以按照下面的步骤设置插件选择customize里的 all setting 进入设置页面进入plugins插件页面、进入installed已安装、然后搜索chinese找到汉化插件后选用enable启用，之后重启就实现汉化了。

2024-07-15 18:36:40 1152

原创【前端】有时候你可能需要SSE而不是WebSocket

轮询：实现简单、兼容性好，但效率低。适用于不需要实时更新的场景。SSE：实现简单、单向通信、低延迟，但不支持 IE 浏览器。适用于需要实时更新的单向数据推送。WebSocket：双向通信、低延迟、高效率，但实现复杂，对较旧的浏览器支持不佳。适用于需要实时双向通信的复杂应用。

2024-07-11 11:25:54 1277

原创【uniapp微信小程序】uniapp微信小程序——页面通信

在 uniapp 应用中创建一个专门用于管理页面之间事件通信的事件总线。这种方式在逻辑复杂、需要频繁通信的情况下非常实用。// 页面A 发送事件// 页面B 监听事件// 输出 some data});

2024-07-10 15:35:23 1198

原创【前端】包管理器：npm、Yarn 和 pnpm 的全面比较

npm 是 Node.js 的默认包管理器，由 Node.js 官方维护。自 2010 年发布以来，npm 已成为 JavaScript 生态系统的核心工具，用于安装、共享和管理 JavaScript 项目的依赖包。Yarn 是由 Facebook 开发的包管理器，于 2016 年发布，旨在解决 npm 在大规模项目中的性能和一致性问题。Yarn 是对 npm 的一种改进和替代，提供了更快、更可靠的包管理体验。pnpm 是一种高效的包管理器，于 2016 年由 Zoltan Kochan 开发。

2024-07-10 15:05:08 2159

原创【前端】面试八股文——meta标签

meta标签在HTML文档中起着重要的辅助作用，虽然它们不会直接显示在页面上，但它们对网页的SEO、用户体验和浏览器行为有着深远的影响。通过理解和正确使用meta标签，开发者可以提升网页的可访问性、搜索引擎排名和用户体验。总之，meta标签是HTML文档中的隐形英雄，掌握其用途和最佳实践对于任何Web开发者都是至关重要的。通过合理配置meta标签，可以确保网页在各个方面的表现都达到最佳。

2024-07-09 10:51:08 954

原创【前端】面试八股文——HTML代码的第一行的意义

DOCTYPE声明是一条简短的语句，位于HTML文档的最顶端。其主要目的是指定HTML或XHTML文档所遵循的版本及其对应的文档类型定义（DTD）。通过DOCTYPE声明，浏览器能够确定如何解析和渲染页面中的内容。DOCTYPE声明虽然看似简单，但在网页开发中具有深远的影响。它确保了网页在各种浏览器中的一致性和正确性，避免了因渲染模式不同而导致的显示问题。通过理解和正确使用DOCTYPE声明，开发者可以确保他们的网页能够按照预期的标准进行解析和渲染。

2024-07-09 10:37:45 582

原创【VUE】深入理解 Vue 动态路由：简介、实际开发场景与代码示例

在传统的路由配置中，我们需要在初始化 Vue 实例时定义所有的路由。但在实际应用中，特别是涉及权限管理、模块懒加载等场景，我们可能需要根据用户的权限或其它条件动态添加或修改路由。Vue Router 提供的动态路由功能正是为了解决这些问题。

2024-07-04 17:04:23 1681

原创【前端】IntersectionObserver 实现图片懒加载和无限滚动

API 是现代浏览器提供的一种异步观察者，它可以监视一个元素与视口（或某个特定祖先元素）交叉状态的变化。图片懒加载无限滚动加载内容实现元素的延迟加载触发动画效果在 Vue 中，我们可以通过自定义指令来实现懒加载。});});} else {// 如果浏览器不支持 IntersectionObserver，需要提供一个降级方案});

2024-07-04 16:57:55 2259

原创【前端】面试八股文——输入URL到页面展示的过程

【前端】面试八股文——输入URL到页面展示的过程

2024-07-01 19:45:01 1099

原创【VUE】你是不是老想直接修改props？

在 Vue.js 中，Props 是父组件向子组件传递数据的关键机制。尽管 Vue 强烈建议 Props 是单向数据流的一部分，即从父组件流向子组件，但在实际开发中，有时我们会面临一些需要直接修改传递对象属性的场景。本文将探讨在 Vue 中管理 Props 的最佳实践，并提供一些在实际项目中保持代码清晰和维护性的方法。始终尽量遵循 Vue 的最佳实践，确保代码的可读性和可维护性。在项目初期设定好代码规范，团队成员都遵循一致的模式。虽然这种方法方便，但会破坏数据流的单向性，增加调试复杂度。

2024-07-01 17:42:55 2814 1

原创【前端】Web操作文件的可能性——浅谈一下File System Api

文件系统API（File System API）为开发者提供了一组标准和接口，使得Web应用程序可以像本地应用程序一样读取和写入文件。File API 是文件系统API的基础，允许用户通过文件输入元素或拖放操作选择本地文件。FileReader API 提供了异步读取文件内容的功能，可以将文件读取为文本、Data URL、ArrayBuffer等格式。然而，目前这一功能在标准化进程中，还没有得到广泛支持。File System Access API 是一组较新的API，提供了更强大的文件和目录读写能力。

2024-06-28 10:58:41 1071

原创【前端】前端文件下载方式盘点

以上几种方式各有优缺点，具体选择哪种方式应根据实际需求来决定。如果是简单的静态文件下载，使用标签是最简便的方式；如果需要动态生成文件内容，Blob 对象或 FileSaver.js 是不错的选择；而对于需要从服务器获取数据并下载的场景，Fetch API 和 Axios 则提供了更强大的功能和灵活性。

2024-06-28 10:00:12 1093

原创【CSS】深入探讨 CSS 的 `calc()` 函数

calc是一个 CSS 函数，用于在样式表中进行数学计算，从而动态地设置 CSS 属性值。它允许开发者在指定长度、百分比、数值等时，进行加减乘除运算。过多的动态计算可能会使样式变得难以理解和调试。特别是在涉及布局的大量计算时，可能会对渲染性能产生影响。：虽然 CSS 的解析和计算速度非常快，但在复杂页面中频繁使用。，但在某些老旧浏览器中，可能会遇到兼容性问题。函数，我们可以实现更灵活和响应式的设计。前，建议检查目标用户的浏览器支持情况。时保持简洁明了，避免过度复杂的计算。的用法、易错点和一些常见争议点。

2024-06-25 17:44:25 4932

原创【前端】前端项目埋点：数据驱动决策的基础

埋点是指在代码中预埋特定的事件触发点，通过这些触发点记录用户在应用中的行为数据。常见的埋点包括页面访问、按钮点击、表单提交等。通过分析这些数据，开发者和产品经理可以了解用户行为，评估功能效果，从而做出数据驱动的优化决策。

2024-06-21 18:06:56 723

原创【前端】前端权限管理的实现方式：基于Vue项目的详细指南

在Web开发中，前端权限管理是一个确保应用安全性和优化用户体验的关键部分。本文将详细介绍前端权限管理的几种实现方式，并通过Vue项目中的代码示例来演示具体实现方法。

2024-06-21 18:04:57 2777

html实现的打砖块小游戏

这是一个使用原生html+css+js完成的一个五子棋小游戏。提供了全套源码，打开html文件即可在浏览器允许。黑白棋子交替落子，直到有一方五子相连即判定一方成功。如何使用HTML、CSS和JavaScript开发一个简单的五子棋小游戏。我们将展示如何初始化棋盘、处理用户交互以及实现胜负判定。特别是，我们将着重介绍胜负判定的逻辑实现。我们介绍了如何使用HTML、CSS和JavaScript开发一个简单的五子棋小游戏，重点介绍了棋盘初始化和点击事件处理，以及胜负判定的逻辑实现。希望这篇文章能帮助你更好地理解前端开发和算法的基础知识。享受编程的乐趣吧！

2024-05-16

zebra-browser-print-windows-v131445.exe

斑马打印机，用于web打印时的，windows版本驱动

2024-05-15

web前端页面通过BrowserPrint API连接斑马打印机进行RFID条形码贴纸打印

web前端页面通过BrowserPrint API连接斑马打印机进行RFID条形码贴纸打印该资源提供了一个vue混入，通过混入提供一个可直接使用的方法执行打印。在现代物流、仓储和零售行业中，RFID和二维码技术发挥着至关重要的作用。这些技术不仅提高了效率，还增强了追踪和管理的能力。本文将介绍如何使用JavaScript和斑马打印机的BrowserPrint API来打印RFID二维码贴纸。通过使用JavaScript和BrowserPrint API，开发者可以轻松地将斑马打印机集成到Web应用中，实现从浏览器直接控制打印任务。这种方法简化了传统打印解决方案的复杂性，使得在任何支持JavaScript的平台上都可以实现高效、灵活的打印操作。

2024-05-15

前端创建跳动字符效果的前端技术实现

创建跳动字符效果的前端技术实现在前端开发中，动态视效能够显著增强用户体验。本文介绍一种实现字符跳动效果的技术方案，通过简单的HTML、CSS和JavaScript代码，你可以为网页文本添加生动的交互动画。这种效果可以用于吸引用户注意、增强品牌形象或仅仅为了创造乐趣。技术实现概述制作跳动字符效果的实现思路可以概括为：利用HTML构建基本的文本框架。使用CSS为字符设置样式和动画。通过JavaScript将字符串中的每个字符动态包装到单独的<span>标签中，以实现细粒度的动画控制。通过结合HTML、CSS和JavaScript，我们可以轻松实现前端的字符跳动效果。这种方法不仅增强了页面的视觉吸引力，也提供了更加动态和互动的用户体验。你可以根据需要调整动画参数，如跳动高度、速度或应用于不同的字符和文本字符串。

2024-05-15

前端输入时字符跳动动画实现

在前端开发中，为了提升用户体验，我们经常需要为用户的交互行为提供即时的反馈。这不仅让用户知道他们的操作有了响应，还可以让整个界面看起来更加生动、有趣。本文将通过一个简单的例子讲解如何实现在用户输入字符时，让字符产生一个小跳动的动画效果，使得界面交互更为生动。实现这一效果的核心思路是利用CSS的关键帧动画（Keyframes Animation）来定义字符的跳动动画，并通过JavaScript来动态地将动画应用到用户每次输入的新字符上。同时，为了保持输入框内容和展示的内容同步，我们还需要对输入框的值进行监听，并相应地更新显示区域的内容。通过以上的技术方案，我们实现了一个在用户输入字符时，字符跳动的动画效果。这种方法不仅增强了用户体验，使界面交互看起来更加动态和有趣，而且也体现了CSS动画和JavaScript相结合的强大功能。对于开发者来说，掌握这类交互效果的实现方法可以更好地为用户创建吸引人的前端体验。

2024-05-15

前端如何直接选中复制图片中的文字：前端OCR实现指南

在当今的网络开发环境中，从图片中提取文字已经成为一项越来越普遍的需求。这种需求不仅体现在处理扫描的文档图片上，也广泛应用于处理用户上传的各种图像。为了从图像中提取文字，光学字符识别（Optical Character Recognition，简称OCR）技术提供了一种有效的解决方案。本文将详细介绍如何使用JavaScript及其强大的库——Tesseract.js来实现这一功能。首先，让我们了解一下什么是OCR技术。OCR技术是一种将图像中的打印或手写文字转换成机器编码文本的技术。它广泛应用于文档管理、自动数据录入以及在历史文献数字化等领域。随着技术的进步，OCR的准确率和效率都有了显著提升，使得它能够在多种应用场景中得到有效应用。接下来，我们来介绍Tesseract.js这个库。Tesseract.js是一个纯JavaScript编写的OCR库，它是基于世界上最流行的OCR引擎——Tesseract的一个EMScripten端口。Tesseract最初是由惠普实验室开发，并在2005年由Google进行了大量改进。Tesseract.js使得前端开发者能够直接在浏览器中实现O

2024-05-15

一个可以让你在所有网站看小说的浏览器摸鱼插件

Step 1：打开你的浏览器（推荐使用Google Chrome），进入扩展程序页面（chrome://extensions/），开启开发者模式，选择“加载已解压的扩展程序”，并选择你刚才解压的文件夹。 Step 2: 使用《摸鱼王》阅读小说安装完插件后，你可以在任何网页上激活《摸鱼王》。只需点击浏览器角落的插件图标，输入你想阅读的小说名称或选择你喜欢的小说网站。插件会在当前页面打开一个隐蔽的小窗口，完美融合在网页设计中，让旁人难以察觉你正在阅读小说。 Step 3: 自定义设置《摸鱼王》提供了多种自定义设置，确保你在不同的环境下都能舒适地阅读。此外，还可以自动保存你的阅读进度，下次打开时可以直接继续阅读。为什么推荐使用《摸鱼王》？隐蔽性：最大的优点是其隐蔽性，你可以在不引起旁人注意的情况下享受阅读。免费开源：作为一个开源项目，你可以自由下载使用，甚至可以根据自己的需要修改和优化代码。

2024-05-15

前端 canvas 打砖块游戏

这段代码实现了一个简单而经典的游戏：打砖块。这个游戏通过 HTML、CSS 和 JavaScript 技术构建，在其中运用了三项核心技术：碰撞检测、画图和事件监听。首先，游戏的基本规则很简单：玩家通过控制底部的板来反弹一个球，消除画布顶部的所有砖块。当球触及底部边界时，游戏结束。这个游戏虽然简单，但其背后的技术实现却相当精妙。在画图功能方面，通过 Canvas API，游戏实现了对球、板和砖块的绘制。球的运动轨迹、板的移动以及砖块的排列都是通过画布上的绘图函数来实现的，使得游戏画面生动有趣。而碰撞检测是游戏互动性的核心所在。通过不断地检测球与砖块的碰撞，游戏判断球是否击中了砖块，从而更新游戏状态。这一过程使得游戏更具挑战性和可玩性，同时也增加了玩家的互动感。最后，事件监听使得玩家可以通过键盘控制板的移动，从而影响球的运动轨迹，增加了游戏的可操控性和乐趣。总的来说，这个游戏不仅展示了如何使用前端技术创建一个简单但富有趣味性的网页游戏，同时也展现了碰撞检测、画图和事件监听等核心技术在游戏开发中的重要性和应用价值。这个游戏示例不仅适合初学者学习前端游戏开发，也为有经验的开

2024-05-15

vue源码解析.zip

vue源码解析

2021-05-13

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人