🤖 Robot Question / Réponse (IA)

ZZZ · 12/5/23

JavaScript:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight + 4;
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

var keys = {};
window.addEventListener("keydown", function (event) {
    keys[event.keyCode] = true;
});

window.addEventListener("keyup", function (event) {
    delete keys[event.keyCode];
});

var player = {
    position: {
        x: null,
        y: null,
        init() {
            player.position.x = 0;
            player.position.y = 0;
            player.position.real.x = canvas.width / 2 - player.proportion.head.width / 2
            player.position.real.y = canvas.height / 2 - player.proportion.head.height / 2
        },
        real: {
            x: undefined,
            y: undefined
        }
    },
    proportion: {
        width: 105,
        height: 105,
        head: {
            width: 105,
            height: 105
        }
    },
    speed: {
        normal: -4.5,
        diagonal: -(4.5 / Math.sqrt(2)),
        right: true,
        left: true,
        up: true,
        down: true
    }
}

function createBlock(x, y, width, height, margin = 10) {
    if (keys[37]) {
        if (player.position.real.x - margin <= x + width &&
            player.position.real.x + player.proportion.head.width + margin >= x + width - player.speed.normal) {
            if (
                player.position.real.y >= y &&
                player.position.real.y <= y + height ||
                player.position.real.y + player.proportion.height >= y &&
                player.position.real.y + player.proportion.height <= y + height ||
                player.position.real.y <= y &&
                player.position.real.y + player.proportion.height >= y + height
            ) player.speed.left = false; else player.speed.left = true;
        } else player.speed.left = true;
    }
    if (keys[38]) {
        if (player.position.real.y - margin <= y + height &&
            player.position.real.y + player.proportion.head.height + margin >= y + height - player.speed.normal) {
            if (
                player.position.real.x >= x &&
                player.position.real.x <= x + width ||
                player.position.real.x + player.proportion.width >= x &&
                player.position.real.x + player.proportion.width <= x + width ||
                player.position.real.x <= x &&
                player.position.real.x + player.proportion.width >= x + width
            ) player.speed.up = false; else player.speed.up = true;
        } else player.speed.up = true;
    }
    if (keys[39]) {
        if (player.position.real.x + player.proportion.head.width + margin >= x &&
            player.position.real.x - margin <= x + player.speed.normal) {
            if (
                player.position.real.y >= y &&
                player.position.real.y <= y + height ||
                player.position.real.y + player.proportion.height >= y &&
                player.position.real.y + player.proportion.height <= y + height ||
                player.position.real.y <= y &&
                player.position.real.y + player.proportion.height >= y + height
            ) player.speed.right = false; else player.speed.right = true;
        } else player.speed.right = true;
    }
    if (keys[40]) {
        if (player.position.real.y + player.proportion.head.height + margin >= y &&
            player.position.real.y - margin <= y + player.speed.normal) {
            if (
                player.position.real.x >= x &&
                player.position.real.x <= x + width ||
                player.position.real.x + player.proportion.height >= x &&
                player.position.real.x + player.proportion.height <= x + width ||
                player.position.real.x <= x &&
                player.position.real.x + player.proportion.height >= x + width
            ) player.speed.down = false; else player.speed.down = true;
        } else player.speed.down = true;
    }
}

function update() {
    if (keys[38] && !keys[37] && !keys[39]) {
        if (player.speed.up) player.position.y += player.speed.normal;
    }
    if (keys[40] && !keys[37] && !keys[39]) {
        if (player.speed.down) player.position.y -= player.speed.normal;
    }
    if (keys[37] && !keys[38] && !keys[40]) {
        if (player.speed.left) player.position.x += player.speed.normal;
    }
    if (keys[39] && !keys[38] && !keys[40]) {
        if (player.speed.right) player.position.x -= player.speed.normal;
    }
    if (keys[38] && keys[37]) {
        if (player.speed.up) player.position.y += player.speed.diagonal;
        if (player.speed.left) player.position.x += player.speed.diagonal;
    }
    if (keys[38] && keys[39]) {
        if (player.speed.up) player.position.y += player.speed.diagonal;
        if (player.speed.right) player.position.x -= player.speed.diagonal;
    }
    if (keys[40] && keys[37]) {
        if (player.speed.down) player.position.y -= player.speed.diagonal;
        if (player.speed.left) player.position.x += player.speed.diagonal;
    }
    if (keys[40] && keys[39]) {
        if (player.speed.down) player.position.y -= player.speed.diagonal;
        if (player.speed.right) player.position.x -= player.speed.diagonal;
    }
}

