當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/31 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了黑客帝国代码雨以及其灵活使用——道家真言！！（附带相关知识点）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

代碼雨以及其靈活使用

效果展示
- 1.黑客帝國代碼雨
- 2.道家真言
模板下載地址
- 1.說明
- 2.黑客帝國代碼雨下載
- 3.道家真言下載
代碼實現
- 1.黑客帝國代碼雨
- 2.道家真言
相關方法的介紹
- 1.style標簽
- 2.JavaScript Const & split
- 3.JavaScript function
- 4.JavaScript fillStyle
- 5.JavaScript fillRect
- 6.JavaScript fillText
- 7.JavaScript forEach
- 8.JavaScript setInterval
尾聲

效果展示

1.黑客帝國代碼雨

2.道家真言

模板下載地址

1.說明

??模板我上傳到CSDN資源了，不需要積分就可以下載的，大家隨便去，模板把html，js，css分開了，好歹標準些，別從我這直接復制，很丑，哈哈，符合規范一些，去下載一個，再次聲明不要積分的(發生了點兒我不知道的情況,沒傳過資源,不知道為什么,我設置的是0積分,可是他自己漲上去了…)。😀😀😀😀

2.黑客帝國代碼雨下載

黑客帝國代碼雨下載點這里

3.道家真言下載

道家真言下載點這里

代碼實現

??這整段代碼都寫在了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標簽

??這里面寫的是設置body標簽里面樣式，margin為外邊距，給大家看看0和不是0的效果：

??這個是margin為0，沒有了白邊，是整個填充在窗口的

??這個是沒有設置margin為0，有白邊

??而body標簽里的overflow為當內容溢出元素框時發生的事情，官方解釋讀來晦澀，我直接演示給大家看看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

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; }

??forEach() 方法用于調用數組的每個元素，并將元素傳遞給回調函數。這里給大家提個醒，forEach是不會有返回值的，如果需要接收返回值，就調用.map方法，這里用map當然也可以，但是沒必要，不符合規范。

array.forEach(function(currentValue, index, arr), thisValue)

function(currentValue, index, arr) ??數組中每個元素需要調用的函數。
currentValue ????????必需。當前元素
index ?????????可選。當前元素的索引值。
arr ???????????可選。當前元素所屬的數組對象。
thisValue ??????????????可選。傳遞給函數的值一般用 “this” 值。

??由上面可以知道，數組arr通過調用forEach方法，將數組中每個元素在第一行進行打印，然而，forEach方法是沒辦法改變原數組的，所以才需要第三行代碼：

arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;

??來手動改變數組元素，如果沒有這一行，大家分析分析會發生啥，沒錯，第一行一直刷新。

8.JavaScript setInterval

setInterval(rain, 30);

??這是最重要的一行代碼，簡直就是整個代碼塊的核心方法，因為只有他出現了，大家看到的才會有這漫天飛舞的字母

setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

??直觀解釋——每30毫秒調用一次rain方法，讓雨滴每30毫秒出現一波。時間值大家可以取巧比如想1秒30次，就可以寫（1000/30），一秒50次就可以寫（1000/50）……

尾聲

??通過這些，大家應該能夠徹底理解這些代碼了，我相信也能自己寫出來一份了，俗話說的好，授人以魚不如授人以漁，我這是魚給了，網子也給了，還告訴你們哪里有魚了，同時也希望大家能告訴我我這個網子哪里破了（寫的不好的地方），或者也能分享點兒打魚方法上來，不勝感激！！請不吝賜教😝😝😝😝

總結

以上是生活随笔為你收集整理的黑客帝国代码雨以及其灵活使用——道家真言！！（附带相关知识点）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：计算机管理系统有几种,ERP系统有几种？
下一篇： matlab legend下划线,MAT