Pour ajouter un loader (ou indicateur de chargement) en JS dans un jeu HTML avec un `canvas`, voici une méthode possible :comment ajouter un loader en js dans un jeu html avec un `canvas` ?
Voici comment ajouter un loader en JS dans un jeu HTML avec un canvas :@Fofobot 🤖,
comment ajouter un loader en js dans un jeu html avec un `canvas` ?
Voici comment ajouter un loader en JS dans un jeu HTML avec un canvas :
1. Créez un élément `div` dans votre HTML pour contenir le loader :
```html
<div id="loader"></div>
```
2. Créez un style CSS pour votre loader :
```css
#loader {
width: 100px;
height: 100px;
border: 10px solid #ccc;
border-top-color: #f00;
border-radius: 50%;
animation: spin 1s infinite linear;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
```
3. Dans votre fichier JS, créez une fonction qui affiche le loader :
```js
function showLoader() {
const loader = document.getElementById('loader');
loader.style.display = 'block';
loader.style.top = `${canvas.offsetTop + canvas.height / 2 - loader.offsetHeight / 2}px`;
loader.style.left = `${canvas.offsetLeft + canvas.width / 2 - loader.offsetWidth / 2}px`;
}
```
Il est important d'ajuster la position du loader en fonction de la position du canvas.
4. Dans votre jeu, appelez la fonction avant le chargement des ressources :
```js
showLoader();
// Charger les ressources (images, sons, etc.) ici...
// Lorsque toutes les ressources sont chargées :
hideLoader();
```
5. Enfin, créez une fonction `hideLoader` qui masque le loader :
```js
function hideLoader() {
document.getElementById('loader').style.display = 'none';
}
```
Voilà, vous avez maintenant un loader qui s'affiche pendant le chargement de vos ressources !
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
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: -1.6,
speedDiag: -(1.6 / 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")
};
var explosive = [
{
posx: 500,
posy: 500,
width: 66,
height: 66,
image: createImage("./img/explosive baril.png"),
heal: 100,
currentState: 1
},
{
posx: 800,
posy: 100,
width: 66,
height: 66,
image: createImage("./img/explosive baril.png"),
heal: 100,
currentState: 1
}
]
var bullets = [];
var shotLightVisible = false;
var lastFireTime = 0;
var fireRate = 1000 / 10;
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.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[82]) {
reload();
}
updateAngle();
}
player.heal = 100
function detectCollision() {
function barilsSetups() {
for (var baril in explosive) {
if (!explosive.hasOwnProperty(baril)) continue;
for (var i = 0; i < bullets.length; i++) {
var bullet = bullets[i];
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;
if (explosive[baril].heal <= 0) {
let barilBackup = baril
explosive[barilBackup].currentState = 2;
explosive[barilBackup].image = createImage("./img/explosing baril 1.png");
explosive[barilBackup].posx -= (400 - explosive[barilBackup].width) / 2;
explosive[barilBackup].posy -= (400 - explosive[barilBackup].height) / 2;
explosive[barilBackup].width = 400;
explosive[barilBackup].height = 400;
setTimeout(() => {
explosive[barilBackup].image = createImage("");
}, 2000);
}
if (explosive[baril].currentState == 1) {
bullets.splice(i, 1);
i--;
}
}
}
}
}
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);
if (player.heal <= 0) {
menu();
}
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;
AK47Reloadsound.play();
setTimeout(function () {
bulletsNumber = 30;
player.reloading = false;
}, 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
} 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
} else if (bulletsNumber <= 0) {
if (player.reloading == false) {
reload();
}
}
}
}, fireRate);
});
document.addEventListener("mouseup", function () {
clearInterval(shootIntervalId);
});
function loop() {
update();
detectCollision();
draw();
requestAnimationFrame(loop);
}
loop();
Il est possible que la vitesse de déplacement de votre personnage soit affectée par une variable non initialisée ou modifiée par erreur lorsqu'un baril explose. Par exemple, si vous avez une variable `speed` définie pour la vitesse de votre personnage, celle-ci pourrait être modifiée par erreur lorsque vous détectez qu'un baril explose et que vous mettez à jour sa position.JavaScript:var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); 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: -1.6, speedDiag: -(1.6 / 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") }; var explosive = [ { posx: 500, posy: 500, width: 66, height: 66, image: createImage("./img/explosive baril.png"), heal: 100, currentState: 1 }, { posx: 800, posy: 100, width: 66, height: 66, image: createImage("./img/explosive baril.png"), heal: 100, currentState: 1 } ] var bullets = []; var shotLightVisible = false; var lastFireTime = 0; var fireRate = 1000 / 10; 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.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[82]) { reload(); } updateAngle(); } player.heal = 100 function detectCollision() { function barilsSetups() { for (var baril in explosive) { if (!explosive.hasOwnProperty(baril)) continue; for (var i = 0; i < bullets.length; i++) { var bullet = bullets[i]; 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; if (explosive[baril].heal <= 0) { let barilBackup = baril explosive[barilBackup].currentState = 2; explosive[barilBackup].image = createImage("./img/explosing baril 1.png"); explosive[barilBackup].posx -= (400 - explosive[barilBackup].width) / 2; explosive[barilBackup].posy -= (400 - explosive[barilBackup].height) / 2; explosive[barilBackup].width = 400; explosive[barilBackup].height = 400; setTimeout(() => { explosive[barilBackup].image = createImage(""); }, 2000); } if (explosive[baril].currentState == 1) { bullets.splice(i, 1); i--; } } } } } 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); if (player.heal <= 0) { menu(); } 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; AK47Reloadsound.play(); setTimeout(function () { bulletsNumber = 30; player.reloading = false; }, 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 } 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 } else if (bulletsNumber <= 0) { if (player.reloading == false) { reload(); } } } }, fireRate); }); document.addEventListener("mouseup", function () { clearInterval(shootIntervalId); }); function loop() { update(); detectCollision(); draw(); requestAnimationFrame(loop); } loop();
Pourquoi l'explosion des barils me rends super rapide ?
Trouves-moi le problèmeIl est possible que la vitesse de déplacement de votre personnage soit affectée par une variable non initialisée ou modifiée par erreur lorsqu'un baril explose. Par exemple, si vous avez une variable `speed` définie pour la vitesse de votre personnage, celle-ci pourrait être modifiée par erreur lorsque vous détectez qu'un baril explose et que vous mettez à jour sa position.
Pour éviter cela, vous pouvez vérifier de manière rigoureuse toutes les variables que vous utilisez pour la vitesse de votre personnage et pour la vitesse des barils lorsqu'ils explosent.
Vous pourriez également mettre en place une logique plus robuste pour la gestion de la collision avec les barils. Par exemple, vous pouvez utiliser une approche basée sur la distance pour détecter si un bullet est suffisamment proche du baril pour causer une explosion, plutôt que de régler la collision en fonction de la position du personnage.
Enfin, si vous souhaitez une aide plus spécifique, n'hésitez pas à fournir davantage de détails sur votre code et sur les modifications que vous avez apportées lors de l'explosion des barils.
Je ne peux pas trouver le problème dans votre code sans plus d'informations sur le comportement exact que vous avez observé et les erreurs que vous rencontrez.Trouves-moi le problème
Comme tu me l'a proposé, j'ai minutieusement enquêté sur ce mystère et j'ai découvert ce qui en est la cause.Je ne peux pas trouver le problème dans votre code sans plus d'informations sur le comportement exact que vous avez observé et les erreurs que vous rencontrez.
Cependant, voici quelques conseils pour déboguer votre code :
1. Vérifiez que toutes les variables sont initialisées correctement et que les fonctions sont appelées dans le bon ordre. Si une variable est undefined ou définie à la mauvaise valeur, cela peut causer des problèmes.
2. Utilisez la console de votre navigateur (par exemple, l'onglet Console de Chrome Developer Tools ou Firebug) pour voir s'il y a des erreurs dans votre code. Les erreurs dans la console peuvent vous aider à déterminer ce qui ne fonctionne pas.
3. Ajoutez des points de contrôle (`console.log()`) pour savoir où votre code est en train de planter ou de ne pas fonctionner comme prévu.
4. Réduisez le code autant que possible en isolant le problème dans une petite partie du code. Il est plus facile de trouver des erreurs dans un petit morceau de code que dans un grand code.
5. Utilisez des tests pour vérifier que chaque partie de votre code fonctionne correctement. Les tests vous permettent de vérifier rapidement et facilement que votre code répond aux exigences spécifiées.
J'espère que cela vous aidera
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
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: -1.6,
speedDiag: -(1.6 / 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")
};
var explosive = [
{
posx: 500,
posy: 500,
width: 66,
height: 66,
image: createImage("./img/explosive baril.png"),
heal: 100,
currentState: 1
},
{
posx: 800,
posy: 100,
width: 66,
height: 66,
image: createImage("./img/explosive baril.png"),
heal: 100,
currentState: 1
}
]
var bullets = [];
var shotLightVisible = false;
var lastFireTime = 0;
var fireRate = 1000 / 10;
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.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[82]) {
reload();
}
if (keys[32]) {
console.log(player.speed);
}
updateAngle();
}
player.heal = 100
function detectCollision() {
function barilsSetups() {
for (var baril in explosive) {
if (explosive[baril].currentState != 3) {
if (!explosive.hasOwnProperty(baril)) continue;
for (var i = 0; i < bullets.length; i++) {
var bullet = bullets[i];
if (explosive[baril].currentState == 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;
bullets.splice(i, 1);
i--;
}
}
if (explosive[baril].heal <= 0) {
let barilBackup = baril
explosive[barilBackup].currentState = 2;
explosive[barilBackup].image = createImage("./img/explosing baril 1.png");
explosive[barilBackup].posx -= (400 - explosive[barilBackup].width) / 2;
explosive[barilBackup].posy -= (400 - explosive[barilBackup].height) / 2;
explosive[barilBackup].width = 400;
explosive[barilBackup].height = 400;
setTimeout(() => {
explosive[barilBackup].image = createImage("");
explosive[barilBackup].currentState = 3;
}, 2000);
}
}
}
}
}
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);
if (player.heal <= 0) {
menu();
}
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;
AK47Reloadsound.play();
setTimeout(function () {
bulletsNumber = 30;
player.reloading = false;
}, 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
} 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
} else if (bulletsNumber <= 0) {
if (player.reloading == false) {
reload();
}
}
}
}, fireRate);
});
document.addEventListener("mouseup", function () {
clearInterval(shootIntervalId);
});
function loop() {
update();
detectCollision();
draw();
requestAnimationFrame(loop);
}
loop();
if (keys[32]) {
// si la touche espace est pressée...
console.log("touche espace pressée !")
}
explosive[barilBackup].image = createImage("./img/explosing baril 1.png");
🚫 Alerte AdBlock !
Vous avez activé le mode Ninja, et il cache toutes les pubs ! 😆 Un petit coup de pouce pour notre site serait super apprécié si vous pouvez le désactiver. 🙏