实现黑客帝国的代码雨
程序员文章站
2022-04-07 15:38:00
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码雨</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
/*
① 用setInterval(draw, 33)设定刷新间隔
② 用String.fromCharCode(1e2+Math.random()*33)随机生成字母
③ 用ctx.fillStyle=’rgba(0,0,0,.05)’; ctx.fillRect(0,0,width,height); ctx.fillStyle=’#0F0′; 反复生成opacity为0.5的半透明黑色背景
④ 用x = (index * 10)+10;和yPositions[index] = y + 10;顺序确定显示字母的位置
⑤ 用fillText(text, x, y); 在指定位置显示一个字母 以上步骤循环进行，就会产生《黑客帝国》的片头效果。
*/
$(document).ready(function () {
var s = window.screen;
var width = q.width = s.width;
var height = q.height;
var yPositions = Array(300).join(0).split('');
var ctx = q.getContext('2d');
var draw = function () {
ctx.fillStyle = 'rgba(0,0,0,.05)';
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = 'green';
ctx.font = '10pt Georgia';
yPositions.map(function (y, index) {
text = String.fromCharCode(1e2 + Math.random() * 33); //这是随机字母
text = parseInt(Math.random() * 2); //这是随机数字
x = (index * 10) + 10;
q.getContext('2d').fillText(text, x, y);
if (y > Math.random() * 1e4) {
yPositions[index] = 0;
} else {
yPositions[index] = y + 10;
}
});
};
RunMatrix();
function RunMatrix() {
Game_Interval = setInterval(draw, 50);
}
});
</script>
</head>
<body>
<canvas id="q" width="500" height="500"></canvas>
</body>
</html>
上一篇： 扫雷游戏（C语言实现）
下一篇： C语言实现扫雷程序