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
};
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;
}
function createBlock(x, y, w, h, blockMargin = 8) {
if (keys[37]) {
if (player.x - (player.headWidth / 2) - blockMargin <= x + w &&
player.x + player.headWidth >= x + w &&
player.y >= y - blockMargin &&
player.y <= y + h + blockMargin) {
player.positionX -= player.speed;
}
}
if (keys[38]) {
if (player.y - (player.headHeight / 2) - blockMargin <= y + h &&
player.y + player.headHeight >= y + h &&
player.x >= x - blockMargin &&
player.x <= x + w + blockMargin) {
player.positionY -= player.speed;
}
}
if (keys[39]) {
if (player.x + (player.headWidth / 2) + blockMargin >= x &&
player.x + player.headWidth <= x + w &&
player.y >= y - blockMargin &&
player.y <= y + h + blockMargin) {
player.positionX += player.speed;
}
}
if (keys[40]) {
if (player.y + (player.headHeight / 2) + blockMargin >= y &&
player.y + player.headHeight <= y + h &&
player.x >= x - blockMargin &&
player.x <= x + w + blockMargin) {
player.positionY += player.speed;
}
}
}
class baril {
positionX;
positionY;
constructor(positionX, positionY) {
this.positionX = positionX;
this.positionY = positionY;
this.width = 66;
this.height = 66;
this.image = createImage("./img/explosive baril.png");
this.heal = 100;
this.currentStat = 1;
}
}
function updateAngle() {
var dx = mouse.x - player.x;
var dy = mouse.y - player.y;
player.angle = Math.atan2(dy, dx);
player.angle += Math.PI / 2;
}
var gameIsRunning = false
var bullets = [];
var shotLightVisible = false;
var lastFireTime = 0;
var fireRate = 1000 / 10;
var shootIntervalId;
var barilExplosion = {
currentStat: false
};
var opacity;
var particlesNumber;
var particles;
var radiusMax;
var explosionFramesNumber = 30;
var explosionFramesInterval = 50;
var explosionFrames;
var explosionSound = new Audio("./sounds/barils explosion.mp3");
var bulletsNumber = 30;
var AK47Reloadsound = new Audio("./sounds/AK-47 reloading.mp3");
var explosive = [
new baril(500, 500), new baril(800, 100), new baril(1000, 400), new baril(1500, 1000)
]
var player = {
x: canvas.width / 2,
y: canvas.height / 2,
positionX: 0,
positionY: 0,
angle: 0,
width: 41,
height: 97,
headWidth: 41,
headHeight: 41,
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")
};
function dataInit() {
bullets = [];
shotLightVisible = false;
lastFireTime = 0;
fireRate = 1000 / 10;
shootIntervalId;
barilExplosion = {
currentStat: false
};
opacity;
particlesNumber;
particles;
radiusMax;
explosionFramesNumber = 30;
explosionFramesInterval = 50;
explosionFrames;
explosionSound = new Audio("./sounds/barils explosion.mp3");
bulletsNumber = 30;
AK47Reloadsound = new Audio("./sounds/AK-47 reloading.mp3");
explosive = [
new baril(500, 500), new baril(800, 100), new baril(1000, 400), new baril(1500, 1000)
]
player = {
x: canvas.width / 2,
y: canvas.height / 2,
positionX: 0,
positionY: 0,
angle: 0,
width: 41,
height: 97,
headWidth: 41,
headHeight: 41,
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")
};
}
function play() {
if (!gameIsRunning) {
gameIsRunning = true;
dataInit();
} else {
gameIsRunning = false;
}
}
function update() {
if (keys[38] && !keys[37] && !keys[39]) {
player.positionY += player.speed;
}
if (keys[40] && !keys[37] && !keys[39]) {
player.positionY -= player.speed;
}
if (keys[37] && !keys[38] && !keys[40]) {
player.positionX += player.speed;
}
if (keys[39] && !keys[38] && !keys[40]) {
player.positionX -= player.speed;
}
if (keys[38] && keys[37]) {
player.positionY += player.speedDiag;
player.positionX += player.speedDiag;
}
if (keys[38] && keys[39]) {
player.positionY += player.speedDiag;
player.positionX -= player.speedDiag;
}
if (keys[40] && keys[37]) {
player.positionY -= player.speedDiag;
player.positionX += player.speedDiag;
}
if (keys[40] && keys[39]) {
player.positionY -= player.speedDiag;
player.positionX -= player.speedDiag;
}
if (keys[82]) {
reload();
}
updateAngle();
}
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 && !barilExplosion.currentStat) {
if (bullet.x >= explosive[baril].positionX - player.positionX &&
bullet.x < explosive[baril].positionX + explosive[baril].width - player.positionX &&
bullet.y >= explosive[baril].positionY - player.positionY &&
bullet.y < explosive[baril].positionY + explosive[baril].height - player.positionY) {
explosive[baril].heal -= player.damages;
explosive[baril].width -= 1;
explosive[baril].height -= 1;
explosive[baril].positionX += 0.5;
explosive[baril].positionY += 0.5;
bullets.splice(i, 1);
i--;
}
}
if (explosive[baril].heal <= 0) {
var barilBackup = baril
explosive[barilBackup].currentStat = 2;
img = new Image();
img.onload = function () {
loop();
}
img.src = "";
explosive[barilBackup].image = img;
barilExplosion = {
positionX: explosive[barilBackup].positionX,
positionY: explosive[barilBackup].positionY,
}
explosionSound.play();
var maxDistance = 180;
var px = barilExplosion.positionX + explosive[0].width / 2 - player.positionX
var py = barilExplosion.positionY + explosive[0].height / 2 - player.positionY
if (
player.x >= (px - maxDistance) &&
player.x + player.width < (px + explosive[0].width + maxDistance) &&
player.y >= (py - maxDistance) &&
player.y + player.height < (py + explosive[0].height + maxDistance)
) {
player.heal -= 80;
}
explosionFrames = setInterval(() => {
particlesNumber = 360;
particles = [];
for (var i = 0; i < particlesNumber; i++) {
radiusMax = 1000 / i
particles.push({
radius: Math.random() * radiusMax,
})
particles[i].positionX = particles[i].radius * Math.cos(i);
particles[i].positionY = particles[i].radius * Math.sin(i);
particles[i].red = (Math.random() * 100) + 155
particles[i].green = (Math.random() * 100)
particles[i].color = "rgba(" + particles[i].red + ", " + particles[i].green + ", 0, " + particles[i].radius / radiusMax; + ")"
}
}, explosionFramesInterval);
setTimeout(() => {
clearInterval(explosionFrames);
}, 10 * explosionFramesNumber);
explosive[barilBackup].currentStat = 3;
}
}
}
}
}
barilsSetups();
}
function draw() {
if (player.heal < 100) {
player.heal += 0.007;
}
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(player.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 (var i = 0; i < explosive.length; i++) {
ctx.drawImage(explosive[i].image, explosive[i].positionX - player.positionX, explosive[i].positionY - player.positionY, explosive[i].width, explosive[i].height);
if (explosive[i].currentStat == 1) createBlock(explosive[i].positionX - player.positionX, explosive[i].positionY - player.positionY, 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();
}
for (var i = 0; i < particlesNumber; i++) {
ctx.fillStyle = particles[i].color;
ctx.fillRect(barilExplosion.positionX + explosive[0].width / 2 + particles[i].positionX - player.positionX, barilExplosion.positionY + explosive[0].height / 2 + particles[i].positionY - player.positionY, 8, 8);
setTimeout(() => {
particlesNumber = 0;
particles = [];
}, explosionFramesInterval);
}
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--;
}
}
}
function reload() {
if (bulletsNumber != 30) {
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)
}
}
function shoot() {
document.addEventListener("mousedown", function () {
if (gameIsRunning) {
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 () {
if (gameIsRunning) clearInterval(shootIntervalId);
});
}
function loop() {
if (gameIsRunning) {
shoot();
update();
detectCollision();
draw();
}
requestAnimationFrame(loop);
}
loop();Pourquoi dataInit() (ce problème ne survient pas sans l'appel de cette fonction) rends le jeu moins fluide, avec des coups de lag et un animation qui déconne ? Le joueur est plus rapide, il avance 50px par 50px...