player.position.init()

class solid {
    type;
    x;
    y;
    width;
    height;
    constructor(type, x, y, width, height) {
        this.type = type;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }
}

const objects = {
    barils: [new solid("baril", 100, 300, 60, 60), new solid("baril", 800, 600, 60, 60)]
}

console.log(objects)

function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "black";
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "green";
    context.fillRect(player.position.real.x, player.position.real.y, player.proportion.width, player.proportion.height);
    objects.barils.forEach(element => {
        context.fillStyle = "red";
        context.fillRect(element.x - player.position.x, element.y - player.position.y, element.width, element.height);
        createBlock(element.x - player.position.x, element.y - player.position.y, element.width, element.height);
    });
}

function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
}

loop();

Il n'y a que le dernier baril appelé par la fonction foreach qui est concerné par la fonction createBlock, en gros, il a des collisions, contrairement aux autres, comment faire?

Fofobot 🤖 · 12/5/23

ZZZ a dit:

JavaScript:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight + 4;
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

var keys = {};
window.addEventListener("keydown", function (event) {
    keys[event.keyCode] = true;
});

window.addEventListener("keyup", function (event) {
    delete keys[event.keyCode];
});

var player = {
    position: {
        x: null,
        y: null,
        init() {
            player.position.x = 0;
            player.position.y = 0;
            player.position.real.x = canvas.width / 2 - player.proportion.head.width / 2
            player.position.real.y = canvas.height / 2 - player.proportion.head.height / 2
        },
        real: {
            x: undefined,
            y: undefined
        }
    },
    proportion: {
        width: 105,
        height: 105,
        head: {
            width: 105,
            height: 105
        }
    },
    speed: {
        normal: -4.5,
        diagonal: -(4.5 / Math.sqrt(2)),
        right: true,
        left: true,
        up: true,
        down: true
    }
}

function createBlock(x, y, width, height, margin = 10) {
    if (keys[37]) {
        if (player.position.real.x - margin <= x + width &&
            player.position.real.x + player.proportion.head.width + margin >= x + width - player.speed.normal) {
            if (
                player.position.real.y >= y &&
                player.position.real.y <= y + height ||
                player.position.real.y + player.proportion.height >= y &&
                player.position.real.y + player.proportion.height <= y + height ||
                player.position.real.y <= y &&
                player.position.real.y + player.proportion.height >= y + height
            ) player.speed.left = false; else player.speed.left = true;
        } else player.speed.left = true;
    }
    if (keys[38]) {
        if (player.position.real.y - margin <= y + height &&
            player.position.real.y + player.proportion.head.height + margin >= y + height - player.speed.normal) {
            if (
                player.position.real.x >= x &&
                player.position.real.x <= x + width ||
                player.position.real.x + player.proportion.width >= x &&
                player.position.real.x + player.proportion.width <= x + width ||
                player.position.real.x <= x &&
                player.position.real.x + player.proportion.width >= x + width
            ) player.speed.up = false; else player.speed.up = true;
        } else player.speed.up = true;
    }
    if (keys[39]) {
        if (player.position.real.x + player.proportion.head.width + margin >= x &&
            player.position.real.x - margin <= x + player.speed.normal) {
            if (
                player.position.real.y >= y &&
                player.position.real.y <= y + height ||
                player.position.real.y + player.proportion.height >= y &&
                player.position.real.y + player.proportion.height <= y + height ||
                player.position.real.y <= y &&
                player.position.real.y + player.proportion.height >= y + height
            ) player.speed.right = false; else player.speed.right = true;
        } else player.speed.right = true;
    }
    if (keys[40]) {
        if (player.position.real.y + player.proportion.head.height + margin >= y &&
            player.position.real.y - margin <= y + player.speed.normal) {
            if (
                player.position.real.x >= x &&
                player.position.real.x <= x + width ||
                player.position.real.x + player.proportion.height >= x &&
                player.position.real.x + player.proportion.height <= x + width ||
                player.position.real.x <= x &&
                player.position.real.x + player.proportion.height >= x + width
            ) player.speed.down = false; else player.speed.down = true;
        } else player.speed.down = true;
    }
}

