Hit Detection to Stop Character Running?

Alright so i have been struggling for weeks onthis on my own so time to ak the community!

I am using Animatte CC 2022 and am using the HTML5 Canvas to create this small little game demo.

In the demo i have a movieClips on stage labled:

• LanceclopRun ( my charcater who animates and runs around)

AND

• movieClip called invisiWall the Blue Box. (object I want the character to Collide with and stop moving in that direction)

Here is the code hat makes them move around:

var _this = this; 

/*----------------------------LANCECLOP CHARACTER MOEMENT CODE----------------------------*/
//LANCECLOP CHARACTER MOVEMENT Variables
var LEFT = false; //When set to true triggers charcater movement Leftward based on charSpeed
var RIGHT = false; //When set to true triggers charcater movement Rightward based on charSpeed
var UP = false; //When set to true triggers charcater movement Upward based on charSpeed
var DOWN = false; //When set to true triggers charcater movement Downward based on charSpeed
var SHIFT = false; //used for setting the run speed
var charSpeed = 0.75; //Sets basic Walk Speed (SHIFT raises this to 5 for running)
var charRunFlip = -0.055; //Flips the Characters moveclips for run/walk cycle
var charRunNotFlip = 0.055; //Flips the Characters moveclips for run/walk cycle
var isVisible = true; //sets visible status of any clip to true
var isNotVisible = false; //sets visible status of any clip to false
var charStop = false; //Used to set the hit detection for walls to stop the charcater from moving past.
_this.LanceclopIdle.visible = true; 
_this.LanceclopRun.visible = false;

//LANCECLOP Arrow keys
//LANCECLOP KeyDown
document.onkeydown = function(e) {
	if(e.keyCode == 65) {
		LEFT = true;
		console.log("LeftPressedSuccess");
		};
	if(e.keyCode == 68) {
		RIGHT = true;
		console.log("RightPressedSuccess");
		};
	if(e.keyCode == 87) {
		UP = true;
		console.log("UpPressedSuccess");
		};
	if(e.keyCode == 83) {
		DOWN = true;
		console.log("DownPressedSuccess");
		};
	if(e.keyCode == 16) { //Press Shift changes the characters run speed when shift is held, rasining it to 5
		charSpeed = 1.25;
		_this.shiftBTN.gotoAndStop('shiftRun');
		console.log("SpeedUp");
		};
	
};

//LANCECLOP KeyUp
document.onkeyup = function(e) {
	if(e.keyCode == 65) {
		LEFT = false;
		_this.arrowKeys.gotoAndStop('keysIdle');
		_this.LanceclopIdle.visible = isVisible;
		_this.LanceclopRun.visible = isNotVisible;
		console.log("LeftUNPRESSED");	
	};
	if(e.keyCode == 68) {
		RIGHT = false;
		_this.arrowKeys.gotoAndStop('keysIdle');
		_this.LanceclopIdle.visible = isVisible;
		_this.LanceclopRun.visible = isNotVisible;
		console.log("RightUNPRESSED");	
	};
	if(e.keyCode == 87) {
		UP = false;
		_this.arrowKeys.gotoAndStop('keysIdle');
		_this.LanceclopIdle.visible = isVisible;
		_this.LanceclopRun.visible = isNotVisible;
		console.log("UpUNPRESSED");	
	};
	if(e.keyCode == 83) {
		DOWN = false;
		_this.arrowKeys.gotoAndStop('keysIdle');
		_this.LanceclopIdle.visible = isVisible;
		_this.LanceclopRun.visible = isNotVisible;
		console.log("DownUNPRESSED");	
	};
	if(e.keyCode == 16) { //Release Shift Sets the character movment speed back to the default walk speed of 1
		charSpeed = 0.75;
		_this.shiftBTN.gotoAndStop('shiftIdle');
		console.log("SpeedUp");
		};  
    
};

// LANCECLOP MOVE the Charcater Function
function moveChar() {
	
	if(LEFT) { 
		_this.arrowKeys.gotoAndStop('keyLeft');
		_this.LanceclopIdle.x -= charSpeed;
		_this.LanceclopRun.x -= charSpeed;
		_this.LanceclopIdle.visible = isNotVisible;
		_this.LanceclopRun.visible = isVisible;
		_this.LanceclopIdle.scaleX = charRunFlip;
		_this.LanceclopRun.scaleX = charRunFlip;

	};
	if(RIGHT) {
		_this.arrowKeys.gotoAndStop('keyRight');
		_this.LanceclopIdle.x += charSpeed;
		_this.LanceclopRun.x += charSpeed;
		_this.LanceclopIdle.visible = isNotVisible;
		_this.LanceclopRun.visible = isVisible;
		_this.LanceclopIdle.scaleX = charRunNotFlip;
		_this.LanceclopRun.scaleX = charRunNotFlip;

	};
	if(DOWN) { 
		_this.arrowKeys.gotoAndStop('keyDown');
		_this.LanceclopIdle.y += charSpeed;
		_this.LanceclopRun.y += charSpeed;
		_this.LanceclopIdle.visible = isNotVisible;
		_this.LanceclopRun.visible = isVisible;

	};
	if(UP) {
		_this.arrowKeys.gotoAndStop('keyUp');
		_this.LanceclopIdle.y -= charSpeed;
		_this.LanceclopRun.y -= charSpeed;
		_this.LanceclopIdle.visible = isNotVisible;
		_this.LanceclopRun.visible = isVisible;
	
	};	
};



// LANCECLOP COLLISIONS


// LANCECLOP update
setInterval (update, 1); //Sets an interval to trigger the function update ever 1 frame
//Function that triggers the move function o every frame checking for the key presses and moving the charcater appropriateley
function update() { 
    moveChar();
};

Now im trying to make a Box that I can make instances of an place everywhere for the Character to Collide with and stop them from moving then colligind with he box.

Problem is I cannot get a hitTest to fire between the two movieslips in anyway ( even with a simple "console.log('HIT!')" to prove the successful hit) I was thinkin using "getBounds();" of each clip and comparing them for overlap and then set "charSpeed = 0;" if collision betweent the getBounds of each clip is "true".

What im hoping to acheieve is the ability to set up these boxes all around the level like invisible barriers around objects like cars and buildings so the charcater can't pass through them or walk over them, but can turn away or move up and down along them until getting past the invisiWall.

Below is a video of what I have so far, and now I am super stuck!
Thoughts?