我竟然在CSDN玩游戏？？，教你利用github page在CSDN主页放置小游戏

article/2025/4/21 9:37:51

好耶！又多了一种摸鱼新方式
大家在网页端看我的主页或者博客时，会发现左侧多了一个小游戏hiahiahia：

在这里插入图片描述
这主要是通过github page创建了小游戏页面，并且通过iframe嵌入到html里实现的，大佬看到这应该已经会了，像我一样的前端新手可以继续往下看。以下是实现步骤

1github page创建

1.1 注册github账号

这个的最大难度可能就是快速计算骰子点数之和的验证了，网上注册流程给的都挺详细，大家可以搜一下。

1.2 创建公开仓库
一定是要公开仓库嗷，然后为了不和个人主页抢域名，这里的仓库名称并不需要命名为 账号名.github.io，随便起一个就好：
在这里插入图片描述
1.3 仓库内文件要求
仓库内一定要有名为 index.html 的文件：

在这里插入图片描述
1.4 游戏使用图片上传github后加载慢怎么办

神奇的小技巧：
我们把图片上传 CSDN 后图片后面会有一个链接：

在这里插入图片描述
我们可以在 CSS 文件使用这个链接，图片显示就能快很多，美滋滋：

在这里插入图片描述
1.5 设置为github page

点击settings:
在这里插入图片描述
使劲往下拖能看到：
在这里插入图片描述
点开后选择源分支：

在这里插入图片描述
完成github page设置后会显示链接，在这涂抹掉不做展示了：

在这里插入图片描述
点开链接会发现能显示游戏，建议过段时间再查看链接，因为页面需要一段时间才能设置好并显示

2个人主页显示游戏

2.1个人主页修改位置
通过：内容管理->自定义模块 可以到这个页面：
不过只有vip和博客专家才能编辑这个内容。。。
在这里插入图片描述
在栏目内容中编写html即可

2.2在html内显示html
实际上想要显示游戏可以编写如下代码并复制到栏目内容框内：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<iframe src="你之前的链接" frameBorder="0" width="250" scrolling="no" height="280"></iframe>
</body>
</html>