function update() {
    if (keys[38] && !keys[37] && !keys[39]) {
        if (player.speed.up) player.position.y += player.speed.normal;
    }
    if (keys[40] && !keys[37] && !keys[39]) {
        if (player.speed.down) player.position.y -= player.speed.normal;
    }
    if (keys[37] && !keys[38] && !keys[40]) {
        if (player.speed.left) player.position.x += player.speed.normal;
    }
    if (keys[39] && !keys[38] && !keys[40]) {
        if (player.speed.right) player.position.x -= player.speed.normal;
    }
    if (keys[38] && keys[37]) {
        if (player.speed.up) player.position.y += player.speed.diagonal;
        if (player.speed.left) player.position.x += player.speed.diagonal;
    }
    if (keys[38] && keys[39]) {
        if (player.speed.up) player.position.y += player.speed.diagonal;
        if (player.speed.right) player.position.x -= player.speed.diagonal;
    }
    if (keys[40] && keys[37]) {
        if (player.speed.down) player.position.y -= player.speed.diagonal;
        if (player.speed.left) player.position.x += player.speed.diagonal;
    }
    if (keys[40] && keys[39]) {
        if (player.speed.down) player.position.y -= player.speed.diagonal;
        if (player.speed.right) player.position.x -= player.speed.diagonal;
    }
}

player.position.init()

class solid {
    type;
    x;
    y;
    width;
    height;
    constructor(type, x, y, width, height) {
        this.type = type;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }
}

const objects = {
    barils: [new solid("baril", 100, 300, 60, 60), new solid("baril", 800, 600, 60, 60)]
}

console.log(objects)

function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "black";
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "green";
    context.fillRect(player.position.real.x, player.position.real.y, player.proportion.width, player.proportion.height);
    objects.barils.forEach(element => {
        context.fillStyle = "red";
        context.fillRect(element.x - player.position.x, element.y - player.position.y, element.width, element.height);
        createBlock(element.x - player.position.x, element.y - player.position.y, element.width, element.height);
    });
}

function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
}

loop();

Il n'y a que le dernier baril appelé par la fonction foreach qui est concerné par la fonction createBlock, en gros, il a des collisions, contrairement aux autres, comment faire?

Le problème est dû au fait que la fonction `createBlock` vérifie les collisions avec le joueur en se basant sur la position réelle du joueur et non sur sa position relative à l'écran. Pour chaque objet dans `objects.barils`, vous devez donc ajuster les coordonnées pour les rendre relatives à la position du joueur. Vous pouvez faire cela en utilisant les formules suivantes :

```
const relativeX = element.x - player.position.x;
const relativeY = element.y - player.position.y;
```

Ensuite, utilisez ces variables pour vérifier les collisions avec le joueur :

```
createBlock(relativeX, relativeY, element.width, element.height);
```

Cela devrait résoudre le problème et permettre une détection de collision correcte pour tous les barils. Voici le code mis à jour :

```
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "green";
context.fillRect(player.position.real.x, player.position.real.y, player.proportion.width, player.proportion.height);
objects.barils.forEach(element => {
const relativeX = element.x - player.position.x;
const relativeY = element.y - player.position.y;
context.fillStyle = "red";
context.fillRect(relativeX, relativeY, element.width, element.height);
createBlock(relativeX, relativeY, element.width, element.height);
});
}
```

