黑客帝國代碼雨

 

 黑客帝國代碼雨

類似的有幾種實現方式

 

一、window運行bat文件實現

1.新建文本文檔
2.輸入代碼：
@echo off
color 02
:start
echo %random% %random% %random% %rangom% %random% %random% %rangom% %random% %random% %rangom%
goto start
3.另存為 自定義文件名+后綴.bat
4.找到該文件，打開即可看到效果

 

 二、HTML實現（新建文本文檔，直接復制代碼，后綴名改為：.html ，直接運行）

<canvas id="canvas" style="background:black" width="620" height="340"></canvas>
<audio style="display:none; height: 0" id="bg-music" preload="auto" src="music/黑客帝國.mp3"></audio>
<style type="text/css">
body{margin: 0; padding: 0; overflow: hidden;}
</style>
<script type="text/javascript">
    
    window.onload = function(){
        //獲取圖形對象
        var canvas = document.getElementById("canvas");
        //獲取圖形的上下文
        var context = canvas.getContext("2d");
        //獲取瀏覽器屏幕的寬度和高度
        var W = window.innerWidth;
        var H = window.innerHeight;
        //設置canvas的寬度和高度
        canvas.width = W;
        canvas.height = H;
        //每個文字的字體大小
        var fontSize = 15;
        //計算列
        var colunms = Math.floor(W /fontSize);    
        //記錄每列文字的y軸坐標
        var drops = [];
        //給每一個文字初始化一個起始點的位置
        for(var i=0;i<colunms;i++){
            drops.push(0);
        }

        //運動的文字
        var str ="01abcdefghijklmnopqurstuvwxyz";
        //4:fillText(str,x,y);原理就是去更改y的坐標位置
        //繪畫的函數
        function draw(){
        //讓背景逐漸由透明到不透明
            context.fillStyle = "rgba(0,0,0,0.05)";
            context.fillRect(0,0,W,H);
            //給字體設置樣式
            //context.font = "700 "+fontSize+"px  微軟雅黑";
            context.font = fontSize + 'px arial';
            //給字體添加顏色
            context.fillStyle ="green";//隨意更改字體顏色
            //寫入圖形中
            for(var i=0;i<colunms;i++){
                var index = Math.floor(Math.random() * str.length);
                var x = i*fontSize;
                var y = drops[i] *fontSize;
                context.fillText(str[index],x,y);
                //如果要改變時間，肯定就是改變每次他的起點
                if(y >= canvas.height && Math.random() > 0.92){
                    drops[i] = 0;
                }
                drops[i]++;
            }
        };

        function randColor(){
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb("+r+","+g+","+b+")";
        }

        draw();
        setInterval(draw,33);
    };

</script>

 

 

 

 

參考：

　　*簡單實現 黑客帝國代碼雨*

　　抖音比較火的 黑客帝國-代碼雨（免費送）

 

 

 

共同學習，共同進步，若有補充，歡迎指出，謝謝！