代码雨制作

最新推荐文章于 2022-07-27 22:11:28 发布
最新推荐文章于 2022-07-27 22:11:28 发布
阅读量94 收藏
点赞数
分类专栏： htiml 文章标签： 其他
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57765394/article/details/120381211
版权

<!doctype html>

<html>

<head>

<meta 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 = [];

var cols = parseInt(cw/14); //代码雨列数

var step = 16 ; //步长，每一列内部数字之间的上下间隔

ctx.font = "bold 26px microsoft yahei"

function createColorCv() {

//画布基本颜色

ctx.fillStyle="#242424";

ctx.fillRect(0,0,cw,ch);

}

//创建代码雨

function createCodeRain() {

for (var n = 0; n < cols; n++) {

var col = [];

//基础位置，为了列与列之间产生错位

var basePos = parseInt(Math.random()*300);

//随机速度 3~13之间

var speed = parseInt(Math.random()*10)+3;

//每组的x轴位置随机产生

var colx = parseInt(Math.random()*cw)

//绿色随机

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 //随机生成0或者1

text : ["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)], //随机生成字母数组中的一个

color : "rgb("+rgbr+','+rgbg+','+rgbb+")"

}

col.push(code);

}

codeRainArr.push(col);

}

}

//代码雨下起来

function codeRaining(){

//把画布擦干净

ctx.clearRect(0,0,cw,ch);

//创建有颜色的画布

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

}

//颜色也随机变化

//ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)";

//绿色逐渐变浅

//ctx.fillStyle = "hsl(123,30%,"+(30-i*2)+"%)";

//绿色随机

//var r= 0;

//var g= parseInt(Math.random()*255) + 3;

//var b= 0;

//ctx.fillStyle = "rgb("+r+','+g+','+b+")"

ctx.fillStyle = code.color;

//把代码画出来

ctx.fillText(code.text,code.x,code.y);

}

}

requestAnimationFrame(codeRaining);

}

//创建代码雨

createCodeRain();

//开始下雨吧 GO>>

requestAnimationFrame(codeRaining);

</script>

</body>

</html>

