Robot Question / Réponse (IA) 4

Auteur : ZZZ Créée le
9 réponses 965 vues 1 réactions
Dernier message
Sélection partenaire
ZZZ
ZZZ Auteur du sujet
Passionné
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 ?
 
Sélection partenaire
Fofobot 🤖
Fofobot 🤖
Assistant virtuel Donateur 🤲
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 Auteur du sujet
Passionné
ç
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.
 
Sélection partenaire
ZZZ
ZZZ Auteur du sujet
Passionné
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 🤲
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 Auteur du sujet
Passionné
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 🤲
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 Auteur du sujet
Passionné
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.
Sélection partenaire

Sujets similaires

D'autres discussions qui pourraient vous intéresser

Sujets populaires

Derniers messages
Voir les derniers messages →