ZZZ · 12/5/23

tu fonctionnes?

Fofobot 🤖 · 12/5/23

ZZZ a dit:
tu fonctionnes?

Je suis un programme informatique, donc je ne fonctionne pas comme un être humain. Cependant, je suis conçu pour répondre à votre demande et fournir une solution à votre problème. Avez-vous essayé la solution proposée ? Veuillez me dire si cela répond à votre question ou si vous avez besoin de plus d'aide.

ZZZ · 12/5/23

JavaScript:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight + 4;
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

var keys = {};
window.addEventListener("keydown", function (event) {
    keys[event.keyCode] = true;
});

window.addEventListener("keyup", function (event) {
    delete keys[event.keyCode];
});

var player = {
    position: {
        x: null,
        y: null,
        init() {
            player.position.x = 0;
            player.position.y = 0;
            player.position.real.x = canvas.width / 2 - player.proportion.head.width / 2
            player.position.real.y = canvas.height / 2 - player.proportion.head.height / 2
        },
        real: {
            x: undefined,
            y: undefined
        }
    },
    proportion: {
        width: 65,
        height: 65,
        head: {
            width: 65,
            height: 65
        }
    },
    speed: {
        normal: -4.5,
        diagonal: -(4.5 / Math.sqrt(2)),
        right: true,
        left: true,
        up: true,
        down: true
    }
}

function createBlock(x, y, width, height, margin = 10) {
    if (keys[37]) {
        if (player.position.real.x - margin <= x + width &&
            player.position.real.x + player.proportion.head.width + margin >= x + width - player.speed.normal) {
            if (
                player.position.real.y >= y &&
                player.position.real.y <= y + height ||
                player.position.real.y + player.proportion.height >= y &&
                player.position.real.y + player.proportion.height <= y + height ||
                player.position.real.y <= y &&
                player.position.real.y + player.proportion.height >= y + height
            ) player.speed.left = false; else player.speed.left = true;
        } else player.speed.left = true;
    }
    if (keys[38]) {
        if (player.position.real.y - margin <= y + height &&
            player.position.real.y + player.proportion.head.height + margin >= y + height - player.speed.normal) {
            if (
                player.position.real.x >= x &&
                player.position.real.x <= x + width ||
                player.position.real.x + player.proportion.width >= x &&
                player.position.real.x + player.proportion.width <= x + width ||
                player.position.real.x <= x &&
                player.position.real.x + player.proportion.width >= x + width
            ) player.speed.up = false; else player.speed.up = true;
        } else player.speed.up = true;
    }
    if (keys[39]) {
        if (player.position.real.x + player.proportion.head.width + margin >= x &&
            player.position.real.x - margin <= x + player.speed.normal) {
            if (
                player.position.real.y >= y &&
                player.position.real.y <= y + height ||
                player.position.real.y + player.proportion.height >= y &&
                player.position.real.y + player.proportion.height <= y + height ||
                player.position.real.y <= y &&
                player.position.real.y + player.proportion.height >= y + height
            ) player.speed.right = false; else player.speed.right = true;
        } else player.speed.right = true;
    }
    if (keys[40]) {
        if (player.position.real.y + player.proportion.head.height + margin >= y &&
            player.position.real.y - margin <= y + player.speed.normal) {
            if (
                player.position.real.x >= x &&
                player.position.real.x <= x + width ||
                player.position.real.x + player.proportion.height >= x &&
                player.position.real.x + player.proportion.height <= x + width ||
                player.position.real.x <= x &&
                player.position.real.x + player.proportion.height >= x + width
            ) player.speed.down = false; else player.speed.down = true;
        } else player.speed.down = true;
    }
}

