我们一起学前端-CSDN博客

原创利用游戏引擎的优势

大家好，我是小蜗牛。在当今快速发展的游戏产业中，选择合适的游戏引擎对开发者来说至关重要。Cocos Creator作为一款功能强大且灵活的游戏引擎，为开发者提供了丰富的工具和资源，使他们能够高效地开发出优秀的游戏。本文将探讨如何充分利用Cocos Creator的优势，提升游戏开发效率和质量。

2024-10-29 19:16:12 2314

希望通过这篇文章，大家能对自由职业者的生活有更深刻的了解，也欢迎有兴趣的朋友与我交流，共同探索游戏开发的精彩世界。作为一名微信小游戏开发者，我的日常工作并不像人们想象中的那样充满光鲜亮丽的画面，而是由无数的编码、调试和创意碰撞组成的。晚上的时间也是我放松的时刻，我会阅读一本书，为第二天的工作做好准备。我的一天通常从清晨开始。与许多上班族不同，作为自由职业者，我没有固定的上班时间，但我还是尽量保持规律的作息，以确保高效地完成工作。为了确保游戏的性能，我会对游戏进行大量的测试，包括功能测试和性能测试。

2024-10-28 05:57:31 303

原创前端程序不玩游戏搞个毛前端啊

游戏往往具备复杂的交互和生动的视觉效果，程序员在玩游戏的过程中，可以观察到如何通过设计元素提升用户的沉浸感和参与感。程序员的专业性和能力不仅体现在他们的兴趣上，还体现在实际的工作表现和对用户需求的敏感度。前段时间，我在网上看见有人讨论，前端程序员是不是要去玩游戏这个论题，有一个爆炸的论点：前端程序不玩游戏搞个毛前端啊！重要的是，他们能否在自己的工作中保持对用户体验的关注，并不断学习新知识和技能。每个人都有自己的学习和成长方式，最重要的是持续关注用户体验，提升自身技能，才能在前端开发的道路上走得更远。

2024-10-27 05:51:21 294

原创游戏内广告的设计要点：聚焦微信小游戏与抖音小游戏

通过选择合适的广告形式、优化广告位置、设计吸引人的广告内容、平衡广告与游戏体验、进行数据分析、遵守合规与道德以及与品牌合作等策略，开发者能够提升广告的效果，最终实现收益与用户体验的双赢。在微信小游戏和抖音小游戏的生态中，广告作为一种重要的变现手段，扮演着不可或缺的角色。广告位置的选择直接影响玩家的体验与广告的有效性。通过与相关品牌的合作，可以为游戏内广告增加更多的价值，不仅提升广告的收益，还能丰富玩家的体验。在设计游戏内广告时，遵循平台的相关规定是非常重要的，以免引发不必要的麻烦。大家好，我是小蜗牛。

2024-10-26 05:58:35 767

原创跨平台游戏开发的挑战与机会

跨平台游戏开发在微信小游戏和抖音小游戏之间充满了挑战与机会。通过关注技术差异、用户体验、推广策略和社交互动等方面，开发者可以更好地应对挑战，抓住机遇。希望这些建议能够帮助你在这两个平台上取得成功，让你的游戏赢得更多玩家的喜爱！想学习更多关于游戏开发的知识可以关注我公众好：会做游戏的小蜗牛。

2024-10-25 06:27:29 248

原创小技巧解决大问题：下落处理

最下方的红色数字是网格的列号。列号和编号之间有着千丝万缕的关系，所有编号为0的方块，移动后的位置就应该在列号为0的那一列上。编号为1的方块就应该在列号为1的那一列上，依次类推。蓝色的方块代表没有被消除的方块，白色的方块代表被消除的方块。方块被消除后，没有被消除的方块需要左移或者下移，去填充整个网格。有的同学可能说，这不简单，直接移动不就好了，你想简单了。上面我给你的是比较特殊的，如果图形是这样你怎么移动。如果我们想让所有的方块左移，我们就需要给每一行从左到右去编号，从0开始，遇到空白就跳过。

2024-10-24 06:23:52 303

原创游戏界面设计的最佳实践

通过简洁明了的布局、一致的设计风格、直观的交互方式、适应性设计、合理的视觉层次感、用户测试与反馈，以及情感与主题的契合，开发者可以创造出更具吸引力的游戏界面。定期进行用户测试：在游戏开发的不同阶段进行用户测试，观察玩家的操作习惯和反馈，及时调整设计。使用统一的色彩和字体：确保在整个游戏中使用相同的色彩方案和字体风格，以传达统一的视觉体验。突出重点信息：使用较大的字体、鲜艳的颜色或特殊的图形来突出关键信息，吸引玩家的注意力。合理的操作提示：在合适的时机为玩家提供操作提示，帮助他们理解游戏机制和界面功能。

