Skip to content

Commit

Permalink
Merge pull request #58 from KOPO-DA5/52-feat-게임-선택창-화면-및-기능-구현
Browse files Browse the repository at this point in the history
52 feat 게임 선택창 화면 및 기능 구현
  • Loading branch information
ctmdghks authored Apr 26, 2024
2 parents 213cdc2 + abc8ac8 commit f007fd0
Show file tree
Hide file tree
Showing 21 changed files with 293 additions and 201 deletions.
39 changes: 39 additions & 0 deletions css/dinosaur.css
Original file line number Diff line number Diff line change
Expand Up @@ -80,3 +80,42 @@
.hide {
display: none;
}

.parent {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.button-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.button-wrapper {
display: flex;
gap: 40px;
}

.button {
width: 150px;
height: 175px;
background-color: #2e2e2e;
border: none;
border-radius: 10px;
transition: border-color 0.3s ease;
}

.selected {
border: 2px solid #ce3f3f;
}

.button-image {
width: 45%;
height: 45%;
object-fit: contain;
}
Binary file added images/dinosaur/kirby/kirby-jump.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dinosaur/kirby/kirby-lose.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dinosaur/kirby/kirby-run-0.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dinosaur/kirby/kirby-run-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dinosaur/kirby/kirby-run-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dinosaur/kirby/kirby-run-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dinosaur/kirby/kirby-stationary.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dinosaur/mario/mario-jump.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dinosaur/mario/mario-lose.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dinosaur/mario/mario-run-0.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dinosaur/mario/mario-run-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dinosaur/mario/mario-run-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dinosaur/mario/mario-run-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dinosaur/mario/mario-stationary.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 1 addition & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>레트로 게임 콘솔</title>
<link
href="https://fonts.googleapis.com/css?family=Press+Start+2P"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet" />
<link rel="stylesheet" href="./css/common.css" />
</head>

Expand Down
40 changes: 21 additions & 19 deletions js/app.js
Original file line number Diff line number Diff line change
@@ -1,53 +1,55 @@
document.addEventListener("DOMContentLoaded", function (e) {
document.addEventListener('DOMContentLoaded', function (e) {
const gameState = {
currentGame: "Tetris",
currentGame: 'Tetris',
scriptLoaded: false,
scriptElement: null,
};

console.log("1. app.js DOMContentLoaded", e.target);
console.log('1. app.js DOMContentLoaded', e.target);

function handleKeyDownApp(event) {
console.log("2. app.js handleKeyDownApp", event.code);
console.log('2. app.js handleKeyDownApp', event.code);

if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
toggleGameSelection();
}
if (event.key === "Enter") {
if (event.key === 'Enter') {
loadSelectedGame(gameState.currentGame);
}
}
document.addEventListener("keydown", handleKeyDownApp);
document.addEventListener('keydown', handleKeyDownApp);

function toggleGameSelection() {
gameState.currentGame =
gameState.currentGame === "Tetris" ? "Dino" : "Tetris";
var displayGame =
gameState.currentGame === "Tetris" ? "← Tetris →" : "← Dino →";
gameState.currentGame = gameState.currentGame === 'Tetris' ? 'Dino' : 'Tetris';
var displayGame = gameState.currentGame === 'Tetris' ? '← Tetris →' : '← Dino →';
console.log(displayGame);
document.getElementById("selected-game").textContent = displayGame;
document.getElementById('selected-game').textContent = displayGame;
}

function loadSelectedGame(game) {
console.log("app.js + loadSelectedGame");
console.log('app.js + loadSelectedGame');
console.log(game);
document.removeEventListener("keydown", handleKeyDownApp);
document.removeEventListener('keydown', handleKeyDownApp);

if (gameState.scriptElement) {
document.body.removeChild(gameState.scriptElement);
gameState.scriptElement = null;
}

let scriptPath = game === "Tetris" ? "./js/tetris.js" : "./js/dinosaur.js";
let script = document.createElement("script");
// let scriptPath = game === "Tetris" ? "./js/tetris.js" : "./js/dinosaur.js";
let scriptPath = game === 'Tetris' ? './js/tetris.js' : './js/dinosaur/skin.js';
let script = document.createElement('script');
script.src = scriptPath;
script.onload = function () {
if (game === "Tetris") {
if (game === 'Tetris') {
loadGameTetris();
} else {
loadGameDino();
// 공룡 게임 중 나가서 메인에서 방향키 입력 없이 테트리스하려고 바로 엔터치면 currentgame에 들어있던 dino 값이 그대로 실행되서 공룡 게임 실행
// 아래 한 줄은 임시 방편 코드
gameState.currentGame = 'Tetris';
loadGameSkin();
}
document.addEventListener("keydown", handleKeyDownApp);
document.addEventListener('keydown', handleKeyDownApp);
};
document.body.appendChild(script);
gameState.scriptElement = script;
Expand Down
64 changes: 0 additions & 64 deletions js/dinosaur.js

This file was deleted.

62 changes: 62 additions & 0 deletions js/dinosaur/dinosaur.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
function loadGameDino() {
console.log(globalSelectedCharacter);
const content = document.getElementById('content');

var newStyle = document.createElement('link');
newStyle.setAttribute('rel', 'stylesheet');

resetAnimation(content);
updateGameContent();

content.classList.add('fade-in');
}

function resetAnimation(element) {
element.classList.remove('fade-in');
void element.offsetWidth;
element.classList.add('fade-in');
}

function updateGameContent() {
const content = document.getElementById('content');
content.innerHTML = `
<link rel="stylesheet" href="../css/dinosaur.css" />
<audio id="jumpSound" src="../audios/dino/dino-jump.mp3"></audio>
<audio id="backgroundMusic" src="../audios/dino/dino-background.mp3" loop></audio>
<audio id="menuMoveSound" src="../audios/else/esc-move.mp3"></audio>
<audio id="pauseSound" src="../audios/else/esc-on.mp3"></audio>
<audio id="gameOverSound" src="../audios/dino/dino-gameover.mp3"></audio>
<audio id="obstacleHitSound" src="../audios/dino/dino-hitobstacle.mp3"></audio>
<div id="game" class="game">
<div 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" />
<img src="../images/dinosaur/${globalSelectedCharacter}/${globalSelectedCharacter}-stationary.png" id="dino" class="dino" />
<div id="gameover-message" class="gameover-message hide">
<p>Game over</p>
<span>Press any key to restart</span>
</div>
<div id="game-controls" class="game-controls hide">
<button id="resumeButton" class="control-button" onclick="resumeGame()">game resume</button>
<button id="restartButton" class="control-button" onclick="restartGame()">game restart</button>
<button id="returnButton" class="control-button" onclick="returnToSelection()">game select</button>
</div>
</div>
`;

loadScript('../js/dinosaur/main.js');
}

function loadScript(src) {
const existingScript = document.querySelector(`script[src="${src}"]`);
if (existingScript) {
existingScript.remove();
}

let script = document.createElement('script');
script.src = src;
script.type = 'text/javascript';
script.async = false;
document.body.appendChild(script);
}
Loading

0 comments on commit f007fd0

Please sign in to comment.