时间戳

首页 > 解决方案 > Phaser3 教程 html 页面未加载

javascript - Phaser3 教程 html 页面未加载

问题描述

第一次尝试Phaser 3。“制作您的第一个 Phaser 3 游戏”教程中的每个 html 页面都无法加载。特别是，本教程显示了加载了蓝色“天空”图像的 part3.html 页面。但是当我打开它时，它什么也没加载，只是空白页。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>Making your first Phaser 3 Game - Part 3</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.image('sky', 'C:\wamp64\www\assets\sky.png');
        this.load.image('ground', 'C:\wamp64\www\assets\platform.png');
        this.load.image('star', 'C:\wamp64\www\assets\star.png');
        this.load.image('bomb', 'C:\wamp64\www\assets\bomb.png');
        this.load.spritesheet('dude', 'C:\wamp64\www\assets\dude.png', { frameWidth: 32, frameHeight: 48 });
    }

    function create ()
    {
        this.add.image(400, 300, 'sky');
    }

    function update ()
    {
    }

</script>

</body>
</html>

我只更改了预加载功能中的资产位置。尝试了 windows 和 linux 文件路径的绝对和相对路径。依然没有。

奇怪的是，“phaser 入门”中的 index.html 页面运行良好。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>

    <script>
    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.setBaseURL('http://labs.phaser.io');

        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    }

    function create ()
    {
        this.add.image(400, 300, 'sky');

        var particles = this.add.particles('red');

        var emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

        var logo = this.physics.add.image(400, 100, 'logo');

        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        emitter.startFollow(logo);
    }
    </script>

</body>
</html>

我有点怀疑这与 html 标头部分有关，所以我复制了索引的标头部分并粘贴在第 3 部分。然后part3这次没有显示任何空白页面，而是显示黑屏，中间有绿色框。

我应该在原始 part3.html 代码中修复什么？移相器的正确文件路径是什么？

标签： javascriptphaser-framework

解决方案

推荐阅读