I recently completed the Phaser Tutorial and set up my project with an index.html file and a game.js file, along with downloading the phaser.min.js file. All files are located in the same folder.
Although I have connected everything correctly and the output is functioning properly, Phaser seems to no longer recognize any changes made to my game.js file.
Below is the current content of my game.js file:
var config = {
type: Phaser.AUTO,
width: 640,
height: 360,
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload(){
this.load.image('boo', 'assets/pics/boo.png');
}
function create(){
this.add.image(0, 0, 'boo');
}
function update(){
}
The structure of my index.html file is as follows:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UFT-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title> My very 1st game </title>
<script type = "text/javascript" src = "phaser.min.js"></script>
<script type = "text/javascript" src = "game.js"></script>
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
</body>
</html>
When including the game.js file, the game runs successfully. However, removing it from the head section causes the game to stop working, which is the expected behavior.
If I make changes, such as modifying width: 640 to width: 200, and then refresh the localhost-page, the change does not take effect. Upon inspecting the page, the old configuration with width: 360 is still being used even though it has been updated in the file.
Strangely, copying the code directly from the game.js file into the body of index.html applies the changes, but including the file itself does not work.
I am using XAMPP with the Apache Webserver. Any suggestions on what steps I can take to troubleshoot this issue would be greatly appreciated.