Skip to content

Commit 331f34d

Browse files
KordeyrowKordeyrow
committed
+ Game page css ! game window size adjusts
1 parent 42ea307 commit 331f34d

12 files changed

+10597
-45
lines changed

‎FlappyBird/build_web/index.html

+40-25
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,69 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Your SDL Project</title>
6+
<title>Flappy Bird!</title>
7+
<link rel="stylesheet" href="style.css">
78
</head>
8-
<body style="margin: 0; display: flex; flex-direction: column; align-items: center; padding-top: 16px;">
9-
<button type="button" id="game-start-button">
10-
<span>Start Game!</span>
11-
</button>
9+
<body>
10+
<!-- Header -->
11+
<header class="header">
12+
<img src="assets/logo.png" alt="Game Logo" class="logo">
13+
<h1>Flappy Bird!</h1>
14+
<br>
15+
<p class="developer">by Kordeyrow</p>
16+
<br>
17+
</header>
1218

13-
<div id="game-container">
14-
<div id="status">Loading...</div>
15-
<canvas id="game-board" width="500" height="600" style="display:none"></canvas>
16-
</div>
19+
<!-- Main content -->
20+
<main class="main-content">
21+
<div id="game-container" class="game-container">
22+
<button type="button" id="game-start-button" class="start-button">Play Game!</button>
23+
<div id="status" class="loading">Loading...</div>
24+
<canvas id="game-board" width="460px" height="640px" style="display:none"></canvas>
25+
</div>
26+
27+
<div class="game-description">
28+
<p>Built with SDL.</p>
29+
</div>
30+
31+
<!-- GitHub link -->
32+
<div class="github-link">
33+
<a href="https://github.com/Kordeyrow/flappy-bird-sdl" target="_blank">View on GitHub</a>
34+
</div>
35+
</main>
36+
37+
<!-- Footer -->
38+
<footer class="footer">
39+
<p>&copy; 2024 Kordeyrow.</p>
40+
</footer>
1741

1842
<script>
19-
// Flag to check if the start button was clicked
2043
let startGameRequested = false;
2144

22-
// Emscripten Module setup
2345
var Module = {
24-
// This function runs after the WebAssembly runtime is fully initialized
2546
onRuntimeInitialized() {
2647
const status = document.getElementById('status');
27-
status.remove();
48+
status.style.display = 'none'; // Hide loading after initialization
2849

29-
// Only call start_game if the start button was clicked
3050
if (startGameRequested) {
3151
Module.ccall('start_game', null, [], []);
3252
}
3353
},
34-
canvas: (function () {
35-
const canvas = document.getElementById('game-board');
36-
return canvas;
37-
})(),
38-
// Prevents main() from automatically starting
54+
canvas: document.getElementById('game-board'),
3955
noInitialRun: true
4056
};
4157

42-
// DOM Elements
4358
const startGameButton = document.getElementById('game-start-button');
4459
const canvas = document.getElementById('game-board');
60+
const status = document.getElementById('status');
4561

46-
// Button event listener to start the game
4762
startGameButton.addEventListener('click', () => {
4863
canvas.style.display = 'block';
49-
startGameButton.remove();
50-
startGameRequested = true; // Set the flag to indicate start was requested
64+
startGameButton.style.display = 'none'; // Hide button
65+
status.style.display = 'flex'; // Show loading message
66+
startGameRequested = true;
5167

52-
// Dynamically load the game script only when the button is clicked
53-
var script = document.createElement('script');
68+
const script = document.createElement('script');
5469
script.src = "./flappy-bird.js";
5570
document.body.appendChild(script);
5671
});

‎FlappyBird/imgui.ini

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ Pos=60,60
33
Size=400,400
44

55
[Window][ScoreWindow]
6-
Pos=0,40
7-
Size=260,46
6+
Pos=0,72
7+
Size=274,46
88

‎FlappyBird/src/core/game.h

+10-3
Original file line numberDiff line numberDiff line change
@@ -257,8 +257,15 @@ class Game {
257257

258258
SDL_Rect r;
259259
SDL_GetDisplayBounds(0, &r);
260-
_window_h = r.h * _window_h_percent_from_client;
261-
_window_w = _window_h * _window_w_percent_from_h;
260+
261+
/*_window_h = r.h * _window_h_percent_from_client;
262+
_window_w = _window_h * _window_w_percent_from_h;*/
263+
#ifdef __EMSCRIPTEN__
264+
_window_h = r.h;
265+
_window_w = r.w;
266+
#endif
267+
_window_w = 460;
268+
_window_h = 640;
262269

263270
SDL_SetWindowSize(_window, _window_w, _window_h);
264271
double offset_x = -r.w * 0.04;
@@ -516,7 +523,7 @@ class Game {
516523
if ( ! win_init) { c = ImGuiCond_Once; win_init = true;}
517524

518525
ImGui::SetNextWindowSize(ImVec2(_window_w, 0), c);
519-
ImGui::SetNextWindowPos(ImVec2(0, _window_h / 15), c);
526+
ImGui::SetNextWindowPos(ImVec2(0, _window_h / 10), c);
520527
ImGui::Begin("ScoreWindow", nullptr, ImGuiWindowFlags_NoTitleBar | ImGuiWindowFlags_NoResize | ImGuiWindowFlags_AlwaysAutoResize);
521528

522529
render_score(std::to_string(_score).c_str());

‎docs/assets/logo.png

427 KB
Loading

‎docs/flappy-bird.data

50.1 KB
Binary file not shown.

0 commit comments

Comments
 (0)