javascript canvas rain simulator

Question

你好我试图创建基于画布的javascript雨生成器，但我坚持生成新的dropes。我只有HTML和css中的canvas元素，所以我只附加了JS脚本。

 <script>
        const canvas = document.querySelector('canvas');
        const ctx = canvas.getContext('2d');

        canvas.width = 1000;
        canvas.height = 500;

        const cw = canvas.width;
        const ch = canvas.height;

        const dropSize = 5;
        //drop actual position
        let dropX = Math.floor((Math.random() * cw) + 1); 
        let dropY = 0 ;
        //something that will trigger creation of anothers drop
        let dropTrigger = 400;


        var num = Math.floor(Math.random()*1) + 1; // 
        num *= Math.floor(Math.random()*2) == 1 ? 1 : -1; // random direction of X btw (-1 and 1) How to implement this?

        //speed controls direction of drops 
        let dropSpeedX = num; //in the future will base on random
        let dropSpeedY = 3;  //in the future will base on random

        //function which creates one drop basing on start coordinates (X,Y)
        function createDrop() {
            ctx.fillStyle = '#fff';
            ctx.fillRect(dropX, dropY, dropSize, dropSize);
            //current position on the screen
            dropX += dropSpeedX;
            dropY += dropSpeedY;
            if(dropY >= dropTrigger){
                dropY=0;
            }
        }
        //background creator
        function createBackground(){

            ctx.fillStyle = 'black';
            ctx.fillRect(0,0,cw,ch);
        }

        //whole simulator
        function play(){
            createBackground();
            createDrop();
        }

        //interval paints everything on the screen in 30fps

        setInterval(play, 1000/ 30);
</script>

现在我一次只能创建一个掉落。有没有人知道如何，生成“另一滴（许多同时）和如何实现X方向的变化，我把评论中的”???“标记？它只有当我刷新浏览器时才能正常工作。 非常感谢提前