pacman static files evam levels added.

Bhardwaj-Himanshu · Jun 27, 2024 · e2913f9 · e2913f9
1 parent c49c0ea
commit e2913f9
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -1,31 +1,3 @@
 # All-in-One
 
 A collection of random but not so random JS/React projects!
-
-## JS
-
-### Weather App
-
-https://github.com/Bhardwaj-Himanshu/All-in-One/assets/74407676/9e7a1c75-20c1-4be7-bd38-65f02b65aca0
-
-### Image Search App
-
-https://github.com/Bhardwaj-Himanshu/All-in-One/assets/74407676/3abce459-b0cc-424f-aba4-b5bdc2b5ff5b
-
-## React
-
-### Travel Landing Page
-
-https://github.com/Bhardwaj-Himanshu/All-in-One/assets/74407676/eec376fc-aba9-4773-b31e-38923eaf436b
-
-### Random Password Generator
-
-https://github.com/Bhardwaj-Himanshu/All-in-One/assets/74407676/9ffa63c0-8a99-4786-bbaa-c805ddfda3d8
-
-### Currency Convertor
-
-https://github.com/Bhardwaj-Himanshu/All-in-One/assets/74407676/acf63b41-60ef-421c-874a-01760f07b6bb
-
-### Curent Checklist
-
-- [ ] Align the styles of all the mini projects inside this to match the home page style!
diff --git a/index.html b/index.html
@@ -144,6 +144,20 @@ <h2>Chess</h2>
           </a>
         </div>
       </div>
+      <div class="grid JS">
+        <h2>Pacman</h2>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+          <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+          <path
+            d="M40.1 467.1l-11.2 9c-3.2 2.5-7.1 3.9-11.1 3.9C8 480 0 472 0 462.2V192C0 86 86 0 192 0S384 86 384 192V462.2c0 9.8-8 17.8-17.8 17.8c-4 0-7.9-1.4-11.1-3.9l-11.2-9c-13.4-10.7-32.8-9-44.1 3.9L269.3 506c-3.3 3.8-8.2 6-13.3 6s-9.9-2.2-13.3-6l-26.6-30.5c-12.7-14.6-35.4-14.6-48.2 0L141.3 506c-3.3 3.8-8.2 6-13.3 6s-9.9-2.2-13.3-6L84.2 471c-11.3-12.9-30.7-14.6-44.1-3.9zM160 192a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"
+          />
+        </svg>
+        <div class="buttons">
+          <a href="./jsPacman/pacman.html" target="_blank">
+            <button style="font-family: JetBrains Mono">Pacman</button>
+          </a>
+        </div>
+      </div>
     </div>
     <span class="ending"
       >*This website is a work in progress and would be completed soon. While

diff --git a/jsPacman/pacman.css b/jsPacman/pacman.css
@@ -0,0 +1,27 @@
+body {
+  padding-top: 8rem;
+}
+
+#container {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  align-items: center;
+}
+
+#board {
+  width: 320px;
+  height: 320px;
+  border: 5px solid black;
+  display: grid;
+  grid-template-rows: repeat(10, 1fr);
+  grid-template-columns: repeat(10, 1fr);
+}
+
+.grid {
+  border: 1px solid blue;
+}
+
+.wall {
+  background-color: brown;
+}
diff --git a/jsPacman/pacman.html b/jsPacman/pacman.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="../static/p_logo.svg" />
+    <link rel="stylesheet" href="./pacman.css" />
+    <title>Pacman</title>
+  </head>
+  <body>
+    <div id="container">
+      <div id="level-buttons">
+        <button class="level-button">Level 1</button>
+        <button class="level-button">Level 2</button>
+        <button class="level-button">Level 3</button>
+      </div>
+      <div id="board"></div>
+    </div>
+    <script src="./pacman.js"></script>
+  </body>
+</html>
diff --git a/jsPacman/pacman.js b/jsPacman/pacman.js
@@ -0,0 +1,59 @@
+const board = document.getElementById('board');
+const levelButtons = document.querySelectorAll('.level-button');
+
+const levelOne = [
+  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 0,
+  1, 1, 0, 1, 1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0,
+  0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,
+  0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
+];
+
+const levelTwo = [
+  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0, 1, 0,
+  1, 0, 0, 1, 1, 0, 1, 0, 0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1,
+  1, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1,
+  0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
+];
+
+const levelThree = [
+  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1,
+  0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0,
+  1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,
+  0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
+];
+
+function levelDrawer(levelName = levelOne) {
+  board.innerHTML = '';
+  for (let i = 0; i < 100; i++) {
+    const element = document.createElement('div');
+    element.classList.add('grid');
+    element.setAttribute('id', i);
+    if (levelName[i] == 1) {
+      element.classList.add('wall');
+    }
+    board.appendChild(element);
+  }
+}
+
+levelDrawer();
+
+levelButtons.forEach((element, elementIndex) => {
+  element.addEventListener('click', () => {
+    switch (elementIndex) {
+      case 0:
+        // console.log('level 1 should be started.');
+        levelDrawer(levelOne);
+        break;
+      case 1:
+        // console.log('level 2 should be started.');
+        levelDrawer(levelTwo);
+        break;
+      case 2:
+        // console.log('level 3 should be started.');
+        levelDrawer(levelThree);
+        break;
+      default:
+        break;
+    }
+  });
+});
diff --git a/static/p_logo.svg b/static/p_logo.svg