en HTLM:
et en JS:
l'affichage du shotLight ne s'éxecute pas.
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.