Untitled

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let lastTime = 0;
let inter = 0;
let wait = 10;

function isCollision(rect1, rect2) {
    return (
        rect1.x < rect2.x + rect2.width &&
        rect1.x + rect1.width > rect2.x &&
        rect1.y < rect2.y + rect2.height &&
        rect1.y + rect1.height > rect2.y
    );
}

class Enemy {
    constructor(x, y, size) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.speed = Math.random() * 1 + 1;
        this.image = new Image();
        this.image.src = 'zombar.png';
        this.stopMOVE = false;
        this.angle = 0;

    }
    update(targetX, targetY) {
        let disY = this.y - targetY;
        let disX = this.x - targetX;

        let ratioX = Math.abs(disX) / Math.abs(disY);
        let ratioY = Math.abs(disY) / Math.abs(disX);

        let flargrect = {x: (canvas.width / 2) - 100, y: (canvas.height / 2) - 100, width: 200, height: 200};
        
        let timx = this.x - 20;
        let timy = this.y - 20;

        const point = {x: this.x, y: this.y};
        const offset = {
            x: (canvas.width / 2) - 100,
            y: (canvas.height / 2) -100
        };

        

        let rect1 = {x: timx, y: timy, width: (this.size / 5), height: (this.size / 5)};
        
        if (isCollision(rect1, flargrect)) {     
            this.stopMOVE = true;
        }

        if (this.stopMOVE == false) {
            if (disX > 0) {
                this.x -= this.speed * ratioX;
            } else {
                this.x += this.speed * ratioX;
            }
            
            if (disY > 0) {
                this.y -= this.speed * ratioY;
            } else {
                this.y += this.speed * ratioY;
            }
        }  
        
        
        
        
    }

    draw() {
        let flargrect = {x: (canvas.width / 2) - 100, y: (canvas.height / 2) - 100, width: 200, height: 200};
        ctx.save();
        ctx.translate(???)
        ctx.rotate(???)
        ctx.drawImage(this.image,this.x, this.y, this.size, this.size);
        ctx.restore();
        
    }
}


let enemies = [];
enemies.push(new Enemy(0, 0, 100))
enemies.push(new Enemy(50, 100, 100))
enemies.push(new Enemy(300, 500, 100))
enemies.push(new Enemy(1000, 1000, 100))
enemies.push(new Enemy(900, 800, 100))

let flarg = new Image();
flarg.src = 'flarg.png'


function animate(timestamp) {
    let deltaTime = timestamp - lastTime;
    lastTime = timestamp
    inter += (deltaTime / 10)
    
    
    if (inter > wait) {
        inter = 0;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    enemies.forEach(object => {
        if (!object.stopMOVE) {
            object.update(canvas.width / 2, canvas.height / 2)
        }
    });
    enemies.forEach(object => object.draw());

    enemies = enemies.filter(object => !object.stopMOVE);

    ctx.drawImage(flarg, canvas.width/2 - 100, canvas.height/2 - 100, 200, 200)

    requestAnimationFrame(animate);
}

animate(0);