前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目  不像Flexbox或Grid布局可以控制元素显示的次序，圣杯布局是通过浮动元素和外边距属性实现三列布局，但最重要的一点是，在文档中需要将优先渲染的内容写在最前方，但显示时看起来却好像是按照显示次序书写的一样。 首先给类名为"container"的盒子添加"overflow:hidden"和"padding:0px100px"属性，以为了防止容器

大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。背景之前我们提到了斗地主的最优秀的交互方案：《斗地主的手牌，如何布局？看25万粉游戏区UP主怎么说》。具体交互如下：PC端：未选中的牌，是默认状态；选中的牌，加一层半透明的黑色遮罩层。鼠标单击牌，可以选中牌。鼠标单击已选中的牌，可以取消选中。鼠标点击某个未选中的牌，并且开始拖拽，所滑过的牌，都会被选中。（不是反选那么简单！）鼠标点击某个已选中的牌，并且开始拖拽，所滑过的牌，都会被取消选中。（不是反选那么简单！）移动端：未选中的牌，是默认状态；选中的牌，加一层半透

大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。背景上篇文章：《为什么我选用Go重构Python版本的WebSocket服务？》，介绍了我的目标。从这篇文章开始，我们进入实战，正式介绍GoWebSocket框架。还没学过Go，要先看什么？建议你花1天时间，看一下Go的原理简介、基础语法。什么教程都可以，知名的教程就行。至少要明白：各种数据类型，控制流（for、if等）写法，弄懂channel和goroutine，如何加锁。一定要自己写写goroutine和channel试一下，了解一下基础语法。此外，还要了解

大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。背景我常常需要处理二进制数据，每次面对一堆二进制数据，需要自己逐个字节转换为二进制、十六进制，去阅读和理解，去排查问题。举个例子：有一个场景是我的《我做了个《联机桌游合集:UNO+斗地主+五子棋》无需下载，点开即玩！叫上朋友，即刻开局！不看广告，不做任务，享受「纯粹」的游戏！》，我使用websocket传输二进制数据，我使用protocolbuffer作为序列化协议。所有变量的值都用二进制表示，变量名也被用数字表示，体积很小。（另一种常见的序列化协议是JSON，

大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。背景我们需要解析URL参数工作中，常常要根据URL排查问题，其中最重要的一步就是解析它的参数，取到关键词，然后才能去前端日志系统搜索。面试字节跳动和阿里巴巴时，都遇到了这样的面试题：（不许查阅任何API，使用没代码提示的记事本）请手写函数，可以解析URL中的参数。解决思路针对上文第一个场景，我们更常见的做法是，搜索「URL解析」，然后找到网上免费的工具，输入URL，能把参数都告诉我，还能帮我decode参数，非常方便。但是这是存在问题的：我们把URL参数都暴露给

大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。背景夏天又到啦，又到了吃西瓜的季节！怎么能少了《合成大西瓜》这款又好玩又解压的小游戏呢？2021年，这款游戏风靡一时。2022年，我HullQin（点开可关注我）自己写了一款《合成大西瓜》，但是加了一点点小功能：联机对战！《合成大西瓜》重制单机版，点击这里马上体验！原版《合成大西瓜》截图：技术选型大框架决策参考我之前的文章《H5小游戏技术选型分析，低代码?小游戏框架?canvas或SVG?还能用React？》，基于文中的小游戏技术选型决策树来分析：玩法有创新，需

大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。背景上篇文章《用177行代码写个体验超好的五子棋》，我们一起用177行代码实现了一个本地对战的五子棋游戏。现在，如果我们要做一个联机五子棋，怎么办呢？需求分析首先，我们需要一个后端服务。2个不同的玩家，一起连接这个后端服务，把要下的棋告诉后端，后端再转发给另一个玩家即可。当然，如果有观战的，也要把当前期局转发给观战者。此外，为了让2个玩家联机，还需要有「房间号」的概念，只有同一个房间的人才能联机对战。不同房间的人互不影响，允许同时有多个房间的人同时玩游戏。流程整

今天分享一下，我们项目当中的一些​​webpack​​配置，希望能给大家有所启发；只要配置多了，你就会发现其实所有的配置的都是相似的，尤其像插件的配置，都是十分相似的。我们现在开始进入今天的主题啦~~1介绍之前，我有提到过，当然大家肯定也都知道，Vue3.0不在有​​webpack.config.js​​的配置；但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整​​webpack​​,这个时候，在Vue3.0的项目当中，我们就需要在根目录创建​​vue.config.js​​去完成​​webpack​​的一些特殊配置,默认它会被 ​​@vue/cli-service​​ 自动加载。

大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。如何开发一个NPM包供其它项目使用？我们在开发React项目时，有各种脚手架供我们选择（CreateReactApp、Umi、NextJS等），他们默认配置好了Webpack等，极大提高了开发效率。那么如何开发NPM包呢？有类似的脚手架吗？我推荐TSDX理由如下：默认支持CommonJS、UMD、ESModule打包方式。（要开发通用的NPM包，这些的支持是必要的，不然你还得自己搞）自带开发环境、编译脚本。开发NPM包你必须要解决的一个问题：开发时有地方调试，发

写在前面：星光不问赶路人，时光不误有心人本栏将持续更新前端小案例~牛牛最近学到了一个神奇的旋转魔方，今天就来分享给大家吧，希望大家能喜欢最后有完整代码链接，请注意查收效果图实现功能：点击下方图片可翻转到对应图片实现思路：构建盒子模型，完成html代码编写设置样式，利用transform3D做出魔方JS构建事件1.HTML篇魔方中用标签包含图片，方便用包裹，后面给ul添加3D模式便可进行翻折比较简单不过多讲解,代码如下：2.CSS篇2.1基础设置清除样式默认的内外边距，直接上代码：2.2魔方样式主要是给父元素设置transform-style:preserver-3d;，对所有li子元素进行3D