Robot Question / Réponse (IA) 5

  • 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.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 = {};
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: 174,
    speed: 3,
    speedDiag: 3 / Math.sqrt(2),
};

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

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

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

document.onclick = function () {
    ctx.drawImage(player.shotLightImage, (-player.width) + 65 / 2, (-player.height / 2) - 20, 20, 20);
}

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 + Math.PI / 2);
    ctx.drawImage(player.image, -player.width / 2, -player.height / 2, player.width, player.height);
    ctx.restore();
}

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


Le shotLight n'apparaît pas avec ce code qu'est ce qui ne va pas?
 
Fofobot 🤖
Fofobot 🤖
Assistant virtuel
Donateur 🤲
Messages
3 016
Fofocoins
72 889
Le code indique que le joueur tire un "shotLight" lorsqu'un clic est détecté sur la souris. Cependant, en utilisant la fonction `drawImage` pour afficher le "shotLight", vous n'avez pas précisé la source de l'image à utiliser.

Il vous manque donc une étape pour spécifier la source de l'image avant de l'afficher. Vous pouvez corriger cela en ajoutant les lignes suivantes:

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

Cela permettra de charger correctement l'image du "shotLight" avant de l'afficher lors d'un clic de souris.

Ensuite, dans la fonction `document.onclick`, vous devez dessiner l'image du "shotLight" en utilisant les propriétés de `ctx.drawImage` et en précisant la source de l'image que vous avez chargée précédemment:

```
document.onclick = function () {
ctx.drawImage(player.shotLightImage, player.x - player.width / 2 + 65 / 2, player.y - player.height / 2 - 20, 20, 20);
}
```

Avec ces modifications, le "shotLight" devrait s'afficher correctement lorsque le joueur clique sur la souris.
 
ZZZ
ZZZ
Passionné
Messages
1 400
Fofocoins
7 662
Personnalisation du groupe
Personnalisation pseudo
Fofobot 🤖 a dit:
Le code indique que le joueur tire un "shotLight" lorsqu'un clic est détecté sur la souris. Cependant, en utilisant la fonction `drawImage` pour afficher le "shotLight", vous n'avez pas précisé la source de l'image à utiliser.

Il vous manque donc une étape pour spécifier la source de l'image avant de l'afficher. Vous pouvez corriger cela en ajoutant les lignes suivantes:

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

Cela permettra de charger correctement l'image du "shotLight" avant de l'afficher lors d'un clic de souris.

Ensuite, dans la fonction `document.onclick`, vous devez dessiner l'image du "shotLight" en utilisant les propriétés de `ctx.drawImage` et en précisant la source de l'image que vous avez chargée précédemment:

```
document.onclick = function () {
ctx.drawImage(player.shotLightImage, player.x - player.width / 2 + 65 / 2, player.y - player.height / 2 - 20, 20, 20);
}
```

Avec ces modifications, le "shotLight" devrait s'afficher correctement lorsque le joueur clique sur la souris.
Cliquez pour agrandir...
JavaScript: 
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 = {};
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: 174,
    speed: 3,
    speedDiag: 3 / Math.sqrt(2),
};

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

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

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

document.onclick = function () {
    ctx.drawImage(player.shotLightImage, player.x - player.width / 2 + 65 / 2, player.y - player.height / 2 - 20, 20, 20);
}

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 + Math.PI / 2);
    ctx.drawImage(player.image, -player.width / 2, -player.height / 2, player.width, player.height);
    document.onclick = function () {
        ctx.drawImage(player.shotLightImage, (-player.width) + 65 / 2, (-player.height / 2) - 20, 20, 20);
    }
    ctx.restore();
}

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

Le shotLight n'apparaît toujours pas. Une solution stp
 
Fofobot 🤖
Fofobot 🤖
Assistant virtuel
Donateur 🤲
Messages
3 016
Fofocoins
72 889
ZZZ a dit:
JavaScript: 
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 = {};
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: 174,
    speed: 3,
    speedDiag: 3 / Math.sqrt(2),
};

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

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

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

document.onclick = function () {
    ctx.drawImage(player.shotLightImage, player.x - player.width / 2 + 65 / 2, player.y - player.height / 2 - 20, 20, 20);
}

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 + Math.PI / 2);
    ctx.drawImage(player.image, -player.width / 2, -player.height / 2, player.width, player.height);
    document.onclick = function () {
        ctx.drawImage(player.shotLightImage, (-player.width) + 65 / 2, (-player.height / 2) - 20, 20, 20);
    }
    ctx.restore();
}

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

Le shotLight n'apparaît toujours pas. Une solution stp
Cliquez pour agrandir...
Le problème dans votre code se situe dans la fonction `draw()`. Vous avez positionné votre fonction `document.onclick` à l'intérieur de la fonction `draw()`, qui est appelée plusieurs fois par seconde, à chaque rafraîchissement de la page. Cela provoque la redéfinition de la fonction `document.onclick` à chaque fois et crée des conflits.

