How to prevent a tank from passing through each other, (JS GAME)?

Question

css

init();
function init() {
    audio = new Audio("audio.mp3");
    // audio.play();
    tank =  new Tank(100, 100, 60, 85, "killer.svg");
    enemyTank = new Tank(60, 60, 85, 75, "tanchik.png");
    myGame = new MyGame();
    myGame.startGame();
}

function MyGame() {
    var self = this;
    self.canvas = document.getElementById("myCanvas");
    self.context = self.canvas.getContext("2d");
    self.key = false;
    self.randomDirection = false;

    self.startGame = function() {
        setInterval(self.updateGameArea, 1);
        setInterval(enemyTank.getRandomDirection, 1000);
        window.addEventListener('keydown', function (e) {
            self.key = e.keyCode;
        });
        window.addEventListener('keyup', function (e) {
            self.key = false;
        });
    }

    self.updateGameArea = function() {
        self.clear();
        if (self.key == 37) {
            tank.moveLeft();
        }
        if (self.key == 38) {
            tank.moveUp();
        }
        if (self.key == 39) {
            tank.moveRight();
        }
        if (self.key == 40) {
            tank.moveDown();
        }
        if(self.key == 32) {
            tank.bullets.push(new Bullet(tank.angle, tank.x, tank.y, tank.width, tank.height));
            self.key = false;
        }
        tank.drawTank();
        enemyTank.drawRandomly();        
        for (i = 0; i < tank.bullets.length; i++) {
            tank.bullets[i].drawBullet();
        }
    }

    self.drawRotatedImage = function(image, x, y, angle, width, height) { 
        TO_RADIANS = Math.PI/180; 
        myGame.context.save(); 
        myGame.context.translate(x, y);
        myGame.context.rotate(angle * TO_RADIANS);
        myGame.context.drawImage(image, -(width/2), -(height/2), width, height);
        myGame.context.restore(); 
    }

    self.clear = function() {
        self.context.clearRect(0, 0, self.canvas.width, self.canvas.height);
    }

}

function Tank(x, y, width, height, src) {
    var self = this;
    self.x = x;
    self.y = y;
    self.width = width;
    self.height = height;
    self.img = new Image();
    self.img.src = src;
    self.bullets = [];
    self.angle = 0;
    self.randomMovement = self.moveLeft;

    self.moveRight = function() {
        self.angle = 90;
        if(self.canMove()) {
            self.x++;
        }
    }

    self.moveLeft = function() {
        self.angle = -90;
        if (self.canMove()) {
            self.x--;
        }
    }

    self.moveUp = function() {
        self.angle = 0;
        if (self.canMove()) {
            self.y--;
        } 
    }

    self.moveDown = function() {
        self.angle = 180;
        if (self.canMove()) {
            self.y++;
        } 
    }

    self.checkBoundaries = function() {
         
        if (self.x > self.width/2 && 
            self.x < myGame.canvas.width-self.width/2 && 
            self.y > self.height/2 && 
            self.y < myGame.canvas.height-self.height/2
            ) {
                return true;
            }

        if (self.x <= self.width/2) {
            self.x+=5;
        }
        if (self.x >= myGame.canvas.width - self.width/2) {
            self.x-=5;
        }
        if (self.y <= self.height/2) {
            self.y+=5;
        }
        if (self.y >= myGame.canvas.height - self.height/2) {
            self.y-=5;
        }


        return false;
    }

    this.canMove = function() {
        if (self.x > self.width/2 &&
            self.x < myGame.canvas.width - self.width/2 &&
            self.y > self.height/2 &&
            self.y < myGame.canvas.height - self.height/2) {
            return true;
        } 
        if (self.x >= myGame.canvas.width - self.width/2) {
            self.x-=5;
        }
        if (self.x <= self.width/2) {
            self.x+=5;
        }
        if (self.y >= myGame.canvas.height - self.height/2) {
            self.y-=5;
        }
        if (self.y <= self.height/2) {
            self.y+=5;
        }
    }

    self.drawTank = function() {
        myGame.drawRotatedImage(self.img, self.x, self.y, self.angle, self.width, self.height);
    }

    self.getRandomDirection = function() {
        movements = [self.moveRight, self.moveLeft, self.moveDown, self.moveUp];
        self.randomMovement = movements[Math.floor(Math.random() * movements.length)];
    }

    self.drawRandomly = function() {  
        self.randomMovement();
        myGame.drawRotatedImage(self.img, self.x, self.y, self.angle, self.width, self.height);
    }
}

function Bullet(direction, x, y, tank_width, tank_height) {
    var self = this;
    self.img = new Image();
    self.img.src = "tank_bullet.png";
    self.direction = direction;
    self.tank_width = tank_width;
    self.tank_height = tank_height;
    self.width = 50;
    self.height = 20;
    self.angle = 0;
    self.current_movement = self.moveDown;
    
    if (self.direction == 0) {
        self.x = x;
        self.y = y - self.tank_height/2 - 15;
    } else if (self.direction == 90) {
        self.x = x + self.tank_width/2 + 15;
        self.y = y;
    } else if (self.direction == -90) {
        self.x = x - self.tank_width/2 - 15;
        self.y = y;
    } else if (self.direction == 180) {
        self.x =x;
        self.y = y + self.tank_height/2 + 15;
    }

    self.moveUp = function() {
        self.y-=3;
        self.angle=-90;
    }
    self.moveLeft = function() {
        self.x-=3;
        self.angle=180;
    }
    self.moveRight = function() {
        self.x+=3;
        self.angle=0;
    }
    self.moveDown = function() {
        self.y+=3;
        self.angle=90;
    }

    self.drawBullet = function() {
        if (self.direction == 0) {
            self.moveUp();
        }        
        if (self.direction == 90) {
            self.moveRight();
        }
        if (self.direction == -90) {
            self.moveLeft();
        }
        if (self.direction == 180) {
            self.moveDown();
        }
        myGame.drawRotatedImage(self.img, self.x, self.y, self.angle, self.width, self.height);
    }
}

Answer 1

искать их пересечение

function isCollide(a, b) {
    return !(
        ((a.y + a.height) < (b.y)) ||
        (a.y > (b.y + b.height)) ||
        ((a.x + a.width) < b.x) ||
        (a.x > (b.x + b.width))
    );
}

вот пример, перетягивай один квадратик на другой и смотри результат