parler à la boite de conserve.;..

2 réponses 730 vues 0 réactions
Sélection partenaire
ZZZ
Passionné
JavaScript:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

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

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];
});

var player = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    width: 41,
    height: 97,
    speed: 1.6,
    speedDiag: 1.6 / Math.sqrt(2),
};

player.image = new Image();
player.image.src = "./img/sprite.png";
player.image.onload = function () {
    loop();
};

player.shotLightImage = new Image();
player.shotLightImage.src = "./img/shotLight Img.png";
player.shotLightImage.onload = function () {
    loop();
};

player.bulletImg = new Image();
player.bulletImg.src = "./img/bullet Img.png";
player.bulletImg.onload = function () {
    loop();
};

var bullets = [];
var shotLightVisible = false;
var lastFireTime = 0;
var fireRate = 1000 / 16;
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.y -= player.speed;
    }
    if (keys[40] && !keys[37] && !keys[39]) {
        player.y += player.speed;
    }
    if (keys[37] && !keys[38] && !keys[40]) {
        player.x -= player.speed;
    }
    if (keys[39] && !keys[38] && !keys[40]) {
        player.x += player.speed;
    }
    if (keys[38] && keys[37]) {
        player.y -= player.speedDiag;
        player.x -= player.speedDiag;
    }
    if (keys[38] && keys[39]) {
        player.y -= player.speedDiag;
        player.x += player.speedDiag;
    }
    if (keys[40] && keys[37]) {
        player.y += player.speedDiag;
        player.x -= player.speedDiag;
    }
    if (keys[40] && keys[39]) {
        player.y += player.speedDiag;
        player.x += player.speedDiag;
    }
    updateAngle();
}

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);
    ctx.drawImage(
        player.image,
        -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 (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 (
            // distance parcourue de la balle est supérieur ou égale à distance max
        ) {
            bullets.splice(i, 1);
            i--;
        }
    }
}

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

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

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

loop();

// distance parcourue de la balle est supérieur ou égale à distance max

dans ce code, fait que la balle disparaisse après avoir parcouru 1000 px ou plus.
 
Sélection partenaire
Assistant virtuel Donateur 🤲
JavaScript:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

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

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];
});

var player = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    width: 41,
    height: 97,
    speed: 1.6,
    speedDiag: 1.6 / Math.sqrt(2),
};

player.image = new Image();
player.image.src = "./img/sprite.png";
player.image.onload = function () {
    loop();
};

player.shotLightImage = new Image();
player.shotLightImage.src = "./img/shotLight Img.png";
player.shotLightImage.onload = function () {
    loop();
};

player.bulletImg = new Image();
player.bulletImg.src = "./img/bullet Img.png";
player.bulletImg.onload = function () {
    loop();
};

var bullets = [];
var shotLightVisible = false;
var lastFireTime = 0;
var fireRate = 1000 / 16;
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.y -= player.speed;
    }
    if (keys[40] && !keys[37] && !keys[39]) {
        player.y += player.speed;
    }
    if (keys[37] && !keys[38] && !keys[40]) {
        player.x -= player.speed;
    }
    if (keys[39] && !keys[38] && !keys[40]) {
        player.x += player.speed;
    }
    if (keys[38] && keys[37]) {
        player.y -= player.speedDiag;
        player.x -= player.speedDiag;
    }
    if (keys[38] && keys[39]) {
        player.y -= player.speedDiag;
        player.x += player.speedDiag;
    }
    if (keys[40] && keys[37]) {
        player.y += player.speedDiag;
        player.x -= player.speedDiag;
    }
    if (keys[40] && keys[39]) {
        player.y += player.speedDiag;
        player.x += player.speedDiag;
    }
    updateAngle();
}

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);
    ctx.drawImage(
        player.image,
        -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 (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 (
            // distance parcourue de la balle est supérieur ou égale à distance max
        ) {
            bullets.splice(i, 1);
            i--;
        }
    }
}

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

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

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

loop();

// distance parcourue de la balle est supérieur ou égale à distance max

dans ce code, fait que la balle disparaisse après avoir parcouru 1000 px ou plus.
Pour faire en sorte que la balle disparaisse après avoir parcouru une distance de 1000 pixels ou plus, vous pouvez ajouter une condition dans la boucle for qui gère l'affichage et la mise à jour de chaque balle du tableau `bullets`. Cette condition permettra de vérifier si la distance parcourue par la balle est supérieure ou égale à 1000 pixels, et si c'est le cas, de supprimer la balle du tableau.

Voici comment vous pouvez modifier votre code :

```javascript
for (var i = 0; i < bullets.length; i++) {
var bullet = bullets;
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;
// Vérifier si la distance parcourue par la balle est supérieure ou égale à 1000 pixels
if (Math.sqrt(Math.pow(bullet.x - player.x, 2) + Math.pow(bullet.y - player.y, 2)) >= 1000) {
bullets.splice(i, 1);
i--;
}
}
```

Dans cette modification, la condition `Math.sqrt(Math.pow(bullet.x - player.x, 2) + Math.pow(bullet.y - player.y, 2)) >= 1000` vérifie si la distance entre la position actuelle de la balle et la position initiale du joueur (où la balle a été tirée) est supérieure ou égale à 1000 pixels en utilisant le théorème de Pythagore pour calculer la distance entre deux points en 2D. Si la distance est supérieure ou égale à 1000 pixels, la balle est supprimée du tableau `bullets`.
 
Assistant virtuel Donateur 🤲
Pour faire en sorte que les balles disparaissent après avoir parcouru 1000 pixels ou plus, vous pouvez ajouter un test dans la boucle qui dessine les balles.

Voici comment cela pourrait être implémenté :
```
for (var i = 0; i < bullets.length; i++) {
var bullet = bullets;
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--;
}
}
```
Dans cette version modifiée du code, nous avons ajouté un test conditionnel qui vérifie si la distance parcourue par la balle est supérieure ou égale à 1000 pixels. Si c'est le cas, la balle est retirée du tableau `bullets`.
 
Sélection partenaire

Sujets similaires

D'autres discussions qui pourraient vous intéresser