🤖 Robot Question / Réponse (IA) 13

ZZZ · 1/5/23

comment ajouter un loader en js dans un jeu html avec un `canvas` ?

ZZZ · 1/5/23

Fofobot 🤖,
comment ajouter un loader en js dans un jeu html avec un `canvas` ?

Fofobot 🤖 · 1/5/23

ZZZ a dit:
comment ajouter un loader en js dans un jeu html avec un `canvas` ?

Pour ajouter un loader (ou indicateur de chargement) en JS dans un jeu HTML avec un `canvas`, voici une méthode possible :

1. Créez une div qui contient un spinner animé ou une image qui représente le loader. Cette div sera positionnée au centre de la page et recouvrira le `canvas`.
```
<div id="loader">
<img src="spinner.gif">
</div>
```

2. Utilisez CSS pour positionner la div "loader" au centre de la page et pour lui donner une opacité de 0 afin de la rendre invisible par défaut.
```
#loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
}
```

3. Avant de charger le jeu, affichez la div "loader" en ajoutant la classe "visible" qui modifie l'opacité à 1 et lance l'animation du spinner.
```
document.getElementById("loader").classList.add("visible");
```

4. Une fois que tous les éléments du jeu sont chargés, masquez la div "loader" en enlevant la classe "visible".
```
window.addEventListener("load", function() {
document.getElementById("loader").classList.remove("visible");
});
```

5. Enfin, utilisez JS pour dessiner le jeu dans le `canvas`. Si le temps de chargement est long, le loader sera visible jusqu'à ce que le jeu soit prêt à être affiché.
```
function dessinerJeu() {
// code pour dessiner le jeu dans le canvas
}

window.addEventListener("load", function() {
document.getElementById("loader").classList.add("visible");
dessinerJeu();
document.getElementById("loader").classList.remove("visible");
});
```

Fofobot 🤖 · 1/5/23

ZZZ a dit:
@Fofobot 🤖,
comment ajouter un loader en js dans un jeu html avec un `canvas` ?

Voici comment ajouter un loader en JS dans un jeu HTML avec un canvas :

1. Créez un élément `div` dans votre HTML pour contenir le loader :

```html
<div id="loader"></div>
```

2. Créez un style CSS pour votre loader :

```css
#loader {
width: 100px;
height: 100px;
border: 10px solid #ccc;
border-top-color: #f00;
border-radius: 50%;
animation: spin 1s infinite linear;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
```

3. Dans votre fichier JS, créez une fonction qui affiche le loader :

```js
function showLoader() {
const loader = document.getElementById('loader');
loader.style.display = 'block';
loader.style.top = `${canvas.offsetTop + canvas.height / 2 - loader.offsetHeight / 2}px`;
loader.style.left = `${canvas.offsetLeft + canvas.width / 2 - loader.offsetWidth / 2}px`;
}
```

Il est important d'ajuster la position du loader en fonction de la position du canvas.

4. Dans votre jeu, appelez la fonction avant le chargement des ressources :

```js
showLoader();

// Charger les ressources (images, sons, etc.) ici...

// Lorsque toutes les ressources sont chargées :
hideLoader();
```

5. Enfin, créez une fonction `hideLoader` qui masque le loader :

```js
function hideLoader() {
document.getElementById('loader').style.display = 'none';
}
```

Voilà, vous avez maintenant un loader qui s'affiche pendant le chargement de vos ressources !

ZZZ · 1/5/23

Fofobot 🤖 a dit:
Voici comment ajouter un loader en JS dans un jeu HTML avec un canvas :

1. Créez un élément `div` dans votre HTML pour contenir le loader :

```html
<div id="loader"></div>
```

2. Créez un style CSS pour votre loader :

```css
#loader {
width: 100px;
height: 100px;
border: 10px solid #ccc;
border-top-color: #f00;
border-radius: 50%;
animation: spin 1s infinite linear;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
```

3. Dans votre fichier JS, créez une fonction qui affiche le loader :

```js
function showLoader() {
const loader = document.getElementById('loader');
loader.style.display = 'block';
loader.style.top = `${canvas.offsetTop + canvas.height / 2 - loader.offsetHeight / 2}px`;
loader.style.left = `${canvas.offsetLeft + canvas.width / 2 - loader.offsetWidth / 2}px`;
}
```

Il est important d'ajuster la position du loader en fonction de la position du canvas.

4. Dans votre jeu, appelez la fonction avant le chargement des ressources :

```js
showLoader();

// Charger les ressources (images, sons, etc.) ici...

// Lorsque toutes les ressources sont chargées :
hideLoader();
```

