JavaScript:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
document.getElementById("bullets").innerHTML = "ammo: 30/30";
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
var keys = {};
var mouse = {
x: 0,
y: 0
};
var angle = 0;
function menu() {
player.heal = 100;
}
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];
});
function createImage(path) {
newImage = new Image();
newImage.src = path;
newImage.onload = function () {
loop();
};
return newImage;
}
var player = {
x: canvas.width / 2,
y: canvas.height / 2,
posx: 0,
posy: 0,
width: 41,
height: 97,
speed: -0.8,
speedDiag: -(0.8 / Math.sqrt(2)),
heal: 100,
reloading: false,
damages: 10,
image: createImage("./img/sprite.png"),
reloadingImage: createImage("./img/sprite reloading.png"),
shotLightImage: createImage("./img/shotLight Img.png"),
bulletImg: createImage("./img/bullet Img.png"),
loader: createImage("./img/loader.gif")
};
class baril {
posx;
posy;
constructor(posx, posy) {
this.posx = posx;
this.posy = posy;
this.width = 66;
this.height = 66;
this.image = createImage("./img/explosive baril.png");
this.heal = 100;
this.currentStat = 1;
}
}
var explosive = [
new baril(500, 500), new baril(800, 100), new baril(1000, 400)
]
console.log(explosive[0]);
console.log(explosive[1]);
var bullets = [];
var shotLightVisible = false;
var lastFireTime = 0;
var fireRate = 1000 / 10;
var shootIntervalId;
var barilExplosion = {
currentStat: false
};
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.posy += player.speed;
}
if (keys[40] && !keys[37] && !keys[39]) {
player.posy -= player.speed;
}
if (keys[37] && !keys[38] && !keys[40]) {
player.posx += player.speed;
}
if (keys[39] && !keys[38] && !keys[40]) {
player.posx -= player.speed;
}
if (keys[38] && keys[37]) {
player.posy += player.speedDiag;
player.posx += player.speedDiag;
}
if (keys[38] && keys[39]) {
player.posy += player.speedDiag;
player.posx -= player.speedDiag;
}
if (keys[40] && keys[37]) {
player.posy -= player.speedDiag;
player.posx += player.speedDiag;
}
if (keys[40] && keys[39]) {
player.posy -= player.speedDiag;
player.posx -= player.speedDiag;
}
if (keys[32]) {
alert(player.posy)
alert(explosive[0].posy)
}
if (keys[82]) {
reload();
}
updateAngle();
}
player.heal = 100
function detectCollision() {
function barilsSetups() {
for (var baril in explosive) {
if (explosive[baril].currentStat != 3) {
if (!explosive.hasOwnProperty(baril)) continue;
for (var i = 0; i < bullets.length; i++) {
var bullet = bullets[i];
if (explosive[baril].currentStat == 1) {
if (bullet.x >= explosive[baril].posx - player.posx &&
bullet.x < explosive[baril].posx + explosive[baril].width - player.posx &&
bullet.y >= explosive[baril].posy - player.posy &&
bullet.y < explosive[baril].posy + explosive[baril].height - player.posy) {
explosive[baril].heal -= player.damages;
explosive[baril].width -= 1;
explosive[baril].height -= 1;
explosive[baril].posx += 0.5;
explosive[baril].posy += 0.5;
bullets.splice(i, 1);
i--;
}
}
if (explosive[baril].heal <= 0) {
let barilBackup = baril
explosive[barilBackup].currentStat = 2;
barilExplosion = {
posx: explosive[barilBackup].posx,
posy: explosive[barilBackup].posy,
currentStat: true
}
setTimeout(() => {
explosive[barilBackup].image.src = "";
explosive[barilBackup].currentStat = 3;
}, 1000);
}
}
}
}
}
barilsSetups();
}
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);
if (player.reloading == false) {
ctx.drawImage(player.image, -player.width / 2, -player.height + 45 / 2, player.width, player.height);
} else {
ctx.drawImage(player.reloadingImage, -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 (let i = 0; i < explosive.length; i++) {
ctx.drawImage(explosive[i].image, explosive[i].posx - player.posx, explosive[i].posy - player.posy, explosive[i].width, explosive[i].height);
}
ctx.fillStyle = "rgba(" + String(255 - 2.55 * player.heal) + ", " + String(255 - (255 - 2.55 * player.heal)) + ", 0)";
ctx.fillRect((player.x - (player.width / 2) - 19) + ((40) - 0.52 * (player.heal / 1.3)), player.y + 40, player.heal / 1.3, 4);
document.getElementById("heal").style.width = String(20 + 3 * (player.heal)) + "px";
document.getElementById("heal").style.backgroundColor = ctx.fillStyle;
document.getElementById("healText").innerHTML = "hp: " + Math.round(player.heal);
if (player.heal <= 0) {
menu();
}
if (barilExplosion.currentStat == true) {
// animation d'explosion à particules...
barilExplosion.currentStat = false;
}
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 (Math.sqrt(Math.pow(bullet.x - player.x, 2) + Math.pow(bullet.y - player.y, 2)) >= 1000) {
bullets.splice(i, 1);
i--;
}
}
}
var bulletsNumber = 30;
var AK47Reloadsound = new Audio("./sounds/AK-47 reloading.mp3");
function reload() {
player.reloading = true;
document.getElementById("bullets").innerHTML = "ammo: reloading...";
AK47Reloadsound.play();
setTimeout(function () {
bulletsNumber = 30;
player.reloading = false;
document.getElementById("bullets").innerHTML = "ammo: " + bulletsNumber + "/30";
}, 3000)
}
document.addEventListener("mousedown", function () {
var currentTime = Date.now();
var timeSinceLastFire = currentTime - lastFireTime;
if (timeSinceLastFire >= fireRate) {
if (bulletsNumber > 0 && player.reloading == false) {
var AK47sound = new Audio("./sounds/AK-47.mp3");
AK47sound.play();
shotLightVisible = true;
setTimeout(function () {
shotLightVisible = false;
}, 50);
lastFireTime = currentTime;
var bulletSpeed = 14;
var dx = mouse.x - player.x;
var dy = mouse.y - player.y;
var bulletVX = bulletSpeed * Math.cos(Math.atan2(dy, dx));
var bulletVY = bulletSpeed * Math.sin(Math.atan2(dy, dx));
var bullet = {
x: player.x,
y: player.y,
vx: bulletVX,
vy: bulletVY
};
bullet.x += bullet.vx * 5;
bullet.y += bullet.vy * 5;
bullets.push(bullet);
lastFireTime = currentTime;
bulletsNumber -= 1
document.getElementById("bullets").innerHTML = "ammo: " + bulletsNumber + "/30";
} else if (bulletsNumber <= 0) {
if (player.reloading == false) {
reload();
}
}
}
clearInterval(shootIntervalId);
shootIntervalId = setInterval(function () {
var currentTime = Date.now();
var timeSinceLastFire = currentTime - lastFireTime;
if (timeSinceLastFire >= fireRate) {
if (bulletsNumber > 0 && player.reloading == false) {
var AK47sound = new Audio("./sounds/AK-47.mp3");
AK47sound.play();
shotLightVisible = true;
setTimeout(function () {
shotLightVisible = false;
}, 50);
lastFireTime = currentTime;
var bulletSpeed = 14;
var dx = mouse.x - player.x;
var dy = mouse.y - player.y;
var bulletVX = bulletSpeed * Math.cos(Math.atan2(dy, dx));
var bulletVY = bulletSpeed * Math.sin(Math.atan2(dy, dx));
var bullet = {
x: player.x,
y: player.y,
vx: bulletVX,
vy: bulletVY
};
bullet.x += bullet.vx * 5;
bullet.y += bullet.vy * 5;
bullets.push(bullet);
bulletsNumber -= 1
document.getElementById("bullets").innerHTML = "ammo: " + bulletsNumber + "/30";
} else if (bulletsNumber <= 0) {
if (player.reloading == false) {
reload();
}
}
}
}, fireRate);
});
document.addEventListener("mouseup", function () {
clearInterval(shootIntervalId);
});
function loop() {
update();
detectCollision();
draw();
requestAnimationFrame(loop);
}
loop();
Fais-moi un animation d'explosion à particule avec des fillrect à la place du ```// animation d'explosion à particules...```.