窦晨的博客

前言在写自己的网页的时候，突然想到写几个怀旧小游戏，比如贪吃蛇（已出教程）、推箱子（该教程）、俄罗斯方块等。上一篇文章已经讲解了如何实现贪吃蛇小游戏，这里我将继续谈一谈如何基于 React 实现推箱子小游戏。主要内容依旧是这三项： 静态设置 游戏算法 React 渲染 静态设置《推箱子》小游戏的静态设置也是比较简单的，和《贪吃蛇》相同，也主要分为：方向，地图物品，Point对象等。 我们的《推箱子》游戏是基于2D格网形式的，因此我们推动箱子的方向有：上、下、左、右。这四个方向是静态不变的，因此我们可以先写在一个文件里将它们定义好，如下： 1234567891011121314// 推箱子小人的移动方向 枚举export default class Direction { /** * Direction static params * @param {string} UP - 向上移动 * @param {string} DOWN - 向下移动 * @param {string
...

前言在写自己的网页的时候，突然想到写几个怀旧小游戏，比如贪吃蛇（该教程）、推箱子（已出教程）、俄罗斯方块等。因此，这里我将简单谈一谈如何基于 React 实现贪吃蛇小游戏。主要内容包括： 静态设置 游戏算法 React 渲染 静态设置受限于我的语文功底，用“静态设置”来描述可能不太准确。简单来说就是，我们需要定义哪些静态状态？哪些对象？。很简单，我们可以联想到：方向，地图物品，Point对象等。 我们的贪吃蛇游戏是2D的，因此我们蛇可以移动的方向只有：上、下、左、右。这四个方向是静态不变的，因此我们可以先写在一个文件里将它们定义好，如下： 1234567891011121314// 贪吃蛇移动的方向 枚举export default class Direction { /** * Direction static params * @param {string} UP - 向上移动 * @param {string} DOWN - 向下移动 * @param {string ...

前言之前一直觉得在深拷贝和浅拷贝上没遇到过什么问题，因此也没有太留意。前段时间在写项目的时候突然遇到了相关问题，因此决定还是简单地做个记录以备之后需要。 问题引入直接进入正题，我们引入一个例子，这样将更有助于我们学习深/浅拷贝的区别。 问题：存在一个数组 a, 其内部存放的元素是 point 对象。 现在我要获取数组的最后一个元素并保存为 b, 然后利用循环将数组 a 中的每一个元素的值等于前一个元素的值, 最后 b 的值是否会改变? 如果改变, 又如何让它不变? 解决方案浅拷贝很显然, 如果直接用 b = a[a.length - 1] 这种赋值方式时，b 和 a[a.length - 1] 都存储在栈内存中。它们都只是对应堆内存中的 point 元素的引用，指向一个地址。（并没有在堆内存中创建新的 point 元素） 当对 point 对象的值进行修改时，会发现 b 对应的值也会修改，这就是 浅拷贝。 1234567891011121314151617181920// 定义 point 对象class point{ constructor(r = 0, c ...

前言React 作为前端三大主流框架之一，得到了许多开发者的亲睐。其组件化编程模式大大简化了前端开发过程，可以更好地管理组件间的逻辑和依赖关系。 刚开始在组里做项目的时候，好不容易掌握了 React 的一些基础知识，比如组件化、DOM渲染、生命周期等等，心里沾沾自喜觉得自己也算是入门了。结果，师兄突然跟我说：“你快去把 React Hooks 搞明白，这样开发起来就更方便了。” 于是我一个前端小白又开始去网络上搜索各种教程以及开发文档学习React Hooks。 后来因为一些琐事忘记做学习笔记了，不过经过这段时间的实践和学习，现在也算是对 React Hooks 有了一点自己的理解。下面我将简单谈一谈 React Hooks的入门内容。 什么是 Hooks ？Hooks 的中文解释为 “钩子”，而 React Hooks 则是在 v16.8 版本发布的一种全新的API，可以说是颠覆了 React 一直以来的类组件的写法模式。 类组件写过 React 的人都知道，我们刚入门所接触的 React 都是从类组件开始，如下： 12345class HelloWorld extends Reac ...

前言CSS 中的 position 属性指定了元素的定位类型，其有五个可选值，分别是static、relative、absolute、fixed 和 sticky。分别对应了静态定位、相对定位、绝对定位、固定定位和粘性定位。 这里我们主要探讨平时最常用的 relative 定位和 absolute 定位。网络上有很多相关的讲解，但还是通过自己的理解写一篇学习笔记会让自己的印象更深刻。因此，下面我将从自己的理解角度简单谈一谈，如果错误，请大家批评指正。（我也会把我参考的一些资料列在最后，大家可以自行查看） absolute 和 relative下面，我将从定义、定位基准、脱离文档流和内容宽度几个角度进行介绍。 定义absolute ：绝对定位，脱离文档流。即相对于最近且不是 static 定位的父元素进行定位。position 更多考虑的是父级和子级间的关系，即相对于父元素的定位，不受父元素内其他子元素的影响。 relative ：相对定位，不脱离文档流。即保留自己原本位置，并相对于该位置进行定位。relative 更多考虑的是同级元素间的关系，即考虑同级元素的定位后，得到自己的原本位置 ...

