當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

黑客帝国中的代码雨写法

發(fā)布時間：2024/8/1 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了黑客帝国中的代码雨写法小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

代碼雨

<!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>講師：雨晨</title><style type="text/css">html, body {width: 100%;height: 100%;}body {background: #000;overflow: hidden;margin: 0;padding: 0;}</style> </head><body> <canvas id="cvs"></canvas> <script type="text/javascript">var cvs = document.getElementById("cvs");var ctx = cvs.getContext("2d");var cw = cvs.width = document.body.clientWidth;var ch = cvs.height = document.body.clientHeight;//動畫繪制對象var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;var codeRainArr = []; //代碼雨數(shù)組var cols = parseInt(cw / 14); //代碼雨列數(shù)var step = 16; //步長，每一列內(nèi)部數(shù)字之間的上下間隔ctx.font = "bold 26px microsoft yahei"; //聲明字體，個人喜歡微軟雅黑function createColorCv() {//畫布基本顏色ctx.fillStyle = "#242424";ctx.fillRect(0, 0, cw, ch);}//創(chuàng)建代碼雨function createCodeRain() {for (var n = 0; n < cols; n++) {var col = [];//基礎(chǔ)位置，為了列與列之間產(chǎn)生錯位var basePos = parseInt(Math.random() * 300);//隨機(jī)速度 3~13之間var speed = parseInt(Math.random() * 10) + 3;//每組的x軸位置隨機(jī)產(chǎn)生var colx = parseInt(Math.random() * cw)//綠色隨機(jī)var rgbr = 0;var rgbg = parseInt(Math.random() * 255);var rgbb = 0;//ctx.fillStyle = "rgb("+r+','+g+','+b+")"for (var i = 0; i < parseInt(ch / step) / 2; i++) {var code = {x: colx,y: -(step * i) - basePos,speed: speed,// text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1 //隨機(jī)生成0或者1text: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "s", "t", "u", "v", "w", "x", "y", "z"][parseInt(Math.random() * 11)], //隨機(jī)生成字母數(shù)組中的一個color: "rgb(" + rgbr + ',' + rgbg + ',' + rgbb + ")"}col.push(code);}codeRainArr.push(col);}}//代碼雨下起來function codeRaining() {//把畫布擦干凈ctx.clearRect(0, 0, cw, ch);//創(chuàng)建有顏色的畫布//createColorCv();for (var n = 0; n < codeRainArr.length; n++) {//取出列col = codeRainArr[n];//遍歷列，畫出該列的代碼for (var i = 0; i < col.length; i++) {var code = col[i];if (code.y > ch) {//如果超出下邊界則重置到頂部code.y = 0;} else {//勻速降落code.y += code.speed;}//1 顏色也隨機(jī)變化//ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; //2 綠色逐漸變淺// ctx.fillStyle = "hsl(123,80%,"+(30-i*2)+"%)"; //3 綠色隨機(jī)// var r= 0;// var g= parseInt(Math.random()*255) + 3;// var b= 0;// ctx.fillStyle = "rgb("+r+','+g+','+b+")";//4 一致綠ctx.fillStyle = code.color;//把代碼畫出來ctx.fillText(code.text, code.x, code.y);}}requestAnimationFrame(codeRaining);}//創(chuàng)建代碼雨createCodeRain();//開始下雨吧 GO>>requestAnimationFrame(codeRaining); </script></body> </html>

就是如此簡單

總結(jié)

以上是生活随笔為你收集整理的黑客帝国中的代码雨写法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。