JavaScript world's hardest game style dragging movement and collision for y axis

I'm trying to make a basic 2d top -down mobile drag-to-move game, with similar controls t o The World's Hardest Game on the Play store, see there if you don't know what I mean (basically just drag anywhere on the screen to move the player. It's like drag and dropping the player to move,except instead of dragging the player itself,just drag anywhere on the screen)

I'm able to the the movement so far, except the problem is with collision detection. I'm able to get it to work with the x,but i have no idea how to do it for the y. Basically all i do is just check if it's colliding with the right o r left sides, and also check if the position it's being dragged to is past the wall or not, and just set the desired x direction to the wall itself to make it slide.

It might sound complicated, but here's the (messy but working) code

<html>

<head>

  <script type="text/javascript">
    var m = function(arg) {
      if (!arg) {
        arg = {};
      }
      var width = arg.width || 50;
      var height = arg.height || 59;
      var x = arg.x || 0;
      var y = arg.y || 0;
      var color = arg.color || "blue";
      var div = document.createElement("div");
      var style = {
        width: width + "px",
        height: height + "px",
        top: y + "px",
        left: x + "px",
        backgroundColor: color,
        position: "absolute"
      };

      function updateStyle() {

        for (var i in style) {
          div.style[i] = style[i];

        }
        this.div = div;

      }



      this.setPos = (nx, ny) => {
        x = nx; //-width/2;
        y = ny; //-width/2;
        style["left"] = x + "px";
        style["top"] = y + "px";
        updateStyle();
      };

      this.setColor = (col) => {
        style.backgroundColor = col;
        updateStyle();
      }

      this.getPos = () => {
        var obj = {};
        obj.x = x;
        obj.y = y;
        return obj;
      };


      this.getWidth = () => width;
      this.getHeight = () => height;

      this.getBB = () => {
        return {
          x: x,
          y: y,
          width: width,
          height: height
        };
      };
      updateStyle();
      this.div = div;

    }
    var a = (el) => {
      if (!el)
        el = m();
      document.body.appendChild(el);

    }

    var col = function(box1, box2) {
      var point = false;
      if (!(
          box1.x > box2.x + box2.width ||
          box1.x + box1.width <= box2.x ||
          box1.y > box2.y + box2.height ||
          box1.y + box1.height <= box2.y)) {
        point = new Array();
        if (box1.x + box1.width > box2.x && box1.x + box1.width < box2.x + box2.width) {
          point[0] = true;

        }
        if (box1.x > box2.x) {
          point[1] = true;

        }

        if (box1.y + box1.height > box2.y && box1.y + box1.height < box2.y + box2.height) {
          point[3] = true;
        }
        //top of player
        if (box1.y > box2.y) {
          point[2] = true;
        }
      }
      return point;
    }
  </script>
</head>

<body>

  <script>
    window.onload = () => {

      var d = new m({
        color: "red"
      });
      a(d.div);
      var b = new m({
        width: 25,
        height: 25
      });
      a(b.div);
      var wall = new m({
        width: 70,
        height: 300,
        x: 400,
        y: 280
      });
      a(wall.div);
      var r = new m({});
      a(r.div);
      var x = 0;
      var y = 0;
      var ylimit = 700;
      var xlimit = 500;
      var xspeed = 2;
      var yspeed = 8;
      var startT = {
        x: 0,
        y: 0
      };
      var curT = {
        x: 0,
        y: 0
      };
      var endT = {
        x: 0,
        y: 0
      };
      var origPos = b.getPos();
      var colliding = [];

      function update() {
        colliding = [];
        d.setColor("blue");
        wall.setColor("blue");
        b.setColor("red");
        d.setPos(x, y);
        r.setColor("blue");
        if (y > ylimit || y < 0) {
          yspeed *= -1;
        }
        if (x > xlimit || x < 0) {
          xspeed *= -1;
        }
        x += xspeed * 4;
        y += yspeed;
        var hit = col(b.getBB(), wall.getBB());
        if (hit) {

          colliding = hit;
          if (hit[0])
            d.setColor("green");
          if (hit[1])
            wall.setColor("purple");
          if (hit[2])
            b.setColor("salmon");
          if (hit[3]) {
            r.setColor("pink");
          }

          //	b.setPos(wall.getPos().x-b.getWidth(),b.getPos().y);
        }

        window.requestAnimationFrame(update);
      }
      window.requestAnimationFrame(update);
      var diff = 0;
      document.body.addEventListener("touchstart", (e) => {
        if (e.targetTouches.length > 0) {
          startT.x = e.targetTouches[0].pageX;
          startT.y = e.targetTouches[0].pageY;
          origPos = b.getPos();
          diff = 0;
        }
      });
      document.body.addEventListener("touchend", (e) => {
        if (e.targetTouches.length > 0) {
          endT.x = e.targetTouches[0].pageX;
          endT.y = e.targetTouches[0].pageY;
          //	origPos=b.getPos();
        }
      });
      var c = false;
      var stoppedPosx = 0;

      document.body.addEventListener("touchmove", (e) => {
        if (e.targetTouches.length > 0) {
          curT.x = e.targetTouches[0].pageX - diff;
          curT.y = e.targetTouches[0].pageY;
          var dx = (curT.x - startT.x) + origPos.x;
          var dy = (curT.y - startT.y) + origPos.y;
          var ax;
          if (dx < 0) {
            dx = 0;

          } else if (dx > 900) {
            dx = 300;
          }
          if (dy < 0) {
            dy = 0;
          } else if (dy > 700) {
            dy = 700;
          }
          var futObj = {
            x: dx,
            y: dy,
            width: b.getWidth(),
            height: b.getHeight()
          };
          var hit = col(futObj, wall.getBB());

          //		if(dx +b.getWidth() > wall.getPos().x && dy < wall.getPos().y+wall.getHeight()) 
          if (colliding[0] && dx + b.getWidth() > wall.getPos().x && dy < wall.getPos().y + wall.getHeight()) {
            dx = wall.getPos().x - b.getWidth() + 1;
            diff = ((e.targetTouches[0].pageX - startT.x) + origPos.x) - b.getPos().x;
          } else if (colliding[1] && dx < wall.getPos().x + wall.getWidth() && dy < wall.getPos().y + wall.getHeight()) {
            dx = wall.getPos().x + wall.getWidth() - 1;
            diff = ((e.targetTouches[0].pageX - startT.x) + origPos.x) - b.getPos().x;
          }

          b.setPos(dx, dy);
        }
      });
      alert("hi")
    }
  </script>

</body>

</html>

Not sure if the snippet works with scrolling or not and not really sure how to make it work, but that's another question. If you're not able to drag the red player to test it, then just try copying it into a m html file.

The relevant part for this question is in the event listeners part near the end

So the point is:how do I add the y collision detection,just like in the original game? (It's definitely possible)!