{"id":7768,"date":"2024-05-29T12:54:38","date_gmt":"2024-05-29T12:54:38","guid":{"rendered":"https:\/\/foolishdeveloper.com\/?p=7768"},"modified":"2024-05-29T12:54:40","modified_gmt":"2024-05-29T12:54:40","slug":"maze-game-using-html-css-and-javascript","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/maze-game-using-html-css-and-javascript\/","title":{"rendered":"Maze Game Using HTML, CSS and JavaScript"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Introduction :<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This project is a simple maze game built using HTML, CSS, and JavaScript. The goal of the game is to navigate a player character from the starting position to the end position within a grid-based maze, using arrow keys for movement. The maze is represented by a grid, where different cells can be paths, walls, the start, or the end.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Explanation :<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Structure<\/h4>
  1. HTML<\/strong>: Defines the main layout of the game.<\/li>
  2. CSS<\/strong>: Adds visual styling to the maze and its elements.<\/li>
  3. JavaScript<\/strong>: Handles the game’s functionality, including creating the maze and moving the player.<\/li><\/ol>

    HTML<\/h4>
    • The HTML part creates the basic webpage structure.<\/li>
    • A <div><\/code> element with the ID “maze” is used to hold the maze grid.<\/li><\/ul>

      CSS<\/h4>
      • The CSS styles the page to center the maze both vertically and horizontally.<\/li>
      • The maze is displayed as a grid with 10 rows and 10 columns.<\/li>
      • Different classes (.cell<\/code>, .start<\/code>, .end<\/code>, .wall<\/code>, .player<\/code>) are used to style the maze cells with different colors and borders:
        • .cell<\/code>: Basic cell styling.<\/li>
        • .start<\/code>: Green cell indicating the start position.<\/li>
        • .end<\/code>: Red cell indicating the end position.<\/li>
        • .wall<\/code>: Black cell representing walls.<\/li>
        • .player<\/code>: Blue cell representing the player’s current position.<\/li><\/ul><\/li><\/ul>

          JavaScript<\/h4>

          1. Maze Definition:<\/strong><\/p>

          • The maze is represented as a 2D array with 1<\/code> for paths and 0<\/code> for walls.<\/li><\/ul>

            2. Creating the Maze:<\/strong><\/p>

            • The createMaze<\/code> function reads the 2D array and creates a grid of div<\/code> elements for each cell.<\/li>
            • Each cell is styled according to its type (path, wall, start, end).<\/li><\/ul>

              3. Player Movement:<\/strong><\/p>

              • The player starts at the top-left corner (the start position).<\/li>
              • The player can move up, down, left, or right using the arrow keys.<\/li>
              • The movePlayer<\/code> function handles movement by:
                • Determining the new position based on the key pressed.<\/li>
                • Checking if the new position is valid (i.e., within the maze bounds and not a wall).<\/li>
                • Updating the player’s position if the move is valid.<\/li><\/ul><\/li><\/ul>

                  4. Utility Functions:<\/strong><\/p>

                  • getPlayerPosition<\/code> finds the player’s current position within the grid.<\/li>
                  • isValidMove<\/code> checks if the proposed move is within the bounds and not a wall.<\/li><\/ul>

                    5. Initialization:<\/strong><\/p>

                    • The maze is created when the page loads.<\/li>
                    • The player is placed at the starting position.<\/li>
                    • An event listener is added to handle key presses for player movement.<\/li><\/ul>

                      Purpose of Functions<\/h4>
                      1. createMaze<\/strong>: Generates the visual representation of the maze based on the 2D array.<\/li>
                      2. movePlayer<\/strong>: Updates the player’s position based on key presses and checks for winning condition.<\/li>
                      3. getPlayerPosition<\/strong>: Finds the current position of the player in the grid.<\/li>
                      4. isValidMove<\/strong>: Ensures the player moves within the maze’s boundaries and avoids walls.<\/li><\/ol>

                        Summary<\/h3>

                        The maze game is a simple yet interactive project that combines HTML, CSS, and JavaScript. HTML sets up the structure, CSS styles it, and JavaScript brings the game to life by handling the maze creation and player movement. This project demonstrates basic principles of web development and game logic.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

                        \n\t\t\t\t
                        \n\t\t\t\t\t

                        SOURCE CODE :<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                        \n\t\t\t\t
                        \n\t\t\t\t\t

                        HTML (index.html)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                        \n\t\t\t\t
                        \n\t\t\t\t\t\t\t
                        \n\t\t\t
                        \n\t\t\t\t\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Maze Game<\/title>\r\n<link rel=\"stylesheet\" href=\"style.css\">\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"maze\"><\/div>\r\n\r\n<script src=\"index.js\"><\/script>c\r\n\r\n<\/body>\r\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6db9960 elementor-widget elementor-widget-heading\" data-id=\"6db9960\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS (style.css)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3be9afb elementor-widget elementor-widget-code-highlight\" data-id=\"3be9afb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia  word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css \">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>body {\r\n    font-family: Arial, sans-serif;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    height: 100vh;\r\n    margin: 0;\r\n}\r\n\r\n#maze {\r\n    display: grid;\r\n    grid-template-columns: repeat(10, 50px);\r\n    grid-template-rows: repeat(10, 50px);\r\n    gap: 1px;\r\n    background-color: #eee;\r\n}\r\n\r\n.cell {\r\n    background-color: #fff;\r\n    border: 1px solid #ccc;\r\n}\r\n\r\n.cell.start {\r\n    background-color: green;\r\n}\r\n\r\n.cell.end {\r\n    background-color: red;\r\n}\r\n\r\n.cell.wall {\r\n    background-color: #000;\r\n}\r\n\r\n.cell.player {\r\n    background-color: blue;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34c981d elementor-widget elementor-widget-heading\" data-id=\"34c981d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">JavaScript (index.js)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c768228 elementor-widget elementor-widget-code-highlight\" data-id=\"c768228\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia  word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const maze = [\r\n    [1, 1, 1, 0, 1, 0, 1, 1, 1, 1],\r\n    [1, 0, 1, 1, 1, 1, 1, 0, 0, 1],\r\n    [1, 0, 0, 0, 0, 0, 1, 1, 1, 1],\r\n    [1, 1, 1, 1, 1, 0, 0, 1, 0, 1],\r\n    [1, 0, 0, 0, 1, 1, 1, 1, 1, 0],\r\n    [1, 0, 1, 1, 1, 0, 0, 0, 0, 0],\r\n    [1, 1, 1, 0, 1, 1, 1, 1, 0,],\r\n    [1, 0, 1, 0, 1, 0, 0, 1, 1, 1],\r\n    [1, 1, 1, 0, 1, 1, 1, 1, 0, 1],\r\n    [1, 1, 1, 0, 1, 1, 1, 0, 1, 1]\r\n];\r\n\r\nconst mazeElement = document.getElementById('maze');\r\n\r\nfunction createMaze() {\r\n    for (let i = 0; i < maze.length; i++) {\r\n        for (let j = 0; j < maze[i].length; j++) {\r\n            const cell = document.createElement('div');\r\n            cell.classList.add('cell');\r\n            if (maze[i][j] === 0) {\r\n                cell.classList.add('wall');\r\n            } else if (i === 0 && j === 0) {\r\n                cell.classList.add('start');\r\n            } else if (i === maze.length - 1 && j === maze[i].length - 1) {\r\n                cell.classList.add('end');\r\n            }\r\n            mazeElement.appendChild(cell);\r\n        }\r\n    }\r\n}\r\n\r\nfunction movePlayer(event) {\r\n    const key = event.key;\r\n    let playerPosition = document.querySelector('.player');\r\n    let [row, col] = getPlayerPosition(playerPosition);\r\n    let newRow = row;\r\n    let newCol = col;\r\n\r\n    switch (key) {\r\n        case 'ArrowUp':\r\n            newRow = row - 1;\r\n            break;\r\n        case 'ArrowDown':\r\n            newRow = row + 1;\r\n            break;\r\n        case 'ArrowLeft':\r\n            newCol = col - 1;\r\n            break;\r\n        case 'ArrowRight':\r\n            newCol = col + 1;\r\n            break;\r\n        default:\r\n            return;\r\n    }\r\n\r\n    if (isValidMove(newRow, newCol)) {\r\n        playerPosition.classList.remove('player');\r\n        mazeElement.children[newRow * maze.length + newCol].classList.add('player');\r\n    }\r\n\r\n    if (newRow === maze.length - 1 && newCol === maze[newRow].length - 1) {\r\n        alert('You won!');\r\n        window.removeEventListener('keydown', movePlayer);\r\n    }\r\n}\r\n\r\nfunction getPlayerPosition(playerPosition) {\r\n    const index = Array.from(mazeElement.children).indexOf(playerPosition);\r\n    const row = Math.floor(index \/ maze.length);\r\n    const col = index % maze.length;\r\n    return [row, col];\r\n}\r\n\r\nfunction isValidMove(row, col) {\r\n    return row >= 0 && row < maze.length && col >= 0 && col < maze[row].length && maze[row][col] !== 0;\r\n}\r\n\r\ncreateMaze();\r\nmazeElement.children[0].classList.add('player');\r\nwindow.addEventListener('keydown', movePlayer);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-572dcbd elementor-widget elementor-widget-heading\" data-id=\"572dcbd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">OUTPUT :<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6b968ff elementor-widget elementor-widget-image\" data-id=\"6b968ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"1017\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-20-1024x1017.png\" class=\"attachment-large size-large wp-image-7769\" alt=\"OUTPUT\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-20-1024x1017.png 1024w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-20-300x298.png 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-20-150x149.png 150w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-20-768x763.png 768w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-20-96x96.png 96w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-20.png 1089w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Introduction : This project is a simple maze game built using HTML, CSS, and JavaScript. The goal of the game is to navigate a player character from the starting position to the end position within a grid-based maze, using arrow keys for movement. The maze is represented by a grid, where different cells can be [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":7770,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[41],"tags":[582],"class_list":["post-7768","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript_app","tag-maze-app-using-html-css-and-javascript","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/7768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=7768"}],"version-history":[{"count":15,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/7768\/revisions"}],"predecessor-version":[{"id":7785,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/7768\/revisions\/7785"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/7770"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=7768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=7768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=7768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}