黑客帝国代码雨可控机制
本帖最后由 马黑黑 于 2023-12-24 20:13 编辑去年八月份做的一个帖子，《黑客帝国》，当时没有引入代码雨可控机制。那时的JS代码是酱紫：
<script type="text/javascript">
let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let texts = Array.from(Array(94), (x,k) => String.fromCharCode(33+k)),
fontsize = 16,
columns = Math.floor(w / fontsize) - 1,
drops = new Array(columns),
aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1809135506.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
(function draw(){
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = '#0f0';
ctx.font = fontsize + 'px arial';
for(var j = 0; j < drops.length; j ++){
let text = texts;
ctx.fillText(text, j * fontsize + fontsize / 2 + 1, drops * fontsize);
if(drops*fontsize > h || Math.random() > 0.95){
drops = 0;
}
drops++;
}
requestAnimationFrame(draw);
})();
</script>
我们改变一下，不是大刀阔斧的改变：
<script type="text/javascript">
let cTimer = null;
let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let texts = Array.from(Array(94), (x,k) => String.fromCharCode(33+k)),
fontsize = 16,
columns = Math.floor(w / fontsize) - 1,
drops = new Array(columns),
aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1809135506';
aud.loop = true;
aud.autoplay = true;
let mState = () => {
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
draw();
};
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
function draw() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = '#0f0';
ctx.font = fontsize + 'px arial';
for(var j = 0; j < drops.length; j ++){
let text = texts;
ctx.fillText(text, j * fontsize + fontsize / 2 + 1, drops * fontsize);
if(drops*fontsize > h || Math.random() > 0.95){
drops = 0;
}
drops++;
}
cTimer = aud.paused ? cancelAnimationFrame(cTimer) : requestAnimationFrame(draw);
};
</script>
一个 cTimer 变量，用来标记请求关键帧动画执行状态；设计一个我们已经习以为常的 mState 函数，作为控制按钮和代码雨的触发机制；两个 audio 监听事件，绑定 mState 函数；最后是，原来的自执行函数 draw 去掉外壳，不自动执行（它由 mState 函数带动执行，mState 执行的是 draw 函数，draw 函数又由 audio 控件的暂停与否做判断、决定是否运行代码雨）。
演示：http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1703413713 我找到了原来的帖子{:4_173:} requestAnimationFrame 这个里面又用到了这个。看了效果，很完美{:4_187:} 哈哈，刚看到你主楼里有链接的，我还自己跑去翻了半天{:4_170:} 红影 发表于 2023-12-24 20:38
哈哈，刚看到你主楼里有链接的，我还自己跑去翻了半天
正常的，翻翻也好 吃瓜群众谢谢黑黑老师分享精彩{:4_187:} 马黑黑 发表于 2023-12-24 21:14
正常的，翻翻也好
我看帖也太不仔细了，我一页页翻，翻半天才找到，然后一抬头，发现上面有链接的呢{:4_173:} 红影 发表于 2023-12-24 22:03
我看帖也太不仔细了，我一页页翻，翻半天才找到，然后一抬头，发现上面有链接的呢
搜索一下子就能找到 马黑黑 发表于 2023-12-24 22:36
搜索一下子就能找到
哦，对哦，可以用名字取搜的，我还跑去翻了{:4_173:} 红影 发表于 2023-12-24 23:08
哦，对哦，可以用名字取搜的，我还跑去翻了
笨方法其实也挺好 马黑黑 发表于 2023-12-24 23:08
笨方法其实也挺好
是啊，也顺便看了好多以前帖子名，黑黑做了那么多呢{:4_187:} 红影 发表于 2023-12-24 23:16
是啊，也顺便看了好多以前帖子名，黑黑做了那么多呢
其实我最满意的是用类封装的例子，好像有四个教程吧，循序渐进 马黑黑 发表于 2023-12-25 08:17
其实我最满意的是用类封装的例子，好像有四个教程吧，循序渐进
完了，发现都没记住，我还得回头去复习一下{:4_173:} 红影 发表于 2023-12-25 09:59
完了，发现都没记住，我还得回头去复习一下
我刚才搜了一下，共五讲 马黑黑 发表于 2023-12-25 10:23
我刚才搜了一下，共五讲
用JS类封装粒子特效的1-5讲，刚才我也去搜了一下{:4_173:} 红影 发表于 2023-12-25 10:50
用JS类封装粒子特效的1-5讲，刚才我也去搜了一下
这个重在思路。做帖，要实现某些功能，实现的思路很重要。类只是一种封装方式，可以不用它的。 马黑黑 发表于 2023-12-25 12:20
这个重在思路。做帖，要实现某些功能，实现的思路很重要。类只是一种封装方式，可以不用它的。
对于你来说，是讲究思路，队伍来说只是跟在后面混的{:4_173:} 红影 发表于 2023-12-25 13:19
对于你来说，是讲究思路，队伍来说只是跟在后面混的
谁还不是混？在队伍里混也挺好 马黑黑 发表于 2023-12-25 17:46
谁还不是混？在队伍里混也挺好
对我来说我又打成了队伍{:4_170:}
页:
[1]
2