2.3我的个人主页的完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slandarer的简介</title>
</head>
<body><font color="#2F4A5D" size=3><b>[0]这里是slandarer的博客</br>
</b>
</font>  <font color="#6A869B" size=2>目前没有个人公众号,创建的时候会第一时间放在这个地方嗷</br>
</font><br />
<iframe src="https://slandarer.github.io/smalldogame/" frameBorder="0" width="250" scrolling="no" height="280"></iframe><br />
<font color="#4A452A" size=2><b>[1] 一些有趣的个人项目及小程序(点击图片或链接跳转博文)：</br> 
</b>
</font> <br />
<marquee><a href="https://blog.csdn.net/slandarer/article/details/118521735"><font color="#7388C1" size=2>建筑工地海报生成器</font></a>&#160&#160<a href="https://blog.csdn.net/slandarer/article/details/117451019"><font color="#625BA1" size=2>环形相册</font></a>&#160&#160<a href="https://blog.csdn.net/slandarer/article/details/118161500"><font color="#8F63A2" size=2>举牌加油小人生成器</font></a>
</marquee>
<br />
<marquee><a href="https://blog.csdn.net/slandarer/article/details/117304136"><font color="#426EB5" size=2>绕线画绘制？附带颜色渲染</font></a>&#160&#160  <a href="https://blog.csdn.net/slandarer/article/details/116528717"><font color="#8272B0" size=2>真正意义上的拼图小游戏</font></a>&#160&#160  <a href="https://blog.csdn.net/slandarer/article/details/116382472"><font color="#C7B7D2" size=2>突出效果海报</font></a>
</marquee>
<br />
<marquee><a href="https://blog.csdn.net/slandarer/article/details/116325539"><font color="#6EC3C8" size=2>故障风海报</font></a>&#160&#160  <a href="https://blog.csdn.net/slandarer/article/details/115800369"><font color="#7388C1" size=2>图片三角风格化 (low poly)</font></a>&#160&#160  <a href="https://blog.csdn.net/slandarer/article/details/115709803"><font color="#9AD0D2" size=2>含褶皱面料图</font></a>&#160&#160<a href="https://blog.csdn.net/slandarer/article/details/107160568"><font color="#6EC3C8" size=2>3D玫瑰花绘制</font></a>
</marquee>
<br />
<marquee><a href="https://blog.csdn.net/slandarer/article/details/109558919"><font color="#2F4A5D" size=2>MATLAB 版大富翁</font></a>&#160&#160  <a href="https://blog.csdn.net/slandarer/article/details/108734172"><font color="#C9E3D6" size=2>化学方程式配平</font></a>&#160&#160  <a href="https://blog.csdn.net/slandarer/article/details/108120501"><font color="#99D1D2" size=2>连连看小游戏</font></a>
</marquee>
<br />
<font color="#A17C84" size=2><b><br />>>好看的图片</br> 
</b>
</font> 
<a href="https://blog.csdn.net/slandarer/article/details/117048623"><img src="https://img-blog.csdnimg.cn/20210703202641236.png" width=115>
</a>
<a href="https://blog.csdn.net/slandarer/article/details/107160568"><img src="https://img-blog.csdnimg.cn/20210703202652130.jpg" width=135>
</a></br><a href="https://blog.csdn.net/slandarer/article/details/117226977"><img src="https://img-blog.csdnimg.cn/20210703202715377.png" width=135>
</a>
<a href="https://blog.csdn.net/slandarer/article/details/110287590"><img src="https://img-blog.csdnimg.cn/20210703202708152.png" width=115>
</a><font color="#A17C84" size=2><b><br /><br />>>帅气的特效</br> <br />
</b>
</font> 
<a href="https://blog.csdn.net/slandarer/article/details/115457724"><img src="https://img-blog.csdnimg.cn/20210703203917422.png" width=120>
</a>
<a href="https://blog.csdn.net/slandarer/article/details/115724116"><img src="https://img-blog.csdnimg.cn/20210703203926961.jpg" width=125>
</a>
<font color="#A17C84" size=2><b><br /><br />>>app designer工具</br> <br />
</b>
</font> 
<a href="https://blog.csdn.net/slandarer/article/details/115035583"><img src="https://img-blog.csdnimg.cn/20210703204606872.jpg" width=400>
</a></br><a href="https://blog.csdn.net/slandarer/article/details/113797518"><img src="https://img-blog.csdnimg.cn/20210703204532933.jpg" width=400>
</a>
</body>
</html>

3后记

众所周知，我主要是写MATLAB相关内容的，这次在CSDN个人主页上放小游戏只是依靠自学的一点点微薄的前端知识，大家提出的各种构建上配置上的问题我可能并没有能力解答，在此表示抱歉，欢迎大家在看我博客的时候玩一玩左侧的小游戏，高级模式比初级模式难了不止一点点嗷。


http://chatgpt.dhexx.cn/article/hMKBZY9b.shtml

相关文章

磨金石教育设计干货分享｜20个海报设计小技巧，果断打包带走

磨金石教育设计干货分享｜20个海报设计小技巧，果断打包带走

我们做海报设计的时候&#xff0c;经常会在图文排版上花上很长的时间来构思&#xff0c;要让主题突出、要画面有活力、视觉冲击力要强、要给观者留下深刻的印象......那么今天小编就来分享20种海报设计的思路&#xff0c;让你在设计中思路清晰&#xff0c;努力不白费。 文字分…
阅读更多...
用代码生成Glitch Art风格的抖音字体

用代码生成Glitch Art风格的抖音字体

最近看到不少文章教大家用 photoshop 实现抖音的 logo 跟字体&#xff0c;我也非常喜欢这种风格的字体&#xff0c;于是趁着晚上的时间&#xff0c;动手用代码实现了下此类风格的字体特效&#xff0c;顺便开发了个小工具&#xff0c;地址见文末。本文主要是从 艺术手法 和 JS …
阅读更多...
mfc对话框ok没效果_利用PS制作逼真双重曝光效果案例演示,合成紫色城市建筑风格海报图片...

mfc对话框ok没效果_利用PS制作逼真双重曝光效果案例演示,合成紫色城市建筑风格海报图片...

