2025-11-03

• 所用图片资源

  
  bomb.jpg

star.jpg dude.png ground.png sky.png

• 参考官方网站
  https://phaser.io/tutorials/making-your-first-phaser-3-game-chinese/part2
• 完整代码

import React, { useEffect, useRef } from 'react';
import { observer } from 'mobx-react';
import Phaser from 'phaser';

const Demo = () => {
    const gameContainerRef = useRef(null);
    let platforms;
    let player;
    let cursors;
    let stars;
    let score = 0;
    let scoreText;
    let bombs
    let gameOver = false;

    function preload() {
        this.load.image('sky', '/demo/sky.png') // 文件保存路径：public/demo/sky.png
        this.load.image('ground', '/demo/ground.png')
        this.load.image('star', '/demo/star.jpg')
        this.load.image('bomb', '/demo/bomb.jpg')
        this.load.spritesheet('dude',
            '/demo/dude.png',
            { frameWidth: 32, frameHeight: 48 }
        );
    }

    function collectStar(player, star) {
        star.disableBody(true, true);
        score += 10;
        scoreText.setText('Score: ' + score);
        if (stars.countActive(true) === 0) {
            stars.children.iterate(function (child) {
                child.enableBody(true, child.x, 0, true, true);

            });
            var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);
            var bomb = bombs.create(x, 16, 'bomb');
            bomb.setBounce(1);
            bomb.setCollideWorldBounds(true);
            bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);

        }
    }

    function hitBomb(player, bomb) {
        this.physics.pause();
        player.setTint(0xff0000);
        player.anims.play('turn');
        gameOver = true;
    }

    function create() {
        this.add.image(0, 0, 'sky').setOrigin(0, 0)
        // 平台
        platforms = this.physics.add.staticGroup();
        platforms.create(400, 568, 'ground').setScale(2).refreshBody();
        platforms.create(600, 400, 'ground');
        platforms.create(50, 250, 'ground');
        platforms.create(750, 220, 'ground');
        // 玩家
        player = this.physics.add.sprite(100, 450, 'dude');
        player.setBounce(0.2);
        player.setCollideWorldBounds(true);
        this.anims.create({
            key: 'left',
            frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
            frameRate: 10,
            repeat: -1
        });
        this.anims.create({
            key: 'turn',
            frames: [{ key: 'dude', frame: 4 }],
            frameRate: 20
        });
        this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
            frameRate: 10,
            repeat: -1
        });
        player.body.setGravityY(300);
        this.physics.add.collider(player, platforms);

        // 星星
        stars = this.physics.add.group({
            key: 'star',
            repeat: 11,
            setXY: { x: 12, y: 0, stepX: 70 }
        });

        stars.children.iterate(function (child) {
            child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
        });
        this.physics.add.collider(stars, platforms);
        this.physics.add.overlap(player, stars, collectStar, null, this);

        // 记分
        scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

        // 炸弹
        bombs = this.physics.add.group();
        this.physics.add.collider(bombs, platforms);
        this.physics.add.collider(player, bombs, hitBomb, null, this);

    }

    function update() {
        cursors = this.input.keyboard.createCursorKeys();
        if (cursors.left.isDown) {
            player.setVelocityX(-160);
            player.anims.play('left', true);
        } else if (cursors.right.isDown) {
            player.setVelocityX(160);
            player.anims.play('right', true);
        } else {
            player.setVelocityX(0);
            player.anims.play('turn');
        }

        if (cursors.up.isDown && player.body.touching.down) {
            player.setVelocityY(-500);
        }
    }

    useEffect(() => {
        const config = {
            type: Phaser.AUTO,
            width: 800,
            height: 600,
            scene: {
                preload: preload,
                create: create,
                update: update
            },
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 300 },
                    debug: false
                }
            },
            parent: gameContainerRef.current
        };
        const game = new Phaser.Game(config);

        return () => {
            game.destroy(true);
        }
    }, [])

    return (
        <div ref={gameContainerRef} style={{ border: '1px solid #ccc' }} />
    )
}
export default observer(Demo);

• 结果

  
  image.png