pas d'idée pour le titre.....

ZZZ · 2/5/23

JavaScript:

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

document.getElementById("bullets").innerHTML = "ammo: 30/30";

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: -0.8,
    speedDiag: -(0.8 / 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"),
    loader: createImage("./img/loader.gif")
};

class baril {
    posx;
    posy;
    constructor(posx, posy) {
        this.posx = posx;
        this.posy = posy;
        this.width = 66;
        this.height = 66;
        this.image = createImage("./img/explosive baril.png");
        this.heal = 100;
        this.currentStat = 1;
    }
}

var explosive = [
    new baril(500, 500), new baril(800, 100), new baril(1000, 400)
]

console.log(explosive[0]);
console.log(explosive[1]);

var bullets = [];
var shotLightVisible = false;
var lastFireTime = 0;
var fireRate = 1000 / 10;
var shootIntervalId;
var barilExplosion = {
    currentStat: false
};

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[32]) {
        alert(player.posy)
        alert(explosive[0].posy)
    }
    if (keys[82]) {
        reload();
    }
    updateAngle();
}

player.heal = 100

function detectCollision() {
    function barilsSetups() {
        for (var baril in explosive) {
            if (explosive[baril].currentStat != 3) {
                if (!explosive.hasOwnProperty(baril)) continue;
                for (var i = 0; i < bullets.length; i++) {
                    var bullet = bullets[i];
                    if (explosive[baril].currentStat == 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;
                            explosive[baril].width -= 1;
                            explosive[baril].height -= 1;
                            explosive[baril].posx += 0.5;
                            explosive[baril].posy += 0.5;
                            bullets.splice(i, 1);
                            i--;
                        }
                    }
                    if (explosive[baril].heal <= 0) {
                        let barilBackup = baril
                        explosive[barilBackup].currentStat = 2;

                        barilExplosion = {
                            posx: explosive[barilBackup].posx,
                            posy: explosive[barilBackup].posy,
                            currentStat: true
                        }

                        setTimeout(() => {
                            explosive[barilBackup].image.src = "";
                            explosive[barilBackup].currentStat = 3;
                        }, 1000);
                    }
                }
            }
        }
    }

    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);
    document.getElementById("heal").style.width = String(20 + 3 * (player.heal)) + "px";
    document.getElementById("heal").style.backgroundColor = ctx.fillStyle;
    document.getElementById("healText").innerHTML = "hp: " + Math.round(player.heal);

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

    if (barilExplosion.currentStat == true) {

        // animation d'explosion à particules...

        barilExplosion.currentStat = false;
    }

    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;
    document.getElementById("bullets").innerHTML = "ammo: reloading...";
    AK47Reloadsound.play();
    setTimeout(function () {
        bulletsNumber = 30;
        player.reloading = false;
        document.getElementById("bullets").innerHTML = "ammo: " + bulletsNumber + "/30";
    }, 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
            document.getElementById("bullets").innerHTML = "ammo: " + bulletsNumber + "/30";
        } 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
                document.getElementById("bullets").innerHTML = "ammo: " + bulletsNumber + "/30";
            } else if (bulletsNumber <= 0) {
                if (player.reloading == false) {
                    reload();
                }
            }
        }
    }, fireRate);
});

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

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

loop();

