안녕하세요 이번 시간에는 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. 결과
'JavaScript' 카테고리의 다른 글
| [JavaScript] 이더리움 익스플로러에 조회 기능 추가하기 (2) | 2024.01.04 |
|---|---|
| [JavaScript] 이더리움 블록 조회하는 간단한 사이트 만들기 (0) | 2023.12.26 |
| [JavaScript] ChatGPT API로 간단한 챗봇 만들기 (0) | 2023.11.17 |
| [JavaScript] Phaser Sprite Player 캐릭터 바로 위에 nickName 가운데 정렬로 띄워주기 (0) | 2023.11.12 |
| [JavaScript] Fabric.js 를 사용해서 화이트보드 만들기 (0) | 2023.11.08 |
