所以之后我就奇思妙想，让每次文字是排列X轴平铺数字随机呈现。例如第一次平铺300个，第二次平铺100个，第三次平铺200.......,但是我还是错了：

错误的代码示范：

所以多次失败的尝试之后，发现还是得控制利用一个数组控记录与控制每一个数字Y轴的数据。

4、代码的收尾 Run(); function Run() { Game_Interval = setInterval(draw, 30); }

之后设置一个定时器，每次间隔30ms调用一次，然后大功告成。一个炫酷的黑客帝国矩形雨效果就出来了。

当然前面JavaScript代码可能太凌乱，所以这边就把JavaScript的全部呈上：

window.onload = function() { var kacker = document.getElementById("hacker"); var width = hacker.width = screen.width; var height = kacker.height; var ctx = hacker.getContext('2d'); var num = Math.ceil(width / 10); var y = Array(num).join(0).split(''); var draw = function() { ctx.fillStyle = 'rgba(0,0,0,.05)'; ctx.fillRect(0, 0, width, height); ctx.fillStyle = '#0f0'; ctx.font = '10px Microsoft YaHei'; for(i = 0; i < num; i++) { var x = (i * 10) + 10; text = String.fromCharCode(65 + Math.random() * 62); //console.log(text); 用来检测 text 的值 var y1 = y[i]; ctx.fillText(text, x, y1); if(y1 > Math.random() * 10 * height) { y[i] = 0; } else { y[i] = parseInt(y[i]) + 10; } } } Run(); function Run() { Game_Interval = setInterval(draw, 100); } }

看到这里不要以为代码就此结束了，好好吸收那个for循环之后。接下来再返回上面看一下map()方法，相信map()方法的用法是不是一下子清晰明了。一箭双雕，既实现了5毛的特效，又帮助熟悉了一个map()方法用法.

效果预览：黑客帝国矩形阵
（ps：效果图挂在阿里云上面，部分平台点击进去可能会有提示，例如微信，请忽略.....）

我是车大棒,深藏功与名！（滑稽脸）


posted @