I am trying to learn Phaser.js, and I don’t have access to node.js right now so I am trying to use the CDN link, but when I try to load an image, it doesn’t work.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phaser.js Application</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.85.2/phaser.js" integrity="sha512-cNQbPGzsFk6XzoLfFD66Ra1G/gBKuNksLjEtUFmsRG6+uvJWsd6WVjUwgPTyZUKY/+L/PvIeV/r0laALxt6ttA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
JavaScript:
const config = {
type: Phaser.AUTO,
width: 600,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
const game = new Phaser.Game(config);
function preload() {
this.load.image('player', 'assets/player.png'); // Updated image path
}
function create() {
this.add.circle(75,75, 50, 0xff0000);
this.add.image(300, 300, 'player');
}
function update() {
}
I don’t know I am doing wrong, could anyone help? I know for a fact that the file path is correct.