I've recently delved into a JavaScript canvas project, and a few days ago I began the coding process. I have enemies that are generated with random points on the canvas and move towards them. These enemies are created by running the createEnemy() function, which generates an object with the enemy's data and stores it in the "enemies" array. Everything seems to be working fine until my FPS drops significantly after some time. I'm baffled as to why this is happening. Here's a snippet of my code:
var c = document.getElementById("canv");
var context = c.getContext("2d");
var mouseX, mouseY;
const fpsTime = [];
var fps;
var enemies = []
var speed = 2
c.width = window.innerWidth;
c.height = window.innerHeight;
document.addEventListener("mousemove", e => { mouseX = e.pageX; mouseY = e.pageY;});
function getEnemies() {
return enemies;
}
function drawCharacter(x, y) {
context.clearRect(0, 0, c.width, c.height);
context.fillStyle = 'red';
context.fillRect(x, y,50,60);
context.save();
context.font = "30px Arial";
}
function getCurrentMouse() {
return {"x": mouseX, "y": mouseY}
}
function drawPoint(x, y) {
context.fillStyle = 'red';
context.fillRect(x, y,10,10);
context.save();
}
function createEnemy(name) {
var enemy = {
name: name,
didCompletePoint: true,
targetX: 0,
targetY: 0,
currentX: Math.floor(Math.random() * (+window.innerWidth + 1 - +0)) + +0,
currentY: Math.floor(Math.random() * (+window.innerHeight + 1 - +0)) + +0,
generatePoint: function() {
this.targetX = Math.floor(Math.random() * (+ window.innerWidth + 1 - +0)) + +0
this.targetY = Math.floor(Math.random() * (+ window.innerHeight + 1 - +0)) + +0
return [this.targetX, this.targetY];
},
draw: function() {
context.fillStyle = 'black';
context.fillRect(this.currentX, this.currentY,60,60);
context.save();
drawPoint(this.targetX, this.targetY)
context.font = "30px Arial";
}
};
enemies.push(enemy)
return enemy
}
var enemy = createEnemy("tak")
var enemy1 = createEnemy("tak")
var enemy2 = createEnemy("tak")
var enemy3 = createEnemy("tak")
var enemy5 = createEnemy("tak")
function drawFrame() {
document.getElementById("fps").innerHTML = "FPS: " + fps;
drawCharacter(getCurrentMouse().x, getCurrentMouse().y)
getEnemies().forEach((en, index) => {
if(en.didCompletePoint) {
en.didCompletePoint = false;
en.generatePoint()
}else {
if((en.targetX === en.currentX) && (en.targetY === en.currentY)) {
en.didCompletePoint = true;
}
else {
//vertical movement
if (en.targetY > en.currentY){
en.currentY++
}
else if (en.targetY < en.currentY) {
en.currentY--
}
//side movement
// going right
if (en.targetX > en.currentX) {
en.currentX++
}
// going left
else if (en.targetX < en.currentX) {
en.currentX--
}
}
}
en.draw()
})
}
function startLoop() {
window.requestAnimationFrame(() => {
const p = performance.now();
while (fpsTime.length > 0 && fpsTime[0] <= p - 1000) {
fpsTime.shift();
}
fpsTime.push(p);
fps = fpsTime.length;
drawFrame()
startLoop();
});
}
startLoop();<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
</style>
</head>
<body>
<p id="fps" style="font-size: 30px; font-family: 'Calibri Light', serif; position: absolute; right: 2%; top: 0%;"></p>
<canvas id="canv" style="margin: 0;"></canvas>
</body>
<script src="script.js"></script>
</html>