Fais-moi un animation d'explosion à particule avec des fillrect à la place du ```// animation d'explosion à particules...```.

Fofobot 🤖 · 2/5/23

ZZZ a dit:

JavaScript:

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

document.getElementById("bullets").innerHTML = "ammo: 30/30";

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: -0.8,
    speedDiag: -(0.8 / 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"),
    loader: createImage("./img/loader.gif")
};

class baril {
    posx;
    posy;
    constructor(posx, posy) {
        this.posx = posx;
        this.posy = posy;
        this.width = 66;
        this.height = 66;
        this.image = createImage("./img/explosive baril.png");
        this.heal = 100;
        this.currentStat = 1;
    }
}

var explosive = [
    new baril(500, 500), new baril(800, 100), new baril(1000, 400)
]

console.log(explosive[0]);
console.log(explosive[1]);

var bullets = [];
var shotLightVisible = false;
var lastFireTime = 0;
var fireRate = 1000 / 10;
var shootIntervalId;
var barilExplosion = {
    currentStat: false
};

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[32]) {
        alert(player.posy)
        alert(explosive[0].posy)
    }
    if (keys[82]) {
        reload();
    }
    updateAngle();
}

player.heal = 100

function detectCollision() {
    function barilsSetups() {
        for (var baril in explosive) {
            if (explosive[baril].currentStat != 3) {
                if (!explosive.hasOwnProperty(baril)) continue;
                for (var i = 0; i < bullets.length; i++) {
                    var bullet = bullets[i];
                    if (explosive[baril].currentStat == 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;
                            explosive[baril].width -= 1;
                            explosive[baril].height -= 1;
                            explosive[baril].posx += 0.5;
                            explosive[baril].posy += 0.5;
                            bullets.splice(i, 1);
                            i--;
                        }
                    }
                    if (explosive[baril].heal <= 0) {
                        let barilBackup = baril
                        explosive[barilBackup].currentStat = 2;

                        barilExplosion = {
                            posx: explosive[barilBackup].posx,
                            posy: explosive[barilBackup].posy,
                            currentStat: true
                        }

                        setTimeout(() => {
                            explosive[barilBackup].image.src = "";
                            explosive[barilBackup].currentStat = 3;
                        }, 1000);
                    }
                }
            }
        }
    }

    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);
    document.getElementById("heal").style.width = String(20 + 3 * (player.heal)) + "px";
    document.getElementById("heal").style.backgroundColor = ctx.fillStyle;
    document.getElementById("healText").innerHTML = "hp: " + Math.round(player.heal);

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

    if (barilExplosion.currentStat == true) {

        // animation d'explosion à particules...

        barilExplosion.currentStat = false;
    }

    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;
    document.getElementById("bullets").innerHTML = "ammo: reloading...";
    AK47Reloadsound.play();
    setTimeout(function () {
        bulletsNumber = 30;
        player.reloading = false;
        document.getElementById("bullets").innerHTML = "ammo: " + bulletsNumber + "/30";
    }, 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
            document.getElementById("bullets").innerHTML = "ammo: " + bulletsNumber + "/30";
        } 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
                document.getElementById("bullets").innerHTML = "ammo: " + bulletsNumber + "/30";
            } else if (bulletsNumber <= 0) {
                if (player.reloading == false) {
                    reload();
                }
            }
        }
    }, fireRate);
});

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

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

loop();

Fais-moi un animation d'explosion à particule avec des fillrect à la place du ```// animation d'explosion à particules...```.

Pour créer une animation d'explosion à particules avec des `fillRect`, voici un exemple de code que vous pouvez ajouter à la fonction `draw()` :

```javascript
if (barilExplosion.currentStat == true) {
var particles = [];

// nombre de particules
var numParticles = 200;

// créer les particules
for (var i = 0; i < numParticles; i++) {
particles.push({
x: barilExplosion.posx,
y: barilExplosion.posy,
radius: Math.random() * 4 + 1,
vx: Math.random() * 10 - 5,
vy: Math.random() * 10 - 5,
alpha: 1,
decay: Math.random() * 0.01 + 0.005
});
}

// dessiner les particules
for (var i = 0; i < particles.length; i++) {
var p = particles;
ctx.fillStyle = "rgba(255, 255, 255, " + p.alpha + ")";
ctx.fillRect(p.x - p.radius / 2, p.y - p.radius / 2, p.radius, p.radius);
p.x += p.vx;
p.y += p.vy;
p.alpha -= p.decay;
if (p.alpha < 0) {
particles.splice(i, 1);
i--;
}
}

barilExplosion.currentStat = false;
}
```

Ce code crée un tableau de particules, puis met à jour leur position, leur transparence et les dessine sur le canvas à chaque frame de l'animation. Vous pouvez ajuster les paramètres des particules (nombre, vitesse, taille, couleur) en modifiant les valeurs dans le code.

Notez qu'il est important de mettre `barilExplosion.currentStat = false;` à la fin du bloc de code pour que l'animation ne soit exécutée qu'une fois par explosion.

ZZZ · 2/5/23

Fofobot 🤖 a dit:
Pour créer une animation d'explosion à particules avec des `fillRect`, voici un exemple de code que vous pouvez ajouter à la fonction `draw()` :

