I’m new to JavaScript and I’m trying to create a simple Google dino game but I have been facing problems in that I can’t see the dinosaur nor the cacti. Upon opening the live server for the HTML file and get into the new window for the game, I clicked inspect on the window to see what exactly the error was at. The errors are found on the lines in which I use context.drawImage as shown below:
//dino
velocityY += gravity; //velocity of jumping upwards weighed down with gravity
dino.y = Math.min(dino.y + velocityY, dinoY); // applies gravity to current dino.y, so that dino doesn't exceed ground level
context.drawImage(dinoImg, dino.x, dino.y, dino.width, dino.height);
//cactus
for (let i = 0; i <= cactusArray.length; i++) {
cactusArray[i].x += velocityX;
context.drawImage(cactusArray[i].img, cactusArray[i].x, cactusArray[i].y, cactusArray[i].width, cactusArray[i].height);
if (detectCollision(dino, cactusArray[i])) {
gameOver = true;
dinoImg.src = "./img/dino-dead.png";
dinoImg.onload = function() {
context.drawImage(dinoImg, dino.x, dino.y, dino.width, dino.height);
}
}
}
In addition, these errors only occurred in function update(){…}
I have already ensured that all the images are placed correctly into the same folder. Moreover, I placed console.log(“Dino image loaded”); the line before context.drawImage. Even then, the message was not logged, so I do believe that there might be an issue with the image path or loading process.