黑客帝国代码雨以及其灵活使用——道家真言！！（附带相关知识点）_html黑客代码雨有人影

机器学习之心AI
61 阅读5分钟

道家真言下载点这里

代码实现

  这整段代码都写在了html里，是为了让大家复制并且自己演示一下，但是千万不要直接用，太不正规了，想要资源的去上面链接下载，不要积分的😏😏😏😏
之所以先扔个代码，主要是有人他就是来看代码的，基础知识、涉及到的点不需要看，哈哈，关于每行怎么写的详细的分析我会在后面写，尽量把每个人当作小白，让你们搞懂这段代码💪💪💪💪

1.黑客帝国代码雨

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Code</title>
    <style>
 body{
 margin: 0;
 overflow: hidden;
 }
 </style>
</head>

<body>
<canvas id="myCanvas"></canvas>
<script>
 const width = document.getElementById("myCanvas").width = screen.availWidth;
 const height = document.getElementById("myCanvas").height = screen.availHeight;
 const ctx = document.getElementById("myCanvas").getContext("2d");
 const arr = Array(Math.ceil(width / 10)).fill(0);
 const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");

 function rain() {
 //这里的重点就是每次调用这个方法的时候都会重新绘制一张透明度为0.05的黑色画布来覆盖前图
 //所以就会形成人眼中的下雨效果
 ctx.fillStyle = "rgba(0,0,0,0.05)";
 ctx.fillRect(0, 0, width, height);
 ctx.fillStyle = "#0f0";
 arr.forEach(function (value, index) {
 ctx.fillText(str[Math.floor(Math.random() \* str.length)], index \* 10, value + 10);
 arr[index] = value >= height || value > 8888 \* Math.random() ? 0 : value + 10;
 });
 }

 setInterval(rain, 30);
</script>
</body>
</html>

2.道家真言

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Taoism</title>
    <style>
 body{
 margin: 0;
 overflow: hidden;
 }
 </style>
</head>

<body>
<canvas id="myCanvas"></canvas>
<script>
 const width = document.getElementById("myCanvas").width = screen.availWidth;
 const height = document.getElementById("myCanvas").height = screen.availHeight;
 const ctx = document.getElementById("myCanvas").getContext("2d");
 //因为后面一个字50px,所以用总宽度除以50恰好够用,不至于浪费资源
 const arr = Array(Math.ceil(width / 50)).fill(0);
 //这里为了不出现下坠的视觉效果，所以加了很多空格，大家感兴趣可以把空格去了，自己看看什么效果。
 const str = "临兵斗者皆阵列前行乾坤震巽坎离艮兑 ".split("");
 function rain() {
 ctx.fillStyle = "rgba(0,0,0,0.05)";
 ctx.fillRect(0, 0, width, height);
 ctx.fillStyle = "#f00";
 arr.forEach(function (value, index) {
 ctx.font = "50px 华文行楷";
 ctx.fillText(str[Math.floor(Math.random() \* str.length)], index \* 50, value + 50);
 arr[index] = value >= height || value > 8888 \* Math.random() ? 0 : value + 50;
 });
 }

 setInterval(rain, 50);
</script>
</body>
</html>

相关方法的介绍

  这里我会向大家介绍上面一些JavaScript方法的使用，主要对象是和我差不多的小白😂😂😂，所以高手请自动忽略，哈哈，不过说错的地方依旧需要指点的，请在评论区批评指正，谢谢。

1.style标签

    <style>
 body{
 margin: 0;
 overflow: hidden;
 }
 </style>

  这里面写的是设置body标签里面样式，margin为外边距，给大家看看0和不是0的效果：
margin为0
这个是margin为0，没有了白边，是整个填充在窗口的

margin不为0
这个是没有设置margin为0，有白边

  而body标签里的overflow为当内容溢出元素框时发生的事情，官方解释读来晦涩，我直接演示给大家看看hidden（隐藏）和不设置的效果：
设置为hidden
这个是设置overflow为hidden，超出窗口的部分直接隐藏起来，不会有滚动条出现

不设置
这个是没有设置overflow为hidden，超出窗口的部分依旧会显示，并通过滚动条来进行查看窗口外的部分。

2.JavaScript Const & split

