Skip to content

Commit

Permalink
Merge branch '90-feat-코인-insert-기능-수정-css-디자인-수정' of https://github.c…
Browse files Browse the repository at this point in the history 
…om/KOPO-DA5/Retro-game-console
  • Loading branch information
@khr0923
khr0923 committed Apr 30, 2024
2 parents 3d579ca + 66ed16f commit 5f38390
Show file tree
Hide file tree
Showing 9 changed files with 274 additions and 101 deletions.
39 changes: 34 additions & 5 deletions css/common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,24 +213,48 @@ body {
}

.control-button.selected {
background-color: #a19f9f; /* 선택된 버튼의 배경색 변경 */
color: rgb(45, 41, 41);
background-color: #e55b5b; /* 선택된 버튼의 배경색 변경 */
color: rgb(236 236 236);
font-size: 1.05em; /* 폰트 크기 증가 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 그림자 효과 추가 */
transition: transform 0.3s, box-shadow 0.3s; /* 부드러운 변화 효과 */
border-radius: 10px;
}

.control-button-dino.selected {
background-color: #a19f9f; /* 선택된 버튼의 배경색 변경 */
color: rgb(45, 41, 41);
background-color: #e55b5b; /* 선택된 버튼의 배경색 변경 */
color: rgb(236 236 236);
font-size: 1.05em; /* 폰트 크기 증가 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 그림자 효과 추가 */
transition: transform 0.3s, box-shadow 0.3s; /* 부드러운 변화 효과 */
border-radius: 10px;
}

.control-button-dino {
position: relative;
height: 25%;
height: 25%;
width: 100%;
border-radius: 10px;
font-size: 12px;
background-color: #6a6a6aa3;
color: #868686;
}

h2#highScore-label, #tetris-label {
font-size: 13px;
line-height: 16px;
}

#tetris-coin-label, #tetris-coin {
font-size: 12px;
}

#score, #lines, #level {
font-size: 10px;
}

canvas#next {
margin-top: 10px;
}

.hide {
Expand Down Expand Up @@ -319,6 +343,11 @@ body {
}
}

li#li-marker-tetris {
font-size: 10px;
margin-left: 12%;
}

#count-down {
display: none;
position: relative;
Expand Down
72 changes: 60 additions & 12 deletions css/dinosaur.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
font-size: 0.8rem;
text-align: center;
text-transform: uppercase;
line-height: 20px;
}

.gameover-message {
Expand Down Expand Up @@ -128,10 +129,10 @@
position: relative;
bottom: 50%;
left: 50%;
width: 80%;
width: 50%;
height: 70%;
transform: translate(-50%, -50%);
background-color: rgb(149, 146, 146);
background-color: rgb(63 63 63);;
padding: 10px;
z-index: 1000;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
Expand All @@ -158,6 +159,11 @@
margin-bottom: 10px;
text-align: left;
}

li#li_marker {
margin-left: 20%;
}

.name-entry-modal {
position: relative;
bottom: 50%;
Expand Down Expand Up @@ -188,27 +194,69 @@ input[type="text"] {
}

.modal-button-name {
padding: 10px 20px;
padding: 10px 12px;
cursor: pointer;
background-color: #cddcce;
background-color: rgb(57 42 255 / 35%);
border: none;
color: rgb(0, 0, 0);
color: rgb(255 183 0);
text-transform: uppercase;
font-size: 10px;
border-radius: 10px;
}

input#playerNameInput {
font-size: 12px;
width: 80%;
border-radius: 10px;
text-align: center;
}

input#playerNameInput::placeholder {
text-align: center;
}

h2#nameLabel {
font-size: 13.5px;
color: rgb(255 183 0 / 95%);
line-height: 20px;
}

.name-entry-modal {
position: relative;
bottom: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 60%;
background: #7a787838;
padding: 15px;
box-shadow: 0 4px 8px rgb(0 0 0 / 18%);
z-index: 1050;
border-radius: 20px;
}

.hide {
display: none;
}
.modal-button {
font-size: 1em;
margin-left: 10px;
width: 60%;
height: 110%;
font-size: 0.5em;
margin-left: 10px;
width: 40%;
height: 110%;
border-radius: 10px;
padding: 2px;
background-color: #00000026;
color: #7a7878;
}

h2#topScore-label {
color: #e55b5b;
}

.modal-button.selected {
background-color: #a19f9f; /* 선택된 버튼의 배경색 변경 */
color: black;
font-size: 1.2em; /* 폰트 크기 증가 */
background-color: rgb(57 42 255 / 35%); /* 선택된 버튼의 배경색 변경 */
color: #e55b5b;
font-size: 0.55em; /* 폰트 크기 증가 */
}
.flash-effect {
animation: flash 1s infinite;
Expand Down
86 changes: 59 additions & 27 deletions css/tetris.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,27 +73,40 @@
align-items: center; /* 중앙 정렬 */
}

h2#nameLabel {
font-size: 13.5px;
color: rgb(255 183 0 / 95%);
line-height: 20px;
}

