Skip to content

S
sejong25
Commit e6303876 authored by 18손재민's avatar 18손재민
Browse files
Options

버튼 구현 및 메인 메뉴 구현 wip. 이제 버튼을 눌러야 게임으로 들어가짐

parent 333ca5db
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 89 deletions
index.html
View file @ e6303876
...@@ -19,11 +19,11 @@ ...@@ -19,11 +19,11 @@
<style> <style>
img { position: relative; width: 100%; height: 100%; z-index: 0;} img { position: relative; width: 100%; height: 100%; z-index: 0;}
#dvLogin { position: absolute; left: 65%; top: 35%; width: 30%; height: 30%; background: black; z-index: 1;} #dvLogin { position: absolute; left: 65%; top: 35%; width: 30%; height: 30%; padding: 10px; background: black; z-index: 1;}
</style> </style>
</head> </head>
<body> <body>
<main id="mainTitle"> <div id="mainTitle">
<img id="titleImg" src="assets/image/background/title.png" alt="title"> <img id="titleImg" src="assets/image/background/title.png" alt="title">
<div id="dvLogin"> <div id="dvLogin">
<input id="userEmail" type="email" placeholder="email" style="width: 100%; height: 10%;"></br> <input id="userEmail" type="email" placeholder="email" style="width: 100%; height: 10%;"></br>
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<button id="emailBtn" style="width: 100%; height: 10%;">이메일로 로그인</button></br> <button id="emailBtn" style="width: 100%; height: 10%;">이메일로 로그인</button></br>
<button id="googleBtn" style="width: 10%; height: 10%;"><img src="assets/title/googleBtn.png" style="object-fit: contain"></button></br> <button id="googleBtn" style="width: 10%; height: 10%;"><img src="assets/title/googleBtn.png" style="object-fit: contain"></button></br>
</div> </div>
</main> </div>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
......
js/Client.js
View file @ e6303876
...@@ -7,7 +7,8 @@ socket.on('alert', function(msg) // string errorcode ...@@ -7,7 +7,8 @@ socket.on('alert', function(msg) // string errorcode
{ {
//let toAlert = 'null alert'; //let toAlert = 'null alert';
if (msg === 'errNicknameOverlaped') alert('이미 사용중인 닉네임입니다.'); if (msg === 'errNicknameOverlaped') alert('이미 사용중인 닉네임입니다.');
if (msg === 'gameWin') else if (msg === 'errNicknameEmpty') alert('설정된 닉네임이 없습니다.');
else if (msg === 'gameWin')
{ {
//toAlert = '승리!'; //toAlert = '승리!';
ScenesData.gameScene.add.text(game.config.width / 2, game.config.height / 2, '승리!!!!', {fontSize: '30pt'}) ScenesData.gameScene.add.text(game.config.width / 2, game.config.height / 2, '승리!!!!', {fontSize: '30pt'})
...@@ -28,10 +29,9 @@ socket.on('setId', function(msg) // {str, num playerNum} ...@@ -28,10 +29,9 @@ socket.on('setId', function(msg) // {str, num playerNum}
// init game // init game
socket.on('enterRoom', function() socket.on('enterRoom', function()
{ {
Audio.killSound(ScenesData.logInScene, 'login'); Audio.killSound(ScenesData.menuScene, 'login');
game.scene.remove('logInScene'); game.scene.stop('menuScene');
game.scene.start('mainMenuScene'); game.scene.start('roomScene');
}); });
socket.on('syncRoomScene', function(msg) socket.on('syncRoomScene', function(msg)
{ {
...@@ -104,7 +104,7 @@ socket.on('syncRoomData', function(msg) // {num roomNum, [] players} ...@@ -104,7 +104,7 @@ socket.on('syncRoomData', function(msg) // {num roomNum, [] players}
socket.on('startGame', function() socket.on('startGame', function()
{ {
Audio.killSound(ScenesData.roomScene, 'inRoom'); Audio.killSound(ScenesData.roomScene, 'inRoom');
game.scene.remove('roomScene'); game.scene.stop('roomScene');
game.scene.start('gameScene'); game.scene.start('gameScene');
}); });
...@@ -171,7 +171,6 @@ socket.on('attacked', function(msg) // object attackData ...@@ -171,7 +171,6 @@ socket.on('attacked', function(msg) // object attackData
}); });
socket.on('defeat', function(msg) // object player socket.on('defeat', function(msg) // object player
{ {
//수정해야 함 코드 너무 복잡함
let playerImage = RoomData.findPlayer(msg.id).playerImage; let playerImage = RoomData.findPlayer(msg.id).playerImage;
let position = RoomData.findPlayer(msg.id).position; let position = RoomData.findPlayer(msg.id).position;
let nicknameText = RoomData.findPlayer(msg.id).nicknameText; let nicknameText = RoomData.findPlayer(msg.id).nicknameText;
...@@ -180,7 +179,6 @@ socket.on('defeat', function(msg) // object player ...@@ -180,7 +179,6 @@ socket.on('defeat', function(msg) // object player
RoomData.players[msg.index].position = position; RoomData.players[msg.index].position = position;
RoomData.players[msg.index].nicknameText = nicknameText; RoomData.players[msg.index].nicknameText = nicknameText;
RoomData.aliveCount--; RoomData.aliveCount--;
console.log(msg.id); console.log(msg.id);
console.log(RoomData.findPlayer(msg.id)); console.log(RoomData.findPlayer(msg.id));
......
js/FirebaseClient.js
View file @ e6303876
...@@ -257,7 +257,8 @@ class UserData ...@@ -257,7 +257,8 @@ class UserData
this.hopae = this.hopae =
[ [
{name: prompt("첫번째 호패의 닉네임을 입력해주세요."), type: 'wood'} {name: prompt("첫번째 호패의 닉네임을 입력해주세요."), type: 'wood'}
]; ];
this.recentName = '';
this.title = []; this.title = [];
this.money = 0; this.money = 0;
this.item = []; this.item = [];
......
js/Input.js
View file @ e6303876
...@@ -29,13 +29,13 @@ Input.gameSceneEnterReaction = function() ...@@ -29,13 +29,13 @@ Input.gameSceneEnterReaction = function()
Input.isEntered = true; Input.isEntered = true;
} }
} }
Input.logInSceneEnterReaction = function() Input.menuSceneEnterReaction = function()
{ {
Input.finalInput = Input.removeConVow(Input.finalInput); Input.finalInput = Input.removeConVow(Input.finalInput);
if (Input.finalInput.length > 1) if (Input.finalInput.length > 1)
{ {
socket.emit('setNickname', Input.finalInput);
PlayerData.nickname = Input.finalInput; PlayerData.nickname = Input.finalInput;
ScenesData.menuScene.myName.setText('내 이름 : ' + PlayerData.nickname);
Input.reset(); Input.reset();
} }
else else
...@@ -412,4 +412,35 @@ Input.pushInput = function(inputKey) ...@@ -412,4 +412,35 @@ Input.pushInput = function(inputKey)
} }
this.inputField.text.setText(Input.finalInput); this.inputField.text.setText(Input.finalInput);
} }
}
class Button extends Phaser.GameObjects.Sprite{
onInputOver = () => {}
onInputOut = () => {}
onInputUp = () => {}
constructor(scene, x, y, texture, actionOnClick = () => {}, overFrame, outFrame, downFrame)
{
super(scene, x, y, texture);
scene.add.existing(this);
this.setFrame(outFrame).setInteractive()
.on('pointerover', () => {
this.onInputOver()
this.setFrame(overFrame)
})
.on('pointerdown', () => {
actionOnClick()
this.setFrame(downFrame)
})
.on('pointerup', () => {
this.onInputUp()
this.setFrame(overFrame)
})
.on('pointerout', () => {
this.onInputOut()
this.setFrame(outFrame)
})
}
} }
\ No newline at end of file
js/ScenesData.js
View file @ e6303876
var ScenesData = ScenesData || {}; var ScenesData = ScenesData || {};
ScenesData.currentScene = null;
var logInScene = new Phaser.Class( var menuScene = new Phaser.Class(
{ {
Extends: Phaser.Scene, Extends: Phaser.Scene,
initialize: initialize:
function logInScene () function menuScene ()
{ {
Phaser.Scene.call(this, {key: 'logInScene'}); Phaser.Scene.call(this, {key: 'menuScene'});
}, },
preload: function() preload: function()
{ {
ScenesData.logInScene = this; ScenesData.menuScene = this;
/*Input.inputField.loadImage(this);
ResourceLoader.loadBackGround(this);
Audio.loadSound(this);*/
ResourceLoader.loadBackGround(this); ResourceLoader.loadBackGround(this);
ResourceLoader.loadImage(this); ResourceLoader.loadImage(this);
Input.inputField.loadImage(this); Input.inputField.loadImage(this);
...@@ -28,32 +25,23 @@ var logInScene = new Phaser.Class( ...@@ -28,32 +25,23 @@ var logInScene = new Phaser.Class(
create: function() create: function()
{ {
Audio.loopSound(this, 'login'); Audio.loopSound(this, 'login');
Input.inputField.generate(this, Input.logInSceneEnterReaction); Input.inputField.generate(this, Input.menuSceneEnterReaction);
BackGround.drawMenu(this); //BackGround.drawMenu(this);
this.myName = this.add.text(game.config.width / 2, 200, '이름을 입력해주세요.').setOrigin(0.5, 0.5).setColor('#000000').setDepth(10).setPadding(5,5,5,5);
} this.myName.setFontSize(40);
});
var mainMenuScene = new Phaser.Class( this.myCharacter = this.add.sprite(game.config.width / 2, game.config.height / 2, 'pyeongminStand').setOrigin(0.5, 0.5).setDepth(5);
{
Extends: Phaser.Scene,
initialize: const actionOnClick = () => {
console.log('click');
function menuScene () socket.emit('enterRoom', PlayerData.nickname);
{ }
Phaser.Scene.call(this, {key: 'mainMenuScene'});
},
preload: function()
{
ScenesData.mainMenuScene = this;
},
create: function() let btn1 = new Button(this, game.config.width / 2, 800, 'pyeongminWrite', actionOnClick, 2, 1, 0)
{ btn1.onInputOut = () => {
this.myCharacter = scene.add.sprite(game.config.width / 2, game.config.height / 2, 'pyeongminStand').setDepth(5); console.log('Btn1: onInputOut')
}
btn1.setScale(0.5).setDepth(10);
} }
}); });
...@@ -150,12 +138,6 @@ var gameScene = new Phaser.Class( ...@@ -150,12 +138,6 @@ var gameScene = new Phaser.Class(
preload: function() preload: function()
{ {
ScenesData.gameScene = this; ScenesData.gameScene = this;
/*ResourceLoader.loadBackGround(this);
ResourceLoader.loadImage(this);
Input.inputField.loadImage(this);
CSVParsing.loadText(this);
Audio.loadSound(this);*/
WordSpace.weightTextObjForTest = this.add.text(game.config.width * 5 / 64, game.config.height * 5 / 48, '뇌의 무게: (현재) 0 / ' + this.brainCapacity + ' (전체)').setDepth(10).setColor('#000000'); WordSpace.weightTextObjForTest = this.add.text(game.config.width * 5 / 64, game.config.height * 5 / 48, '뇌의 무게: (현재) 0 / ' + this.brainCapacity + ' (전체)').setDepth(10).setColor('#000000');
WordSpace.killLogTextForTest = this.add.text(game.config.width * 25 / 32, game.config.height * 5 / 72, WordSpace.killLogForTest).setDepth(10).setColor('#000000').setAlign('right'); WordSpace.killLogTextForTest = this.add.text(game.config.width * 25 / 32, game.config.height * 5 / 72, WordSpace.killLogForTest).setDepth(10).setColor('#000000').setAlign('right');
}, },
...@@ -180,34 +162,34 @@ var gameScene = new Phaser.Class( ...@@ -180,34 +162,34 @@ var gameScene = new Phaser.Class(
WordSpace.setPlayerTyping.initiate(this); WordSpace.setPlayerTyping.initiate(this);
WordSpace.nameWordTextForTest = ScenesData.gameScene.add.text(50,400,'현재 가진 호패들 : 없음').setDepth(10).setColor('#000000'); WordSpace.nameWordTextForTest = this.add.text(50,400,'현재 가진 호패들 : 없음').setDepth(10).setColor('#000000');
WordSpace.nameQueue.initiate(); WordSpace.nameQueue.initiate();
WordSpace.generateWord.Item(ScenesData.gameScene, Enums.item.nameList); WordSpace.generateWord.Item(this, Enums.item.nameList);
WordSpace.generateWord.Item(ScenesData.gameScene, Enums.item.nameList); WordSpace.generateWord.Item(this, Enums.item.nameList);
WordSpace.generateWord.Item(ScenesData.gameScene, Enums.item.invincible); WordSpace.generateWord.Item(this, Enums.item.invincible);
WordSpace.generateWord.Item(ScenesData.gameScene, Enums.item.invincible); WordSpace.generateWord.Item(this, Enums.item.invincible);
WordSpace.generateWord.Item(ScenesData.gameScene, Enums.item.charge); WordSpace.generateWord.Item(this, Enums.item.charge);
WordSpace.generateWord.Item(ScenesData.gameScene, Enums.item.charge); WordSpace.generateWord.Item(this, Enums.item.charge);
WordSpace.generateWord.Item(ScenesData.gameScene, Enums.item.clean); WordSpace.generateWord.Item(this, Enums.item.clean);
WordSpace.generateWord.Item(ScenesData.gameScene, Enums.item.clean); WordSpace.generateWord.Item(this, Enums.item.clean);
WordSpace.generateWord.Item(ScenesData.gameScene, Enums.item.heavy); WordSpace.generateWord.Item(this, Enums.item.heavy);
WordSpace.generateWord.Item(ScenesData.gameScene, Enums.item.heavy); WordSpace.generateWord.Item(this, Enums.item.heavy);
WordSpace.generateWord.Item(ScenesData.gameScene, Enums.item.dark); WordSpace.generateWord.Item(this, Enums.item.dark);
WordSpace.generateWord.Item(ScenesData.gameScene, Enums.item.dark); WordSpace.generateWord.Item(this, Enums.item.dark);
// for test // for test
WordSpace.attackGauge.add(11); WordSpace.attackGauge.add(11);
/*WordSpace.generateWord.Name(ScenesData.gameScene, false, null); /*WordSpace.generateWord.Name(this, false, null);
WordSpace.generateWord.Name(ScenesData.gameScene, false, null); WordSpace.generateWord.Name(this, false, null);
WordSpace.generateWord.Name(ScenesData.gameScene, false, null); WordSpace.generateWord.Name(this, false, null);
WordSpace.generateWord.Name(ScenesData.gameScene, false, null); WordSpace.generateWord.Name(this, false, null);
WordSpace.generateWord.Name(ScenesData.gameScene, false, null); WordSpace.generateWord.Name(this, false, null);
WordSpace.generateWord.Name(ScenesData.gameScene, false, null); WordSpace.generateWord.Name(this, false, null);
WordSpace.generateWord.Name(ScenesData.gameScene, false, null); WordSpace.generateWord.Name(this, false, null);
WordSpace.generateWord.Name(ScenesData.gameScene, false, null); WordSpace.generateWord.Name(this, false, null);
WordSpace.generateWord.Name(ScenesData.gameScene, false, null); WordSpace.generateWord.Name(this, false, null);
WordSpace.generateWord.Name(ScenesData.gameScene, false, null); WordSpace.generateWord.Name(this, false, null);
WordSpace.generateWord.Name(ScenesData.gameScene, false, null);*/ WordSpace.generateWord.Name(this, false, null);*/
}, },
update: function() update: function()
...@@ -236,4 +218,10 @@ var gameScene = new Phaser.Class( ...@@ -236,4 +218,10 @@ var gameScene = new Phaser.Class(
WordSpace.killLogTextForTest.setText(WordSpace.killLogForTest); WordSpace.killLogTextForTest.setText(WordSpace.killLogForTest);
WordSpace.setPlayerTyping.add(''); WordSpace.setPlayerTyping.add('');
} }
}); });
\ No newline at end of file
ScenesData.changeScene(scene)
{
game.scene.stop();
game.scene.start(scene);
}
\ No newline at end of file
js/main.js
View file @ e6303876
...@@ -14,7 +14,7 @@ var config = { ...@@ -14,7 +14,7 @@ var config = {
} }
}, },
backgroundColor: Phaser.Display.Color.HexStringToColor('#F0CB85').color,//GetColor(245,208,138), backgroundColor: Phaser.Display.Color.HexStringToColor('#F0CB85').color,//GetColor(245,208,138),
scene: [ logInScene, roomScene, gameScene ] scene: [ menuScene, roomScene, gameScene ]
}; };
var game = null; var game = null;
...@@ -24,7 +24,7 @@ var game = null; ...@@ -24,7 +24,7 @@ var game = null;
var PlayerData = PlayerData || {}; var PlayerData = PlayerData || {};
PlayerData.id = -1; //플레이어 아이디, 고유 번호 PlayerData.id = -1; //플레이어 아이디, 고유 번호
PlayerData.nickname = '홍길동'; //플레이어 닉네임 PlayerData.nickname = ''; //플레이어 닉네임
PlayerData.userData = null; PlayerData.userData = null;
// 현재 들어가있는 Game Room의 정보 // 현재 들어가있는 Game Room의 정보
......
server.js
View file @ e6303876
...@@ -38,19 +38,23 @@ io.on('connection', function(socket) ...@@ -38,19 +38,23 @@ io.on('connection', function(socket)
}); });
}); });
socket.on('setNickname', function(msg) // string new_nickname socket.on('enterRoom', function(msg) // string new_nickname
{ {
let isAlreadyHave = false; if(msg.length < 1) socket.emit('alert' ,'errNicknameEmpty');
GameServer.currentPlayer.forEach(function(element)
{
if (element.playerData.nickname === msg) isAlreadyHave = true;
});
if (isAlreadyHave) socket.emit('alert' ,'errNicknameOverlaped');
else else
{ {
socket.playerData.nickname = msg; let isAlreadyHave = false;
console.log('['+socket.playerData.id+'] nickname set to ' + msg); GameServer.currentPlayer.forEach(function(element)
GameServer.enterEmptyRoom(socket); {
if (element.playerData.nickname === msg) isAlreadyHave = true;
});
if (isAlreadyHave) socket.emit('alert' ,'errNicknameOverlaped');
else
{
socket.playerData.nickname = msg;
console.log('['+socket.playerData.id+'] nickname set to ' + msg);
GameServer.enterEmptyRoom(socket);
}
} }
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment