星野集-个人编程学习与开发笔记归档

JavaScript贪吃蛇游戏

星野集 — Sat, 11 Apr 2026 07:38:58 GMT

贪吃蛇是一款经典的休闲游戏，它不仅简单易玩，而且是学习JavaScript和Canvas API的绝佳例子。今天，我们将学习如何使用JavaScript和Canvas API实现一个完整的贪吃蛇游戏，包括蛇的移动、食物生成、碰撞检测和游戏控制。游戏概述贪吃蛇游戏的基本规则很简单：玩家控制一条蛇在

includes()：数组中快速查找元素的实用工具

星野集 — Wed, 17 Dec 2025 04:59:10 GMT

在编程中，我们经常需要判断一个数组里是否包含某个特定元素。比如，检查用户选择的兴趣标签里有没有“阅读”，或者验证购物车中是否已添加某件商品。这时，includes() 方法就能派上用场——它是 JavaScript 数组自带的一个简单工具，专门用来完成这类“存在性检查”。一、includes()

认识 indexOf()：帮你快速定位元素的“位置探测器”

星野集 — Tue, 16 Dec 2025 14:23:36 GMT

在编程中，我们经常需要在一个序列（比如一串文字、一组数据中）找到某个特定元素的位置。这时候，indexOf() 就是一个实用的工具。它像一把“位置探测器”，能告诉你目标元素在序列中的索引（即位置编号），如果找不到，还会明确告诉你“没找到”。先理解“索引”：位置编号的规则在讲解 indexOf()

数组合并：JavaScript数组拼接的那些事

星野集 — Tue, 16 Dec 2025 11:34:08 GMT

在JavaScript的世界里，数组就像一排有序的盒子，每个盒子里装着数据。有时候，我们需要把两排甚至多排盒子合为一排，让它们“手拉手”站在一起，这就是数组拼接。看似简单的需求，却藏着几种不同的实现方式，各有各的性格。一、最“老实”的拼接：concat()方法 concat()是数组自带的一个方法

轻松搞懂 JavaScript 数组的 splice() 方法

星野集 — Sat, 13 Dec 2025 14:52:12 GMT

如果你刚接触 JavaScript 数组操作，一定会对 splice() 这个方法感到好奇——它名字听起来有点奇怪，但却是数组修改的“万能工具”。今天我们就用最直白的语言，结合具体例子，把这个“万能工具”的用法彻底搞清楚。一句话记住 splice() 的核心作用 splice() 是数组的“手术刀

与Flexible.js的邂逅：一段移动端适配的旧时光

星野集 — Tue, 25 Nov 2025 12:19:51 GMT

在移动端开发的早期，面对纷繁复杂的屏幕尺寸，如何实现优雅的适配，曾是每个前端开发者必须面对的课题。那时，viewport 标签还未像今天这般强大，CSS3 的 vw 单位也尚未得到普遍支持。正是在这样的背景下，我遇到了 Flexible.js，一个来自手淘团队的轻巧解决方案。它并非一个功能繁复的框

CSS3核心特性-第10章-10.2-动画控制与事件

星野集 — Tue, 25 Nov 2025 04:39:39 GMT

学习目标掌握 animation-play-state 和 animation-fill-mode 属性的语法与取值实现动画的暂停/播放控制及状态保持效果学会监听 animationstart/animationend 等动画事件并处理回调逻辑概念讲解 CSS 动画控制是指通过属性和事件对动

文字跑马灯的技术实现与美学思考

星野集 — Tue, 18 Nov 2025 09:22:40 GMT

CSS3核心特性-第10章-10.1-动画基础语法

星野集 — Sun, 16 Nov 2025 13:10:34 GMT

学习目标掌握 @keyframes 关键帧规则的定义方法理解 animation 属性的核心子属性及其取值能够编写简单的循环动画和单次动画效果区分动画与过渡（transition）的适用场景概念讲解 CSS3 动画（Animation）是通过 @keyframes 定义关键帧序列，控制元素

CSS3核心特性-第9章-9.4-实战：交互动效设计

星野集 — Tue, 11 Nov 2025 14:17:05 GMT

一、学习目标掌握3种核心交互动效的实现逻辑：按钮状态变化、导航菜单切换、3D卡片翻转理解动效设计的性能优化原则（如硬件加速、避免过度重绘）能够综合运用transition、transform和perspective属性构建复杂交互二、概念讲解：交互动效设计原则交互动效是提升用户体验的关键手

css中的单位em和rem的区别

星野集 — Sun, 2 Nov 2025 04:54:50 GMT

在前端学习中你会遇到一个问题：em和rem这两个长度单位到底该如何选择？它们的名称如此相似，实际应用场景却大相径庭。起初，我常因混淆二者导致布局错位或样式调试耗时，直到近日系统梳理后，才逐渐摸透了它们的脾气。以下结合实践，记录我的理解与使用心得。先明确本质：em与rem的核心差异 em：基于父元素