2024-10-23 07:04:31 524

原创如何提升游戏的用户留存率

提升游戏的用户留存率是一个综合性的工作，需要从多个方面入手。通过优化新手引导、增强社交元素、定期更新内容、重视玩家反馈、建立合理平衡、保持稳定性以及提供个性化体验，可以有效提高用户的留存率，让更多玩家愿意留在你的游戏中。希望这些建议能为你的游戏开发提供帮助，助力你的游戏取得更大的成功！想了解更多的同学可以关注wx公众好：会做游戏的小蜗牛。

2024-10-21 06:48:22 843

原创从零到一：前端开发者学习 Cocos Creator 的全攻略

Cocos Creator 是基于 Cocos2d-x 引擎的游戏开发工具，它的核心是使用 JavaScript/TypeScript 进行开发。这对于前端开发者来说，是个非常有优势的工具，因为大部分前端开发者都已经熟悉 JavaScript。Cocos Creator 支持 2D 和 3D 游戏的开发，具备直观的界面设计、场景编辑器以及丰富的组件系统，极大地提高了开发效率。

2024-10-20 08:36:32 1023

原创相见恨晚的css工具

地址：https://wweb.dev/resources/css-separator-generator/地址：https://9elements.github.io/fancy-border-radius。地址：https://getwaves.io/

2022-12-12 19:52:22 503 2

原创 JSON.stringify还可以这样用

let person = { name:"夫子", age:1000, gender:"male" }name:"夫子",

2022-12-12 19:51:12 408

原创轻松调试线上的app之抓包工具stream

对于一个线上app，是不是会因为无法调试而痛苦不堪，今天就给大家介绍一款好用的ios抓包应用。（对于https我们需要安装一下证书，具体原因可以看我前面有一个分享视频）1.在appstore中搜索stream，直接下载。①设置—通用—描述文件—信任描述文件。②设置—通用—关于本机—证书信任设置。2.打开软件，设置https抓包。3.下载安装证书并授权。3.结束抓包，查看历史。2.操作要抓包的应用。

2022-12-12 19:49:04 4634

原创 echarts入门到实战

在 echarts 中，“数据转换” 这个词指的是，给定一个已有的“数据集”（作为前端程序员，数据可视化也是我们必备的一个技能，怎么获取这个技能呢，其实我们只需要掌握一个图表库即可。目前，最常用的图表库是echarts。xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },），echarts 能生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图表。图表容器，样式，数据集，数据转换，坐标轴，视觉映射，图例，事件与行为。

2022-11-27 13:45:16 862

原创 three.js入门到实战

立方体网格模型和光照组成了一个虚拟的三维场景，相机对象就像你生活中使用的相机一样可以拍照，只不过一个是拍摄真实的景物，一个是拍摄虚拟的景物，拍摄一个物体的时候相机的位置和角度需要设置，虚拟的相机还需要设置投影方式，当你创建好一个三维场景，相机也设置好，就差一个动作“咔”，通过渲染器就可以执行拍照动作。生活中的物体都是三维的，但是人的眼睛只能看到正面，不能看到被遮挡的背面，三维几何体在人眼睛中的效果就像一张相机拍摄的二维照片，你看到的是一个2D的投影图。有个了解即可，需要的时候在用api文档查阅。

2022-11-27 11:59:42 1432 1

原创这些到底是个啥？

我们知道计算机只能认识0和1，那么我们要把字符存入计算机，我们还是需要将字符转化为二进制，那么怎么转化呢？直接强行转化好像没有什么好的方法，计算机常用得方法就是映射：也就是给每一个字符用一个二进制代号来表示。表情图标其实本质和我们的汉字是一样的，我们就把他当作一个字符，然后在计算机中有唯一的二进制代号和他关联。这些表情我们一直在使用，但是你能回答，这些表情到底是啥？其实你得猜想是对得，下面就是表情图得映射表，我们成为unicode映射表。这玩意，我们大家应该清楚吧，不清楚也没关系，我来讲讲。

2022-11-26 11:00:00 163

原创前端菜鸟一般不知道css可以这样命名

光明之子因为子元素不是单独的一个命名，而是包含了他的父级元素，这样命名冲突就降低了很多。光明之子冥王之子冥王之子

2022-11-26 10:56:24 646

原创 vscode一键生成佛祖保佑永无bug

"LastEditTime": "Do not edit", // 设置后，保存文件更改默认更新最后编辑时间。windows使用“ctrl+shift+p”，选择对应的codeDesign，生成代码图案！注意：对于函数注释，只有再函数上面添加的时候，param字段才会生效，否则不会显示param。"Date": "Do not edit", // 设置后默认设置文件生成时间。"email":"lujing@qq.com"//可自定义任意注释代码段。"Author": "lujing",// 设置后作者。