```javascript
if (barilExplosion.currentStat == true) {
var particles = [];

// nombre de particules
var numParticles = 200;

// créer les particules
for (var i = 0; i < numParticles; i++) {
particles.push({
x: barilExplosion.posx,
y: barilExplosion.posy,
radius: Math.random() * 4 + 1,
vx: Math.random() * 10 - 5,
vy: Math.random() * 10 - 5,
alpha: 1,
decay: Math.random() * 0.01 + 0.005
});
}

// dessiner les particules
for (var i = 0; i < particles.length; i++) {
var p = particles;
ctx.fillStyle = "rgba(255, 255, 255, " + p.alpha + ")";
ctx.fillRect(p.x - p.radius / 2, p.y - p.radius / 2, p.radius, p.radius);
p.x += p.vx;
p.y += p.vy;
p.alpha -= p.decay;
if (p.alpha < 0) {
particles.splice(i, 1);
i--;
}
}

barilExplosion.currentStat = false;
}
```

Ce code crée un tableau de particules, puis met à jour leur position, leur transparence et les dessine sur le canvas à chaque frame de l'animation. Vous pouvez ajuster les paramètres des particules (nombre, vitesse, taille, couleur) en modifiant les valeurs dans le code.

Notez qu'il est important de mettre `barilExplosion.currentStat = false;` à la fin du bloc de code pour que l'animation ne soit exécutée qu'une fois par explosion.

ton code ne marche pas.

Fofobot 🤖 · 2/5/23

ZZZ a dit:
ton code ne marche pas.

Je suis navré que le code n'ait pas fonctionné.

Voici un exemple de code qui devrait fonctionner pour créer une animation d'explosion à particules avec des `fillRect` :

```javascript
if (barilExplosion.currentStat == true) {
var particles = [];

// nombre de particules
var numParticles = 200;

// créer les particules
for (var i = 0; i < numParticles; i++) {
particles.push({
x: barilExplosion.posx,
y: barilExplosion.posy,
radius: Math.random() * 4 + 1,
vx: Math.random() * 10 - 5,
vy: Math.random() * 10 - 5,
alpha: 1,
decay: Math.random() * 0.01 + 0.005
});
}

// dessiner les particules
for (var i = 0; i < particles.length; i++) {
var p = particles;
ctx.fillStyle = "rgba(255, 255, 255, " + p.alpha + ")";
ctx.fillRect(p.x - p.radius / 2, p.y - p.radius / 2, p.radius, p.radius);
p.x += p.vx;
p.y += p.vy;
p.alpha -= p.decay;
if (p.alpha < 0) {
particles.splice(i, 1);
i--;
}
}

barilExplosion.currentStat = false;
}
```

Ce code crée un tableau de particules, puis met à jour leur position, leur transparence et les dessine sur le canvas à chaque frame de l'animation. Vous pouvez ajuster les paramètres des particules (nombre, vitesse, taille, couleur) en modifiant les valeurs dans le code.

Notez qu'il est important de mettre `barilExplosion.currentStat = false;` à la fin du bloc de code pour que l'animation ne soit exécutée qu'une fois par explosion.

J'espère que cela fonctionne cette fois-ci. N'hésitez pas à me faire savoir si vous avez des questions ou si vous avez besoin d'aide supplémentaire.

ZZZ · 2/5/23

tu marches là ?

ZZZ · 2/5/23

Fofobot 🤖 a dit:
Je suis navré que le code n'ait pas fonctionné.

Voici un exemple de code qui devrait fonctionner pour créer une animation d'explosion à particules avec des `fillRect` :

```javascript
if (barilExplosion.currentStat == true) {
var particles = [];

// nombre de particules
var numParticles = 200;

// créer les particules
for (var i = 0; i < numParticles; i++) {
particles.push({
x: barilExplosion.posx,
y: barilExplosion.posy,
radius: Math.random() * 4 + 1,
vx: Math.random() * 10 - 5,
vy: Math.random() * 10 - 5,
alpha: 1,
decay: Math.random() * 0.01 + 0.005
});
}

// dessiner les particules
for (var i = 0; i < particles.length; i++) {
var p = particles;
ctx.fillStyle = "rgba(255, 255, 255, " + p.alpha + ")";
ctx.fillRect(p.x - p.radius / 2, p.y - p.radius / 2, p.radius, p.radius);
p.x += p.vx;
p.y += p.vy;
p.alpha -= p.decay;
if (p.alpha < 0) {
particles.splice(i, 1);
i--;
}
}

barilExplosion.currentStat = false;
}
```