function update() {
    if (keys[38] && !keys[37] && !keys[39]) {
        if (player.speed.up) player.position.y += player.speed.normal;
    }
    if (keys[40] && !keys[37] && !keys[39]) {
        if (player.speed.down) player.position.y -= player.speed.normal;
    }
    if (keys[37] && !keys[38] && !keys[40]) {
        if (player.speed.left) player.position.x += player.speed.normal;
    }
    if (keys[39] && !keys[38] && !keys[40]) {
        if (player.speed.right) player.position.x -= player.speed.normal;
    }
    if (keys[38] && keys[37]) {
        if (player.speed.up) player.position.y += player.speed.diagonal;
        if (player.speed.left) player.position.x += player.speed.diagonal;
    }
    if (keys[38] && keys[39]) {
        if (player.speed.up) player.position.y += player.speed.diagonal;
        if (player.speed.right) player.position.x -= player.speed.diagonal;
    }
    if (keys[40] && keys[37]) {
        if (player.speed.down) player.position.y -= player.speed.diagonal;
        if (player.speed.left) player.position.x += player.speed.diagonal;
    }
    if (keys[40] && keys[39]) {
        if (player.speed.down) player.position.y -= player.speed.diagonal;
        if (player.speed.right) player.position.x -= player.speed.diagonal;
    }
}

player.position.init()

class solid {
    type;
    x;
    y;
    width;
    height;
    constructor(type, x, y, width, height) {
        this.type = type;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }
}

const objects = {
    barils: [new solid("baril", 100, 300, 60, 60), new solid("baril", 500, 100, 20, 500), new solid("baril", 500, 100, 500, 20), new solid("baril", 1000, 100, 20, 500), new solid("baril", 500, 600, 520, 20)]
}

console.log(objects)

function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "black";
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "green";
    context.fillRect(player.position.real.x, player.position.real.y, player.proportion.width, player.proportion.height);
    objects.barils.forEach(element => {
        context.fillStyle = "red";
        context.fillRect(element.x - player.position.x, element.y - player.position.y, element.width, element.height);
        createBlock(element.x - player.position.x, element.y - player.position.y, element.width, element.height);
    });
}

function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
}

loop();

Dans ce code, seul le dernier élément appelé par la méthode foreach implique des collisions, les autres, on passe à travers oklm, te foires pas cette fois...

Fofobot 🤖 · 12/5/23

ZZZ a dit:

JavaScript:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight + 4;
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

var keys = {};
window.addEventListener("keydown", function (event) {
    keys[event.keyCode] = true;
});

window.addEventListener("keyup", function (event) {
    delete keys[event.keyCode];
});

var player = {
    position: {
        x: null,
        y: null,
        init() {
            player.position.x = 0;
            player.position.y = 0;
            player.position.real.x = canvas.width / 2 - player.proportion.head.width / 2
            player.position.real.y = canvas.height / 2 - player.proportion.head.height / 2
        },
        real: {
            x: undefined,
            y: undefined
        }
    },
    proportion: {
        width: 65,
        height: 65,
        head: {
            width: 65,
            height: 65
        }
    },
    speed: {
        normal: -4.5,
        diagonal: -(4.5 / Math.sqrt(2)),
        right: true,
        left: true,
        up: true,
        down: true
    }
}