2022-11-26 10:55:07 1443 2

原创前端必备的实用工具与网站

其实动画库很多（动画库-animation.css），但是有时候我们为了一两个动画效果，引入一个动画库得不偿失，这里给大家推荐一个网站，需要什么动画，直接查看实现动画的代码。颜文字(日语：颜文字)并不是指有颜色的文字，而是指用文字或各种线条、符号等组成的图画，它是ASCII Art的一部分。作为前端程序员，肯定和图片离不开的，那么如果ui给我们的图片太大了怎么办呢？这个时候我们有了这个工具就不用求人了。这个网站有很多颜文字，并且可以直接cv，我们可以用于我们自己的网站系统中。

2022-11-26 10:49:53 254

原创 vue中scoped原理与样式穿透原理

这个时候，我们项目中需要用到ui库里面的button，但是他默认的大小不符合我项目的要求，我需要比mini还要小的按钮，这时候怎么搞，因为elementUI库中的组件使用了scoped，所以我们直接修改样式是无效的，是无法做到子组件的。这个问题怎么解决呢？2.给中的每个选择器的最后一个选择器添加一个属性选择器，原选择器[data-v-xxxx]，如：原选择器为.container #id div，则更改后选择器为.container #id div[data-v-xxxx]

2022-11-19 10:09:25 577

原创深入解剖JS 中只有按值传递，没有按地址（引用）传递

/创建了一个object对象，将其引用赋给obj。//将对象传递给函数。

2022-11-19 10:06:15 190

原创 JavaScript中一个优雅的运算符使用技巧

ECMAScript 发展进程中，会有很多功能的更新，比如销毁，箭头功能，模块，它们极大的改变 JavaScript 编写方式，可能有些人喜欢，有些人不喜欢，但像每个新功能一样，我们最终会习惯它们。处于 ES2020 提案的第 4 阶段，因此应将其添加到规范中。它改变了访问对象内部属性的方式，尤其是深层嵌套的属性。今天主要给大家分享的运算符是：可选链接运算符；使用这个运算符后，可以让我们的代码更干净简洁。title:"冥王之子"title:"光明之子"

2022-11-19 10:01:04 445

原创 [13]javascript的类型检测的方法

Object.prototype.toString.call(obj) ====> 这时候执行的是原始的toString，且需要对obj执行toString。number,string,boolean,null ,undefined,symbol, object,function,正则，array,date,这个是万能的检测方法，但是我们不能直接调用toString，而是要调用Object原型上的toString（因为toString被其他类型重写了）

2022-11-19 09:55:28 280

原创 [12]null和undefined你清楚吗

但是，JavaScript的数据类型分成基本数据和引用数据两大类，Brendan Eich觉得表示"空"的值最好不是对象。其次，JavaScript的最初版本没有包括错误处理机制，发生数据类型不匹配时，往往是自动转换类型或者默默地失败。大多数计算机语言，有且仅有一个表示"无"的值，比如，C语言的NULL，Java语言的null，Python语言的None。目前，null和undefined基本是同义的，只有一些细微的差别。时，最初像Java一样，只设置了null作为表示"空"的值。

2022-11-19 09:50:26 156

原创 [11]重绘与回流

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不影响布局(例如：background-color)，则称为重绘(repaints)（4）将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。当render tree中的一部分(或全部)，因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，这就是回流(reflow)当你请求上面的一些属性的时候，浏览器为了给你最精确的值，会进行回流和重绘。

2022-11-19 09:45:18 370

原创 [10]浏览器的同源策略你清楚吗？

我们结合生活去再理解一下：假如你们家的房子，是不是不允许陌生人进入，如果可以随便进入，那么就有可能被盗了，那么这个时候，锁和钥匙就出现了为了保证家的安全。这个锁和钥匙就是这里的同源策略。同源策略就是指必须在同一个协议，域名，端口号下，而且三者必须一致的。同源策略：要求一个服务器上的网页，只能请求这个服务器上的资源。CORS是基于http1.1的一种跨域解决方案，它的全称是。haring，跨域资源共享。

2022-11-19 09:37:15 495

原创 [9]CSRF你清楚吗？

CSRF（Cross-Site request forgery）跨站请求伪造你可以这么来理解：攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。每一个请求都一个referer字段，记录请求的来源，后台通过这个字段，可以知道这个请求是否是合法的。这种方法很简单，但是不安全，因为这个referer字段是可以篡改的。这个方法还是很常见的。

2022-11-05 19:48:13 302

原创 [8]xss你清楚吗

