azertyuiopqsdjklmwxcvbn

  • Auteur de la discussion ZZZ
  • Date de début
ZZZ
ZZZ
Passionné
Messages
1 400
Fofocoins
7 662
Personnalisation du groupe
Personnalisation pseudo
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[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 && !barilExplosion.currentStat) {
                        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;

                        explosive[barilBackup].image.src = "";
                        barilExplosion = {
                            posx: explosive[barilBackup].posx,
                            posy: explosive[barilBackup].posy,
                            currentStat: true
                        }
                        setTimeout(() => {
                            explosive[barilBackup].currentStat = 3;
                        }, 300);
                    }
                }
            }
        }
    }

    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) {
        particlesNumber = 360;
        particles = [];
        for (let i = 0; i < particlesNumber; i++) {
            radiusMax = 1000 / i
            particles.push({
                radius: Math.random() * radiusMax,
            })

            particles[i].posx = particles[i].radius * Math.cos(i);
            particles[i].posy = particles[i].radius * Math.sin(i);

            let opacity = particles[i].radius / radiusMax;
            ctx.fillStyle = "rgba(255, 255, 255, " + opacity + ")";

            // ctx.fillstyle
            if (barilExplosion.currentStat == true) {
                ctx.fillRect(barilExplosion.posx + explosive[0].width / 2 + particles[i].posx - player.posx, barilExplosion.posy + explosive[0].height / 2 + particles[i].posy - player.posy, 8, 8);
            }
        }
        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();

j'ai trouvé le problème : le tir actualise l'explosion, si on ne tire pas du tout pendant celle-ci; il n'y a pas d'explosion, n'est-t'il pas possible que les explosions soient indépendantes des tirs?
 
Fofobot 🤖
Fofobot 🤖
Assistant virtuel
Donateur 🤲
Messages
3 016
Fofocoins
70 789
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[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 && !barilExplosion.currentStat) {
                        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;

                        explosive[barilBackup].image.src = "";
                        barilExplosion = {
                            posx: explosive[barilBackup].posx,
                            posy: explosive[barilBackup].posy,
                            currentStat: true
                        }
                        setTimeout(() => {
                            explosive[barilBackup].currentStat = 3;
                        }, 300);
                    }
                }
            }
        }
    }

    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) {
        particlesNumber = 360;
        particles = [];
        for (let i = 0; i < particlesNumber; i++) {
            radiusMax = 1000 / i
            particles.push({
                radius: Math.random() * radiusMax,
            })

            particles[i].posx = particles[i].radius * Math.cos(i);
            particles[i].posy = particles[i].radius * Math.sin(i);

            let opacity = particles[i].radius / radiusMax;
            ctx.fillStyle = "rgba(255, 255, 255, " + opacity + ")";

            // ctx.fillstyle
            if (barilExplosion.currentStat == true) {
                ctx.fillRect(barilExplosion.posx + explosive[0].width / 2 + particles[i].posx - player.posx, barilExplosion.posy + explosive[0].height / 2 + particles[i].posy - player.posy, 8, 8);
            }
        }
        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();

j'ai trouvé le problème : le tir actualise l'explosion, si on ne tire pas du tout pendant celle-ci; il n'y a pas d'explosion, n'est-t'il pas possible que les explosions soient indépendantes des tirs?
Cliquez pour agrandir...
Oui, il est possible que les explosions soient indépendantes des tirs en ajoutant une variable de temps d'explosion pour chaque baril, et en ajoutant une condition lors de la détection de collision pour vérifier si le temps d'explosion est écoulé avant de faire l'explosion. Voici comment vous pouvez modifier la fonction `barilsSetups` pour ajouter cette fonctionnalité :

```javascript
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;
if (explosive[baril].currentStat == 1 && !barilExplosion.currentStat) {
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 && !explosive[baril].explosionTime) {
explosive[baril].explosionTime = Date.now() + 3000; // 3 secondes avant l'explosion
}
}
if (explosive[baril].explosionTime && explosive[baril].explosionTime <= Date.now()) {
let barilBackup = baril
explosive[barilBackup].currentStat = 2;

explosive[barilBackup].image.src = "";
barilExplosion = {
posx: explosive[barilBackup].posx,
posy: explosive[barilBackup].posy,
currentStat: true
}
setTimeout(() => {
explosive[barilBackup].currentStat = 3;
}, 300);
}
}
}
}
```

Maintenant, vous devez ajouter une nouvelle variable `explosionTime` à chaque baril, et définir sa valeur sur la ligne `explosive[baril].explosionTime = Date.now() + 3000;` lorsqu'un baril est détruit. Ensuite, vous pouvez vérifier si le temps d'explosion est écoulé en ajoutant cette condition : `if (explosive[baril].explosionTime && explosive[baril].explosionTime <= Date.now())` avant de faire l'explosion.

Notez que dans ce code, l'explosion dure 3 secondes après que le baril ait été détruit. Si vous souhaitez ajuster cette durée, vous pouvez changer la valeur `3000` en millisecondes pour correspondre à la durée souhaitée.
 
ZZZ
ZZZ
Passionné
Messages
1 400
Fofocoins
7 662
Personnalisation du groupe
Personnalisation pseudo
Fofobot 🤖 a dit:
Oui, il est possible que les explosions soient indépendantes des tirs en ajoutant une variable de temps d'explosion pour chaque baril, et en ajoutant une condition lors de la détection de collision pour vérifier si le temps d'explosion est écoulé avant de faire l'explosion. Voici comment vous pouvez modifier la fonction `barilsSetups` pour ajouter cette fonctionnalité :

```javascript
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;
if (explosive[baril].currentStat == 1 && !barilExplosion.currentStat) {
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 && !explosive[baril].explosionTime) {
explosive[baril].explosionTime = Date.now() + 3000; // 3 secondes avant l'explosion
}
}
if (explosive[baril].explosionTime && explosive[baril].explosionTime <= Date.now()) {
let barilBackup = baril
explosive[barilBackup].currentStat = 2;

explosive[barilBackup].image.src = "";
barilExplosion = {
posx: explosive[barilBackup].posx,
posy: explosive[barilBackup].posy,
currentStat: true
}
setTimeout(() => {
explosive[barilBackup].currentStat = 3;
}, 300);
}
}
}
}
```

Maintenant, vous devez ajouter une nouvelle variable `explosionTime` à chaque baril, et définir sa valeur sur la ligne `explosive[baril].explosionTime = Date.now() + 3000;` lorsqu'un baril est détruit. Ensuite, vous pouvez vérifier si le temps d'explosion est écoulé en ajoutant cette condition : `if (explosive[baril].explosionTime && explosive[baril].explosionTime <= Date.now())` avant de faire l'explosion.

Notez que dans ce code, l'explosion dure 3 secondes après que le baril ait été détruit. Si vous souhaitez ajuster cette durée, vous pouvez changer la valeur `3000` en millisecondes pour correspondre à la durée souhaitée.
Cliquez pour agrandir...

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;
        this.explosionDelay = 100; // 100 frames avant de pouvoir exploser à nouveau
        this.explosionTime = 0; // temps écoulé depuis la dernière explosion
    }
}

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;
    }
    let ping = 0
    if (keys[32]) {
        ping++
        console.log(ping);
    }
    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 && !barilExplosion.currentStat) {
                        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;

                        img = new Image();
                        img.onload = function () {
                            loop();
                        }
                        img.src = "";
                        explosive[barilBackup].image = img;
                        barilExplosion = {
                            posx: explosive[barilBackup].posx,
                            posy: explosive[barilBackup].posy,
                            currentStat: true
                        }
                        setTimeout(() => {
                            explosive[barilBackup].currentStat = 3;
                        }, 300);
                    }
                }
            }
        }
    }

    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) {
        particlesNumber = 360;
        particles = [];
        for (let i = 0; i < particlesNumber; i++) {
            radiusMax = 1000 / i
            particles.push({
                radius: Math.random() * radiusMax,
            })

            particles[i].posx = particles[i].radius * Math.cos(i);
            particles[i].posy = particles[i].radius * Math.sin(i);

            let opacity = particles[i].radius / radiusMax;
            ctx.fillStyle = "rgba(255, 255, 255, " + opacity + ")";

            // ctx.fillstyle
            if (barilExplosion.currentStat == true) {
                ctx.fillRect(barilExplosion.posx + explosive[0].width / 2 + particles[i].posx - player.posx, barilExplosion.posy + explosive[0].height / 2 + particles[i].posy - player.posy, 8, 8);
            }
        }
        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();

Dans ce code, l'explosion ne s'exécute que quand on tire en même temps.
voici mon test :
JavaScript: 
console.log(explosing[baril].heal);

Output : explosion sans tirer :
0
la vie du baril a été mise à 0, mais pas d'explosion
Output : explosion en tirant :
[75] 0
la vie du baril a été mise à 75 fois à 0, mais ; explosion.

Aide-moi stp
 
Vous devez vous connecter ou vous enregistrer pour répondre ici.
Lancer une discussion 🚀…

S'inscrire gratuitement

Sujets populaires

Derniers messages

🚫 Alerte AdBlock !

Vous avez activé le mode Ninja, et il cache toutes les pubs ! 😆 Un petit coup de pouce pour notre site serait super apprécié si vous pouvez le désactiver. 🙏

🦸‍♂️ J'ai Désactivé AdBlock !