救了大命！我再也不用手动调 CSS 属性顺序了

星野集 — Sun, 19 Oct 2025 12:18:35 GMT

有没有过这种情况？你辛辛苦苦写的 CSS，保存后打开一看——position挤在width后面，color跑去了display底下，像菜市场摊位乱摆；或者同事改了个按钮样式，属性顺序全乱，你盯着代码半天反应不过来：“这行到底是管位置的还是管颜色的？” 上周我刚被这事儿烦到摔鼠标——帮新人改他的登录

别再死磕固定宽度了！我踩了3次坑才搞懂的响应式容器“舒服密码”

星野集 — Sat, 18 Oct 2025 08:57:11 GMT

你有没有过这种情况？熬夜写了个自认为超好看的网页，第二天用手机打开——文字挤得像被揉皱的纸团，图片卡在屏幕边缘快溢出来；电脑上倒还像模像样，可用户哪会只用电脑看你东西啊？先搞懂：为啥要给容器“松绑”？我刚开始学的时候，特喜欢给容器设固定宽度——比如1200px，觉得“这宽度够宽，电脑上看特大气

关于CSS结构伪类的几点实践

星野集 — Wed, 15 Oct 2025 04:53:11 GMT

最近在做项目中的文章列表页，遇到个挺有意思的小问题：想给列表的第一个项加个粗体突出，最后一个项加条下划线提示“更多内容”，一开始我居然傻乎乎地给每个

手动加了class="first"和class="last"。结果HTML里堆了一堆类名，同事瞥了眼屏幕说：“你咋不用结构伪类？明明不用加额外c

CSS Grid布局从入门到实战：二维布局的“瑞士军刀”与高效技巧

星野集 — Thu, 9 Oct 2025 06:15:23 GMT

前端开发里，“把页面元素排整齐”从来不是件简单事。你可能用过float浮动（容易塌陷）、position定位（脱离文档流难管理），甚至刚学会Flexbox（擅长排成一条线），但遇到同时要管行和列的二维布局（比如卡片列表、导航栏+主内容+侧边栏），这些工具总像“缺了一条腿”。这时候，CSS Gri

CSS Flexbox布局入门：从零开始掌握弹性盒子模型

星野集 — Wed, 8 Oct 2025 14:11:17 GMT

你有没有过这样的经历？想让导航栏里的链接均匀分布在容器两侧，试了float: left和text-align: right组合，结果链接挤成一团；想做一张卡片列表，希望卡片自动换行且间距一致，用inline-block加margin调了半天，要么间距不对，要么换行后错位；或者想让一个容器里的元

视觉视口与逻辑视口：前端开发者必须搞懂的屏幕适配核心概念

星野集 — Sun, 5 Oct 2025 05:04:58 GMT

作为前端开发者，你是否遇到过这样的困惑：明明在代码里设置了页面宽度为375px，但在不同手机上显示效果却不一样？或者为什么同样的CSS媒体查询，在某些设备上触发时机总跟预期有偏差？这就要从移动端特有的视觉视口(Visual Viewport)和逻辑视口(Layout Viewport)说起。一、先

CSS3核心特性-第9章-9.3-过渡效果（transition）

星野集 — Wed, 24 Sep 2025 07:05:59 GMT

一、学习目标掌握过渡效果的核心语法及6个关键属性理解过渡四要素（属性、时长、缓动函数、延迟）的作用实现3种常见交互动效（颜色过渡、尺寸变换、位置移动）区分过渡与动画的适用场景及性能优化技巧二、概念讲解过渡效果（transition）是CSS3引入的状态间平滑过渡技术，允许元素在不同状态（

CSS3核心特性-第9章-9.2-3D变换与透视

星野集 — Mon, 22 Sep 2025 14:39:29 GMT

学习目标理解3D变换的核心概念（透视、3D空间、变换原点）掌握perspective属性的语法与取值规则实现基础3D变换效果（旋转、平移、缩放）掌握transform-style: preserve-3d的应用场景能够开发简单的3D交互效果（如卡片翻转、立方体展示）概念讲解 3D变换是C

CSS Emmet写法指南：新手也能秒懂的高效样式代码技巧

星野集 — Sat, 20 Sep 2025 14:04:43 GMT

前面我们聊完了HTML部分的Emmet写法，接下来重点说说CSS的Emmet写法——它同样能帮你省去敲重复属性的力气，尤其是写样式时经常要重复输入的margin、padding、color等属性，用Emmet几秒钟就能搞定。 CSS的Emmet语法和HTML不太一样，它更像是一套「属性缩写规则」，掌