├── .eslintrc.js
├── .gitignore
├── CNAME
├── LICENSE
├── README.md
├── docs
├── funny.md
├── games.md
├── other-languages.md
└── shaders.md
├── index.html
├── index.js
├── jcoderc.js
└── style.css
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | globals: {
3 | globalThis: true,
4 | JCode: true,
5 | },
6 | extends: 'eslint-config-sprite',
7 | rules: {
8 | complexity: ['warn', 25],
9 | 'no-unused-vars': 'warn',
10 | 'no-restricted-globals': 'off',
11 | 'max-params': ['warn', 7],
12 | 'import/no-anonymous-default-export': 'off',
13 | 'no-console': 'warn',
14 | 'import/no-named-as-default': 'off',
15 | 'import/no-named-as-default-member': 'off',
16 | },
17 | };
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log*
3 | .nyc_*/
4 | .dir-locals.el
5 | .DS_Store
6 | .test
--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | g.jcode.pub
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 稀土掘金
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 码上掘金项目精选
2 |
3 | 这个仓库是码上掘金精选的仓库，这里收集了**数百个**优秀的码上掘金项目，欢迎大家推荐。
4 |
5 | ## 一周精选
6 |
7 | ### [来都来了点个赞呗](https://code.juejin.cn/pen/7167282711076274189) by [名字好难](https://juejin.cn/user/826447736892039)
8 |
9 | 没错我是凑数的！
10 |
11 | 
12 |
13 | ### [倾斜迷宫游戏](https://code.juejin.cn/pen/7168861068276531200) by [程序员路飞](https://juejin.cn/user/3315782799861959)
14 |
15 | 依靠操纵杆倾斜迷宫移动小球，很有趣的游戏方式，就是非常困难。
16 |
17 | 
18 |
19 | ### [斗兽棋](https://code.juejin.cn/pen/7167717800264335368) by [志帅](https://juejin.cn/user/1239904846878599)
20 |
21 | 咋和我小时后玩的不一样？
22 |
23 | 
24 |
25 | ### [掘金子的小胖墩](https://code.juejin.cn/pen/7158689701027643405) by [懒狗小前端](https://juejin.cn/user/1521379826211549)
26 |
27 | 真正做到了快乐掘金！
28 |
29 | 
30 |
31 | ### [皮影戏](https://code.juejin.cn/pen/7160569257925804068) by [陈_杨](https://juejin.cn/user/2084329779108062)
32 |
33 | 非物质文化遗产。
34 |
35 | 
36 |
37 | ### [超Q弹跳游戏](https://code.juejin.cn/pen/7166586991231008805) by [Guowc](https://juejin.cn/user/1732486057965181)
38 |
39 | 小小青蛙蹦蹦跳跳~
40 |
41 | 
42 |
43 | ### [程序对对对](https://code.juejin.cn/pen/7160842770892980239) by [她破风林](https://juejin.cn/user/1654142228504888)
44 |
45 | 这个好难，脑子不够用了…
46 |
47 | 
48 |
49 | ### [盖塔楼](https://code.juejin.cn/pen/7165883287708270625) by [7657454218679](https://code.juejin.cn/pen/7165883287708270625)
50 |
51 | 万丈高楼平地起！
52 |
53 | 
54 |
55 | ### [彼尔德大冒险](https://code.juejin.cn/pen/7166882989056458760) by [六个饭](https://juejin.cn/user/141153965187095)
56 |
57 | 好玩，吃⭐︎会上瘾。
58 |
59 | 
60 |
61 | ### [万花筒](https://code.juejin.cn/pen/7166800162348597261) by [jsmask](https://juejin.cn/user/1204720472953240)
62 |
63 | 拖拽一下有惊喜。
64 |
65 | 
66 |
67 | ### [代码养鱼](https://code.juejin.cn/pen/7085309849071779877) by [jsmask](https://juejin.cn/user/1204720472953240)
68 |
69 | 前人养鱼，后人摸鱼。
70 |
71 | 
72 |
73 | ### [真心的祝福](https://code.juejin.cn/pen/7166796886035136520) by [jsmask](https://juejin.cn/user/1204720472953240)
74 |
75 | 良心特效。
76 |
77 | 
78 |
79 | ## 归档
80 |
81 | ### 游戏类
82 |
83 | - [益智游戏](docs/games.md#益智类游戏)
84 | - [棋牌游戏](docs/games.md#棋类游戏)
85 | - [动作游戏](docs/games.md#动作类游戏)
86 |
87 | ### 好玩的
88 |
89 | - [创意](docs/funny.md#创意)
90 | - [趣味](docs/funny.md#趣味)
91 | - [有用](docs/funny.md#有用)
92 | - [搞笑](docs/funny.md#搞笑)
93 | - [无厘头](docs/funny.md#无厘头)
94 |
95 | ### WebGL Shaders
96 |
97 | - [Shaders](docs/shaders.md#shaders)
98 | - [CSS-Doodle](docs/shaders.md#css-doodle)
99 | - [Shadertoy](docs/shaders.md#shadertoy)
100 |
101 | ### 其他编程语言
102 |
103 | - [文言文](docs/other-languages.md#文言文)
104 | - [Python](docs/other-languages.md#pythonbrython)
105 |
106 | ### 小编推荐
107 |
108 | ### [大乱斗](https://code.juejin.cn/pen/7163113821949657103) by [清1024](https://juejin.cn/user/1825603141515336)
109 |
110 | 
111 |
112 |
--------------------------------------------------------------------------------
/docs/funny.md:
--------------------------------------------------------------------------------
1 | # 码上掘金趣味精选
2 |
3 | 各种趣味、创意和无厘头的项目，给大家带来欢乐。
4 |
5 | ## 创意
6 |
7 | ### [粒子爱心跳动](https://code.juejin.cn/pen/7165310573574848545) by [战场小包](https://juejin.cn/user/4424090519078430)
8 |
9 | 鉴定过，撩妹用的…
10 |
11 | 
12 |
13 |
14 | ### [文字路径动画](https://code.juejin.cn/pen/7160935003981873188) by [thatisit](https://juejin.cn/user/2330620383466893)
15 |
16 | 代码不止，掘金不停。
17 |
18 | 
19 |
20 | ### [掘金路灯招牌](https://code.juejin.cn/pen/7145274940579643430) by [彩云归](https://juejin.cn/user/4116215813642285)
21 |
22 | 掘金在路灯下，氛围感满满。
23 |
24 | 
25 |
26 | ### [永不熄灭的1024](https://code.juejin.cn/pen/7158879461859917837) by [璇天凤舞](https://juejin.cn/user/1209898758320840)
27 |
28 | 1024 程序员节专属键盘，用不熄灭的灯光，来表达程序员的不息。
29 |
30 | 
31 |
32 | ### [银河](https://code.juejin.cn/pen/7127840385564409895) by [留不住的不止有风](https://juejin.cn/user/694547077147485)
33 |
34 | 好看！
35 |
36 | 
37 |
38 | ### [旋转的六边形](https://code.juejin.cn/pen/7152711992568987656) by [爱吃鱼的桶哥Z](https://juejin.cn/user/1275089219770840)
39 |
40 | 
41 |
42 | ### [烟花效果](https://code.juejin.cn/pen/7148811030594846735) by [爱吃鱼的桶哥Z](https://juejin.cn/user/1275089219770840)
43 |
44 | Canvas实现的烟花效果。
45 |
46 | 
47 |
48 | ### [闪耀星光](https://code.juejin.cn/pen/7148786958607581195) by [爱吃鱼的桶哥Z](https://juejin.cn/user/1275089219770840)
49 |
50 | Canvas实现的视觉效果。
51 |
52 | 
53 |
54 | ### [五彩斑斓加载效果](https://code.juejin.cn/pen/7140845026069708807) by [爱吃鱼的桶哥Z](https://juejin.cn/user/1275089219770840)
55 |
56 | 好看的Loading效果。
57 |
58 | 
59 |
60 | ### [ASOUL动态霓虹灯牌](https://code.juejin.cn/pen/7155398124578537504) by [马小涛](https://juejin.cn/user/1042775507474375)
61 |
62 | ASOUL粉丝团贡献。
63 |
64 | 
65 |
66 | ### [掘金专属定制键盘](https://code.juejin.cn/pen/7155793654731243527) by [法医](https://juejin.cn/user/1574156383557255)
67 |
68 | 这样的键盘给整一套，感觉挺好的。
69 |
70 | 
71 |
72 | ### [可爱键盘](https://code.juejin.cn/pen/7162053437960486919) by [狐狸小妃](https://juejin.cn/user/4191809188923368)
73 |
74 | 另一款萌萌哒键盘。
75 |
76 | 
77 |
78 | ### [立方体悬停效果](https://code.juejin.cn/pen/7157701061707300871) by [codinglin](https://juejin.cn/user/726107228492253)
79 |
80 | 非常解压的视觉和交互效果。
81 |
82 | 
83 |
84 | ### [泡泡机](https://code.juejin.cn/pen/7102335940844060703) by [shinn_lancelot](https://juejin.cn/user/3737995264667031)
85 |
86 | 童趣十足。
87 |
88 | 
89 |
90 | ### [怦然心动的button](https://code.juejin.cn/pen/7128378165218508807) by [CoderBin](https://juejin.cn/user/1627704066072712)
91 |
92 | 好看，交互感满满。
93 |
94 | 
95 |
96 | ### [玻璃拟态](https://code.juejin.cn/pen/7085536704727089163) by [狂奔滴小马](https://juejin.cn/user/2189882895384093)
97 |
98 | 质感满满！
99 |
100 | 
101 |
102 | ### [HTML5标签周期表](https://code.juejin.cn/pen/7158304368272343077) by [王道之矢](https://juejin.cn/user/1926000099722487)
103 |
104 | 既养眼又是学习利器！
105 |
106 | 
107 |
108 | ### [充电效果](https://code.juejin.cn/pen/7124182728378941471) by [程序猿八哥](https://juejin.cn/user/3087084379974791)
109 |
110 | border-radius的巧妙运用，学到了👍🏼
111 |
112 | 
113 |
114 | ### [有趣的菜单](https://code.juejin.cn/pen/7158610477453410334) by [草帽Plasticine](https://juejin.cn/user/1324240506200781)
115 |
116 | 炫酷霓虹灯特效展开菜单。
117 |
118 | 
119 |
120 | ### [代码雨](https://code.juejin.cn/pen/7085589976422809640) by [鸡汤来喽](https://juejin.cn/user/2796746683720590)
121 |
122 | 假装是黑客~
123 |
124 | 
125 |
126 | ### [三体-水滴](https://code.juejin.cn/pen/7159414417061478413) by [ohGreat](https://juejin.cn/user/2013961032308701)
127 |
128 | 给岁月以文明，而不是给文明以岁月。
129 |
130 | 
131 |
132 | ## 趣味
133 |
134 | ### [fly-birds](https://code.juejin.cn/pen/7085602086749995020) by [战场小包](https://juejin.cn/user/4424090519078430)
135 |
136 | 很有意思的CSS飞鸟。
137 |
138 | 
139 |
140 | ### [雪糕地球](https://code.juejin.cn/pen/7085568010278141993) by [战场小包](https://juejin.cn/user/4424090519078430)
141 |
142 | 看起来很好吃的样子~
143 |
144 | 
145 |
146 |
147 | ### [夜幕下行走的猫咪](https://code.juejin.cn/pen/7100867463071399972) by [南城FE](https://juejin.cn/user/3378115131237863)
148 |
149 | CSS动画，优雅的喵星人。
150 |
151 | 
152 |
153 | ### [小幽灵](https://code.juejin.cn/pen/7143221622135062535) by [嘿嘿Z](https://juejin.cn/user/219558054997710)
154 |
155 | CSS画作，小幽灵。
156 |
157 | 
158 |
159 | ### [双色莲花图](https://code.juejin.cn/pen/7127680399345451022) by [叶一一](https://juejin.cn/user/70822370479901)
160 |
161 | CSS画作，双色莲花图。
162 |
163 | 
164 |
165 | ### [白露](https://code.juejin.cn/pen/7143489417259270177) by [叶一一](https://juejin.cn/user/70822370479901)
166 |
167 | CSS画作，二十四节气之白露。
168 |
169 | 
170 |
171 | ### [简笔办公位](https://code.juejin.cn/pen/7155104723878723592) by [叶一一](https://juejin.cn/user/70822370479901)
172 |
173 | 桌上电脑可以开关机，细节满分。
174 |
175 | 
176 |
177 | ### [小风扇](https://code.juejin.cn/pen/7102268763206058020) by [前端若水](https://juejin.cn/user/3526889034487943)
178 |
179 | 夏天小风扇，看着就凉爽。
180 |
181 | 
182 |
183 | ### [摇摆的小花](https://code.juejin.cn/pen/7087517941817835557) by [手可摘棉花](https://juejin.cn/user/1820446987402632)
184 |
185 | CSS绘制一朵小红花。
186 |
187 | 
188 |
189 | ### [树叶上挪动的毛毛虫](https://code.juejin.cn/pen/7087018381596950541) by [手可摘棉花](https://juejin.cn/user/1820446987402632)
190 |
191 | CSS绘制树叶上挪动的毛毛虫。
192 |
193 | 
194 |
195 | ### [电脑帮你写代码表白？](https://code.juejin.cn/pen/7156421493872656392) by [荆棘鸟Q](https://juejin.cn/user/1055183736157998)
196 |
197 | 单身狗撩妹必备。
198 |
199 | 
200 |
201 | ### [萌熊小夜灯](https://code.juejin.cn/pen/7101492822934552583) by [shinn_lancelot](https://juejin.cn/user/3737995264667031)
202 |
203 | 挺可爱的小🐻夜灯。
204 |
205 | 
206 |
207 | ### [CSS Cat](https://code.juejin.cn/pen/7156038975126241293) by [XboxYan](https://juejin.cn/user/3579665587900030)
208 |
209 | 睛瞪得像铜铃~耳朵竖得像天线~啊~啊~啊~啊啊~。。。
210 |
211 | 
212 |
213 | ### [太极图](https://code.juejin.cn/pen/7159130590334156837) by [__mxin](https://juejin.cn/user/3790771824108808)
214 |
215 | 用CSS巧妙绘制。
216 |
217 | 
218 |
219 | ### [蛙蛙](https://code.juejin.cn/pen/7159368093972561950) by [初冬007](https://juejin.cn/user/1042776689228520)
220 |
221 | 治愈！
222 |
223 | 
224 |
225 | ### [一棵树](https://code.juejin.cn/pen/7159803714717351951) by [byte_n](https://juejin.cn/user/3488076823279703)
226 |
227 | 看，这是生命的力量！
228 |
229 | 
230 |
231 | ### [睡眠中的小熊](https://code.juejin.cn/pen/7142312439684530184) by [子不语Any](https://juejin.cn/user/3051900007626103)
232 |
233 | 睡得真香~
234 |
235 | 
236 |
237 | ### [CSS 3D曲面手机模型](https://code.juejin.cn/pen/7160960844447088678) by [Guowc](https://juejin.cn/user/1732486057965181)
238 |
239 | 细节很赞，有彩蛋~
240 |
241 | 
242 |
243 | ### [浪漫的心](https://code.juejin.cn/pen/7164319224926568478) by [jsmask](https://juejin.cn/user/1204720472953240)
244 |
245 | 撒狗粮专用。
246 |
247 | 
248 |
249 | ### [烟花绽放](https://code.juejin.cn/pen/7164655606089908231) by [Kyle_Zhang](https://juejin.cn/user/1970741420242397)
250 |
251 | 粒子烟花效果。
252 |
253 | 
254 |
255 | ## 有用
256 |
257 | ### [农历日历](https://code.juejin.cn/pen/7155687100409937924) by [长安洛阳](https://juejin.cn/user/2796746683217246)
258 |
259 | 一直觉得农历日期转换规则非常神奇……
260 |
261 | 
262 |
263 | ## 搞笑
264 |
265 | ### [其名为duang](https://code.juejin.cn/pen/7155739934412767240) by [用户1628356719282](https://juejin.cn/user/1121935193551598)
266 |
267 | 莫名喜感。
268 |
269 | 
270 |
271 | ### [熊猫](https://code.juejin.cn/pen/7143951928383406093) by [CatWatermelon](https://juejin.cn/user/3280598430652264)
272 |
273 | CSS画作，画风治愈。
274 |
275 | 
276 |
277 | ### [小黑子](https://code.juejin.cn/pen/7158274481616584708) by [来瓶墨汁](https://juejin.cn/user/3549659256335389)
278 |
279 | 小黑子吗？你不说我还以为CXK...
280 |
281 | 
282 |
283 | ## 无厘头
284 |
285 | ### [捉迷藏的运营大大们](https://code.juejin.cn/pen/7088118666750853128) by [战场小包](https://juejin.cn/user/4424090519078430)
286 |
287 | 这个扫雷做得很有特色，好评！
288 |
289 | 
290 |
291 | ### [优弧语录](https://code.juejin.cn/pen/7140055948436963336) by [猪痞恶霸](https://juejin.cn/user/431430802343479)
292 |
293 | 掘金大佬优弧的经典语录。
294 |
295 | 
296 |
297 | ### [今天可以捡到多少钱](https://code.juejin.cn/pen/7128772814219247629) by [彩云归](https://juejin.cn/user/4116215813642285)
298 |
299 | 有个捡钱的App，就问你用不用？
300 |
301 | 
302 |
303 | ### [先有鸡先有蛋](https://code.juejin.cn/pen/7159059568033529886) by [SpongeNoob](https://juejin.cn/user/2186269664481000)
304 |
305 | 先有鸡还是先有蛋？JS给出的答案是……
306 |
307 | 
308 |
--------------------------------------------------------------------------------
/docs/games.md:
--------------------------------------------------------------------------------
1 | # 码上掘金游戏精选
2 |
3 | 这里收集各类优秀的游戏项目，方便大家摸鱼、研究、参考、学习。
4 |
5 | ## 益智类游戏
6 |
7 | ### [记忆小挑战](https://code.juejin.cn/pen/7165762487818649638) by [Jacob.King](https://juejin.cn/user/3227821868326935)
8 |
9 | 沧海横流，物转星移，这尘寰三千年能被记住的又有多少。即便是天尧，也只不过是一瞬的星火。
10 |
11 | 
12 |
13 | ### [异形工厂](https://code.juejin.cn/pen/7157617542360465416) by [荆棘鸟Q](https://juejin.cn/user/1055183736157998)
14 |
15 | 慢热型，十分有趣的逻辑游戏！
16 |
17 | 
18 |
19 | ### [消除方块](https://code.juejin.cn/pen/7132120696733302822)
20 |
21 | 经典的三消游戏，基于 [LittleJS](https://github.com/KilledByAPixel/LittleJS) 开发。
22 |
23 | 
24 |
25 | ### [推箱子](https://code.juejin.cn/pen/7131587018592796679) by [十年踪迹](https://juejin.cn/user/712139263189303)
26 |
27 | 有挑战的推箱子游戏，一共113个独特关卡，还带有AI智能过关。
28 |
29 | 
30 |
31 | ### [🤖 manufactoria](https://code.juejin.cn/pen/7161659797224292365) by [十年踪迹](https://juejin.cn/user/712139263189303)
32 |
33 | 复刻机器人流水线，一款非常好玩的逻辑编程游戏，一共20多关，有些关卡难度较高，很考验编程天分。
34 |
35 | 
36 |
37 | ### [扫雷](https://code.juejin.cn/pen/7159386844486959118) by [大胆的番茄](https://juejin.cn/user/2735240659080696)
38 |
39 | UI非常美观的一款经典扫雷。
40 |
41 | 
42 |
43 | ### [2048](https://code.juejin.cn/pen/7157941983531499534) by [小创不才](https://juejin.cn/user/2937535283070615)
44 |
45 | 经典2048游戏，做得比较精致，细节还原度高。
46 |
47 | 
48 |
49 | ### [数字消除](https://code.juejin.cn/pen/7129693096253587486) by [彩云归](https://juejin.cn/user/4116215813642285)
50 |
51 | 超难的数字消除，锻炼记忆力，反应力。
52 |
53 | 
54 |
55 | ### [数独游戏](https://code.juejin.cn/pen/7086356547647275049) by [心如止水](https://juejin.cn/user/3693965864862856)
56 |
57 | 经典数独游戏，可生成不同难度的关卡。
58 |
59 | 
60 |
61 | ### [数字华容道](https://code.juejin.cn/pen/7158450860962349087) by [_风满楼](https://juejin.cn/user/4028258417379037)
62 |
63 | 独特的益智游戏。
64 |
65 | 
66 |
67 | ### [十二生肖消一消](https://code.juejin.cn/pen/7158392331622842383) by [3065906567846141](https://juejin.cn/user/3065906567846141)
68 |
69 | 做得比较好的仿羊了个羊。
70 |
71 | 
72 |
73 | ### [horrible-game](https://code.juejin.cn/pen/7163673508373856296) by [pegasus64](https://juejin.cn/user/229113475654382)
74 |
75 | 简单却令人欲罢不能的小游戏，通关需要耐心。
76 |
77 | 
78 |
79 | ### [find-different-color](https://code.juejin.cn/pen/7164203368863563816) by [480912906381](https://juejin.cn/user/1082362117504823)
80 |
81 | 考验眼力的游戏！
82 |
83 | 
84 |
85 | ## 棋牌游戏
86 |
87 | ### [斗地主](https://code.juejin.cn/pen/7165866010870808590) by [7657454218679](https://juejin.cn/user/3787146891108654)
88 |
89 | 开心斗地主，我怀疑玩家作弊，拿到的都是好牌，代码还未review。不过玩起来确实爽！
90 |
91 | 
92 |
93 | ### [黑白棋](https://code.juejin.cn/pen/7156782077285761024) by [十年踪迹](https://juejin.cn/user/712139263189303)
94 |
95 | 带AI，而且AI棋力还不错。
96 |
97 | 
98 |
99 | ### [AI 五子棋](https://code.juejin.cn/pen/7121490956636913694) by [WebW0rld](https://juejin.cn/user/158786821564488)
100 |
101 | 带AI的五子棋。
102 |
103 | 
104 |
105 | ### [AI 五子棋2](https://code.juejin.cn/pen/7165504719518400526) by [7657454218679]
106 |
107 | 人工智能一般般嘛…
108 |
109 | 
110 |
111 | ### [中国象棋](https://code.juejin.cn/pen/7159467834496516132) by [Aaaaaaaaaaayou](https://juejin.cn/user/2277843822198574)
112 |
113 | 带AI的中国象棋，非常棒！要是 AI 能更强些就更好了。
114 |
115 | 
116 |
117 | ## 动作类游戏
118 |
119 | ### [第一人称跑酷游戏](https://code.juejin.cn/pen/7158651682354626591) by [第一人称跑酷游戏](https://code.juejin.cn/pen/7158651682354626591)
120 |
121 | 与其说跑酷，不如说是跳高…
122 |
123 | 
124 |
125 | ### [矿石大作战](https://code.juejin.cn/pen/7158032150456401951) by [FunnySaltyFish](https://juejin.cn/user/2673613109214333)
126 |
127 | 收集矿石，躲避💣
128 |
129 | 
130 |
131 | ### [枪战游戏](https://code.juejin.cn/pen/7132404229280366606)
132 |
133 | 好玩的枪战游戏，和上面的消除方块都是 [LittleJS](https://github.com/KilledByAPixel/LittleJS) 的示例游戏。
134 |
135 | 
136 |
137 | ### [贪吃蛇](https://code.juejin.cn/pen/7155823946388996132) by [法医](https://juejin.cn/user/1574156383557255)
138 |
139 | 非常精致的一款贪吃蛇游戏。
140 |
141 | 
142 |
143 | ### [贪食蛇](https://code.juejin.cn/pen/7159384232266039310) by [大胆的番茄](https://juejin.cn/user/2735240659080696)
144 |
145 | 另一个版本的贪吃蛇，也挺不错。
146 |
147 | 
148 |
149 | ### [红蓝打砖块](https://code.juejin.cn/pen/7155040400577658891) by [jsmask](https://juejin.cn/user/1204720472953240)
150 |
151 | 非常有趣的打砖块玩法，考验反应和操作。
152 |
153 | 
154 |
155 | ### [Canvas打球游戏](https://code.juejin.cn/pen/7142285713172594724) by [WebW0rld](https://juejin.cn/user/158786821564488)
156 |
157 | 简单但非常好玩的射击游戏。
158 |
159 | 
160 |
161 | ### [别碰到球](https://code.juejin.cn/pen/7154351544446484494) by [Ziu](https://juejin.cn/user/4420463502826087)
162 |
163 | 玩起来会上瘾。
164 |
165 | 
166 |
167 | ### [吃豆人](https://code.juejin.cn/pen/7159784253343924254) by [passer-by6061](https://juejin.cn/user/289926798118589)
168 |
169 | 吃豆人还原度挺高的，不知道是不是我操作问题，感觉偶尔方向键不太灵。
170 |
171 | 
172 |
173 | ### [飞机大战](https://code.juejin.cn/pen/7160317661635674146) by [2779985582767421](https://juejin.cn/user/2779985582767421)
174 |
175 | 简单又好玩的纵版射击游戏。
176 |
177 | 
178 |
179 | ### [💩到临头](https://code.juejin.cn/pen/7160217341429710855) by [JingZaia](https://juejin.cn/user/3364922022705384)
180 |
181 | 创意不错，我一开始以为是接💩，因为毕竟是🐶，结果规则竟然是躲💩。
182 |
183 | 
184 |
185 | ### [大乱斗](https://code.juejin.cn/pen/7163113821949657103) by [清1024](https://juejin.cn/user/1825603141515336)
186 |
187 | 格斗游戏，厉害了！
188 |
189 | 
190 |
191 | ### [乒乓球游戏](https://code.juejin.cn/pen/7163855731035209743) by [wangpeng1478](https://juejin.cn/user/2875978146910600)
192 |
193 | 人家用球拍，我用脖子，这是个治疗颈椎病的好游戏！
194 |
195 | 
196 |
197 | ### [炸弹人](https://code.juejin.cn/pen/7162350895340978189) by [垃圾猿](https://juejin.cn/user/3632442150778654)
198 |
199 | 高还原度的红白机炸弹人游戏，儿时回忆。
200 |
201 | 
202 |
203 | ### [水果兄弟](https://code.juejin.cn/pen/7161331535579185191) by [我的代码果然有问题](https://juejin.cn/user/2084329775961752)
204 |
205 | 仿 Brotato 游戏，挺有意思的。
206 |
207 | 
208 |
209 | ### [捕鱼游戏](https://code.juejin.cn/pen/7164206576956342302) by [Guowc](https://juejin.cn/user/1732486057965181)
210 |
211 | 真的超级治愈！
212 |
213 | 
214 |
--------------------------------------------------------------------------------
/docs/other-languages.md:
--------------------------------------------------------------------------------
1 | # 码上掘金编程精选
2 |
3 | 这里收集非前端语言的有趣项目。
4 |
5 | ## 文言文
6 |
7 | ### [文言文连连看](https://code.juejin.cn/pen/7159004559698821128) by [十年踪迹](https://juejin.cn/user/712139263189303)
8 |
9 | 文言文版的连连看游戏。
10 |
11 | 
12 |
13 | ### [鸡你太美编程语言](https://code.juejin.cn/pen/7158139956887158819) by [2927952043602](https://juejin.cn/user/400657736535053)
14 |
15 | 这个实在不知道说什么，只能膜拜...
16 |
17 | 
18 |
19 | ## Python(Brython)
20 |
21 | ### [走迷宫](https://code.juejin.cn/pen/7154683169952759816) by [pdudo](https://juejin.cn/user/2981531267892856)
22 |
23 | 使用brython实现的走迷宫
24 |
25 | 
26 |
27 | ### [连连看](https://code.juejin.cn/pen/7159814244257497096) by [pdudo](https://juejin.cn/user/2981531267892856)
28 |
29 | Brython | 连连看
30 |
31 | 
32 |
--------------------------------------------------------------------------------
/docs/shaders.md:
--------------------------------------------------------------------------------
1 | # 码上掘金shaders精选
2 |
3 | 码上掘金支持自定义语言，这里收集有趣的shaders，供研究和学习。
4 |
5 | ## Shaders
6 |
7 | ### [1024 cyberpunk](https://code.juejin.cn/pen/7158476101625479183) by [六个饭](https://juejin.cn/user/141153965187095)
8 |
9 | 炫酷的1024效果。
10 |
11 | 
12 |
13 | ### [shader-growing-tree](https://code.juejin.cn/pen/7161817597200203817) by [六个饭](https://juejin.cn/user/141153965187095)
14 |
15 | 生长的树。
16 |
17 | 
18 |
19 | ## [shader-physics-system](https://code.juejin.cn/pen/7158804618045030408) by [六个饭](https://juejin.cn/user/141153965187095)
20 |
21 | 物理系统。
22 |
23 | 
24 |
25 | ## [webgl-fireworks](https://code.juejin.cn/pen/7157254120372453376) by [六个饭](https://juejin.cn/user/141153965187095)
26 |
27 | 好看的焰火。
28 |
29 | 
30 |
31 |
32 | ## [CSS-Doodle](https://css-doodle.com/)
33 |
34 | ## [flame](https://code.juejin.cn/pen/7091669983536611365) by [十年踪迹](https://juejin.cn/user/712139263189303)
35 |
36 | 火焰🔥。
37 |
38 | 
39 |
40 | ## [Shadertoy](https://www.shadertoy.com/)
41 |
42 | ## [HellCarting](https://code.juejin.cn/pen/7158743210561372168) by [十年踪迹](https://juejin.cn/user/712139263189303)
43 |
44 | 恐怖深邃的矿井。
45 |
46 | 
47 |
48 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 码上掘金-精选
8 |
9 |
10 |
11 |
12 |
13 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const sidebarMenu = document.querySelector('.sidebar-menu');
2 | const selectedID = location.hash.slice(2);
3 | let selectedItem = null;
4 |
5 | async function initDemos(container, collection) {
6 | if(!collection) {
7 | const url = new URL(location.href);
8 | let search = url.search;
9 | const matched = url.search.match(/\?([_\w][_-\w]*)/);
10 | if(matched) {
11 | search = matched[1];
12 | }
13 | const dataPath = search ? `./collections/${search}.jcoderc.js` : './jcoderc.js';
14 | try {
15 | const demos = (await import(dataPath)).default;
16 | collection = demos.collection;
17 | const titleEl = document.getElementById('title');
18 | const title = demos.name || '码上掘金-精选';
19 | document.title = title;
20 | titleEl.textContent = title;
21 | if(demos.url) {
22 | titleEl.href = demos.url;
23 | }
24 | } catch (ex) {
25 | location.replace(`//${url.host}`);
26 | return;
27 | }
28 | }
29 | collection.forEach((demo) => {
30 | if(demo.type === 'folder') {
31 | const el = document.createElement('div');
32 | el.className = demo.folded ? 'sidebar-menuFolder folded' : 'sidebar-menuFolder';
33 | const p = document.createElement('p');
34 | p.className = 'title';
35 | p.textContent = demo.name;
36 | el.appendChild(p);
37 | const c = document.createElement('div');
38 | c.className = 'content';
39 | el.appendChild(c);
40 | container.appendChild(el);
41 | initDemos(c, demo.collection);
42 | } else {
43 | const el = document.createElement('div');
44 | const a = document.createElement('a');
45 | a.id = `code_${demo.id}`;
46 | a.href = `#/${demo.id}`;
47 | a.className = 'sidebar-menuItem';
48 | a.textContent = demo.name;
49 | el.appendChild(a);
50 | container.appendChild(el);
51 | if(demo.id === selectedID) selectedItem = a;
52 | if(demo.default && !selectedItem) selectedItem = a;
53 | }
54 | });
55 | }
56 |
57 | initDemos(sidebarMenu).then(() => {
58 | if(selectedItem) {
59 | const url = selectedItem.getAttribute('href');
60 | selectedItem.className = 'sidebar-menuItem active';
61 | loadCodeFrame(url, false);
62 | }
63 |
64 | function loadCodeFrame(url, pushState = true) {
65 | const src = url.replace(/^#/, '//code.juejin.cn/pen');
66 | window.frames[0].location.replace(src);
67 | if(pushState) history.pushState({url}, '', url);
68 | else history.replaceState({url}, '', url);
69 | }
70 |
71 | const container = document.querySelector('main');
72 | document.querySelector('.handler').addEventListener('click', () => {
73 | container.className = container.className === 'max' ? '' : 'max';
74 | });
75 |
76 | const menu = document.querySelector('.sidebar-menu');
77 | menu.addEventListener('click', (evt) => {
78 | const {target} = evt;
79 | const activeEl = menu.querySelector('a.sidebar-menuItem.active');
80 |
81 | if(target !== activeEl && /^sidebar-menuItem/.test(target.className)) {
82 | if(activeEl) activeEl.className = 'sidebar-menuItem';
83 | target.className = 'sidebar-menuItem active';
84 | loadCodeFrame(target.getAttribute('href'));
85 | }
86 |
87 | const parent = target.parentElement;
88 | if(parent && /^sidebar-menuFolder/.test(parent.className)) {
89 | parent.className = parent.className === 'sidebar-menuFolder' ? 'sidebar-menuFolder folded' : 'sidebar-menuFolder';
90 | }
91 |
92 | evt.preventDefault();
93 | });
94 |
95 | const sidebar = document.getElementById('sidebar');
96 | const sidebarMore = document.querySelector('.sidebar-more');
97 | sidebarMore.addEventListener('click', () => {
98 | sidebar.className = sidebar.className === 'show' ? '' : 'show';
99 | });
100 |
101 | window.onpopstate = function (e) {
102 | const items = document.querySelectorAll('.sidebar-menuItem');
103 | items.forEach((item) => {
104 | item.className = 'sidebar-menuItem';
105 | if(item.getAttribute('href') === e.state.url) {
106 | item.className = 'sidebar-menuItem active';
107 | }
108 | });
109 | };
110 | });
--------------------------------------------------------------------------------
/jcoderc.js:
--------------------------------------------------------------------------------
1 | export default {
2 | name: '码上掘金游戏精选',
3 | url: 'https://games.jcode.pub',
4 | collection: [
5 | {
6 | type: 'folder',
7 | folded: false,
8 | name: '益智游戏',
9 | collection: [
10 | {name: '消除方块', author: '十年踪迹', id: '7132120696733302822', default: true},
11 | {name: '推箱子', author: '十年踪迹', id: '7131587018592796679'},
12 | {name: '🤖 manufactoria', author: '十年踪迹', id: '7161659797224292365'},
13 | {name: '扫雷', author: '大胆的番茄', id: '7159386844486959118'},
14 | {name: '2048', author: '小创不才', id: '7157941983531499534'},
15 | {name: '数字消除', author: '彩云归', id: '7129693096253587486'},
16 | {name: '数独游戏', author: '心如止水', id: '7086356547647275049'},
17 | {name: '数字华容道', author: '_风满楼', id: '7158450860962349087'},
18 | {name: '十二生肖消一消', author: '3065906567846141', id: '7158392331622842383'},
19 | {name: 'horrible-game', author: 'pegasus64', id: '7163673508373856296'},
20 | {name: 'find-different-color', authon: '480912906381', id: '7164203368863563816'},
21 | ],
22 | }, {
23 | type: 'folder',
24 | folded: false,
25 | name: '棋类游戏',
26 | collection: [
27 | {name: '黑白棋', author: '十年踪迹', id: '7156782077285761024'},
28 | {name: 'AI 五子棋', author: 'WebW0rld', id: '7121490956636913694'},
29 | {name: '中国象棋', author: 'Aaaaaaaaaaayou', id: '7159467834496516132'},
30 | ],
31 | }, {
32 | type: 'folder',
33 | folded: false,
34 | name: '动作游戏',
35 | collection: [
36 | {name: 'Platformer', author: '十年踪迹', id: '7132404229280366606'},
37 | {name: '贪吃蛇', author: '法医', id: '7155823946388996132'},
38 | {name: '贪食蛇', author: '大胆的番茄', id: '7159384232266039310'},
39 | {name: '红蓝打砖块', author: 'jsmask', id: '7155040400577658891'},
40 | {name: 'Canvas打球游戏', author: 'WebW0rld', id: '7142285713172594724'},
41 | {name: '别碰到球', author: 'Ziu', id: '7154351544446484494'},
42 | {name: '吃豆人', author: 'passer-by6061', id: '7159784253343924254'},
43 | {name: '飞机大战', author: '2779985582767421', id: '7160317661635674146'},
44 | {name: '💩到临头', author: 'JingZaia', id: '7160217341429710855'},
45 | {name: '大乱斗', author: '清1024', id: '7163113821949657103'},
46 | {name: '乒乓球', author: 'wangpeng1478', id: '7163855731035209743'},
47 | {name: '炸弹人', author: '垃圾猿', id: '7162350895340978189'},
48 | {name: '水果兄弟', author: '我的代码果然有问题', id: '7161331535579185191'}
49 | ],
50 | }
51 | ],
52 | };
53 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | color: #f6f4f2;
3 | }
4 |
5 | html, body, main {
6 | width: 100%;
7 | height: 100%;
8 | padding: 0;
9 | margin: 0;
10 | }
11 |
12 | main {
13 | position: relative;
14 | width: 100%;
15 | height: 100vh;
16 | background-color: #000;
17 | display: grid;
18 | grid-gap: 1px;
19 | overflow: hidden;
20 | grid-template: 60px 1fr/250px repeat(2,1fr);
21 | }
22 |
23 | main.max {
24 | grid-template: 60px 1fr/0 repeat(2,1fr);
25 | }
26 |
27 | main.max #sidebar header,
28 | main.max #sidebar nav {
29 | display: none;
30 | }
31 |
32 | #sidebar {
33 | font-family: Raleway,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
34 | grid-column: 1/2;
35 | grid-row: 1/-1;
36 | background-color: rgb(20,26,35);
37 | position: relative;
38 | }
39 |
40 | #sidebar header {
41 | display: flex;
42 | box-sizing: border-box;
43 | padding: 0 20px;
44 | grid-column: 1/2;
45 | grid-row: 1/2;
46 | transition: all .6s ease-out;
47 | text-decoration: none;
48 | background-color: rgb(20,26,35);
49 | border-bottom: solid 1px #000;
50 | }
51 |
52 | #sidebar a.banner {
53 | flex-grow: 1;
54 | text-align: left;
55 | cursor: pointer;
56 | background-size: contain;
57 | background-repeat: no-repeat;
58 | background-position: 0;
59 | line-height: 60px;
60 | text-decoration: none;
61 | }
62 |
63 | .sidebar-more {
64 | display: none;
65 | box-sizing: border-box;
66 | width: 60px;
67 | height: 60px;
68 | padding: 28px 15px;
69 | position: relative;
70 | }
71 |
72 | .sidebar-menu {
73 | padding-top: 0;
74 | list-style: none;
75 | margin: 0;
76 | padding: 10px 0 0;
77 | max-height: calc(100vh - 80px);
78 | display: flex;
79 | flex-direction: column;
80 | overflow: auto;
81 | }
82 |
83 | .sidebar-menuItem {
84 | font-size: 14px;
85 | line-height: 1.8;
86 | padding: 0 0 0 20px;
87 | color: rgba(246,244,242,.4);
88 | font-weight: 300;
89 | transition: all .3s ease;
90 | cursor: pointer;
91 | text-decoration: none;
92 | display: block;
93 | }
94 |
95 | .sidebar-menuItem.active {
96 | opacity: 1;
97 | color: #ffc730;
98 | position: relative;
99 | }
100 |
101 | .sidebar-menuItem.active:before {
102 | content: "";
103 | width: 2px;
104 | height: 60%;
105 | background: #ffc730;
106 | position: absolute;
107 | left: 10px;
108 | top: 20%;
109 | }
110 |
111 | .sidebar-menuFolder .content {
112 | display: flex;
113 | flex-direction: column;
114 | background: rgb(20,26,35);
115 | }
116 |
117 | .sidebar-menuFolder .title {
118 | margin: 0;
119 | font-size: 14px;
120 | line-height: 1.8;
121 | padding: 0 0 0 20px;
122 | color: rgba(246,244,242,.4);
123 | font-weight: 300;
124 | cursor: pointer;
125 | transition: color .3s ease-out;
126 | position: relative;
127 | }
128 |
129 | .sidebar-menuFolder .title::after {
130 | content: "";
131 | position: absolute;
132 | width: 0;
133 | height: 0;
134 | border-color: rgba(246,244,242,.4) transparent transparent;
135 | border-style: solid;
136 | border-width: 6px 4px 0;
137 | top: 10px;
138 | left: 8px;
139 | }
140 |
141 | .sidebar-menuFolder.folded .title:after {
142 | transform: rotate(-90deg);
143 | }
144 |
145 | .sidebar-menuFolder.folded .content {
146 | display: none;
147 | }
148 |
149 | #jcode {
150 | grid-column: 2/-1;
151 | grid-row: 1/-1;
152 | }
153 |
154 | .handler {
155 | position: absolute;
156 | width: 12px;
157 | height: 40px;
158 | background: rgba(0,0,0,.3);
159 | left: 240px;
160 | top: 50%;
161 | transform: translateY(-50%);
162 | opacity: .5;
163 | cursor: pointer;
164 | }
165 |
166 | .max .handler {
167 | left: 0;
168 | }
169 |
170 | .handler:after, .handler:before {
171 | content: "";
172 | position: absolute;
173 | width: 1px;
174 | height: 30px;
175 | top: 5px;
176 | left: 3px;
177 | background: hsla(0,0%,100%,.3);
178 | }
179 |
180 | .handler:after {
181 | left: 7px;
182 | }
183 |
184 | iframe {
185 | width: 100%;
186 | height: 100%;
187 | border: none;
188 | }
189 |
190 | @media (max-width: 629px){
191 | main {
192 | grid-template: 60px 1fr/repeat(12,1fr);
193 | }
194 | main #sidebar {
195 | grid-column: 1/2;
196 | grid-row: 1/2;
197 | width: 100vw;
198 | }
199 | main #sidebar header {
200 | position: relative;
201 | padding: 0;
202 | }
203 | main #jcode {
204 | grid-column: 1/-1;
205 | grid-row: 2/-1;
206 | }
207 | main #sidebar nav {
208 | grid-column: 1/2;
209 | grid-row: 1/2;
210 | }
211 | .sidebar-menu {
212 | position: absolute;
213 | top: 60px;
214 | left: 0;
215 | z-index: 1000;
216 | width: 300px;
217 | margin-left: -300px;
218 | padding: 10px 0;
219 | background: rgb(20,26,35);
220 | transition: all .3s ease-out;
221 | height: calc(100vh - 80px);
222 | box-sizing: border-box;
223 | transform-origin: left center;
224 | opacity: 0;
225 | }
226 | #sidebar.show .sidebar-menu {
227 | margin-left: 0;
228 | opacity: 1;
229 | }
230 | main.max #sidebar {
231 | height: 0;
232 | }
233 | main.max header, main.max nav {
234 | display: none;
235 | }
236 | main.max #jcode {
237 | grid-column: 1/-1;
238 | grid-row: 1/-1;
239 | }
240 | main .handler {
241 | left: 50%;
242 | top: 48px;
243 | transform: translateY(-50%) rotate(90deg);
244 | transform-origin: left center;
245 | }
246 | main.max .handler {
247 | left: 50%;
248 | top: 0;
249 | }
250 | .sidebar-more {
251 | display: block;
252 | cursor: pointer;
253 | }
254 | .sidebar-moreItem {
255 | background: #fff;
256 | width: 30px;
257 | height: 4px;
258 | position: absolute;
259 | border-radius: 10px;
260 | transition: all .3s ease-out;
261 | }
262 | .sidebar-moreItem:first-of-type {
263 | transform: translateY(-10px);
264 | }
265 | #sidebar.show .sidebar-moreItem:first-of-type {
266 | transform: translateY(0) rotate(135deg);
267 | }
268 | .sidebar-moreItem:last-of-type {
269 | transform: translateY(10px);
270 | }
271 | #sidebar.show .sidebar-moreItem:last-of-type {
272 | transform: translateY(0) rotate(45deg);
273 | }
274 | #sidebar.show .sidebar-moreItem:nth-of-type(2) {
275 | transform: scale(0);
276 | }
277 | }
--------------------------------------------------------------------------------