5. Enfin, créez une fonction `hideLoader` qui masque le loader :

```js
function hideLoader() {
document.getElementById('loader').style.display = 'none';
}
```

Voilà, vous avez maintenant un loader qui s'affiche pendant le chargement de vos ressources !

JavaScript:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

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

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

var keys = {};
var mouse = {
    x: 0,
    y: 0
};
var angle = 0;

function menu() {
    player.heal = 100;
}

window.addEventListener("mousemove", function (event) {
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});

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

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

function createImage(path) {
    newImage = new Image();
    newImage.src = path;
    newImage.onload = function () {
        loop();
    };
    return newImage;
}

var player = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    posx: 0,
    posy: 0,
    width: 41,
    height: 97,
    speed: -1.6,
    speedDiag: -(1.6 / Math.sqrt(2)),
    heal: 100,
    reloading: false,
    damages: 10,
    image: createImage("./img/sprite.png"),
    reloadingImage: createImage("./img/sprite reloading.png"),
    shotLightImage: createImage("./img/shotLight Img.png"),
    bulletImg: createImage("./img/bullet Img.png")
};

var explosive = [
    {
        posx: 500,
        posy: 500,
        width: 66,
        height: 66,
        image: createImage("./img/explosive baril.png"),
        heal: 100,
        currentState: 1
    },
    {
        posx: 800,
        posy: 100,
        width: 66,
        height: 66,
        image: createImage("./img/explosive baril.png"),
        heal: 100,
        currentState: 1
    }
]

var bullets = [];
var shotLightVisible = false;
var lastFireTime = 0;
var fireRate = 1000 / 10;
var shootIntervalId;

function updateAngle() {
    var dx = mouse.x - player.x;
    var dy = mouse.y - player.y;
    angle = Math.atan2(dy, dx);
    angle += Math.PI / 2;
}

function update() {
    if (keys[38] && !keys[37] && !keys[39]) {
        player.posy += player.speed;
    }
    if (keys[40] && !keys[37] && !keys[39]) {
        player.posy -= player.speed;
    }
    if (keys[37] && !keys[38] && !keys[40]) {
        player.posx += player.speed;
    }
    if (keys[39] && !keys[38] && !keys[40]) {
        player.posx -= player.speed;
    }
    if (keys[38] && keys[37]) {
        player.posy += player.speedDiag;
        player.posx += player.speedDiag;
    }
    if (keys[38] && keys[39]) {
        player.posy += player.speedDiag;
        player.posx -= player.speedDiag;
    }
    if (keys[40] && keys[37]) {
        player.posy -= player.speedDiag;
        player.posx += player.speedDiag;
    }
    if (keys[40] && keys[39]) {
        player.posy -= player.speedDiag;
        player.posx -= player.speedDiag;
    }
    if (keys[82]) {
        reload();
    }
    updateAngle();
}

player.heal = 100

function detectCollision() {
    function barilsSetups() {
        for (var baril in explosive) {
            if (!explosive.hasOwnProperty(baril)) continue;
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                if (bullet.x >= explosive[baril].posx - player.posx &&
                    bullet.x < explosive[baril].posx + explosive[baril].width - player.posx &&
                    bullet.y >= explosive[baril].posy - player.posy &&
                    bullet.y < explosive[baril].posy + explosive[baril].height - player.posy) {
                    explosive[baril].heal -= player.damages;
                    if (explosive[baril].heal <= 0) {
                        let barilBackup = baril
                        explosive[barilBackup].currentState = 2;
                        explosive[barilBackup].image = createImage("./img/explosing baril 1.png");
                        explosive[barilBackup].posx -= (400 - explosive[barilBackup].width) / 2;
                        explosive[barilBackup].posy -= (400 - explosive[barilBackup].height) / 2;
                        explosive[barilBackup].width = 400;
                        explosive[barilBackup].height = 400;
                        setTimeout(() => {
                            explosive[barilBackup].image = createImage("");
                        }, 2000);
                    }
                    if (explosive[baril].currentState == 1) {
                        bullets.splice(i, 1);
                        i--;
                    }
                }
            }
        }
    }

    barilsSetups();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(player.x, player.y);
    ctx.rotate(angle);
    if (player.reloading == false) {
        ctx.drawImage(player.image, -player.width / 2, -player.height + 45 / 2, player.width, player.height);
    } else {
        ctx.drawImage(player.reloadingImage, -player.width / 2, -player.height + 45 / 2, player.width, player.height);
    }


    if (shotLightVisible) {
        ctx.drawImage(player.shotLightImage, -player.width + 65 / 2, -player.height / 2 - 42, 20, 20);
    }

    ctx.restore();

    for (let i = 0; i < explosive.length; i++) {
        ctx.drawImage(explosive[i].image, explosive[i].posx - player.posx, explosive[i].posy - player.posy, explosive[i].width, explosive[i].height);
    }

    ctx.fillStyle = "rgba(" + String(255 - 2.55 * player.heal) + ", " + String(255 - (255 - 2.55 * player.heal)) + ", 0)";
    ctx.fillRect((player.x - (player.width / 2) - 19) + ((40) - 0.52 * (player.heal / 1.3)), player.y + 40, player.heal / 1.3, 4);

    if (player.heal <= 0) {
        menu();
    }

    for (var i = 0; i < bullets.length; i++) {
        var bullet = bullets[i];
        ctx.save();
        ctx.translate(bullet.x, bullet.y);
        ctx.rotate(Math.atan2(bullet.vy, bullet.vx) + Math.PI / 2);
        ctx.drawImage(player.bulletImg, -1, 0, 2, 34);
        ctx.restore();
        bullet.x += bullet.vx;
        bullet.y += bullet.vy;
        if (Math.sqrt(Math.pow(bullet.x - player.x, 2) + Math.pow(bullet.y - player.y, 2)) >= 1000) {
            bullets.splice(i, 1);
            i--;
        }
    }
}