前言写项目的时候遇到一个需求，大概意思就是：当鼠标停留在元素A身上时，如何让元素A的子元素B显现（或其他变化）？其实这个需求很简单啦！无非就是以下两个流程：（以transition为例） 给子元素B添加transition过渡参数。 在元素A的伪类 :hover 选择器中，给子元素B添加相应的过渡属性值。 但是为什么还要写一篇博客来记录这个东西呢？因为刚好接着这个问题总结一下 hover 的控制其他元素的几种情景及其对应方法。 Hover选择器如何控制其他元素？Hover 如何控制其他元素的意思就是 当在对元素A进行hover动作时，如果控制或让其他元素进行变化，这属于是CSS的范畴。这个问题主要包括三个情景，分别是： Hover 元素A，控制其子元素B Hover 元素A，控制其同级元素C Hover 元素A, 控制其同级元素C的子元素D 下面我们将一一进行讨论： 控制子元素我们先举一个例子：父元素A为 100x100的蓝色方块，子元素B为50x50的绿色方块，当我们鼠标移入蓝色方块中时，绿色方块显示，移出则不显示。 为了实现以上功能，我们需要使用到CSS的父元素 : ...

前言之前在搭建博客的时候有想到要写这么一个教程，但是因为种种原因给搁置了。今天，我的好朋友突然跟我说：“你博客里的图片加载挺快的呀！” 我就想起来了这么件事，因此打算做一个简单的教程，也方便自己以后查看。 首先，或许大家看了我的搭建博客教程或者网上的一些其他教程，已经成功搭建了属于自己的博客！ 但是，因为我们的博客托管在免费的 Github 平台上，所以访问和加载速度其实和服务器相比还是有点儿“感人”的。这时候，如果你把博客里要用的一些图片或者资源都放在了本地并直接上传到博客对应的仓库中，则会影响到你博客的加载速度。随着博客资源的增加，影响则会越发明显。 因此，我们可以通过 创建图床 的方式，来大大加速你的博客访问速度和图片资源加载速度。图床就是存储图片的服务器，即 将你的图片上传到一个服务器上，然后通过特定的链接去访问，十分好理解。 话不多说，下面我们就开始 基于 jsDeliver + Github 搭建免费图床 ！ 环境说明 jsDelivr Github 这里就不详细说明 Github 是什么以及如何创建仓库，大家应该都很清楚了。不清楚的可以自行百度或者查看我其他关于Gith ...

前言我们在做Web网页端项目的时候常常希望能让一些部件看起来更加美观，毕竟 “爱美之心，人皆有之”。然而，自己一个一个写 CSS 和 JS 实现又很麻烦。因此，现在出现了很多 UI 库，如 Ant Design、Element UI 等。这些库封装好了各式各样的网页部件，如 Button、Icon、Menu等，十分美观，我们可以直接拿来用。 有一天，打开 Ant Design 官网时，发现主页的 Logo 存在一个 隐藏彩蛋 👉 当我们把鼠标移入 Ant Design Logo上时，字母 i 上的图标会动态变化。 So，I have a dream ！ …扯远了，So 我打算自己重现彩蛋动画。 实现原理首先，我们实现的方法有两种: 基于 JavaScript 脚本 基于 CSS 动画 这里我们选择使用 基于 CSS 动画 实现该效果。 为什么不使用 JavaScript 脚本呢？ 因为 JavaScript 实现动画的原理在于为元素绑定事件函数，实现多种动画样式，显然这种方式可以实现复杂动画且自由度高。 然而也存在一些缺点，如 代码量庞大，以及Js动画执行时是在主线程中运行，主 ...

前言虽然已经不怎么玩QQ空间了，但还是会日常刷一刷同学们的动态，偶尔评论一下。诶！说到 评论，那我的博客是不是也应该具备这个功能？没错！那必须有！ 其实 Butterfly主题 也提供了在线聊天、评论系统等接口，我们只需要选择一个合适的评论平台并进行配置，即可给我们的博客加上评论系统。 别问我为什么选择 Gitalk ，单纯是因为觉得Github的那只小猫很可爱。 环境说明GitalkGitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。Issue 大家都很熟悉，就是你仓库下一个用于评论的东西。因此，Gitalk 简单来说就是通过 Issue 来存储和管理评论的。 Hexo 框架Hexo 是一款基于Node.js的快速、简洁且高效的静态博客框架。Hexo 在之前的搭建博客教程中详细讲过，这里不再赘述。 Butterfly主题Butterfly 是一款在hexo-theme-melody的基础上进行开发的主题框架。当然，也有很多其他主题，大家可以根据自己的需求进行选择，配置原理也是相似的。 搭建流程搭建Gitalk评论系统主要分为两个步骤： 创 ...

前言提起博客二字，似乎有一种年代感，还记得小时候玩过人人网、百度贴吧、QQ空间等社交平台。然而，随着时代的推进，这些类似于个人博客的社交平台逐渐开始走向没落。各种实时互动的社交软件层出不穷，受益于此，咱们也可以很方便地联系好友，传送讯息。 在这个嘈杂喧闹的世界中，或许有那么一群人会希望拥有一个属于自己的小空间。在那儿，可以记录自己的学习、心情以及生活中的各种趣事，可以无忧无虑地做自己。很幸运的是，通过一些已有的专业知识和网络上他人共享的资料，我搭建了属于自己的博客。 （🤚唠叨结束，进入正题）你是否也想拥有属于自己的博客？如果心动了，就继续往下看吧！我会把整个搭建博客的流程和遇到的问题及其解决方案分享给大家。 环境说明整个过程所有配置均为免费，下面我将介绍构建博客中所使用到的平台和插件。 Github PagesGithub 是一个面向开源及私有软件项目的托管平台。它不仅能够让我们托管代码和各种资料，也提供了Github Pages的功能，允许我们利用Github的服务器部署自定义网页。 Hexo 框架Hexo 是一款基于Node.js的快速、简洁且高效的静态博客框 ...