how to calculate percisely the character movement in a tiles

So, i have started building a game 2d just a few day so its make me so confuse with some reason of the movement character in the tilemap.In my tilemap, every per tiles2 is have the width and height 16px and the whole map is 800 x 1250, every movement of my character will add/sub 1 in per step, when I calculating detection collisions, the position became wrong position specifically when character move a step then the position return to far though i try to divide 16 px in every movement of character. This is my movement:

this.setting_walking_speed = 3 ;
if (this.player.control_direction[0] == 1) {
this.player.x -= this.setting_walking_speed;
this.player.walking = 1;
this.player.direction = 0;

            } else if (this.player.control_direction[1] == 1) {
    
                this.player.y -= this.setting_walking_speed;
                this.player.walking = 1;
                this.player.direction = 2;
    
            } else if (this.player.control_direction[2] == 1) {
                this.player.x += this.setting_walking_speed;
                this.player.walking = 1;
                this.player.direction = 1;
            } else if (this.player.control_direction[3] == 1) {
                this.player.y += this.setting_walking_speed;
                this.player.walking = 1;
                this.player.direction = 3;
            }
            var posf = {
                x:Math.floor( this.player.y /16 ) ,  
                y:Math.floor( this.player.x /16 )  
            };
            this.collide(posf);
            console.log(posf.x  , posf.y);

}

And the collision function is:

The this.setting_minblocksize\[k\] = 16;
this.bound = this.draw_collision();

        function rectangularCollision({rect1, rect2 }) {
            return ( 
                rect1.x  >= rect2.x  &&
                rect1.x <= rect2.x   &&
                rect1.y  <= rect2.y  &&  
                rect1.y  >= rect2.y 
            )
        }
    
        this.collide = function(player){
            // console.log(this.bound);
            this.bound.forEach((boundaries) => {
                if(
                    rectangularCollision({,
                        rect1: player,
                        rect2: boundaries
                    })
                ){
                    console.log('collide');
                }
            })
        }
    
        this.draw_collision = function () {
            var obj = [];
            this.ctxt.clearRect(0, 0, canvas.width, canvas.height);
            for (var i = 0; i < canvas.height; i++) {
                for (var j = 0; j < canvas.width; j++) {
    
                    var data = 0;
                    if (i >= 0 && j >= 0 && i < this.map.layers[1].height && j < this.map.layers[1].width) {
                        var data = this.map.layers[1].data[i * this.map.layers[1].width + j];
                        for (var k = 0; k < 1; k++) {
                            this.ctxt.fillStyle = 'red';
                            if (data != 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;
        }

My codepen link is right here Thank you all for helping me!

Via Active questions tagged javascript - Stack Overflow https://ift.tt/31Ny5Iu