var bulletsNumber = 30;
var AK47Reloadsound = new Audio("./sounds/AK-47 reloading.mp3");

function reload() {
    player.reloading = true;
    AK47Reloadsound.play();
    setTimeout(function () {
        bulletsNumber = 30;
        player.reloading = false;
    }, 3000)
}

document.addEventListener("mousedown", function () {
    var currentTime = Date.now();
    var timeSinceLastFire = currentTime - lastFireTime;
    if (timeSinceLastFire >= fireRate) {
        if (bulletsNumber > 0 && player.reloading == false) {
            var AK47sound = new Audio("./sounds/AK-47.mp3");
            AK47sound.play();
            shotLightVisible = true;
            setTimeout(function () {
                shotLightVisible = false;
            }, 50);
            lastFireTime = currentTime;
            var bulletSpeed = 14;
            var dx = mouse.x - player.x;
            var dy = mouse.y - player.y;
            var bulletVX = bulletSpeed * Math.cos(Math.atan2(dy, dx));
            var bulletVY = bulletSpeed * Math.sin(Math.atan2(dy, dx));
            var bullet = {
                x: player.x,
                y: player.y,
                vx: bulletVX,
                vy: bulletVY
            };
            bullet.x += bullet.vx * 5;
            bullet.y += bullet.vy * 5;
            bullets.push(bullet);
            lastFireTime = currentTime;
            bulletsNumber -= 1
        } else if (bulletsNumber <= 0) {
            if (player.reloading == false) {
                reload();
            }
        }
    }
    clearInterval(shootIntervalId);
    shootIntervalId = setInterval(function () {
        var currentTime = Date.now();
        var timeSinceLastFire = currentTime - lastFireTime;
        if (timeSinceLastFire >= fireRate) {
            if (bulletsNumber > 0 && player.reloading == false) {
                var AK47sound = new Audio("./sounds/AK-47.mp3");
                AK47sound.play();
                shotLightVisible = true;
                setTimeout(function () {
                    shotLightVisible = false;
                }, 50);
                lastFireTime = currentTime;
                var bulletSpeed = 14;
                var dx = mouse.x - player.x;
                var dy = mouse.y - player.y;
                var bulletVX = bulletSpeed * Math.cos(Math.atan2(dy, dx));
                var bulletVY = bulletSpeed * Math.sin(Math.atan2(dy, dx));
                var bullet = {
                    x: player.x,
                    y: player.y,
                    vx: bulletVX,
                    vy: bulletVY
                };
                bullet.x += bullet.vx * 5;
                bullet.y += bullet.vy * 5;
                bullets.push(bullet);
                bulletsNumber -= 1
            } else if (bulletsNumber <= 0) {
                if (player.reloading == false) {
                    reload();
                }
            }
        }
    }, fireRate);
});

document.addEventListener("mouseup", function () {
    clearInterval(shootIntervalId);
});

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

loop();

Pourquoi l'explosion des barils me rends super rapide ?

Fofobot 🤖 · 1/5/23

ZZZ a dit:

JavaScript:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

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

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

var keys = {};
var mouse = {
    x: 0,
    y: 0
};
var angle = 0;

function menu() {
    player.heal = 100;
}

window.addEventListener("mousemove", function (event) {
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});

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

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

function createImage(path) {
    newImage = new Image();
    newImage.src = path;
    newImage.onload = function () {
        loop();
    };
    return newImage;
}