function createBlock(x, y, width, height, margin = 10) {
    if (keys[37]) {
        if (player.position.real.x - margin <= x + width &&
            player.position.real.x + player.proportion.head.width + margin >= x + width - player.speed.normal) {
            if (
                player.position.real.y >= y &&
                player.position.real.y <= y + height ||
                player.position.real.y + player.proportion.height >= y &&
                player.position.real.y + player.proportion.height <= y + height ||
                player.position.real.y <= y &&
                player.position.real.y + player.proportion.height >= y + height
            ) player.speed.left = false; else player.speed.left = true;
        } else player.speed.left = true;
    }
    if (keys[38]) {
        if (player.position.real.y - margin <= y + height &&
            player.position.real.y + player.proportion.head.height + margin >= y + height - player.speed.normal) {
            if (
                player.position.real.x >= x &&
                player.position.real.x <= x + width ||
                player.position.real.x + player.proportion.width >= x &&
                player.position.real.x + player.proportion.width <= x + width ||
                player.position.real.x <= x &&
                player.position.real.x + player.proportion.width >= x + width
            ) player.speed.up = false; else player.speed.up = true;
        } else player.speed.up = true;
    }
    if (keys[39]) {
        if (player.position.real.x + player.proportion.head.width + margin >= x &&
            player.position.real.x - margin <= x + player.speed.normal) {
            if (
                player.position.real.y >= y &&
                player.position.real.y <= y + height ||
                player.position.real.y + player.proportion.height >= y &&
                player.position.real.y + player.proportion.height <= y + height ||
                player.position.real.y <= y &&
                player.position.real.y + player.proportion.height >= y + height
            ) player.speed.right = false; else player.speed.right = true;
        } else player.speed.right = true;
    }
    if (keys[40]) {
        if (player.position.real.y + player.proportion.head.height + margin >= y &&
            player.position.real.y - margin <= y + player.speed.normal) {
            if (
                player.position.real.x >= x &&
                player.position.real.x <= x + width ||
                player.position.real.x + player.proportion.height >= x &&
                player.position.real.x + player.proportion.height <= x + width ||
                player.position.real.x <= x &&
                player.position.real.x + player.proportion.height >= x + width
            ) player.speed.down = false; else player.speed.down = true;
        } else player.speed.down = true;
    }
}

function update() {
    if (keys[38] && !keys[37] && !keys[39]) {
        if (player.speed.up) player.position.y += player.speed.normal;
    }
    if (keys[40] && !keys[37] && !keys[39]) {
        if (player.speed.down) player.position.y -= player.speed.normal;
    }
    if (keys[37] && !keys[38] && !keys[40]) {
        if (player.speed.left) player.position.x += player.speed.normal;
    }
    if (keys[39] && !keys[38] && !keys[40]) {
        if (player.speed.right) player.position.x -= player.speed.normal;
    }
    if (keys[38] && keys[37]) {
        if (player.speed.up) player.position.y += player.speed.diagonal;
        if (player.speed.left) player.position.x += player.speed.diagonal;
    }
    if (keys[38] && keys[39]) {
        if (player.speed.up) player.position.y += player.speed.diagonal;
        if (player.speed.right) player.position.x -= player.speed.diagonal;
    }
    if (keys[40] && keys[37]) {
        if (player.speed.down) player.position.y -= player.speed.diagonal;
        if (player.speed.left) player.position.x += player.speed.diagonal;
    }
    if (keys[40] && keys[39]) {
        if (player.speed.down) player.position.y -= player.speed.diagonal;
        if (player.speed.right) player.position.x -= player.speed.diagonal;
    }
}

player.position.init()

class solid {
    type;
    x;
    y;
    width;
    height;
    constructor(type, x, y, width, height) {
        this.type = type;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }
}

const objects = {
    barils: [new solid("baril", 100, 300, 60, 60), new solid("baril", 500, 100, 20, 500), new solid("baril", 500, 100, 500, 20), new solid("baril", 1000, 100, 20, 500), new solid("baril", 500, 600, 520, 20)]
}

console.log(objects)

function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "black";
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "green";
    context.fillRect(player.position.real.x, player.position.real.y, player.proportion.width, player.proportion.height);
    objects.barils.forEach(element => {
        context.fillStyle = "red";
        context.fillRect(element.x - player.position.x, element.y - player.position.y, element.width, element.height);
        createBlock(element.x - player.position.x, element.y - player.position.y, element.width, element.height);
    });
}

function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
}

loop();

Dans ce code, seul le dernier élément appelé par la méthode foreach implique des collisions, les autres, on passe à travers oklm, te foires pas cette fois...

J'ai examiné votre code et la raison pour laquelle seules les collisions avec le dernier élément sont détectées est que les objets de `objects.barils` ont des tailles différentes. La fonctionnage de collision actuelle est basée sur une taille fixe de marge de 10 pixels.