#nickname-form {
background: #7a7878;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 20px;
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; /* 중앙 정렬 */
background: #323030;
box-shadow: 0 4px 8px rgb(0 0 0 / 18%);
padding: 20px;
border-radius: 5%;
width: 50%;
height: 60%;
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;
}

input#nickname {
font-size: 12px;
width: 80%;
border-radius: 10px;
text-align: center;
}

#nickname-form input {
background-color: rgb(255, 255, 255);
border: 0px;
Expand All @@ -103,22 +116,24 @@
}

#nickname-form button {
padding: 10px 20px;
padding: 10px 12px;
cursor: pointer;
background-color: #cddcce;
background-color: rgb(57 42 255 / 35%);
border: none;
color: rgb(0, 0, 0);
color: rgb(255 183 0);
text-transform: uppercase;
font-size: 10px;
border-radius: 10px;
}

.leaderboard-container {
position: relative;
bottom: 50%;
left: 50%;
width: 80%;
width: 50%;
height: 70%;
transform: translate(-50%, -50%);
background-color: rgb(149, 146, 146);
background-color: rgb(47 47 47);
padding: 10px;
z-index: 1000;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
Expand All @@ -133,7 +148,7 @@
list-style-type: none;
display: flex;
flex-direction: column;
padding: 20px;
padding: 15px;
}
#highScores > li {
position: relative;
Expand All @@ -155,10 +170,14 @@
}

.button-row button {
font-size: 1em;
margin: 0px 5px;
width: 60%;
font-size: 0.5em;
margin-left: 10px;
width: 40%;
height: 110%;
border-radius: 10px;
padding: 3px;
background-color: #00000026;
color: #7a7878;
}

.modal-button.selected {
Expand All @@ -185,6 +204,16 @@
transform-origin: top left;
}

#li_marker {
font-size: 10px;
}

h2#topScore-label {
color: #e55b5b;
margin-top: 10px;
}


.confetti::before {
content: "🎉";
position: absolute;
Expand All @@ -199,14 +228,17 @@
}

.gameButton.select {
background-color: #a19f9f; /* 선택된 버튼의 배경색 변경 */
color: black;
font-size: 1.2em; /* 폰트 크기 증가 */
background-color: rgb(91 78 253 / 92%);;
color: #e55b5b;
font-size: 0.55em;
}

.control-button {
height: 4vmin;
height: 25%;
position: relative;
top: 50px;
margin-bottom: 10px;
border-radius: 10px;
background-color: #6a6a6aa3;
color: #868686;
}
Binary file added images/main/arcade_background_img_3.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 9 additions & 4 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,14 @@ document.addEventListener("DOMContentLoaded", function () {
console.log("1.app.js의 게임 선택 이벤트 리스너", event.code);

if (event.key === "Insert") {
playSound("insertCoin");

coinImg.style.display = "block";
coinImg.classList.add("animate__animated", "animate__flip");
if(coin === 5) {}
else {
playSound("insertCoin");
coinImg.style.display = "block";
coinImg.classList.add("animate__animated", "animate__flip");

coinImg.addEventListener("animationend", () => {
coinImg.addEventListener("animationend", () => {
coinImg.classList.remove("animate__animated", "animate__flip");

coinImg.style.display = "none";
Expand All @@ -50,6 +52,9 @@ document.addEventListener("DOMContentLoaded", function () {

coin += 5;
console.log(coin);
}


}
if (coin > 0) {
gameControl(event.key);
Expand Down
11 changes: 6 additions & 5 deletions js/dinosaur/dinosaur.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,10 @@ function updateGameContent() {
src="audios/else/insert-coin.mp3"
></audio>
<div id="game" class="game hide">
<span>Coin: </span>
<span id="coin" class="coin">${coin}</span>
<div id="score" class="score">0</div>
<br>
<spa style="font-size: 12px">Coin: </spa>
<span style="font-size: 12px" id="coin" class="coin">${coin}</span>
<div style="font-size: 12px" id="score" class="score">0</div>
<div id="start-message" class="start-message">Press any key to start</div>
<img src="images/dinosaur/ground.png" class="ground" />
<img src="images/dinosaur/ground.png" class="ground" />
Expand Down Expand Up @@ -75,7 +76,7 @@ function updateGameContent() {
</button>
</div>
<div id="ranking-modal" class="ranking-modal hide">
<h2>Top Scores</h2>
<h2 id="topScore-label">Top Scores</h2>
<ol id="dinoHighScores">
<!-- 여기에 점수를 동적으로 추가-->
</ol>
Expand All @@ -98,7 +99,7 @@ function updateGameContent() {
</div>
<div id="nameInputModal" class="name-entry-modal hide">
<div class="modal-content">
<h2>Enter Your Name</h2>
<h2 id="nameLabel">Enter Your Name</h2>
<input type="text" id="playerNameInput" placeholder="Your name" />
<button id="submitScoreButton" class="modal-button-name">
Press Enter!!
Expand Down
Loading

0 comments on commit 5f38390

Please sign in to comment.