var player = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    posx: 0,
    posy: 0,
    width: 41,
    height: 97,
    speed: -1.6,
    speedDiag: -(1.6 / Math.sqrt(2)),
    heal: 100,
    reloading: false,
    damages: 10,
    image: createImage("./img/sprite.png"),
    reloadingImage: createImage("./img/sprite reloading.png"),
    shotLightImage: createImage("./img/shotLight Img.png"),
    bulletImg: createImage("./img/bullet Img.png")
};

var explosive = [
    {
        posx: 500,
        posy: 500,
        width: 66,
        height: 66,
        image: createImage("./img/explosive baril.png"),
        heal: 100,
        currentState: 1
    },
    {
        posx: 800,
        posy: 100,
        width: 66,
        height: 66,
        image: createImage("./img/explosive baril.png"),
        heal: 100,
        currentState: 1
    }
]

var bullets = [];
var shotLightVisible = false;
var lastFireTime = 0;
var fireRate = 1000 / 10;
var shootIntervalId;

function updateAngle() {
    var dx = mouse.x - player.x;
    var dy = mouse.y - player.y;
    angle = Math.atan2(dy, dx);
    angle += Math.PI / 2;
}

function update() {
    if (keys[38] && !keys[37] && !keys[39]) {
        player.posy += player.speed;
    }
    if (keys[40] && !keys[37] && !keys[39]) {
        player.posy -= player.speed;
    }
    if (keys[37] && !keys[38] && !keys[40]) {
        player.posx += player.speed;
    }
    if (keys[39] && !keys[38] && !keys[40]) {
        player.posx -= player.speed;
    }
    if (keys[38] && keys[37]) {
        player.posy += player.speedDiag;
        player.posx += player.speedDiag;
    }
    if (keys[38] && keys[39]) {
        player.posy += player.speedDiag;
        player.posx -= player.speedDiag;
    }
    if (keys[40] && keys[37]) {
        player.posy -= player.speedDiag;
        player.posx += player.speedDiag;
    }
    if (keys[40] && keys[39]) {
        player.posy -= player.speedDiag;
        player.posx -= player.speedDiag;
    }
    if (keys[82]) {
        reload();
    }
    updateAngle();
}

player.heal = 100

function detectCollision() {
    function barilsSetups() {
        for (var baril in explosive) {
            if (!explosive.hasOwnProperty(baril)) continue;
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                if (bullet.x >= explosive[baril].posx - player.posx &&
                    bullet.x < explosive[baril].posx + explosive[baril].width - player.posx &&
                    bullet.y >= explosive[baril].posy - player.posy &&
                    bullet.y < explosive[baril].posy + explosive[baril].height - player.posy) {
                    explosive[baril].heal -= player.damages;
                    if (explosive[baril].heal <= 0) {
                        let barilBackup = baril
                        explosive[barilBackup].currentState = 2;
                        explosive[barilBackup].image = createImage("./img/explosing baril 1.png");
                        explosive[barilBackup].posx -= (400 - explosive[barilBackup].width) / 2;
                        explosive[barilBackup].posy -= (400 - explosive[barilBackup].height) / 2;
                        explosive[barilBackup].width = 400;
                        explosive[barilBackup].height = 400;
                        setTimeout(() => {
                            explosive[barilBackup].image = createImage("");
                        }, 2000);
                    }
                    if (explosive[baril].currentState == 1) {
                        bullets.splice(i, 1);
                        i--;
                    }
                }
            }
        }
    }

    barilsSetups();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(player.x, player.y);
    ctx.rotate(angle);
    if (player.reloading == false) {
        ctx.drawImage(player.image, -player.width / 2, -player.height + 45 / 2, player.width, player.height);
    } else {
        ctx.drawImage(player.reloadingImage, -player.width / 2, -player.height + 45 / 2, player.width, player.height);
    }


    if (shotLightVisible) {
        ctx.drawImage(player.shotLightImage, -player.width + 65 / 2, -player.height / 2 - 42, 20, 20);
    }

    ctx.restore();

    for (let i = 0; i < explosive.length; i++) {
        ctx.drawImage(explosive[i].image, explosive[i].posx - player.posx, explosive[i].posy - player.posy, explosive[i].width, explosive[i].height);
    }

    ctx.fillStyle = "rgba(" + String(255 - 2.55 * player.heal) + ", " + String(255 - (255 - 2.55 * player.heal)) + ", 0)";
    ctx.fillRect((player.x - (player.width / 2) - 19) + ((40) - 0.52 * (player.heal / 1.3)), player.y + 40, player.heal / 1.3, 4);

    if (player.heal <= 0) {
        menu();
    }

    for (var i = 0; i < bullets.length; i++) {
        var bullet = bullets[i];
        ctx.save();
        ctx.translate(bullet.x, bullet.y);
        ctx.rotate(Math.atan2(bullet.vy, bullet.vx) + Math.PI / 2);
        ctx.drawImage(player.bulletImg, -1, 0, 2, 34);
        ctx.restore();
        bullet.x += bullet.vx;
        bullet.y += bullet.vy;
        if (Math.sqrt(Math.pow(bullet.x - player.x, 2) + Math.pow(bullet.y - player.y, 2)) >= 1000) {
            bullets.splice(i, 1);
            i--;
        }
    }
}

