Fix: Updated game UI

hoangsonww · Feb 27, 2024 · 3b4a06f · 3b4a06f
1 parent 81c742c
commit 3b4a06f
Show file tree

Hide file tree

Showing 9 changed files with 214 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="src/css/style.css">
     <link rel="icon" type="image/x-icon" href="utils/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="manifest" href="manifest.json">
 </head>
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-CZ3YJF00CG"></script>
@@ -20,7 +21,7 @@
 <body>
     <header>
         <h1>The Maze Game</h1>
-        <p>You can use the arrow keys or the buttons below to help the player navigate through the maze.</p>
+        <p>A simple yet fun game to play when you're bored.</p>
     </header>
 
     <div class="game-container">
@@ -34,6 +35,7 @@ <h1>The Maze Game</h1>
             </div>
         </div>
         <button id="regenerateMaze" style="margin-top: 25px">Regenerate Maze</button>
+        <button id="aboutGame" onclick="window.location.href='src/html/about.html'" style="margin-top: 25px">About Game</button>
     </div>
 
     <script src="src/js/game.js"></script>

diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,36 @@
+{
+  "name": "The Maze Game",
+  "short_name": "The Maze Game",
+  "start_url": "index.html",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#7378c5",
+  "author": "Son Nguyen Hoang",
+  "description": "An interactive app that allows you to play a maze game",
+  "icons": [
+    {
+      "src": "utils/image-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+        "src": "utils/image-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png",
+        "purpose": "any maskable"
+    },
+    {
+        "src": "utils/image-384x384.png",
+        "sizes": "384x384",
+        "type": "image/png",
+        "purpose": "any maskable"
+    },
+    {
+        "src": "utils/image-72x72.png",
+        "sizes": "72x72",
+        "type": "image/png",
+        "purpose": "any maskable"
+    }
+  ]
+}
diff --git a/src/css/style.css b/src/css/style.css
@@ -78,6 +78,18 @@ canvas {
     background-color: #ececec;
 }
 