weixin_57765394
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【好玩的代码雨（附源代码）】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
11-07 2万+
使用方式 （1）将源代码粘贴到一个“记事本”，后缀名改为例如 代码雨.html （2）打开方式使用浏览器，再按“F11”可以全屏。 代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>代码雨</title> <style type="t
代码雨，js
08-14
代码雨，js的，根据需要自己改吧，说实话，这个是我扣的别人的，屌丝一下
代码雨源代码
09-08
本资源用Java代码写出了黑客帝国中那种炫酷的代码雨. 冒昧的问一下！ 各位小伙伴有多少人是因为看到牛逼的黑客！ 转而想要学习计算机的呢？ 事先声明，我不是。 原因我是不会说的！ 好的那么今天给大家分享的小程序 就是黑客帝国电影里面的代码雨
黑客帝国代码雨
11-22
最近抖音爆火的黑客帝国代码雨，最近抖音爆火的黑客帝国代码雨
代码雨教程
huangdepei的博客
06-08 1万+
这是我在网上学做的代码雨，如果合各位心意可以跟着打试试。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> html,body{width: 100%;height: 100%;} body{ bac...
代码雨资源
01-23
紫轩提供的代码雨HTML格式，可用IE浏览器打开查看，也可通过mac app store下载iwall制作成电脑桌面，设置成屏保就用isaver就可以了，感谢支持！
用java制作彩色代码雨
06-03
在Java编程语言中，制作彩色代码雨是一种独特的视觉效果，它可以将代码以彩色的形式自上而下地模拟飘落，通常用于展示或者装饰编程相关的项目。这个过程涉及到多个技术点，包括字符渲染、颜色处理、动画控制等。下面...
用py实现代码雨的效果
12-17
通过进一步优化，如添加颜色、改变字符下落速度、增加随机性等，可以制作出更逼真的代码雨效果。对于想要深入学习Python图形界面（GUI）编程的用户，还可以使用如Tkinter库来创建窗口应用程序，这样用户可以直接在...
Canvas 代码雨，像下雨一样
07-03
用canvas制作，让代码像下雨一样，下啊、下啊、下啊。
代码流星雨
08-13
在本案例中，我们看到的"代码流星雨"是使用Dreamweaver（DW）这款流行的网页设计软件制作的，它是一款集HTML、CSS、JavaScript编辑于一体的工具，非常适合初学者和专业开发者进行网页开发。 HTML（HyperText Markup...
用java写的代码雨
06-09
用java写的应用程序，可以实现代码雨，关键还可以用做电脑桌面。
一款超有趣的CMD代码雨
09-27
超级有趣的黑客帝国代码雨！很多人都觉得黑客帝国里，电脑屏幕上的绿色代码雨非常的炫酷。想要制作一个来炫耀一番。下面，小编来介绍制作方法。
代码雨.bat
06-14
这个是第一种代码雨，还有一种在我首页里，大家可以下着玩
java代码实现代码雨
12-03
java代码实现代码雨屏保效果，自己写的就不用看着各路大神的发慌了
代码雨
热门推荐
oxgencui的博客
11-27 1万+
代码雨
好玩的代码雨，在线分享给大家~-
m0_72282564的博客
07-01 457
嗨喽，大家好呀~这里是爱看美女的茜茜呐今天刷视频的时候，我刷到了一个代码雨视频，大家都在说炫酷于是，现在我来分享一下这个的代码~ 初始化参数设计 创建窗口及文本设计 文本内容 当然了，这个是运动的，不过我懒得录视频啦~截张图大家凑合着看一下啦 💖感谢你观看我的文章呐~本次航班到这里就结束啦 ⌚希望本篇文章有对你带来帮助 🎊，有学习到一点知识~躲起来的星星🏵也在努力发光，你也要努力加油（让我们一起努力叭）。最后，博主要一下你们的三连呀（点赞、评论、收藏），不要钱的还是可以搞一搞的嘛~不知道评论啥...
Python代码雨
路过人间
07-27 1434
Python 代码雨 封装 打包成exe
好玩的代码（1）
weixin_34355715的博客
10-09 410
看效果（gif工具不太会用，效果不是很好） 代码很简单，就是对sleep函数和/b的使用。 代码 1 #include &lt;cstdio&gt; 2 #include &lt;windows.h&gt; 3 using namespace std; 4 5 int main(int argc, char **argv) 6 { 7 printf...
怎么制作代码雨用python
最新发布
07-11
要制作代码雨效果，你可以使用 Python 中的 Pygame 库来实现。以下是一个简单的示例代码： ```python import pygame import random # 初始化 pygame.init() # 窗口大小 width, height = 800, 600 screen = pygame.display.set_mode((width, height)) # 字体和字体大小 font = pygame.font.SysFont(None, 25) # 文本内容和颜色 text = "Code Rain" text_color = (0, 255, 0) # 创建代码雨的粒子 class CodeParticle: def __init__(self): self.x = random.randint(0, width) self.y = random.randint(-height, 0) self.speed = random.randint(5, 20) self.color = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)) # 更新粒子的位置 def update(self): self.y += self.speed if self.y > height: self.y = random.randint(-height, 0) # 绘制粒子 def draw(self, screen): pygame.draw.line(screen, self.color, (self.x, self.y), (self.x, self.y + 5)) # 创建代码粒子列表 particles = [] for _ in range(100): particles.append(CodeParticle()) # 游戏循环 running = True while running: # 事件处理 for event in pygame.event.get(): if event.type == pygame.QUIT: running = False # 清屏 screen.fill((0, 0, 0)) # 更新和绘制粒子 for particle in particles: particle.update() particle.draw(screen) # 绘制文本 text_surface = font.render(text, True, text_color) screen.blit(text_surface, (10, 10)) # 刷新屏幕 pygame.display.flip() # 退出游戏 pygame.quit() ``` 运行上述代码后，你将看到一个窗口显示代码雨效果，并且窗口中心显示了 "Code Rain" 文本。你可以根据自己的需要修改文字内容、颜色和窗口大小等参数。注意，你需要先安装 Pygame 库，可以使用 `pip install pygame` 命令进行安装。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值