I am making a game with JS as the main language, I am experiencing no errors or issues on F12 console, but my images don’t seem to load visually, when I open the F12 menu, under sources they are there next to my JS code and html index file. Code is further below, I’m using express, node.js, tensorflow.js, JS, and html. Console is empty, all in same directory. (local) Apologies for the large pieces of code, the image loading is spread across the whole code.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="640" height="480"></canvas>
<script src="script.js"></script>
</body>
</html>
JS
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const canvasWidth = 640;
const canvasHeight = 480;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
// Load images
const playerImage = new Image();
playerImage.src = 'player.png';
const projectileImage = new Image();
projectileImage.src = 'projectile.png';
const platformImage = new Image();
platformImage.src = 'platform.png';
let platforms = [154, 204];
function checkCollisions() {
detectPlayerCollisions(player1, player2);
projectiles.forEach(projectile => {
if (projectile.isPlayer1) {
if (isColliding(projectile, player2)) {
player2.takeDamage(10); // Example damage; adjust as needed
projectiles.splice(projectiles.indexOf(projectile), 1);
}
} else {
if (isColliding(projectile, player1)) {Stop
player1.takeDamage(10);Stop
projectiles.splice(projectiles.indexOf(projectile), 1);
}
}
});
}
function isColliding(rect1, rect2) {
return (
rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.y + rect1.height > rect2.y
);
}
// Detect collision between two players
function detectPlayerCollisions(playerA, playerB) {
if (isColliding(playerA.hitbox, playerB.hitbox)) {
playerA.takeDamage(5); // Example damage; adjust as needed
playerB.takeDamage(5); // Example damage; adjust as needed
}
}
class Player {
constructor(x, y, isPlayer1) {
this.x = x;
this.y = y;
this.width = 32;
this.height = 32;
this.speed = 3;
this.gravity = 0.5;
this.velocity = { x: 0, y: 0 };
this.hitbox = {
x: this.x,
y: this.y,
width: this.width,
height: this.height,
};
this.isPlayer1 = isPlayer1;
this.isJumping = false;
this.jumpForce = 8;
this.health = 100;
}
takeDamage(amount) {
this.health -= amount;
}
moveLeft() {
this.velocity.x = -this.speed;
}
moveRight() {
this.velocity.x = this.speed;
}
stop() {
this.velocity.x = 0;
}
jump() {
if (!this.isJumping) {
this.isJumping = true;
this.velocity.y = -this.jumpForce;
}
}
shoot() {
const projectile = new Projectile(this.x + this.width / 2, this.y, this.isPlayer1);
projectiles.push(projectile);
}
update(deltaTime) {
this.velocity.y += this.gravity * deltaTime;
this.x += this.velocity.x * deltaTime;
this.y += this.velocity.y * deltaTime;
// Update hitbox position
this.hitbox.x = this.x;
this.hitbox.y = this.y;
}
draw() {
if (playerImage.complete) {
ctx.drawImage(playerImage, this.x, this.y, this.width, this.height);
} else {
ctx.fillRect(this.x, this.y, this.width, this.height); // Draw rectangle as placeholder
}
}
}
class Projectile {
constructor(x, y, isPlayer1) {
this.x = x;
this.y = y;
this.width = 8;
this.height = 8;
this.speed = 5;
this.isPlayer1 = isPlayer1;
}
update() {
if (this.isPlayer1) {
this.x += this.speed;
} else {
this.x -= this.speed;
}
}
draw() {
if (projectileImage.complete) {
ctx.drawImage(projectileImage, this.x, this.y, this.width, this.height);
} else {
ctx.fillRect(this.x, this.y, this.width, this.height); // Draw rectangle as placeholder
}
}
}
// Create player and platform objects
const player1 = new Player(32, canvas.height - 32, true);
const player2 = new Player(canvas.width - 64, canvas.height - 32, false);
let projectiles = [];
// Input handling
let keysPressed = [];
window.addEventListener('keydown', (event) => {
keysPressed.push(event.key);
});
window.addEventListener('keyup', (event) => {
const index = keysPressed.indexOf(event.key);
if (index !== -1) {
keysPressed.splice(index, 1);
}
});
// Function to update game state and send to API
function updateGameState() {
fetch('http://localhost:3000/update-players', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
players: [
{ id: 1, x: player1.x, y: player1.y, health: player1.health },
{ id: 2, x: player2.x, y: player2.y, health: player2.health }
]
})
});
}
// Function to sync projectiles with API
function syncProjectiles() {
fetch('http://localhost:3000/add-projectiles', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
projectiles: projectiles.map(p => ({ x: p.x, y: p.y, isPlayer1: p.isPlayer1 }))
})
});
}
function gameLoop(currentTime) {
const deltaTime = (currentTime - previousTime) / 10000;
previousTime = currentTime;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// Player 1 controls
if (keysPressed.includes('w')) {
player1.jump();
}
if (keysPressed.includes('a')) {
player1.moveLeft();
}
if (keysPressed.includes('d')) {
player1.moveRight();
}
if (keysPressed.includes(' ')) {
player1.shoot();
}
// Update proj and players
player1.update(deltaTime);
player1.draw();
player2.update(deltaTime);
player2.draw();
for (let i = 0; i < projectiles.length; i++) {
projectiles[i].update();
projectiles[i].draw();
}
checkCollisions();
// Update game for API
updateGameState();
syncProjectiles();
requestAnimationFrame(gameLoop);
}
let previousTime = 0;
requestAnimationFrame(gameLoop);
I tried searching for similar issues, reformatting and even rewriting the code entirely, I’m tired of looking and want a hand, any takers?