const width = document.getElementById("myCanvas").width = screen.availWidth;
const height = document.getElementById("myCanvas").height = screen.availHeight;
const ctx = document.getElementById("myCanvas").getContext("2d");
const arr = Array(Math.ceil(width / 10)).fill(0);
const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");

  const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改;

  但是

  const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。

  也就是说，对于第一、二、三、五行定义的变量我们是无法修改，无法重新定义的，但是第四行中的arr却是可以修改里面的元素的，但是无法重新赋予其一个新的数组。
前两行是来获取显示浏览器的屏幕的可用宽度、高度并赋值给canvas，然后初始化变量width和变量height。
第三行是用来获取一个用于在画布上绘图的环境。
第四行是用于获取一个长度指定，元素全为0的数组，以便后面调用map方法，至于为什么会/10呢，因为这一个字符的字号就是10，你们可以看看，在“道家真言”里面我指定了字号为50，这里自然也改成50了；这里其实除不除无所谓，只不过会省点儿资源。
第五行是指定显示的字符串，并且分割为单个字符，返回一个数组。

3.JavaScript function

    function rain() {
        ctx.fillStyle = "rgba(0,0,0,0.05)";
        ctx.fillRect(0, 0, width, height);
        ctx.fillStyle = "#0f0";
        arr.forEach(function (value, index) {
            ctx.fillText(str[Math.floor(Math.random() \* str.length)], index \* 10, value + 10);
            arr[index] = value >= height || value > 8888 \* Math.random() ? 0 : value + 10;
        });
    }

  先不看详细的代码，这里是定义了一个方法，用来进行你们眼里看到的“下雨”的操作，其实是每个单独字的闪烁来实现的，事先规划好样式，然后通过arr来调用map方法，实现字符的随机填充以及按照指定的顺序依次闪烁，超过屏幕高度或者达到随机定义的高度便会顶端再次重新闪烁。

4.JavaScript fillStyle

ctx.fillStyle = "rgba(0,0,0,0.05)";

  fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。rgba指定了rgb颜色以及Alpha透明度。

RGBA(R,G,B,A)
取值：

  • R：红色值。正整数 | 百分数

  • G：绿色值。正整数 | 百分数

  • B：蓝色值。正整数 | 百分数

  • A：Alpha透明度,取值0~1之间。

5.JavaScript fillRect

ctx.fillRect(0, 0, width, height);

  fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。(Rect-rectangular矩形)。

context.fillRect(x,y,width,height);

  • x     矩形左上角的 x 坐标。

  • y     矩形左上角的 y 坐标。

  • width    矩形的宽度，以像素计。

  • height   矩形的高度，以像素计。

6.JavaScript fillText

ctx.fillStyle = "#0f0";
ctx.fillText(str[Math.floor(Math.random() \* str.length)], index \* 10, value + 10);

  fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。前面已经定义文字为绿色，即代码的颜色；在“道家真言”的代码里还定义了字号和字体：

context.fillText(text,x,y,maxWidth);

  • text  规定在画布上输出的文本。

  • x   开始绘制文本的 x 坐标位置（相对于画布）。

  • y   开始绘制文本的 y 坐标位置（相对于画布）。

ctx.font = "50px 华文行楷";

这里的代码

str[Math.floor(Math.random() \* str.length)]

  这一部分是填充的内容,表示随机选取定义的数组中的一个元素，以便出现单个字符。

7.JavaScript forEach



**收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。**
![img](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d1218666ed464d4da9489b863c9c26fe~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5py65Zmo5a2m5Lmg5LmL5b-DQUk=:q75.awebp?rk3s=f64ab15b&x-expires=1771251739&x-signature=TLpktbWFoY1eWEqJwQ%2Bzsbqs%2FTA%3D)
![img](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5457db48b346485cb2061a9050b08766~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5py65Zmo5a2m5Lmg5LmL5b-DQUk=:q75.awebp?rk3s=f64ab15b&x-expires=1771251739&x-signature=IpbpKmovXpUHVws1OGTUERyQJXE%3D)

**[如果你需要这些资料，可以戳这里获取](https://gitee.com/vip204888)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**

**都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
avatar
文章
阅读
粉丝