PS合成得好&#xff0c;那场景海报图制作就轻松了&#xff0c;我们通常在欣赏案例作品是发现不少大气的城市建筑风格的海报图片&#xff0c;是怎么样制作合成的呢&#xff0c;今天我们来分享PS制作逼真双重曝光效果的海报教程。摄影时&#xff0c;利用多重曝光&#xff0c;可以…
阅读更多...
设计干货模板|孟菲斯风格促销海报让作品艺术加分！

设计干货模板|孟菲斯风格促销海报让作品艺术加分！

对于孟菲斯&#xff0c;或许你不知道这专业词是什么意思。当你看到下面的图&#xff0c;是不是感觉有点似曾相识。 复古又新潮的设计&#xff01; 为什么叫“孟菲斯”&#xff1f;据说&#xff0c;设计师Ettore Sottsass与一群年轻设计师在家里的公寓聚会&#xff0c;当时播放…
阅读更多...
怎么做抖音故障艺术风格人物照片效果

怎么做抖音故障艺术风格人物照片效果

今天我们就用陌鱼社区“80年代复古故障抖音海报效果PS动作”,简单快速制作出复古故障艺术风格人物照片海报效果,只要按这个步骤来就可以制作出如图效果,下面是这个动作制作的一些效果&#xff1a; 01、载入笔刷、图案、动作具体方法可参考下图,全部载入之后关闭软件。 02、把软…
阅读更多...
如何用ps做故障艺术风格效果

如何用ps做故障艺术风格效果

今天这个教程主要是用PS动作来做的&#xff0c;能给我们在工作上面带来很大的方便&#xff0c;特别是突然做故障艺术风格海报的人来说&#xff0c;这个还是非常有用滴&#xff0c;至于动作怎么找&#xff0c;可以搜“赛博故障风格海报艺术效果PS动作”。 01、还是老样子&#x…
阅读更多...
AE教程丨1分钟学会制作信号故障风特效

AE教程丨1分钟学会制作信号故障风特效

信号故障风近几年还是很流行的&#xff0c;如何让自己的设计里也能有一些信号故障风的风格呢&#xff1f;今天的教程就来帮助大家学习AE制作故障风视频。 AE制作信号故障风视频效果教程 1.在绘图工具内制作相应的文字海报并导入到AE&#xff1b; 2.新建纯色图层做抖动效果&…
阅读更多...
JAVA线上故障排查全套路

JAVA线上故障排查全套路

线上故障主要会包括cpu、磁盘、内存以及网络问题&#xff0c;而大多数故障可能会包含不止一个层面的问题&#xff0c;所以进行排查时候尽量四个方面依次排查一遍。同时例如jstack、jmap等工具也是不囿于一个方面的问题的&#xff0c;基本上出问题就是df、free、top 三连&#x…
阅读更多...
Ps|故障风格效果

Ps|故障风格效果

欢迎点击「算法与编程之美」↑关注我们&#xff01; 本文首发于微信公众号&#xff1a;"算法与编程之美"&#xff0c;欢迎关注&#xff0c;及时了解更多此系列文章。 欢迎加入团队圈子&#xff01;与作者面对面&#xff01;直接点击&#xff01; 抖音作为当代人消遣时…
阅读更多...
故障效果，制作抖音效果的幻影海报

故障效果，制作抖音效果的幻影海报

故障效果&#xff0c;制作抖音效果的幻影海报 感兴趣的小伙伴可以关注我哦&#xff0c;有什么不懂可以加群问&#xff1a;741090028 本篇教程通过PS制作抖音效果风格的海报&#xff0c;抖音风格又叫故障效果和幻影效果&#xff0c;前者叫的多&#xff0c;此类风格之前就很流行…
阅读更多...
如何用PS制作故障风格的海报

如何用PS制作故障风格的海报

前言 近几年&#xff0c;故障艺术又在设计圈中掀起了一把火&#xff0c;无论是先前《攻壳机动队》的海报&#xff0c;还是现在抖音的logo&#xff0c;一些我们看着是缺陷的东西在设计师的眼里也大有文章&#xff0c;今天就主要来讲讲如何通过PS来制作一张故障风格的海报。 《…
阅读更多...
UI设计教程分享：PS故障风海报制作教程

UI设计教程分享：PS故障风海报制作教程

