JavaScript:
var canvas = document.getElementById("canvas");
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: 97,
speed: 1.6,
speedDiag: 1.6 / Math.sqrt(2),
};
player.image = new Image();
player.image.src = "./img/sprite.png";
player.image.onload = function () {
loop();
};
player.shotLightImage = new Image();
player.shotLightImage.src = "./img/shotLight Img.png";
player.shotLightImage.onload = function () {
loop();
};
player.bulletImg = new Image();
player.bulletImg.src = "./img/bullet Img.png";
player.bulletImg.onload = function () {
loop();
};
var bullets = [];
var shotLightVisible = false;
var lastFireTime = 0;
var fireRate = 1000 / 16;
var shootIntervalId;
function updateAngle() {
var dx = mouse.x - player.x;
var dy = mouse.y - player.y;
angle = Math.atan2(dy, dx);
angle += Math.PI / 2;
}
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);
ctx.drawImage(
player.image,
-player.width / 2,
-player.height + 45 / 2,
player.width,
player.height
);
if (shotLightVisible) {
ctx.drawImage(
player.shotLightImage,
-player.width + 65 / 2,
-player.height / 2 - 42,
20,
20
);
}
ctx.restore();
for (var i = 0; i < bullets.length; i++) {
var bullet = bullets[i];
ctx.save();
ctx.translate(bullet.x, bullet.y);
ctx.rotate(Math.atan2(bullet.vy, bullet.vx) + Math.PI / 2);
ctx.drawImage(player.bulletImg, -1, 0, 2, 34);
ctx.restore();
bullet.x += bullet.vx;
bullet.y += bullet.vy;
if (
// Si la balle a parcouru 1000 px...
) {
bullets.splice(i, 1);
i--;
}
}
}
document.addEventListener("mousedown", function () {
var currentTime = Date.now();
var timeSinceLastFire = currentTime - lastFireTime;
if (timeSinceLastFire >= fireRate) {
var AK47sound = new Audio("./sounds/AK-47.mp3");
AK47sound.play();
shotLightVisible = true;
setTimeout(function () {
shotLightVisible = false;
}, 50);
lastFireTime = currentTime;
var bulletSpeed = 10;
var bulletX = player.x;
var bulletY = player.y;
var dx = mouse.x - bulletX;
var dy = mouse.y - bulletY;
var bulletVX = bulletSpeed * Math.cos(Math.atan2(dy, dx));
var bulletVY = bulletSpeed * Math.sin(Math.atan2(dy, dx));
var bullet = {
x: bulletX,
y: bulletY,
vx: bulletVX,
vy: bulletVY
};
bullets.push(bullet);
lastFireTime = currentTime;
}
clearInterval(shootIntervalId);
shootIntervalId = setInterval(function () {
var currentTime = Date.now();
var timeSinceLastFire = currentTime - lastFireTime;
if (timeSinceLastFire >= fireRate) {
// tirer
var AK47sound = new Audio("./sounds/AK-47.mp3");
AK47sound.play();
shotLightVisible = true;
setTimeout(function () {
shotLightVisible = false;
}, 50);
lastFireTime = currentTime;
var bulletSpeed = 10;
var bulletX = player.x;
var bulletY = player.y;
var dx = mouse.x - bulletX;
var dy = mouse.y - bulletY;
var bulletVX = bulletSpeed * Math.cos(Math.atan2(dy, dx));
var bulletVY = bulletSpeed * Math.sin(Math.atan2(dy, dx));
var bullet = {
x: bulletX,
y: bulletY,
vx: bulletVX,
vy: bulletVY
};
bullets.push(bullet);
}
}, fireRate);
});
document.addEventListener("mouseup", function () {
clearInterval(shootIntervalId);
});
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
loop();Remplace "// Si la balle a parcouru 1000 px..." par une condition qui va envoyer true si la balle a parcouru 1000px, tu peux créer des variables , fonctions et même classes à ta guise.
