From e2913f9ff39a6e19a1213100cf322d13cee2755b Mon Sep 17 00:00:00 2001 From: Himanshu Bhardwaj Date: Thu, 27 Jun 2024 22:20:51 +0530 Subject: [PATCH] pacman static files evam levels added. --- README.md | 28 --------------------- index.html | 14 +++++++++++ jsPacman/pacman.css | 27 ++++++++++++++++++++ jsPacman/pacman.html | 21 ++++++++++++++++ jsPacman/pacman.js | 59 ++++++++++++++++++++++++++++++++++++++++++++ static/p_logo.svg | 1 + 6 files changed, 122 insertions(+), 28 deletions(-) create mode 100644 jsPacman/pacman.css create mode 100644 jsPacman/pacman.html create mode 100644 jsPacman/pacman.js create mode 100644 static/p_logo.svg diff --git a/README.md b/README.md index 5461e76..2f731c9 100644 --- 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 index 9bce1c2..be30052 100644 --- a/index.html +++ b/index.html @@ -144,6 +144,20 @@

Chess

+
+

Pacman

+ + + + +
+ + + +
+
*This website is a work in progress and would be completed soon. While diff --git a/jsPacman/pacman.css b/jsPacman/pacman.css new file mode 100644 index 0000000..fd894d8 --- /dev/null +++ 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 new file mode 100644 index 0000000..8714b24 --- /dev/null +++ b/jsPacman/pacman.html @@ -0,0 +1,21 @@ + + + + + + + + Pacman + + +
+
+ + + +
+
+
+ + + diff --git a/jsPacman/pacman.js b/jsPacman/pacman.js new file mode 100644 index 0000000..24d04c7 --- /dev/null +++ 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 new file mode 100644 index 0000000..80ae496 --- /dev/null +++ b/static/p_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file