Vous pouvez résoudre ce problème en plaçant la fonction `document.onclick` en dehors de la fonction `draw()`.

Voici le code révisé avec la fonction `document.onclick` placée en dehors de la fonction `draw()`:


```
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 = {};
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: 174,
speed: 3,
speedDiag: 3 / Math.sqrt(2),
};

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

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

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

document.onclick = function () {
ctx.drawImage(player.shotLightImage, player.x - player.width / 2 + 65 / 2, player.y - player.height / 2 - 20, 20, 20);
}

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 + Math.PI / 2);
ctx.drawImage(player.image, -player
 
ZZZ
ZZZ
Passionné
Messages
1 400
Fofocoins
7 662
Personnalisation du groupe
Personnalisation pseudo
en HTLM:

HTML: 
<canvas onclick="shoot()" id="myCanvas"></canvas>

et en JS:

JavaScript: 
var canvas = document.getElementById('myCanvas');
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: 174,
    speed: 3,
    speedDiag: 3 / Math.sqrt(2),
};

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

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

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

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 shoot() {
    ctx.drawImage(player.shotLightImage, (-player.width) + 65 / 2, (-player.height / 2) - 20, 20, 20);
}

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 + Math.PI / 2);
    ctx.drawImage(player.image, -player.width / 2, -player.height / 2, player.width, player.height);
    ctx.restore();
}

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

l'affichage du shotLight ne s'éxecute pas.
 
ZZZ
ZZZ
Passionné
Messages
1 400
Fofocoins
7 662
Personnalisation du groupe
Personnalisation pseudo
Fofobot 🤖 a dit:
Le problème dans votre code se situe dans la fonction `draw()`. Vous avez positionné votre fonction `document.onclick` à l'intérieur de la fonction `draw()`, qui est appelée plusieurs fois par seconde, à chaque rafraîchissement de la page. Cela provoque la redéfinition de la fonction `document.onclick` à chaque fois et crée des conflits.

Vous pouvez résoudre ce problème en plaçant la fonction `document.onclick` en dehors de la fonction `draw()`.

Voici le code révisé avec la fonction `document.onclick` placée en dehors de la fonction `draw()`:


```
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 = {};
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: 174,
speed: 3,
speedDiag: 3 / Math.sqrt(2),
};

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

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

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

document.onclick = function () {
ctx.drawImage(player.shotLightImage, player.x - player.width / 2 + 65 / 2, player.y - player.height / 2 - 20, 20, 20);
}

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 + Math.PI / 2);
ctx.drawImage(player.image, -player
Cliquez pour agrandir...
en HTLM:

HTML: 
<canvas onclick="shoot()" id="myCanvas"></canvas>

et en JS:

JavaScript: 
var canvas = document.getElementById('myCanvas');
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: 174,
    speed: 3,
    speedDiag: 3 / Math.sqrt(2),
};

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

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

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

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 shoot() {
    ctx.drawImage(player.shotLightImage, (-player.width) + 65 / 2, (-player.height / 2) - 20, 20, 20);
}

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 + Math.PI / 2);
    ctx.drawImage(player.image, -player.width / 2, -player.height / 2, player.width, player.height);
    ctx.restore();
}

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

l'affichage du shotLight ne s'éxecute pas.
 
Fofobot 🤖
Fofobot 🤖
Assistant virtuel
Donateur 🤲
Messages
3 016
Fofocoins
72 889
ZZZ a dit:
en HTLM:

HTML: 
<canvas onclick="shoot()" id="myCanvas"></canvas>

et en JS:

JavaScript: 
var canvas = document.getElementById('myCanvas');
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: 174,
    speed: 3,
    speedDiag: 3 / Math.sqrt(2),
};

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

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

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

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 shoot() {
    ctx.drawImage(player.shotLightImage, (-player.width) + 65 / 2, (-player.height / 2) - 20, 20, 20);
}

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 + Math.PI / 2);
    ctx.drawImage(player.image, -player.width / 2, -player.height / 2, player.width, player.height);
    ctx.restore();
}

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

l'affichage du shotLight ne s'éxecute pas.
Cliquez pour agrandir...
Sorry I couldn't contact the ChatGPT think tank :(
 
Vous devez vous connecter ou vous enregistrer pour répondre ici.
Sujets similaires Réponses Date
🤖 Robot Question / Réponse (IA) `08.07.2023` 1
🤖 Robot Question / Réponse (IA) 35
🤖 Robot Question / Réponse (IA) 58
🤖 Robot Question / Réponse (IA) 6
🤖 Robot Question / Réponse (IA) 105
Sujets similaires
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 !