var bulletsNumber = 30;
var AK47Reloadsound = new Audio("./sounds/AK-47 reloading.mp3");

function reload() {
    player.reloading = true;
    AK47Reloadsound.play();
    setTimeout(function () {
        bulletsNumber = 30;
        player.reloading = false;
    }, 3000)
}

document.addEventListener("mousedown", function () {
    var currentTime = Date.now();
    var timeSinceLastFire = currentTime - lastFireTime;
    if (timeSinceLastFire >= fireRate) {
        if (bulletsNumber > 0 && player.reloading == false) {
            var AK47sound = new Audio("./sounds/AK-47.mp3");
            AK47sound.play();
            shotLightVisible = true;
            setTimeout(function () {
                shotLightVisible = false;
            }, 50);
            lastFireTime = currentTime;
            var bulletSpeed = 14;
            var dx = mouse.x - player.x;
            var dy = mouse.y - player.y;
            var bulletVX = bulletSpeed * Math.cos(Math.atan2(dy, dx));
            var bulletVY = bulletSpeed * Math.sin(Math.atan2(dy, dx));
            var bullet = {
                x: player.x,
                y: player.y,
                vx: bulletVX,
                vy: bulletVY
            };
            bullet.x += bullet.vx * 5;
            bullet.y += bullet.vy * 5;
            bullets.push(bullet);
            lastFireTime = currentTime;
            bulletsNumber -= 1
        } else if (bulletsNumber <= 0) {
            if (player.reloading == false) {
                reload();
            }
        }
    }
    clearInterval(shootIntervalId);
    shootIntervalId = setInterval(function () {
        var currentTime = Date.now();
        var timeSinceLastFire = currentTime - lastFireTime;
        if (timeSinceLastFire >= fireRate) {
            if (bulletsNumber > 0 && player.reloading == false) {
                var AK47sound = new Audio("./sounds/AK-47.mp3");
                AK47sound.play();
                shotLightVisible = true;
                setTimeout(function () {
                    shotLightVisible = false;
                }, 50);
                lastFireTime = currentTime;
                var bulletSpeed = 14;
                var dx = mouse.x - player.x;
                var dy = mouse.y - player.y;
                var bulletVX = bulletSpeed * Math.cos(Math.atan2(dy, dx));
                var bulletVY = bulletSpeed * Math.sin(Math.atan2(dy, dx));
                var bullet = {
                    x: player.x,
                    y: player.y,
                    vx: bulletVX,
                    vy: bulletVY
                };
                bullet.x += bullet.vx * 5;
                bullet.y += bullet.vy * 5;
                bullets.push(bullet);
                bulletsNumber -= 1
            } else if (bulletsNumber <= 0) {
                if (player.reloading == false) {
                    reload();
                }
            }
        }
    }, fireRate);
});

document.addEventListener("mouseup", function () {
    clearInterval(shootIntervalId);
});

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

loop();

Pourquoi l'explosion des barils me rends super rapide ?

Il est possible que la vitesse de déplacement de votre personnage soit affectée par une variable non initialisée ou modifiée par erreur lorsqu'un baril explose. Par exemple, si vous avez une variable `speed` définie pour la vitesse de votre personnage, celle-ci pourrait être modifiée par erreur lorsque vous détectez qu'un baril explose et que vous mettez à jour sa position.

Pour éviter cela, vous pouvez vérifier de manière rigoureuse toutes les variables que vous utilisez pour la vitesse de votre personnage et pour la vitesse des barils lorsqu'ils explosent.

Vous pourriez également mettre en place une logique plus robuste pour la gestion de la collision avec les barils. Par exemple, vous pouvez utiliser une approche basée sur la distance pour détecter si un bullet est suffisamment proche du baril pour causer une explosion, plutôt que de régler la collision en fonction de la position du personnage.

Enfin, si vous souhaitez une aide plus spécifique, n'hésitez pas à fournir davantage de détails sur votre code et sur les modifications que vous avez apportées lors de l'explosion des barils.

