JavaScript

[JavaScript] Phaser 에서 마우스 클릭으로 캐릭터 이동하기

teamnova 2023. 11. 27. 12:00
728x90

안녕하세요 이번 시간에는 Phaser로 만든 게임에서 마우스 클릭한 위치로 캐릭터 이동하는 예제를 진행하겠습니다.

 

Phaser로 간단한 게임을 만들고 싶으시면 아래 링크를 참고해주세요

https://stickode.tistory.com/943

 

 

1. 전체 코드

전체 코드입니다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>Phaser3 Game - Mouse Click Move</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

    // Phaser 게임 설정
    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 300 },  // 중력 설정
                debug: false
            }
        },
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    // Phaser 게임 객체 생성
    var player;
    var platforms;
    var cursors;

    var game = new Phaser.Game(config);

    // 게임 리소스 로딩 함수
    function preload ()
    {
        // 이미지와 스프라이트시트 로딩
        this.load.image('sky', 'assets/sky.png');
        this.load.image('ground', 'assets/platform.png');
        this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
    }

    // 게임 초기화 함수
    function create ()
    {
        // 배경 이미지 추가
        this.add.image(400, 300, 'sky');

        // 플랫폼 그룹 생성
        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
        });

        // 화살표 키 설정
        cursors = this.input.keyboard.createCursorKeys();

        // 충돌 설정
        this.physics.add.collider(player, platforms);

        // 마우스 컨텍스트 메뉴 비활성화
        this.input.mouse.disableContextMenu();

        // 클릭 이벤트 리스너 등록
        this.input.on('pointerdown', function (pointer) {
            // 마우스 클릭한 위치로 플레이어 이동
            movePlayer.call(this, pointer.x, pointer.y);
        }, this);
    }

    // 게임 업데이트 함수
    function update ()
    {
        // 플레이어의 이동 및 애니메이션 업데이트
        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(-330);
        }
    }

    // 플레이어 이동 함수
    function movePlayer(targetX, targetY) {
        // 플레이어를 목표 위치로 Tween 애니메이션을 사용하여 이동
        this.tweens.add({
            targets: player,
            x: targetX,
            y: targetY,
            duration: 500, // 이동에 걸리는 시간 (밀리초)
            ease: 'Linear',
            onComplete: function () {
                // 이동이 완료된 후 수행할 작업 (필요에 따라 사용)
            },
            callbackScope: this
        });
    }

</script>

</body>
</html>

 

 

2. 결과