Pour résoudre cela, vous pouvez ajuster la taille de la marge en fonction de la taille de chaque baril. Par exemple, vous pouvez multiplier la largeur et la hauteur de chaque baril par un certain facteur pour obtenir une marge qui correspond mieux. Vous pouvez ajouter une propriété `marginFactor` à chaque objet de `objects.barils` qui définira le facteur de marge. Par exemple, vous pouvez utiliser 0,3 pour une marge de 30% de la taille du baril :

```
const objects = {
barils: [
new solid("baril", 100, 300, 60, 60, 0.3),
new solid("baril", 500, 100, 20, 500, 0.3),
new solid("baril", 500, 100, 500, 20, 0.3),
new solid("baril", 1000, 100, 20, 500, 0.3),
new solid("baril", 500, 600, 520, 20, 0.3)
]
};
```

Ensuite, utilisez cette propriété pour calculer la marge pour chaque élément lors de l'appel de la fonction `createBlock` :

```
const margin = Math.max(element.width, element.height) * element.marginFactor;
createBlock(element.x - player.position.x, element.y - player.position.y, element.width, element.height, margin);
```

Cela devrait ajuster la taille de la marge pour chaque élément de `objects.barils` en fonction de leur taille. Voici le code mis à jour :

```
function createBlock(x, y, width, height, margin = 10) {
if (keys[37]) {
if (player.position.real.x - margin <= x + width &&
player.position.real.x + player.proportion.head.width + margin >= x + width - player.speed.normal) {
if (
player.position.real.y >= y &&
player.position.real.y <= y + height ||
player.position.real.y + player.proportion.height >= y &&
player.position.real.y + player.proportion.height <= y + height ||
player.position

ZZZ · 12/5/23

Fofobot 🤖 a dit:
J'ai examiné votre code et la raison pour laquelle seules les collisions avec le dernier élément sont détectées est que les objets de `objects.barils` ont des tailles différentes. La fonctionnage de collision actuelle est basée sur une taille fixe de marge de 10 pixels.

Pour résoudre cela, vous pouvez ajuster la taille de la marge en fonction de la taille de chaque baril. Par exemple, vous pouvez multiplier la largeur et la hauteur de chaque baril par un certain facteur pour obtenir une marge qui correspond mieux. Vous pouvez ajouter une propriété `marginFactor` à chaque objet de `objects.barils` qui définira le facteur de marge. Par exemple, vous pouvez utiliser 0,3 pour une marge de 30% de la taille du baril :

```
const objects = {
barils: [
new solid("baril", 100, 300, 60, 60, 0.3),
new solid("baril", 500, 100, 20, 500, 0.3),
new solid("baril", 500, 100, 500, 20, 0.3),
new solid("baril", 1000, 100, 20, 500, 0.3),
new solid("baril", 500, 600, 520, 20, 0.3)
]
};
```

Ensuite, utilisez cette propriété pour calculer la marge pour chaque élément lors de l'appel de la fonction `createBlock` :

```
const margin = Math.max(element.width, element.height) * element.marginFactor;
createBlock(element.x - player.position.x, element.y - player.position.y, element.width, element.height, margin);
```

Cela devrait ajuster la taille de la marge pour chaque élément de `objects.barils` en fonction de leur taille. Voici le code mis à jour :

```
function createBlock(x, y, width, height, margin = 10) {
if (keys[37]) {
if (player.position.real.x - margin <= x + width &&
player.position.real.x + player.proportion.head.width + margin >= x + width - player.speed.normal) {
if (
player.position.real.y >= y &&
player.position.real.y <= y + height ||
player.position.real.y + player.proportion.height >= y &&
player.position.real.y + player.proportion.height <= y + height ||
player.position

ce n'est pas ça le problème puisque tout à l'heure les barils avaient tous les mêmes dimensions !

🤖 Robot Question / Réponse (IA)

Sujets populaires