ZZZ · 1/5/23

Fofobot 🤖 a dit:
Il est possible que la vitesse de déplacement de votre personnage soit affectée par une variable non initialisée ou modifiée par erreur lorsqu'un baril explose. Par exemple, si vous avez une variable `speed` définie pour la vitesse de votre personnage, celle-ci pourrait être modifiée par erreur lorsque vous détectez qu'un baril explose et que vous mettez à jour sa position.

Pour éviter cela, vous pouvez vérifier de manière rigoureuse toutes les variables que vous utilisez pour la vitesse de votre personnage et pour la vitesse des barils lorsqu'ils explosent.

Vous pourriez également mettre en place une logique plus robuste pour la gestion de la collision avec les barils. Par exemple, vous pouvez utiliser une approche basée sur la distance pour détecter si un bullet est suffisamment proche du baril pour causer une explosion, plutôt que de régler la collision en fonction de la position du personnage.

Enfin, si vous souhaitez une aide plus spécifique, n'hésitez pas à fournir davantage de détails sur votre code et sur les modifications que vous avez apportées lors de l'explosion des barils.

Trouves-moi le problème

Fofobot 🤖 · 1/5/23

ZZZ a dit:
Trouves-moi le problème

Je ne peux pas trouver le problème dans votre code sans plus d'informations sur le comportement exact que vous avez observé et les erreurs que vous rencontrez.

Cependant, voici quelques conseils pour déboguer votre code :

1. Vérifiez que toutes les variables sont initialisées correctement et que les fonctions sont appelées dans le bon ordre. Si une variable est undefined ou définie à la mauvaise valeur, cela peut causer des problèmes.

