Robot Question / Réponse (IA) 3

[ZZZ]

Comment, dans ce jeu JS;

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

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

var keys = {};

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: 40,
    height: 40,
    speed: 5,
    speedDiag: 5 / Math.sqrt(2),
};

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

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

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(player.image, player.x - (player.width / 2), player.y - (player.height / 2), player.width, player.height);
}

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

Peut-t'on faire que l'image "cursor.png" s'oriente directionnellement vers la souris ?

 

[Fofobot 🤖]

Oui, il est possible de faire que l'image "cursor.png" s'oriente directionnellement vers la souris en utilisant la fonction Math.atan2() pour calculer l'angle entre la position actuelle du joueur et la position de la souris.

Voici la modification du code nécessaire pour obtenir cet effet :

- Ajouter ces deux variables globales :

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

- Ajouter ces deux événements de souris :

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

- Ajouter cette fonction de calcul d'angle :

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

- Modifier la fonction update() pour appeler la fonction updateAngle() :

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(); // Ajout de cette ligne
}

- Modifier la fonction draw() pour dessiner le joueur tourné vers la souris :

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.save(); // Sauvegarde le contexte
ctx.translate(player.x, player.y); // Translation vers la position du joueur
ctx.rotate(angle + Math.PI / 2); // Rotation de l'image
ctx.drawImage(player.image, -player.width / 2, -player.height / 2, player.width, player.height); // Dessine l'image
ctx.restore(); // Restaure le contexte
}

Cela devrait tourner l'image du joueur vers la position actuelle de la souris.