酷炫代码雨

简介: 酷炫代码雨

话不多说,直接上代码

<!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() {
    ctx.fillStyle = "rgba(0,0,0,0.05)";
    ctx.fillRect(0, 0, width, height);
    ctx.fillStyle = "#66ffff";
    arr.forEach(function (value, index) {
        ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
        arr[index] = value >= height || value > 9999 * Math.random() ? 0 : value + 10;
    });
}
setInterval(rain, 30);
</script>
</body>
</html>


相关文章
|
人工智能 安全 JavaScript
模拟“嫦娥五号”探月小游戏【附源码】
在实际的探月过程中,这些操作都是由程序精确测量和控制的。而在这个游戏里,则需要玩家手动完成 降落 和 上升对接 这两个操作。
|
前端开发 JavaScript
中秋之美——html+css+js制作中秋网页
中秋之美——html+css+js制作中秋网页
694 0
中秋之美——html+css+js制作中秋网页
|
6月前
|
Java
3D炫酷赛车游戏【附源码】设计实现
3D炫酷赛车游戏【附源码】设计实现
75 10
|
4月前
|
前端开发
七夕特效惊艳全场!HTML+CSS带你DIY酷炫表白神器
七夕特效惊艳全场!HTML+CSS带你DIY酷炫表白神器
|
7月前
|
C# 图形学
【Unity】2D游戏-愤怒的小鸟教学实战(附源码和实现步骤 超详细)
【Unity】2D游戏-愤怒的小鸟教学实战(附源码和实现步骤 超详细)
384 2
【代码分享】【像极了恋爱】甜甜的汤圆,祝丽姿元宵快乐(表白特效)
【代码分享】【像极了恋爱】甜甜的汤圆,祝丽姿元宵快乐(表白特效)
122 0
|
JavaScript 前端开发
【原生JS】做一个打字消除小游戏,学习摸鱼两不误
【原生JS】做一个打字消除小游戏,学习摸鱼两不误
127 0
【原生JS】做一个打字消除小游戏,学习摸鱼两不误
|
前端开发 JavaScript
2023跨年烟花(浪漫烟花+美妙音乐+雪花飘飘)含前端源码直接下载---系列最终篇
2023跨年烟花(浪漫烟花+美妙音乐+雪花飘飘)含前端源码直接下载---系列最终篇
521 0
2023跨年烟花(浪漫烟花+美妙音乐+雪花飘飘)含前端源码直接下载---系列最终篇
|
JavaScript 前端开发 程序员
【中秋征文】手把手教你海面月亮升起中秋节特效制作
【中秋征文】手把手教你海面月亮升起中秋节特效制作
237 0
【中秋征文】手把手教你海面月亮升起中秋节特效制作
我做的一个超级好玩的中秋节小游戏
我做的一个超级好玩的中秋节小游戏
我做的一个超级好玩的中秋节小游戏
下一篇
DataWorks