Skip to content

Commit

Permalink
πŸ› fix : 각쒅 μ—λŸ¬ μˆ˜μ •
Browse files Browse the repository at this point in the history
  • Loading branch information
indaegu committed Apr 29, 2024
1 parent c7ba84e commit 71a4bb0
Show file tree
Hide file tree
Showing 9 changed files with 119 additions and 138 deletions.
2 changes: 1 addition & 1 deletion css/common.css
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ body {
color: white;
position: relative;
text-align: center;
top: 110px;
top: 90px;
}

#selected-game {
Expand Down
9 changes: 3 additions & 6 deletions css/dinosaur.css
Original file line number Diff line number Diff line change
Expand Up @@ -158,11 +158,6 @@
margin-bottom: 10px;
text-align: left;
}
/* li::marker {
p
text-align: center;
} */

.name-entry-modal {
position: relative;
bottom: 50%;
Expand All @@ -178,8 +173,11 @@
}

.modal-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}

Expand All @@ -191,7 +189,6 @@ input[type="text"] {

.modal-button-name {
padding: 10px 20px;
margin-top: 10px;
cursor: pointer;
background-color: #cddcce;
border: none;
Expand Down
103 changes: 54 additions & 49 deletions css/tetris.css
Original file line number Diff line number Diff line change
Expand Up @@ -60,66 +60,74 @@
display: none;
}

.screen {
display: none;
position: fixed;
#nickname-screen {
display: none; /* 기본적으둜 μˆ¨κΉ€ */
position: absolute; /* λΆ€λͺ¨ μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ μ ˆλŒ€ μœ„μΉ˜ */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}

#nickname-screen {
display: none;
justify-content: center;
align-items: center;
width: 100%; /* λΆ€λͺ¨μ˜ 전체 λ„ˆλΉ„ */
height: 100%; /* λΆ€λͺ¨μ˜ 전체 높이 */
background-color: rgba(0, 0, 0, 0.5); /* 반투λͺ… 검은색 λ°°κ²½ */
z-index: 10; /* λ‹€λ₯Έ μš”μ†Œλ“€ μœ„μ— λ†“μž„ */
flex-direction: column;
justify-content: space-evenly; /* λ‚΄λΆ€ μš”μ†Œλ₯Ό 쀑앙 μ •λ ¬ */
align-items: center; /* 쀑앙 μ •λ ¬ */
}

#nickname-form {
background-color: black;
background: #7a7878;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 20px;
border-radius: 10px;
color: white;
border-radius: 5%;
width: 80%;
height: 70%;
bottom: 50%;
left: 50%;
text-align: center; /* ν…μŠ€νŠΈ 쀑앙 μ •λ ¬ */
display: flex;
flex-direction: column;
justify-content: space-around; /* λ‚΄λΆ€ μš”μ†Œλ₯Ό 쀑앙 μ •λ ¬ */
z-index: 1050;
align-items: center; /* 쀑앙 μ •λ ¬ */
}

#nickname-form label {
display: block;
margin-bottom: 10px;
}

#nickname-form input {
background-color: black;
background-color: rgb(255, 255, 255);
border: 0px;
color: white;
width: 100%;
padding: 5px;
width: 95%;
padding: 10px;
margin-bottom: 10px;
outline: none;
}

#nickname-form button {
padding: 5px 10px;
background-color: #848484;
color: white;
border: 0px;
padding: 10px 20px;
cursor: pointer;
background-color: #cddcce;
border: none;
color: rgb(0, 0, 0);
text-transform: uppercase;
}

.leaderboard-container {
display: none;
color: white;
position: relative;
top: 50%;
bottom: 50%;
left: 50%;
width: 80%;
height: 70%;
transform: translate(-50%, -50%);
background-color: black;
border: 0px;
border-radius: 8px;
width: 300px;
margin: 0px auto;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: rgb(149, 146, 146);
padding: 10px;
z-index: 1000;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: none;
flex-direction: column;
justify-content: space-around;
text-align: center;
border-radius: 5%;
}

#leaderboard-list {
Expand All @@ -139,18 +147,16 @@
}

.button-row button {
width: 45%;
padding: 4px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
font-size: 1em;
margin: 0px 5px;
width: 60%;
height: 110%;
}

.button-row button:hover {
background-color: #45a049;
.modal-button.selected {
background-color: #a19f9f; /* μ„ νƒλœ λ²„νŠΌμ˜ 배경색 λ³€κ²½ */
color: black;
font-size: 1.2em; /* 폰트 크기 증가 */
}

/*μΆ•ν•˜ μ• λ‹ˆλ©”μ΄μ…˜*/
Expand Down Expand Up @@ -185,10 +191,9 @@
}

.gameButton.select {
background-color: #1c9822;
background-color: #a19f9f; /* μ„ νƒλœ λ²„νŠΌμ˜ 배경색 λ³€κ²½ */
color: black;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s, box-shadow 0.3s;
font-size: 1.2em; /* 폰트 크기 증가 */
}