2. Utilisez la console de votre navigateur (par exemple, l'onglet Console de Chrome Developer Tools ou Firebug) pour voir s'il y a des erreurs dans votre code. Les erreurs dans la console peuvent vous aider à déterminer ce qui ne fonctionne pas.

3. Ajoutez des points de contrôle (`console.log()`) pour savoir où votre code est en train de planter ou de ne pas fonctionner comme prévu.

4. Réduisez le code autant que possible en isolant le problème dans une petite partie du code. Il est plus facile de trouver des erreurs dans un petit morceau de code que dans un grand code.

5. Utilisez des tests pour vérifier que chaque partie de votre code fonctionne correctement. Les tests vous permettent de vérifier rapidement et facilement que votre code répond aux exigences spécifiées.

J'espère que cela vous aidera

ZZZ · 1/5/23

Fofobot 🤖 a dit:
Je ne peux pas trouver le problème dans votre code sans plus d'informations sur le comportement exact que vous avez observé et les erreurs que vous rencontrez.

Cependant, voici quelques conseils pour déboguer votre code :

1. Vérifiez que toutes les variables sont initialisées correctement et que les fonctions sont appelées dans le bon ordre. Si une variable est undefined ou définie à la mauvaise valeur, cela peut causer des problèmes.

2. Utilisez la console de votre navigateur (par exemple, l'onglet Console de Chrome Developer Tools ou Firebug) pour voir s'il y a des erreurs dans votre code. Les erreurs dans la console peuvent vous aider à déterminer ce qui ne fonctionne pas.

3. Ajoutez des points de contrôle (`console.log()`) pour savoir où votre code est en train de planter ou de ne pas fonctionner comme prévu.

4. Réduisez le code autant que possible en isolant le problème dans une petite partie du code. Il est plus facile de trouver des erreurs dans un petit morceau de code que dans un grand code.

5. Utilisez des tests pour vérifier que chaque partie de votre code fonctionne correctement. Les tests vous permettent de vérifier rapidement et facilement que votre code répond aux exigences spécifiées.

J'espère que cela vous aidera

Comme tu me l'a proposé, j'ai minutieusement enquêté sur ce mystère et j'ai découvert ce qui en est la cause.

Je te rappelle le code;

JavaScript:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

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

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

var keys = {};
var mouse = {
    x: 0,
    y: 0
};
var angle = 0;

function menu() {
    player.heal = 100;
}

window.addEventListener("mousemove", function (event) {
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});

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

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

function createImage(path) {
    newImage = new Image();
    newImage.src = path;
    newImage.onload = function () {
        loop();
    };
    return newImage;
}

var player = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    posx: 0,
    posy: 0,
    width: 41,
    height: 97,
    speed: -1.6,
    speedDiag: -(1.6 / Math.sqrt(2)),
    heal: 100,
    reloading: false,
    damages: 10,
    image: createImage("./img/sprite.png"),
    reloadingImage: createImage("./img/sprite reloading.png"),
    shotLightImage: createImage("./img/shotLight Img.png"),
    bulletImg: createImage("./img/bullet Img.png")
};

var explosive = [
    {
        posx: 500,
        posy: 500,
        width: 66,
        height: 66,
        image: createImage("./img/explosive baril.png"),
        heal: 100,
        currentState: 1
    },
    {
        posx: 800,
        posy: 100,
        width: 66,
        height: 66,
        image: createImage("./img/explosive baril.png"),
        heal: 100,
        currentState: 1
    }
]

var bullets = [];
var shotLightVisible = false;
var lastFireTime = 0;
var fireRate = 1000 / 10;
var shootIntervalId;

function updateAngle() {
    var dx = mouse.x - player.x;
    var dy = mouse.y - player.y;
    angle = Math.atan2(dy, dx);
    angle += Math.PI / 2;
}

function update() {
    if (keys[38] && !keys[37] && !keys[39]) {
        player.posy += player.speed;
    }
    if (keys[40] && !keys[37] && !keys[39]) {
        player.posy -= player.speed;
    }
    if (keys[37] && !keys[38] && !keys[40]) {
        player.posx += player.speed;
    }
    if (keys[39] && !keys[38] && !keys[40]) {
        player.posx -= player.speed;
    }
    if (keys[38] && keys[37]) {
        player.posy += player.speedDiag;
        player.posx += player.speedDiag;
    }
    if (keys[38] && keys[39]) {
        player.posy += player.speedDiag;
        player.posx -= player.speedDiag;
    }
    if (keys[40] && keys[37]) {
        player.posy -= player.speedDiag;
        player.posx += player.speedDiag;
    }
    if (keys[40] && keys[39]) {
        player.posy -= player.speedDiag;
        player.posx -= player.speedDiag;
    }
    if (keys[82]) {
        reload();
    }
    if (keys[32]) {
        console.log(player.speed);
    }
    updateAngle();
}

player.heal = 100

function detectCollision() {
    function barilsSetups() {
        for (var baril in explosive) {
            if (explosive[baril].currentState != 3) {
                if (!explosive.hasOwnProperty(baril)) continue;
                for (var i = 0; i < bullets.length; i++) {
                    var bullet = bullets[i];
                    if (explosive[baril].currentState == 1) {
                        if (bullet.x >= explosive[baril].posx - player.posx &&
                            bullet.x < explosive[baril].posx + explosive[baril].width - player.posx &&
                            bullet.y >= explosive[baril].posy - player.posy &&
                            bullet.y < explosive[baril].posy + explosive[baril].height - player.posy) {
                            explosive[baril].heal -= player.damages;
                            bullets.splice(i, 1);
                            i--;
                        }
                    }
                    if (explosive[baril].heal <= 0) {
                        let barilBackup = baril
                        explosive[barilBackup].currentState = 2;
                        explosive[barilBackup].image = createImage("./img/explosing baril 1.png");
                        explosive[barilBackup].posx -= (400 - explosive[barilBackup].width) / 2;
                        explosive[barilBackup].posy -= (400 - explosive[barilBackup].height) / 2;
                        explosive[barilBackup].width = 400;
                        explosive[barilBackup].height = 400;
                        setTimeout(() => {
                            explosive[barilBackup].image = createImage("");
                            explosive[barilBackup].currentState = 3;
                        }, 2000);
                    }
                }
            }
        }
    }

    barilsSetups();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(player.x, player.y);
    ctx.rotate(angle);
    if (player.reloading == false) {
        ctx.drawImage(player.image, -player.width / 2, -player.height + 45 / 2, player.width, player.height);
    } else {
        ctx.drawImage(player.reloadingImage, -player.width / 2, -player.height + 45 / 2, player.width, player.height);
    }


    if (shotLightVisible) {
        ctx.drawImage(player.shotLightImage, -player.width + 65 / 2, -player.height / 2 - 42, 20, 20);
    }

    ctx.restore();

    for (let i = 0; i < explosive.length; i++) {
        ctx.drawImage(explosive[i].image, explosive[i].posx - player.posx, explosive[i].posy - player.posy, explosive[i].width, explosive[i].height);
    }

    ctx.fillStyle = "rgba(" + String(255 - 2.55 * player.heal) + ", " + String(255 - (255 - 2.55 * player.heal)) + ", 0)";
    ctx.fillRect((player.x - (player.width / 2) - 19) + ((40) - 0.52 * (player.heal / 1.3)), player.y + 40, player.heal / 1.3, 4);

    if (player.heal <= 0) {
        menu();
    }

    for (var i = 0; i < bullets.length; i++) {
        var bullet = bullets[i];
        ctx.save();
        ctx.translate(bullet.x, bullet.y);
        ctx.rotate(Math.atan2(bullet.vy, bullet.vx) + Math.PI / 2);
        ctx.drawImage(player.bulletImg, -1, 0, 2, 34);
        ctx.restore();
        bullet.x += bullet.vx;
        bullet.y += bullet.vy;
        if (Math.sqrt(Math.pow(bullet.x - player.x, 2) + Math.pow(bullet.y - player.y, 2)) >= 1000) {
            bullets.splice(i, 1);
            i--;
        }
    }
}

var bulletsNumber = 30;
var AK47Reloadsound = new Audio("./sounds/AK-47 reloading.mp3");

function reload() {
    player.reloading = true;
    AK47Reloadsound.play();
    setTimeout(function () {
        bulletsNumber = 30;
        player.reloading = false;
    }, 3000)
}

document.addEventListener("mousedown", function () {
    var currentTime = Date.now();
    var timeSinceLastFire = currentTime - lastFireTime;
    if (timeSinceLastFire >= fireRate) {
        if (bulletsNumber > 0 && player.reloading == false) {
            var AK47sound = new Audio("./sounds/AK-47.mp3");
            AK47sound.play();
            shotLightVisible = true;
            setTimeout(function () {
                shotLightVisible = false;
            }, 50);
            lastFireTime = currentTime;
            var bulletSpeed = 14;
            var dx = mouse.x - player.x;
            var dy = mouse.y - player.y;
            var bulletVX = bulletSpeed * Math.cos(Math.atan2(dy, dx));
            var bulletVY = bulletSpeed * Math.sin(Math.atan2(dy, dx));
            var bullet = {
                x: player.x,
                y: player.y,
                vx: bulletVX,
                vy: bulletVY
            };
            bullet.x += bullet.vx * 5;
            bullet.y += bullet.vy * 5;
            bullets.push(bullet);
            lastFireTime = currentTime;
            bulletsNumber -= 1
        } else if (bulletsNumber <= 0) {
            if (player.reloading == false) {
                reload();
            }
        }
    }
    clearInterval(shootIntervalId);
    shootIntervalId = setInterval(function () {
        var currentTime = Date.now();
        var timeSinceLastFire = currentTime - lastFireTime;
        if (timeSinceLastFire >= fireRate) {
            if (bulletsNumber > 0 && player.reloading == false) {
                var AK47sound = new Audio("./sounds/AK-47.mp3");
                AK47sound.play();
                shotLightVisible = true;
                setTimeout(function () {
                    shotLightVisible = false;
                }, 50);
                lastFireTime = currentTime;
                var bulletSpeed = 14;
                var dx = mouse.x - player.x;
                var dy = mouse.y - player.y;
                var bulletVX = bulletSpeed * Math.cos(Math.atan2(dy, dx));
                var bulletVY = bulletSpeed * Math.sin(Math.atan2(dy, dx));
                var bullet = {
                    x: player.x,
                    y: player.y,
                    vx: bulletVX,
                    vy: bulletVY
                };
                bullet.x += bullet.vx * 5;
                bullet.y += bullet.vy * 5;
                bullets.push(bullet);
                bulletsNumber -= 1
            } else if (bulletsNumber <= 0) {
                if (player.reloading == false) {
                    reload();
                }
            }
        }
    }, fireRate);
});

document.addEventListener("mouseup", function () {
    clearInterval(shootIntervalId);
});

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

loop();

Le problème, c'est que après l’explosion, il y a une suractivité et quand on presse un touche, le code suivant, par exemple ;

JavaScript:

if (keys[32]) {
    // si la touche espace est pressée...
    console.log("touche espace pressée !")
}

avant l’explosion va donner :

```touche espace pressée !``` une fois

mais après l'explosion ça donne :

```touche espace pressée !``` des centaines de fois.

tout le problème viens ce cette ligne de code :

[ligne 159]

JavaScript:

explosive[barilBackup].image = createImage("./img/explosing baril 1.png");

en quoi un changement d'image peut créer ce genre d'effets et comment le résoudre?

Sujets similaires	Réponses	Date
🤖 Robot Question / Réponse (IA) `08.07.2023`	1	8/7/23
🤖 Robot Question / Réponse (IA)	35	18/5/23
🤖 Robot Question / Réponse (IA)	58	12/5/23
🤖 Robot Question / Réponse (IA)	6	12/5/23
🤖 Robot Question / Réponse (IA)	105	7/5/23

🤖 Robot Question / Réponse (IA) 13

Sujets populaires