Robot Question / Réponse (IA) 4

  • Auteur de la discussion ZZZ
  • Date de début
ZZZ

ZZZ

Passionné
Messages
1 400
Réactions
474
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);
}

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

Pourquoi le flash du tir (shotLight) ne s'affiche pas quand je click ?
 
Fofobot 🤖

Fofobot 🤖

Assistant virtuel
Donateur 🤲
Messages
3 016
Réactions
1 936
Fofocoins
74 089
Dans votre code actuel, vous définissez l'événement onclick dans la fonction draw(). Cela signifie qu'à chaque rafraichissement de la boucle, vous redéfinissez cet événement onclick.

Vous pouvez définir l'événement onclick en dehors de la fonction draw(), de préférence dans la fonction setup() qui sera exécutée une seule fois au début du script.

Voici le code mis à jour :

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

Notez que vous pouvez également définir l'événement onclick directement dans la balise HTML du canvas en ajoutant l'attribut onclick, comme ceci :

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

et en définissant la fonction shoot() à l'extérieur de la fonction loop().
 
ZZZ

ZZZ

Passionné
Messages
1 400
Réactions
474
Fofocoins
7 662
Personnalisation du groupe
Personnalisation pseudo
ç
Fofobot 🤖 a dit:
Dans votre code actuel, vous définissez l'événement onclick dans la fonction draw(). Cela signifie qu'à chaque rafraichissement de la boucle, vous redéfinissez cet événement onclick.

Vous pouvez définir l'événement onclick en dehors de la fonction draw(), de préférence dans la fonction setup() qui sera exécutée une seule fois au début du script.

Voici le code mis à jour :

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

Notez que vous pouvez également définir l'événement onclick directement dans la balise HTML du canvas en ajoutant l'attribut onclick, comme ceci :

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

et en définissant la fonction shoot() à l'extérieur de la fonction loop().
Cliquez pour agrandir...
ça ne marche pas, le flashlight n'apparaît pas.
 
ZZZ

ZZZ

Passionné
Messages
1 400
Réactions
474
Fofocoins
7 662
Personnalisation du groupe
Personnalisation pseudo
Fofobot 🤖 a dit:
Il semblerait que votre problématique ne soit pas résolue. Pouvez-vous préciser le problème rencontré ?
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.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 flashlight (ici shotLight) n'apparaît pas
 
Fofobot 🤖

Fofobot 🤖

Assistant virtuel
Donateur 🤲
Messages
3 016
Réactions
1 936
Fofocoins
74 089
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.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 flashlight (ici shotLight) n'apparaît pas
Cliquez pour agrandir...
Sorry I couldn't contact the ChatGPT think tank :(
 
ZZZ

ZZZ

Passionné
Messages
1 400
Réactions
474
Fofocoins
7 662
Personnalisation du groupe
Personnalisation pseudo
Fofobot 🤖 a dit:
Sorry I couldn't contact the ChatGPT think tank :(
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.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 flashlight (ici shotLight) n'apparaît pas
 
Fofobot 🤖

Fofobot 🤖

Assistant virtuel
Donateur 🤲
Messages
3 016
Réactions
1 936
Fofocoins
74 089
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.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 flashlight (ici shotLight) n'apparaît pas
Cliquez pour agrandir...
Sorry I couldn't contact the ChatGPT think tank :(
 
ZZZ

ZZZ

Passionné
Messages
1 400
Réactions
474
Fofocoins
7 662
Personnalisation du groupe
Personnalisation pseudo
Fofobot 🤖 a dit:
Dans votre code actuel, vous définissez l'événement onclick dans la fonction draw(). Cela signifie qu'à chaque rafraichissement de la boucle, vous redéfinissez cet événement onclick.

Vous pouvez définir l'événement onclick en dehors de la fonction draw(), de préférence dans la fonction setup() qui sera exécutée une seule fois au début du script.

Voici le code mis à jour :

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

Notez que vous pouvez également définir l'événement onclick directement dans la balise HTML du canvas en ajoutant l'attribut onclick, comme ceci :

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

et en définissant la fonction shoot() à l'extérieur de la fonction loop().
Cliquez pour agrandir...
Bon tu marches ou pas?
 
Vous devez vous connecter ou vous enregistrer pour répondre ici.
Similar threads
Thread starter Titre Forum Réponses Date
ZZZ 🤖 Robot Question / Réponse (IA) `08.07.2023` 🤖 Robot Question / Réponse (IA) 1
ZZZ 🤖 Robot Question / Réponse (IA) 🤖 Robot Question / Réponse (IA) 35
ZZZ 🤖 Robot Question / Réponse (IA) 🤖 Robot Question / Réponse (IA) 58
ZZZ 🤖 Robot Question / Réponse (IA) 🤖 Robot Question / Réponse (IA) 6
ZZZ 🤖 Robot Question / Réponse (IA) 🤖 Robot Question / Réponse (IA) 105

Similar threads

Lancer une discussion 🚀…

S'inscrire gratuitement

Sujets populaires

Derniers messages

Haut

🚫 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 !