.control-button {
Expand Down
2 changes: 1 addition & 1 deletion js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ document.addEventListener("DOMContentLoaded", function () {

function handleKeyDownApp(event) {
if (!GlobalState.isGameActive) {
console.log("1.app.js handleKeyDown", event.code);
console.log("1.app.js의 κ²Œμž„ 선택 이벀트 λ¦¬μŠ€λ„ˆ", event.code);

if (event.key === "Insert") {
playSound("insertCoin");
Expand Down
73 changes: 37 additions & 36 deletions js/gameControler.js
Original file line number Diff line number Diff line change
@@ -1,41 +1,42 @@
const joyStick = document.querySelector('#game-joystick-img');
const yellowBtn = document.querySelector('#game-yellow-btn-img');
const greenBtn = document.querySelector('#game-green-btn-img');
const blueBtn = document.querySelector('#game-blue-btn-img');
const joyStick = document.querySelector("#game-joystick-img");
const yellowBtn = document.querySelector("#game-yellow-btn-img");
const greenBtn = document.querySelector("#game-green-btn-img");
const blueBtn = document.querySelector("#game-blue-btn-img");

function gameControl(key) {
if(key === "ArrowRight" || key === 39) {
joyStick.classList.add('joystick-right');
console.log("였λ₯Έμͺ½");
} else if (key === "ArrowLeft" || key === 37) {
console.log("μ™Όμͺ½");
joyStick.classList.add('joystick-left');
if (key === "ArrowRight" || key === 39) {
joyStick.classList.add("joystick-right");
} else if (key === "ArrowLeft" || key === 37) {
joyStick.classList.add("joystick-left");
} else if (key === "ArrowUp" || key === 38) {
joyStick.classList.add("joystick-up");
} else if (key === "ArrowDown" || key === 40) {
joyStick.classList.add("joystick-down");
}

} else if (key === "ArrowUp" || key === 38) {
joyStick.classList.add('joystick-up');
} else if (key === "ArrowDown" || key === 40) {
joyStick.classList.add('joystick-down');
}
joyStick.addEventListener("animationend", () => {
joyStick.classList.remove(
"joystick-right",
"joystick-left",
"joystick-up",
"joystick-down"
);
});

joyStick.addEventListener('animationend', () => {
joyStick.classList.remove('joystick-right', 'joystick-left', 'joystick-up', 'joystick-down');
if (key === "Enter" || key === 13) {
greenBtn.classList.add("push-green-btn");
greenBtn.addEventListener("animationend", () => {
greenBtn.classList.remove("push-green-btn");
});

if(key === "Enter" || key === 13) {
greenBtn.classList.add('push-green-btn');
greenBtn.addEventListener('animationend', () => {
greenBtn.classList.remove('push-green-btn');
});
} else if (key === "Space" || key === 32) {
yellowBtn.classList.add('push-yellow-btn');
yellowBtn.addEventListener('animationend', () => {
yellowBtn.classList.remove('push-yellow-btn');
});
} else if(key === "Escape" || key === 27) {
blueBtn.classList.add('push-blue-btn');
blueBtn.addEventListener('animationend', () => {
blueBtn.classList.remove('push-blue-btn');
});
}

}
} else if (key === "Space" || key === 32) {
yellowBtn.classList.add("push-yellow-btn");
yellowBtn.addEventListener("animationend", () => {
yellowBtn.classList.remove("push-yellow-btn");
});
} else if (key === "Escape" || key === 27) {
blueBtn.classList.add("push-blue-btn");
blueBtn.addEventListener("animationend", () => {
blueBtn.classList.remove("push-blue-btn");
});
}
}
11 changes: 5 additions & 6 deletions js/tetris.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,29 +82,28 @@ function updateGameContent() {
</div>
<div id="nickname-screen" class="screen">
<form id="nickname-form">
<label for="nickname">Enter your nickname:</label>
<h2>Enter Your Name</h2>
<input
type="text"
id="nickname"
name="nickname"
placeholder="your name"
/>
<button type="submit">Submit</button>
<button type="submit" class ="modal-button-name">Press Enter!!</button>
</form>
</div>
<div class="leaderboard-container">
<h1>Ranking</h1>
<h2>Top Scores</h2>
<ol id="leaderboard-list"></ol>
<div class="button-row">
<button id="game-again-button" class="gameButton">Game Again</button>
<button id="game-select-button" class="gameButton">
<button id="game-again-button" class="gameButton" onclick="restartGame()">Game Again</button>
<button id="game-select-button" class="gameButton" onclick="returnToSelection()">
Game Select
</button>
</div>
</div>
`;
loadScript("js/tetris/main.js");

loadScript("js/tetris/constants.js");
loadScript("js/tetris/board.js");
loadScript("js/tetris/piece.js");
Expand Down
1 change: 0 additions & 1 deletion js/tetris/board.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ class Board {
draw() {
this.piece.draw();
this.drawBoard();
console.log("draw");
}

drop() {
Expand Down
Loading

0 comments on commit 71a4bb0

Please sign in to comment.