javascript – easy methods to calculate percisely the character motion in a tiles

So, i’ve began constructing a recreation 2nd only a few day so its make me so confuse with some purpose of the motion character within the tilemap.In my tilemap, each per tiles2 is have the width and top 16px and the entire map is 800 x 1250, each motion of my character will add/sub 1 in per step, after I calculating detection collisions, the place grew to become incorrect place although i attempt to divide 16 px in each motion of character.
That is my motion:

this.setting_walking_speed = 3 ;
if (this.participant.control_direction[0] == 1) {
                this.participant.x -= this.setting_walking_speed;
                this.participant.strolling = 1;
                this.participant.path = 0;


            } else if (this.participant.control_direction[1] == 1) {

                this.participant.y -= this.setting_walking_speed;
                this.participant.strolling = 1;
                this.participant.path = 2;

            } else if (this.participant.control_direction[2] == 1) {
                this.participant.x += this.setting_walking_speed;
                this.participant.strolling = 1;
                this.participant.path = 1;
            } else if (this.participant.control_direction[3] == 1) {
                this.participant.y += this.setting_walking_speed;
                this.participant.strolling = 1;
                this.participant.path = 3;
            }
            var posf = {
                x:Math.flooring( this.participant.y /16 ) ,  
                y:Math.flooring( this.participant.x /16 )  
            };
            console.log(posf.x  , posf.y);
}

And the collision operate is:
The this.setting_minblocksize[k] = 16;
this.certain = this.draw_collision();

        operate rectangularCollision({map , rect1, rect2 }) {
            var knowledge = map.layers[1].knowledge[rect1.x * map.layers[1].width + rect1.y];
            if(knowledge != 0){
                    // console.log(knowledge);
            }
            return ( 
                rect1.x  >= rect2.x  &&
                rect1.x <= rect2.x   &&
                rect1.y  <= rect2.y  &&  
                rect1.y  >= rect2.y 
            )
        }

        this.collide = operate(participant){
            // console.log(this.certain);
            this.certain.forEach((boundaries) => {
                if(
                    rectangularCollision({
                        map: this.map,
                        rect1: participant,
                        rect2: boundaries
                    })
                ){
                    console.log('collide');
                }
            })
        }

        this.draw_collision = operate () {
            var obj = [];
            this.ctxt.clearRect(0, 0, canvas.width, canvas.top);
            for (var i = 0; i < canvas.top; i++) {
                for (var j = 0; j < canvas.width; j++) {

                    var knowledge = 0;
                    if (i >= 0 && j >= 0 && i < this.map.layers[1].top && j < this.map.layers[1].width) {
                        var knowledge = this.map.layers[1].knowledge[i * this.map.layers[1].width + j];
                        for (var okay = 0; okay < 1; okay++) {
                            this.ctxt.fillStyle="purple";
                            if (knowledge != 0) {
                                obj.push({
                                    x: j ,    
                                    y: i
                                });
                                this.ctxt.fillRect(
                                    (j * this.setting_minblocksize[k]) ,
                                    (i * this.setting_minblocksize[k]) ,
                                    this.setting_minblocksize[k],
                                    this.setting_minblocksize[k]
                                );
                            }
                        }
                    }
                }
            }
            return obj;
        }

Thanks all for serving to me!