3D Maze

P-lavanya16 · Jul 12, 2024 · 55160f7 · 55160f7
1 parent a163efe
commit 55160f7
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 0 deletions.
diff --git a/3D Maze/README.md b/3D Maze/README.md
@@ -0,0 +1,28 @@
+# **3D Maze Chrome Extension**
+
+---
+
+<br>
+
+# **Description 📃**
+<!-- add your game description here  -->
+- The 3D Maze Chrome extension is an interactive game that brings a 3D maze to your browser. Navigate through the maze using your keyboard and enjoy a fun break from your daily tasks.
+
+# **Functionalities 🎮**
+<!-- add functionalities over here -->
+- Interactive 3D maze game playable directly within the extension.
+- Use arrow keys to navigate through the maze.
+- Simple and intuitive controls for an enjoyable gaming experience.
+- User-friendly interface with a clean and intuitive design.
+<br>
+
+
+# **How to Use? 🕹️**
+<!-- add the steps how to use extension -->
+- Install the 3D Maze Chrome extension from the Chrome Web Store.
+- Click on the extension icon to open the game.
+- Use the arrow keys on your keyboard to move through the maze.
+- Navigate through the maze to find the exit and complete the game.
+- Enjoy the game and take a fun break whenever you need it.
+
+<br>
diff --git a/3D Maze/index.html b/3D Maze/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Maze Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="maze"></div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/3D Maze/manifest.json b/3D Maze/manifest.json
@@ -0,0 +1,16 @@
+{
+    "manifest_version": 3,
+    "name": "3D Maze Game",
+    "version": "1.0",
+    "description": "A simple 3D maze game.",
+    "permissions": [],
+    "action": {
+      "default_popup": "index.html",
+      "default_icon": {
+        "16": "icon.png",
+        "48": "icon.png",
+        "128": "icon.png"
+      }
+    }
+  }
+
diff --git a/3D Maze/script.js b/3D Maze/script.js
@@ -0,0 +1,41 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const mazeElement = document.getElementById('maze');
+
+    const walls = [
+        { x: 0, y: 0 },
+        { x: 100, y: 0 },
+        { x: 200, y: 0 },
+        // Add more walls here
+    ];
+
+    walls.forEach(wall => {
+        const wallElement = document.createElement('div');
+        wallElement.className = 'wall';
+        wallElement.style.transform = `translateX(${wall.x}px) translateY(${wall.y}px)`;
+        mazeElement.appendChild(wallElement);
+    });
+
+    const playerElement = document.createElement('div');
+    playerElement.className = 'player';
+    mazeElement.appendChild(playerElement);
+
+    let playerPosition = { x: 0, y: 0 };
+
+    document.addEventListener('keydown', (e) => {
+        switch (e.key) {
+            case 'ArrowUp':
+                playerPosition.y -= 10;
+                break;
+            case 'ArrowDown':
+                playerPosition.y += 10;
+                break;
+            case 'ArrowLeft':
+                playerPosition.x -= 10;
+                break;
+            case 'ArrowRight':
+                playerPosition.x += 10;
+                break;
+        }
+        playerElement.style.transform = `translateX(${playerPosition.x}px) translateY(${playerPosition.y}px) translateZ(50px)`;
+    });
+});
diff --git a/3D Maze/style.css b/3D Maze/style.css
@@ -0,0 +1,30 @@
+body, html {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+#maze {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    perspective: 1000px;
+}
+
+.wall {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    background-color: #333;
+    transform-style: preserve-3d;
+}
+
+.player {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    background-color: red;
+    transform: translateZ(50px);
+}