Ce code crée un tableau de particules, puis met à jour leur position, leur transparence et les dessine sur le canvas à chaque frame de l'animation. Vous pouvez ajuster les paramètres des particules (nombre, vitesse, taille, couleur) en modifiant les valeurs dans le code.

Notez qu'il est important de mettre `barilExplosion.currentStat = false;` à la fin du bloc de code pour que l'animation ne soit exécutée qu'une fois par explosion.

J'espère que cela fonctionne cette fois-ci. N'hésitez pas à me faire savoir si vous avez des questions ou si vous avez besoin d'aide supplémentaire.

JavaScript:

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

document.getElementById("bullets").innerHTML = "ammo: 30/30";

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: -0.8,
    speedDiag: -(0.8 / 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"),
    loader: createImage("./img/loader.gif")
};

class baril {
    posx;
    posy;
    constructor(posx, posy) {
        this.posx = posx;
        this.posy = posy;
        this.width = 66;
        this.height = 66;
        this.image = createImage("./img/explosive baril.png");
        this.heal = 100;
        this.currentStat = 1;
    }
}

var explosive = [
    new baril(500, 500), new baril(800, 100), new baril(1000, 400)
]

console.log(explosive[0]);
console.log(explosive[1]);

var bullets = [];
var shotLightVisible = false;
var lastFireTime = 0;
var fireRate = 1000 / 10;
var shootIntervalId;
var barilExplosion = {
    currentStat: false
};

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[32]) {
        alert(player.posy)
        alert(explosive[0].posy)
    }
    if (keys[82]) {
        reload();
    }
    updateAngle();
}

player.heal = 100

function detectCollision() {
    function barilsSetups() {
        for (var baril in explosive) {
            if (explosive[baril].currentStat != 3) {
                if (!explosive.hasOwnProperty(baril)) continue;
                for (var i = 0; i < bullets.length; i++) {
                    var bullet = bullets[i];
                    if (explosive[baril].currentStat == 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;
                            explosive[baril].width -= 1;
                            explosive[baril].height -= 1;
                            explosive[baril].posx += 0.5;
                            explosive[baril].posy += 0.5;
                            bullets.splice(i, 1);
                            i--;
                        }
                    }
                    if (explosive[baril].heal <= 0) {
                        let barilBackup = baril
                        explosive[barilBackup].currentStat = 2;

                        barilExplosion = {
                            posx: explosive[barilBackup].posx,
                            posy: explosive[barilBackup].posy,
                            currentStat: true
                        }

                        setTimeout(() => {
                            explosive[barilBackup].image.src = "";
                            explosive[barilBackup].currentStat = 3;
                        }, 1000);
                    }
                }
            }
        }
    }

    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);
    document.getElementById("heal").style.width = String(20 + 3 * (player.heal)) + "px";
    document.getElementById("heal").style.backgroundColor = ctx.fillStyle;
    document.getElementById("healText").innerHTML = "hp: " + Math.round(player.heal);

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

    if (barilExplosion.currentStat == true) {

        // si le baril explose : animation...

        barilExplosion.currentStat = false;
    }

    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;
    document.getElementById("bullets").innerHTML = "ammo: reloading...";
    AK47Reloadsound.play();
    setTimeout(function () {
        bulletsNumber = 30;
        player.reloading = false;
        document.getElementById("bullets").innerHTML = "ammo: " + bulletsNumber + "/30";
    }, 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
            document.getElementById("bullets").innerHTML = "ammo: " + bulletsNumber + "/30";
        } 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
                document.getElementById("bullets").innerHTML = "ammo: " + bulletsNumber + "/30";
            } else if (bulletsNumber <= 0) {
                if (player.reloading == false) {
                    reload();
                }
            }
        }
    }, fireRate);
});

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

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

loop();

Fais-moi une animation d'explosion à particules à la place du ```// si le baril explose : animation...```.

Sujets similaires	Réponses	Date
+ 18 Fixer des limites pour les campagnes une bonne idée ou pas ?	2	15/6/23
JPP de ce bot pas d'idée pour le titre	22	30/4/23
Robot, robot, dis-moi, qui est le meilleur ? (pas d'idée pour le titre)	1	21/4/23
Pas d'idée pour le titre, je veux causer au bot.	10	20/4/23
Pas d'idée de titre ouuuuu	11	30/10/23

pas d'idée pour le titre.....

Sujets populaires