Итак, после ~ 6 часов попыток сделать эту работу и оторванных от идей, я здесь.
Это мой первый раз с JS и Phaser 3.16.2.
Я работаю над кодом Visual Studio, запускаю локальный сервер через подключаемый модуль 'live server'.
Предполагаемый правильный вывод: «Простая игра» и после этого файл значков..
Это странный король, потому что я не получаю никаких ошибок или предупреждений, но когда я запускаю файл index.html, файлы .js не выдают никаких результатов.
phaser.js находится в той же папке, что и файл game.js.
То, что я до сих пор пробовал:
- отладка кода в игре .Файл js (окно ошибки не определено).
- многократная проверка синтаксиса кода.
- проверка проблем на стороне сервера (все выполняется правильно).
- Я прочитал все подобные посты в Интернете.
- изменил несколько файлов изображений на случай, если что-то странное заблокировало изображение на экране.
- попытался запустить Chrome, край.
Я не очень знаком с JavaScript, поэтому я не знаю, какой еще путь можно решить, чтобы решить эту проблему.
Вот файлы на данный момент:
32744.jpg
phaser.js
index.html
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple Game</title>
<script>src="js/phaser.js"</script>
<script>src="js/game.js"</script>
</head>
<body>
<h1>Simple Game</h1>
<div id="content"></div>
</body>
</html>
game.js
var SimpleGame = (function() {
function SimpleGame() {
//create our phaser game
//800 width
//600 height
//Phaser.AUTO determines the renderer automatically (canvas,webgl)
// {preload:this.preload,create:this.create} -- function to call for our start game
this.game = new Phaser.Game(800,600,Phaser.AUTO,'content',{preload:this.preload,create:this.create});
};
SimpleGame.prototype.preload = function () {
//add our logo image to the assets class under the
//key->logo, we are also setting the background colour
//so its the same as the background colour in the image
this.game.load.image('logo',"assets/32744.jpg");
this.game.stage.backgroundColor=0xB20059;
};
SimpleGame.prototype.create = function () {
//add the logo sprite to the game, position it in the
//center of the screen,and set the anchor to the center of
//the image so its centered properly.Theres a lot of centering in that last sentece
var logo = this.game.add.sprite(this.game.world.centerX,this.game.world.centerY,'logo');
logo.anchor.setTo(0.5,0.5);
};
return SimpleGame;
});
//when the page has finished loading,create our game
global.window.onload = function() {
var game = new SimpleGame();
};