但是之前有个同事既然是这样处理的：前端直接将字符串进行了encodeURIComponent和decodeURIComponent处理，这就直接阻止了后端的转义，辜负了后端开发的一片好心。恶意攻击者往Web页面里插入恶意javaScript代码，当用户浏览该页面的时候，嵌入Web里面的javaScript代码会被执行，从而达到恶意攻击用户的目的。又称为持久型跨站点脚本，这个直接通过名字就能很好的理解（存储型），它一般发生在XSS攻击代码存储在网站数据库中，当一个页面被用户打开的时候执行。

2022-11-05 19:46:31 817

原创 [7]能不能说一说浏览器缓存

1.强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)2.协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定【使用缓存，但是需要经过协商缓存】那怎么判断协商缓存是否成功呢？

2022-11-05 19:42:04 562

原创 [6]https为什么安全

我们类比我们的四六级证书，其实就是一张纸，这张纸我们随便也能仿造一张，但是这个真伪是很好识别，我们直接用证书编号到四六级官网一查就知道，如果里面的信息和这张纸上的信息一致，则说明这张证书是真实的。每份签发证书都可以根据验证链查找到对应的根证书，操作系统、浏览器会在本地存储权威机构的根证书，利用本地根证书可以对对应机构签发证书完成来源验证；通过上面的说明，我们知道了抓包工具怎么抓包的，但是为什么浏览器需要提前下载抓包工具的根证书呢？看下面的截图，是不是就是抓包工具的根证书，用来校验证书来源的合法性的。

2022-11-05 19:37:39 1297

原创 [5]http1、2、3的区别

但是在tcp层，还是要将上一层的切开的片，整合为一个数据包，依然需要按照顺序去响应，依然遵循“丢包重传”机制，所以tcp层的队头阻塞的问题依然是存在的。这是因为现有的TCP协议扩展起来非常困难，因为已经有太多太多的设备使用了各种不同的TCP协议的版本，如果想直接在现有的TCP协议上进行扩展非常困难，因为需要给这么多台设备进行升级几乎是不可能完成的任务。使用浏览器的开发者模式查看相关资源的加载情况，可以看到对应的http2的资源在加载的时候，客户端可以同时请求多个资源；再次，HTTP请求和回应的格式也变了。

2022-11-05 19:34:38 1648

原创 chrome高级调试技巧总结

示例：我想要知道名字是zs5的人的年纪是多大（这里只是一个示例，我们现实中，可能都不知道这个数组中每一条数据有多少个字段，之前我开发gis服务，经常会用到这个条件断点，因为数据量非常大，且每一个点位的数据结构很复杂，这时候这个方法就非常的奏效）又比如：我之前写导出功能的时候，一直出问题，这时候我会判断应该是请求头设置有问题，这时候我们不断调整代码中的请求头，然后重新执行代码去重新发送请求。确实，但是这样写有个不好的地方，这种调试需要修改代码才能实现，而浏览器本来就提供了条件断点，直接使用岂不快哉。

2022-11-05 19:22:55 8897 3

原创网络小白入门篇

五层协议的体系结构物理层数据链路层网络层传输层应用层用户上网设置我们访问一个网页更多学习视频学习资料请参考：B站搜索“我们一起学前端”

2022-10-28 21:52:25 1860

原创 px,em,rem,%，vmin，vmax,vh ,vw

px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1920x1080的，表示的是水平方向是1920个像素点，垂直方向是1080个像素点。参考物是父元素的font-size，也就是说，如果两个元素的父元素的font-size不一样，即使两个元素都是1em，但是大小依然不一致。如果使用rem，这个相对单位，你不知道使用者使用的是什么单位，而且根元素的font-size你也不清楚，这样适配也是有问题的。css3新单位，相对于视口的宽度或高度中较小(较大)的那个。

2022-10-28 21:41:09 642

原创 http状态码

说到这个场景：我想到了options的预请求，感觉他们的功能有些相似，但是一直没有找到具体的相关资料，如果有清楚的他们区别的小伙伴，希望在视频下方留言告知，让大家一起学习一起进步哈。5xx : 服务器错误，这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。4xx : 请求错误，这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理；2xx : 成功，这一类型的状态码，代表请求已成功被服务器接收、理解、并接受；

2022-10-22 23:07:16 531

原创 tcp三次握手四次挥手

第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手。第二次握手：服务器收到syn包，必须确认客户的syn（ack=x+1），同时自己也发送一个SYN包（seq=y），即SYN+ACK包，此时服务器进入SYN_RECV状态；第一次握手：建立连接时，客户端发送syn包(seq=x)到服务器，并进入SYN_SEND状态，等待服务器确认；1.每条消息必须要有确认。

2022-10-22 23:05:30 447

原创说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？

SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。cookie一般是后端在浏览器种cookie,后面所有的请求都会携带这个cookie。cookie ：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭；cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端；

2022-10-22 23:02:53 283 1

content-counter.html

从零开始，支持小数的翻牌器

request.html

空空如也