+#aboutGame {
+    font-family: "Poppins", sans-serif;
+    font-size: 16px;
+    background-color: white;
+    border-radius: 8px;
+}
+
+#aboutGame:hover {
+    cursor: pointer;
+    background-color: #ececec;
+}
+
 header {
     text-align: center;
     margin-bottom: 20px;

diff --git a/src/html/about.html b/src/html/about.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>The Maze Game</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <link rel="icon" type="image/x-icon" href="../../utils/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="manifest" href="../../manifest.json">
+</head>
+
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-CZ3YJF00CG"></script>
+<script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-CZ3YJF00CG');
+</script>
+
+<style>
+    body, html {
+        scroll-behavior: smooth;
+        overflow-x: auto;
+    }
+</style>
+
+<body>
+    <header style="margin-bottom: 50px">
+        <h1>The Maze Game</h1>
+        <p>A simple yet fun game to play when you're bored.</p>
+    </header>
+
+    <div style="margin-top: -20px" class="game-container">
+        <h2 style="color: white">About The Maze Game</h2>
+        <p style="color: white">You can use the arrow keys or the four control buttons below the maze to help the player navigate through the maze.</p>
+        <p style="color: white">The player's goal is to reach the end of the maze.</p>
+        <p style="color: white">If the player reaches the end of the maze, the maze will regenerate and the player will be placed at the start of the new maze.</p>
+        <p style="color: white">If you find yourself stuck, you can regenerate the maze by clicking the "Regenerate Maze" button.</p>
+        <p style="color: white">Good luck!</p>
+
+        <button id="regenerateMaze" onclick="window.location.href='../../index.html'" style="margin-top: 25px">Back to Game</button>
+
+        <h2 style="color: white; margin-top: 25px">Explore Our Other Apps</h2>
+        <button style="font: inherit; margin-top: 10px" id="regenerateMaze" onclick="window.location.href='https://movie-verse.com';">Visit The MovieVerse</button>
+        <button style="font: inherit; margin-top: 10px" id="regenerateMaze" onclick="window.location.href='https://hoangsonww.github.io/RecipeGenie-App/';">Visit RecipeGenie</button>
+        <button style="font: inherit; margin-top: 10px" id="regenerateMaze" onclick="window.location.href='https://hoangsonww.github.io/The-StickyNotes-App/';">Visit StickyNotes</button>
+        <button style="font: inherit; margin-top: 10px" id="regenerateMaze" onclick="window.location.href='https://hoangsonww.github.io/WeatherMate-App/';">Visit WeatherMate</button>
+    </div>
+</body>
+
+</html>
diff --git a/src/python/main.py b/src/python/main.py
@@ -0,0 +1,111 @@
+import pygame
+import random
+import sys
+
+# Initialize Pygame
+pygame.init()
+
+# Constants
+SCREEN_WIDTH, SCREEN_HEIGHT = 800, 600
+BACKGROUND_COLOR = (0, 0, 0)
+WALL_COLOR = (255, 255, 255)
+PATH_COLOR = (0, 0, 255)
+PLAYER_COLOR = (255, 0, 0)
+CELL_SIZE = 40
+WALL_THICKNESS = 2
+FPS = 60
+
+# Screen setup
+screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
+pygame.display.set_caption('Maze Game')
+clock = pygame.time.Clock()
+
+class Player:
+    def __init__(self, x, y):
+        self.rect = pygame.Rect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE)
+
+    def move(self, dx, dy):
+        self.rect.x += dx * CELL_SIZE
+        self.rect.y += dy * CELL_SIZE
+
+def draw_maze(maze, player):
+    for y in range(len(maze)):
+        for x in range(len(maze[y])):
+            cell = maze[y][x]
+            if cell == 'W':
+                pygame.draw.rect(screen, WALL_COLOR, (x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE))
+            else:
+                pygame.draw.rect(screen, PATH_COLOR, (x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE))
+    pygame.draw.rect(screen, PLAYER_COLOR, player.rect)
+
+def is_path(maze, x, y):
+    if 0 <= x < len(maze[0]) and 0 <= y < len(maze) and maze[y][x] == 'P':
+        return True
+    return False
+
+def generate_maze(width, height):
+    maze = [['W' for _ in range(width)] for _ in range(height)]
+    stack = [(1, 1)]
+
+    while stack:
+        cell = stack[-1]
+        x, y = cell
+        maze[y][x] = 'P'  # Mark cell as path
+        neighbors = []
+
+        if x > 1 and maze[y][x - 2] == 'W':
+            neighbors.append((x - 2, y))
+        if x < width - 2 and maze[y][x + 2] == 'W':
+            neighbors.append((x + 2, y))
+        if y > 1 and maze[y - 2][x] == 'W':
+            neighbors.append((x, y - 2))
+        if y < height - 2 and maze[y + 2][x] == 'W':
+            neighbors.append((x, y + 2))
+
+        if neighbors:
+            next_cell = random.choice(neighbors)
+            nx, ny = next_cell
+            if nx == x:
+                maze[min(ny, y) + 1][x] = 'P'
+            else:
+                maze[y][min(nx, x) + 1] = 'P'
+            stack.append(next_cell)
+        else:
+            stack.pop()
+
+    return maze
+
+def main():
+    maze = generate_maze(SCREEN_WIDTH // CELL_SIZE, SCREEN_HEIGHT // CELL_SIZE)
+    player = Player(1, 1)
+
+    running = True
+    while running:
+        for event in pygame.event.get():
+            if event.type == pygame.QUIT:
+                running = False
+
+            if event.type == pygame.KEYDOWN:
+                if event.key == pygame.K_LEFT:
+                    if is_path(maze, player.rect.x // CELL_SIZE - 1, player.rect.y // CELL_SIZE):
+                        player.move(-1, 0)
+                elif event.key == pygame.K_RIGHT:
+                    if is_path(maze, player.rect.x // CELL_SIZE + 1, player.rect.y // CELL_SIZE):
+                        player.move(1, 0)
+                elif event.key == pygame.K_UP:
+                    if is_path(maze, player.rect.x // CELL_SIZE, player.rect.y // CELL_SIZE - 1):
+                        player.move(0, -1)
+                elif event.key == pygame.K_DOWN:
+                    if is_path(maze, player.rect.x // CELL_SIZE, player.rect.y // CELL_SIZE + 1):
+                        player.move(0, 1)
+
+        screen.fill(BACKGROUND_COLOR)
+        draw_maze(maze, player)
+        pygame.display.flip()
+        clock.tick(FPS)
+
+    pygame.quit()
+    sys.exit()
+
+if __name__ == "__main__":
+    main()
diff --git a/utils/image-192x192.png b/utils/image-192x192.png
diff --git a/utils/image-384x384.png b/utils/image-384x384.png
diff --git a/utils/image-512x512.png b/utils/image-512x512.png
diff --git a/utils/image-72x72.png b/utils/image-72x72.png