1.首先找一张看起来很酷的图&#xff08;也可以选择自己喜欢的图片&#xff09;&#xff1b; 2. 复制图层&#xff0c;点击添加图层样式&#xff0c;选择混合选项&#xff0c;在高级混合里面的通道选项&#xff0c;有R、G、B三个通道选项&#xff0c;默认是全部勾选的状态&…
阅读更多...
PS故障风海报制作技术分享

PS故障风海报制作技术分享

1.首先找一张看起来很酷的图&#xff08;也可以选择自己喜欢的图片&#xff09;&#xff1b; 2. 复制图层&#xff0c;点击添加图层样式&#xff0c;选择混合选项&#xff0c;在高级混合里面的通道选项&#xff0c;有R、G、B三个通道选项&#xff0c;默认是全部勾选的状态&…
阅读更多...
MATLAB 制作抖音同款故障风海报

MATLAB 制作抖音同款故障风海报

效果&#xff1a; 步骤 1.参数设定及图片导入 可以只更改背景图片其实 bkgPicimread(‘test.jpg’);%图片地址 lineDensity0.6; %故障线条出现概率 lineLenRange[50,80]; %故障线条长度范围 greenMoveLen10; %绿移距离 原始图片&#xff1a; 2.图片灰度化及红蓝背景构造…
阅读更多...
In-Loop Filters in HEVC

In-Loop Filters in HEVC

有两种滤波&#xff0c;一个deblock filter用来减弱因为transform和预测边界的不联系性&#xff1b;另外一个是SAO&#xff0c;通过减弱振铃效应和改变像素的强度来提升画质。https://blog.csdn.net/u014470361/article/details/94641124解释什么是块效应和振铃效应。 Deblocki…
阅读更多...
改进维纳滤波的实现——光学稀疏孔径成像系统图像恢复算法研究 陈灏

改进维纳滤波的实现——光学稀疏孔径成像系统图像恢复算法研究 陈灏

本文简单实现了浙江大学陈灏硕士学位论文《光学稀疏孔径成像系统图像恢复算法研究》(2017)中4.2章节提及的改进维纳滤波算法。 前情提要&#xff1a;维纳滤波函数中不同K(噪声与原属图像功率谱之比)的取值对应复原效果不同&#xff0c;当K值比较小时(10^-4~10^-3)时&#xff0c…
阅读更多...
冈萨雷斯DIP第4章知识点

冈萨雷斯DIP第4章知识点

文章目录 4.1 背景4.3 取样和取样函数的傅里叶变换4.5 二变量函数的傅里叶变换4.6 二维 DFT 和 IDFT 的一些性质4.6.6 二维离散卷积定理 4.7 频率域滤波基础4.7.3 频率域滤波步骤小结4.7.4 空间域和频率域滤波之间的对应关系 4.8 使用低通频率域滤波器平滑图像4.9 使用高通滤波…
阅读更多...
频域图像增强（图像的频域分析）高通低通滤波器

频域图像增强（图像的频域分析）高通低通滤波器

1. 频率域平滑&#xff08;低通&#xff09; 图像的平滑除了在空间域中进行外&#xff0c;也可以在频率域中进行。 由于噪声主要集中在高频部分&#xff0c;为去除噪声改善图像质量&#xff0c;滤波器采用低通滤波器​​​​​​​ 来抑制高频成分&#xff0c;通过低频成分&a…
阅读更多...
9.频率域锐化滤波

9.频率域锐化滤波

目录 一 理想高通滤波器 定义 二 巴特沃斯高通滤波器[BLPF] 定义 三 高斯高通滤波器[GLPF] 四 振铃效应对比 五 示例 六 区别和联系 数字图像处理的配套视频教程&#xff1a; 1.【冈萨雷斯-数字图像处理】开始安排续数字图像处理的教程_哔哩哔哩_bilibili 2. 数字图像…
阅读更多...
【示波器专题】示波器探头的负载效应

【示波器专题】示波器探头的负载效应

理想的示波器探头可以轻松、精确的复制被探测信号。然而在现实的情况下，探头成为了电路的一部分。如在星球文章：【示波器专题】示波器探头的原理深入——无源探头 中我们讲到一个例子，低阻无源探头的最大好处就是以较低的价格提供了比较高的测试带宽。但缺点就是输入阻抗低（…
阅读更多...
推荐文章

Copyright @ 2022~2023