自動で動くノーツに合わせてスペースキーを押すと「HIT！」と表示されるjavascript

音楽ゲームをつくりたいので、勉強します。

下記のサイトのコードがそれぞれどういう理由で書かれているか考えようと思います。
「ツナドーナツ・技術メモ帳　音ゲーを作りたい１」
https://iwanax.hatenadiary.jp/entry/2017/05/09/231559

　function SquareLoop() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    var x = 240;
    var y = 0;
    var bottom = canvas.height - 80;
    var speed = 5;
    var sizeX = 40;
    var sizeY = 12;
    var hitSizeY = 15;
    var spaceFlag = false;
    var num = 0;
    /*キーボード操作の制御*/
    document.addEventListener("keydown", KeyDownFunc);
    document.addEventListener("keyup", KeyUpFunc);
    ctx.font = "16px Arial";

    function render() {
      if(y >= canvas.height - 50){
        y = 0;
      }else{
        y += speed;
      }
      ctx.clearRect(0, 0, canvas.width, canvas.height - 38);
      ctx.strokeRect(x, bottom, sizeX, sizeY);
      ctx.beginPath();
      ctx.fillRect(x, y, sizeX, sizeY);
    }
    /*SpaceKeyが押された時の処理*/
    function KeyDownFunc(e) {
      if (e.keyCode == 32 && y >= bottom - hitSizeY && y <= bottom + hitSizeY){
        spaceFlag = true;
        num++;
      }
    }

    function KeyUpFunc(e) {
      if (e.keyCode == 32 && y > bottom + hitSizeY){
        spaceFlag = false;
      }
    }

    function hit(){
      if (spaceFlag == true){
        ctx.clearRect(0, 264, canvas.width, canvas.height);
        ctx.fillText('HIT!'+num, 300, 280);
      }
    }
    setInterval(render, 50);
    setInterval(hit, 50);
  }
  SquareLoop();

一つ一つ見ていく

function render() {
      if(y >= canvas.height - 50){
        y = 0;
      }else{
        y += speed;
      }
      ctx.clearRect(0, 0, canvas.width, canvas.height - 38);
      ctx.strokeRect(x, bottom, sizeX, sizeY);
      ctx.beginPath();
      ctx.fillRect(x, y, sizeX, sizeY);
}

■合わせるための四角の枠を描画させ、ノーツを落ちてこさせる

変数y がキャンバスの高さから50引いた数以上だった場合、y に 0 を代入する
それ以外の場合、y に 5 を足した数を代入する
「横の長さがキャンバス幅、縦の長さがキャンバスの高さから38引いた数」の範囲をすべて消す
幅が40、高さが12のサイズの四角の枠を引く（キャンバスの高さから80引いた数の場所）
幅が40、高さが12のサイズの四角を塗りつぶす（yの高さ）

document.addEventListener("keydown", KeyDownFunc);
document.addEventListener("keyup", KeyUpFunc);
ctx.font = "16px Arial";

キーボードが押されたときに、関数KeyDownFunc を実行する
キーボードを離したときに、関数keyUpFunc を実行する
cssのフォント指定

function KeyDownFunc(e) {
      if (e.keyCode == 32 && y >= bottom - hitSizeY && y <= bottom + hitSizeY){
        spaceFlag = true;
        num++;
      }
    }

押されたキーボードがスペース(32)かつ、yがキャンバスの高さから80引いた数から15引いた数以上かつ、yがキャンバスの高さから80引いた数から15足した数以下である場合
変数spaceFlag に true を代入する
num に1を足す

function KeyUpFunc(e) {
      if (e.keyCode == 32 && y > bottom + hitSizeY){
        spaceFlag = false;
      }
    }

押されたキーボードがスペース(32)かつ、yがキャンバスの高さから80引いた数から15足した数より大きい場合
変数spaceFlag に false を代入する

function hit(){
      if (spaceFlag == true){
        ctx.clearRect(0, 264, canvas.width, canvas.height);
        ctx.fillText('HIT!'+num, 300, 280);
      }
    }

変数spaceFlag が true だった場合
x座標が300、y座標が280の位置に、HIT! + 変数num を描画する

setInterval(render, 50);
setInterval(hit, 50);

50/1000秒ごとに関数render と関数 hit を繰り返す