diff --git a/Games/Makeover_Game/README.md b/Games/Makeover_Game/README.md new file mode 100644 index 0000000000..a31a560e9a --- /dev/null +++ b/Games/Makeover_Game/README.md @@ -0,0 +1,26 @@ +# **Makeover Game** +--- + +## **Description 📃** + +The Makeover Game is a fun and interactive browser-based game where players can design and customize outfits for a virtual character. Players can mix and match different clothing items, accessories, and hairstyles to create their perfect look. + +## **Functionalities 🎮** + +1. Choose from a variety of clothing items including tops, bottoms, dresses, and shoes. +2. Customize hairstyles and hair colors. +3. Save and download your customized outfit. +4. Share your design with friends on social media. + +## **How to play? 🕹ī¸** + +1. Start the Game: Open the game in your browser and wait for it to load. +2. Select an Item: Click on the clothing categories to browse through available items. +3. Mix and Match: You can change the brightness, hue and saturation. +4. Customize Further: Use the options to change the character's hairstyle and skin colour. +5. Save Your Design: Once you're happy with the outfit, click the "Capture" button to save an image of your design. +6. Download and Share: Download the image to your device and share it with your friends. + +## **Screenshots 📸** +![image](https://github.com/abckhush/GameZone/assets/127378920/b155d557-eff1-4731-b3ac-1e89080be0cf) +![image](https://github.com/abckhush/GameZone/assets/127378920/b9ec77b4-1eb8-451e-b390-c626cd6b93d5) diff --git a/Games/Makeover_Game/img/base/base_1.png b/Games/Makeover_Game/img/base/base_1.png new file mode 100644 index 0000000000..c2afa7bf91 Binary files /dev/null and b/Games/Makeover_Game/img/base/base_1.png differ diff --git a/Games/Makeover_Game/img/base/base_10.png b/Games/Makeover_Game/img/base/base_10.png new file mode 100644 index 0000000000..f54f50227a Binary files /dev/null and b/Games/Makeover_Game/img/base/base_10.png differ diff --git a/Games/Makeover_Game/img/base/base_2.png b/Games/Makeover_Game/img/base/base_2.png new file mode 100644 index 0000000000..bbb81ae8dc Binary files /dev/null and b/Games/Makeover_Game/img/base/base_2.png differ diff --git a/Games/Makeover_Game/img/base/base_3.png b/Games/Makeover_Game/img/base/base_3.png new file mode 100644 index 0000000000..c50c7113a1 Binary files /dev/null and b/Games/Makeover_Game/img/base/base_3.png differ diff --git a/Games/Makeover_Game/img/base/base_4.png b/Games/Makeover_Game/img/base/base_4.png new file mode 100644 index 0000000000..41fedc704c Binary files /dev/null and b/Games/Makeover_Game/img/base/base_4.png differ diff --git a/Games/Makeover_Game/img/base/base_5.png b/Games/Makeover_Game/img/base/base_5.png new file mode 100644 index 0000000000..96da9c5ca4 Binary files /dev/null and b/Games/Makeover_Game/img/base/base_5.png differ diff --git a/Games/Makeover_Game/img/base/base_6.png b/Games/Makeover_Game/img/base/base_6.png new file mode 100644 index 0000000000..c72d0c3af8 Binary files /dev/null and b/Games/Makeover_Game/img/base/base_6.png differ diff --git a/Games/Makeover_Game/img/base/base_7.png b/Games/Makeover_Game/img/base/base_7.png new file mode 100644 index 0000000000..908889e1de Binary files /dev/null and b/Games/Makeover_Game/img/base/base_7.png differ diff --git a/Games/Makeover_Game/img/base/base_8.png b/Games/Makeover_Game/img/base/base_8.png new file mode 100644 index 0000000000..76a1ff456c Binary files /dev/null and b/Games/Makeover_Game/img/base/base_8.png differ diff --git a/Games/Makeover_Game/img/base/base_9.png b/Games/Makeover_Game/img/base/base_9.png new file mode 100644 index 0000000000..4232e4d542 Binary files /dev/null and b/Games/Makeover_Game/img/base/base_9.png differ diff --git a/Games/Makeover_Game/img/bg.png b/Games/Makeover_Game/img/bg.png new file mode 100644 index 0000000000..0435810674 Binary files /dev/null and b/Games/Makeover_Game/img/bg.png differ diff --git a/Games/Makeover_Game/img/bottom/bottom_1.png b/Games/Makeover_Game/img/bottom/bottom_1.png new file mode 100644 index 0000000000..dc55017050 Binary files /dev/null and b/Games/Makeover_Game/img/bottom/bottom_1.png differ diff --git a/Games/Makeover_Game/img/bottom/bottom_10.png b/Games/Makeover_Game/img/bottom/bottom_10.png new file mode 100644 index 0000000000..be18696e2b Binary files /dev/null and b/Games/Makeover_Game/img/bottom/bottom_10.png differ diff --git a/Games/Makeover_Game/img/bottom/bottom_2.png b/Games/Makeover_Game/img/bottom/bottom_2.png new file mode 100644 index 0000000000..7418048d2d Binary files /dev/null and b/Games/Makeover_Game/img/bottom/bottom_2.png differ diff --git a/Games/Makeover_Game/img/bottom/bottom_3.png b/Games/Makeover_Game/img/bottom/bottom_3.png new file mode 100644 index 0000000000..c3ed98109f Binary files /dev/null and b/Games/Makeover_Game/img/bottom/bottom_3.png differ diff --git a/Games/Makeover_Game/img/bottom/bottom_4.png b/Games/Makeover_Game/img/bottom/bottom_4.png new file mode 100644 index 0000000000..61b0c89c09 Binary files /dev/null and b/Games/Makeover_Game/img/bottom/bottom_4.png differ diff --git a/Games/Makeover_Game/img/bottom/bottom_5.png b/Games/Makeover_Game/img/bottom/bottom_5.png new file mode 100644 index 0000000000..a5b4d2f0a3 Binary files /dev/null and b/Games/Makeover_Game/img/bottom/bottom_5.png differ diff --git a/Games/Makeover_Game/img/bottom/bottom_6.png b/Games/Makeover_Game/img/bottom/bottom_6.png new file mode 100644 index 0000000000..e68a8b7457 Binary files /dev/null and b/Games/Makeover_Game/img/bottom/bottom_6.png differ diff --git a/Games/Makeover_Game/img/bottom/bottom_7.png b/Games/Makeover_Game/img/bottom/bottom_7.png new file mode 100644 index 0000000000..2865d9df95 Binary files /dev/null and b/Games/Makeover_Game/img/bottom/bottom_7.png differ diff --git a/Games/Makeover_Game/img/bottom/bottom_8.png b/Games/Makeover_Game/img/bottom/bottom_8.png new file mode 100644 index 0000000000..85344c479f Binary files /dev/null and b/Games/Makeover_Game/img/bottom/bottom_8.png differ diff --git a/Games/Makeover_Game/img/bottom/bottom_9.png b/Games/Makeover_Game/img/bottom/bottom_9.png new file mode 100644 index 0000000000..23a43c1fa6 Binary files /dev/null and b/Games/Makeover_Game/img/bottom/bottom_9.png differ diff --git a/Games/Makeover_Game/img/camera-icon.png b/Games/Makeover_Game/img/camera-icon.png new file mode 100644 index 0000000000..b71c142541 Binary files /dev/null and b/Games/Makeover_Game/img/camera-icon.png differ diff --git a/Games/Makeover_Game/img/hair/hair_1.png b/Games/Makeover_Game/img/hair/hair_1.png new file mode 100644 index 0000000000..b37fcfcd9d Binary files /dev/null and b/Games/Makeover_Game/img/hair/hair_1.png differ diff --git a/Games/Makeover_Game/img/hair/hair_10.png b/Games/Makeover_Game/img/hair/hair_10.png new file mode 100644 index 0000000000..e4d58e032d Binary files /dev/null and b/Games/Makeover_Game/img/hair/hair_10.png differ diff --git a/Games/Makeover_Game/img/hair/hair_2.png b/Games/Makeover_Game/img/hair/hair_2.png new file mode 100644 index 0000000000..2a2f2bc366 Binary files /dev/null and b/Games/Makeover_Game/img/hair/hair_2.png differ diff --git a/Games/Makeover_Game/img/hair/hair_3.png b/Games/Makeover_Game/img/hair/hair_3.png new file mode 100644 index 0000000000..f6e209ea73 Binary files /dev/null and b/Games/Makeover_Game/img/hair/hair_3.png differ diff --git a/Games/Makeover_Game/img/hair/hair_4.png b/Games/Makeover_Game/img/hair/hair_4.png new file mode 100644 index 0000000000..6b44e05336 Binary files /dev/null and b/Games/Makeover_Game/img/hair/hair_4.png differ diff --git a/Games/Makeover_Game/img/hair/hair_5.png b/Games/Makeover_Game/img/hair/hair_5.png new file mode 100644 index 0000000000..632ee19491 Binary files /dev/null and b/Games/Makeover_Game/img/hair/hair_5.png differ diff --git a/Games/Makeover_Game/img/hair/hair_6.png b/Games/Makeover_Game/img/hair/hair_6.png new file mode 100644 index 0000000000..79cada3de4 Binary files /dev/null and b/Games/Makeover_Game/img/hair/hair_6.png differ diff --git a/Games/Makeover_Game/img/hair/hair_7.png b/Games/Makeover_Game/img/hair/hair_7.png new file mode 100644 index 0000000000..5c460c9b20 Binary files /dev/null and b/Games/Makeover_Game/img/hair/hair_7.png differ diff --git a/Games/Makeover_Game/img/hair/hair_8.png b/Games/Makeover_Game/img/hair/hair_8.png new file mode 100644 index 0000000000..1d98465d40 Binary files /dev/null and b/Games/Makeover_Game/img/hair/hair_8.png differ diff --git a/Games/Makeover_Game/img/hair/hair_9.png b/Games/Makeover_Game/img/hair/hair_9.png new file mode 100644 index 0000000000..33e492c0b1 Binary files /dev/null and b/Games/Makeover_Game/img/hair/hair_9.png differ diff --git a/Games/Makeover_Game/img/shoes/shoes_1.png b/Games/Makeover_Game/img/shoes/shoes_1.png new file mode 100644 index 0000000000..23a3f2f1c5 Binary files /dev/null and b/Games/Makeover_Game/img/shoes/shoes_1.png differ diff --git a/Games/Makeover_Game/img/shoes/shoes_2.png b/Games/Makeover_Game/img/shoes/shoes_2.png new file mode 100644 index 0000000000..ac3db481b5 Binary files /dev/null and b/Games/Makeover_Game/img/shoes/shoes_2.png differ diff --git a/Games/Makeover_Game/img/shoes/shoes_3.png b/Games/Makeover_Game/img/shoes/shoes_3.png new file mode 100644 index 0000000000..10dc16aae6 Binary files /dev/null and b/Games/Makeover_Game/img/shoes/shoes_3.png differ diff --git a/Games/Makeover_Game/img/shoes/shoes_4.png b/Games/Makeover_Game/img/shoes/shoes_4.png new file mode 100644 index 0000000000..cbc5ed4eef Binary files /dev/null and b/Games/Makeover_Game/img/shoes/shoes_4.png differ diff --git a/Games/Makeover_Game/img/shoes/shoes_5.png b/Games/Makeover_Game/img/shoes/shoes_5.png new file mode 100644 index 0000000000..07f151d793 Binary files /dev/null and b/Games/Makeover_Game/img/shoes/shoes_5.png differ diff --git a/Games/Makeover_Game/img/test/next-btn.png b/Games/Makeover_Game/img/test/next-btn.png new file mode 100644 index 0000000000..32e1d64f55 Binary files /dev/null and b/Games/Makeover_Game/img/test/next-btn.png differ diff --git a/Games/Makeover_Game/img/test/next-btn.psd b/Games/Makeover_Game/img/test/next-btn.psd new file mode 100644 index 0000000000..250c6e1137 Binary files /dev/null and b/Games/Makeover_Game/img/test/next-btn.psd differ diff --git a/Games/Makeover_Game/img/test/prev-btn.png b/Games/Makeover_Game/img/test/prev-btn.png new file mode 100644 index 0000000000..987c39e5bf Binary files /dev/null and b/Games/Makeover_Game/img/test/prev-btn.png differ diff --git a/Games/Makeover_Game/img/test/test-layout-bg.png b/Games/Makeover_Game/img/test/test-layout-bg.png new file mode 100644 index 0000000000..31797201bb Binary files /dev/null and b/Games/Makeover_Game/img/test/test-layout-bg.png differ diff --git a/Games/Makeover_Game/img/test/test-layout.psd b/Games/Makeover_Game/img/test/test-layout.psd new file mode 100644 index 0000000000..3870cb3cb5 Binary files /dev/null and b/Games/Makeover_Game/img/test/test-layout.psd differ diff --git a/Games/Makeover_Game/img/top/top_1.png b/Games/Makeover_Game/img/top/top_1.png new file mode 100644 index 0000000000..c082103b7b Binary files /dev/null and b/Games/Makeover_Game/img/top/top_1.png differ diff --git a/Games/Makeover_Game/img/top/top_10.png b/Games/Makeover_Game/img/top/top_10.png new file mode 100644 index 0000000000..07c51fc656 Binary files /dev/null and b/Games/Makeover_Game/img/top/top_10.png differ diff --git a/Games/Makeover_Game/img/top/top_2.png b/Games/Makeover_Game/img/top/top_2.png new file mode 100644 index 0000000000..77bfe70a32 Binary files /dev/null and b/Games/Makeover_Game/img/top/top_2.png differ diff --git a/Games/Makeover_Game/img/top/top_3.png b/Games/Makeover_Game/img/top/top_3.png new file mode 100644 index 0000000000..aeea9003df Binary files /dev/null and b/Games/Makeover_Game/img/top/top_3.png differ diff --git a/Games/Makeover_Game/img/top/top_4.png b/Games/Makeover_Game/img/top/top_4.png new file mode 100644 index 0000000000..2c7260e505 Binary files /dev/null and b/Games/Makeover_Game/img/top/top_4.png differ diff --git a/Games/Makeover_Game/img/top/top_5.png b/Games/Makeover_Game/img/top/top_5.png new file mode 100644 index 0000000000..f1fbb7fc88 Binary files /dev/null and b/Games/Makeover_Game/img/top/top_5.png differ diff --git a/Games/Makeover_Game/img/top/top_6.png b/Games/Makeover_Game/img/top/top_6.png new file mode 100644 index 0000000000..7b71674f2c Binary files /dev/null and b/Games/Makeover_Game/img/top/top_6.png differ diff --git a/Games/Makeover_Game/img/top/top_7.png b/Games/Makeover_Game/img/top/top_7.png new file mode 100644 index 0000000000..f30d0d0f1e Binary files /dev/null and b/Games/Makeover_Game/img/top/top_7.png differ diff --git a/Games/Makeover_Game/img/top/top_8.png b/Games/Makeover_Game/img/top/top_8.png new file mode 100644 index 0000000000..83a97c05f2 Binary files /dev/null and b/Games/Makeover_Game/img/top/top_8.png differ diff --git a/Games/Makeover_Game/img/top/top_9.png b/Games/Makeover_Game/img/top/top_9.png new file mode 100644 index 0000000000..c19384df0b Binary files /dev/null and b/Games/Makeover_Game/img/top/top_9.png differ diff --git a/Games/Makeover_Game/index.html b/Games/Makeover_Game/index.html new file mode 100644 index 0000000000..c890b3844e --- /dev/null +++ b/Games/Makeover_Game/index.html @@ -0,0 +1,179 @@ + + + + + + + + + Dress Up + + + +
+
+
+
+
+
+
+
+
+
+ + + + + + +
+
+

+ No item type selected to change filters of! Select + circle below. +

+
+ + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + diff --git a/Games/Makeover_Game/script.js b/Games/Makeover_Game/script.js new file mode 100644 index 0000000000..2d16874358 --- /dev/null +++ b/Games/Makeover_Game/script.js @@ -0,0 +1,277 @@ +const hueSlider = document.getElementById('hue'); +const brightnessSlider = document.getElementById('brightness'); +const satSlider = document.getElementById('saturate'); + +const warnText = document.querySelector('.text'); + +let hueValue = hueSlider.value; +let brightnessValue = brightnessSlider.value; +let satValue = satSlider.value; + +// VARIABLE TO RESPRESENT ITEM IN ARRAY THAT IS SELECTED +let currentItem = 0; +let itemtoColor; +let colorItem; + +const character = { + base: 0, + hair: 0, + top: 0, + bottom: 0, + shoes: 0, +}; + +// ALL ITEMS IN EACH ITEM TYPE +const allBases = [ + 'base_1', + 'base_2', + 'base_3', + 'base_4', + 'base_5', + 'base_6', + 'base_7', + 'base_8', + 'base_9', + 'base_10', +]; +const allHairs = [ + 'hair_1', + 'hair_2', + 'hair_3', + 'hair_4', + 'hair_5', + 'hair_6', + 'hair_7', + 'hair_8', + 'hair_9', + 'hair_10', +]; +const allTops = [ + 'top_1', + 'top_2', + 'top_3', + 'top_4', + 'top_5', + 'top_6', + 'top_7', + 'top_8', + 'top_9', + 'top_10', +]; +const allBottoms = [ + 'bottom_1', + 'bottom_2', + 'bottom_3', + 'bottom_4', + 'bottom_5', + 'bottom_6', + 'bottom_7', + 'bottom_8', + 'bottom_9', + 'bottom_10', +]; +const allShoes = ['shoes_1', 'shoes_2', 'shoes_3', 'shoes_4', 'shoes_5']; + +const itemType = ['base', 'hair', 'top', 'bottom', 'shoes']; + +const itemTypetoColor = (radio) => { + warnText.classList.remove('warn'); + let tempItem = radio.id; + itemtoColor = tempItem.replace('-color', ''); + console.log(itemtoColor); +}; + +hueSlider.addEventListener('input', (e) => { + if (itemtoColor === undefined) { + warnText.classList.add('warn'); + return; + } + hueValue = e.currentTarget.value; + item = document.getElementById(itemtoColor); + item.style.filter = `hue-rotate(${hueValue}deg) brightness(${brightnessValue}%) saturate(${satValue}%)`; +}); +satSlider.addEventListener('input', (e) => { + if (itemtoColor === undefined) { + warnText.classList.add('warn'); + return; + } + satValue = e.currentTarget.value; + item = document.getElementById(itemtoColor); + item.style.filter = `hue-rotate(${hueValue}deg) brightness(${brightnessValue}%) saturate(${satValue}%)`; +}); +brightnessSlider.addEventListener('input', (e) => { + if (itemtoColor === undefined) { + warnText.classList.add('warn'); + return; + } + item = document.getElementById(itemtoColor); + brightnessValue = e.currentTarget.value; + item.style.filter = `hue-rotate(${hueValue}deg) brightness(${brightnessValue}%) saturate(${satValue}%)`; +}); + +const itemSelector = (button) => { + // SETTING UP THE VARIABLES TO USE LATER + const url = 'url(img/'; + let itemList; + //THIS IS TO HAVE A SEPERATE INDEX FOR EACH ITEM TYPE CHANGE TO PREVENT BUG FROM LOGIC METHOD 1 + let itemTypeIndex; + + // SELECTING WHICH TYPE OF ITEM NEEDS TO BE CHANGED + //FOR BASES + if (button.id.includes('base')) { + // AUTOMATICALLY SETTING TO CHANGE THE COLOR OF THE CHANGED ITEM + colorItem = document.getElementById('base-color'); + console.log(colorItem); + colorItem.checked = true; + itemTypetoColor(colorItem); + + document.getElementById('base-color').checked = true; + console.log('Pressed Hair'); + itemTypeIndex = itemType.indexOf('base'); + itemList = allBases; + // CHECKING DIRECTION TO SWITCH ITEMS + if (button.id.includes('next')) { + console.log('+1 to base'); + character.base++; + //MAKING SURE INDEX DOES NOT PASS THE ARRAY LENGTH + character.base === itemList.length + ? (character.base = 0) + : (character.base = character.base); + console.log(character.base); + } else { + character.base--; + //MAKING SURE INDEX DOES NOT PASS THE ARRAY LENGTH + character.base === -1 + ? (character.base = itemList.length - 1) + : (character.base = character.base); + } + } + //FOR HEADS + if (button.id.includes('hair')) { + // AUTOMATICALLY SETTING TO CHANGE THE COLOR OF THE CHANGED ITEM + colorItem = document.getElementById('hair-color'); + console.log(colorItem); + colorItem.checked = true; + itemTypetoColor(colorItem); + + document.getElementById('hair-color').checked = true; + console.log('Pressed Hair'); + itemTypeIndex = itemType.indexOf('hair'); + itemList = allHairs; + // CHECKING DIRECTION TO SWITCH ITEMS + if (button.id.includes('next')) { + console.log('+1 to Hair'); + character.hair++; + //MAKING SURE INDEX DOES NOT PASS THE ARRAY LENGTH + character.hair === itemList.length + ? (character.hair = 0) + : (character.hair = character.hair); + console.log(character.hair); + } else { + character.hair--; + //MAKING SURE INDEX DOES NOT PASS THE ARRAY LENGTH + character.hair === -1 + ? (character.hair = itemList.length - 1) + : (character.hair = character.hair); + } + + //FOR TOPS + } + if (button.id.includes('top')) { + // AUTOMATICALLY SETTING TO CHANGE THE COLOR OF THE CHANGED ITEM + colorItem = document.getElementById('top-color'); + console.log(colorItem); + colorItem.checked = true; + itemTypetoColor(colorItem); + + document.getElementById('top-color').checked = true; + itemTypeIndex = itemType.indexOf('top'); + itemList = allTops; + // CHECKING DIRECTION TO SWITCH ITEMS + if (button.id.includes('next')) { + character.top++; + //MAKING SURE INDEX DOES NOT PASS THE ARRAY LENGTH + character.top === itemList.length + ? (character.top = 0) + : (character.top = character.top); + } else { + character.top--; + //MAKING SURE INDEX DOES NOT PASS THE ARRAY LENGTH + character.top === -1 + ? (character.top = itemList.length - 1) + : (character.top = character.top); + } + } + + //FOR BOTTOMS + if (button.id.includes('bottom')) { + // AUTOMATICALLY SETTING TO CHANGE THE COLOR OF THE CHANGED ITEM + colorItem = document.getElementById('bottom-color'); + console.log(colorItem); + colorItem.checked = true; + itemTypetoColor(colorItem); + + itemTypeIndex = itemType.indexOf('bottom'); + itemList = allBottoms; + // CHECKING DIRECTION TO SWITCH ITEMS + if (button.id.includes('next')) { + character.bottom++; + //MAKING SURE INDEX DOES NOT PASS THE ARRAY LENGTH + character.bottom === itemList.length + ? (character.bottom = 0) + : (character.bottom = character.bottom); + } else { + character.bottom--; + //MAKING SURE INDEX DOES NOT PASS THE ARRAY LENGTH + character.bottom === -1 + ? (character.bottom = itemList.length - 1) + : (character.bottom = character.bottom); + } + } + + //FOR SHOES + if (button.id.includes('shoe')) { + // AUTOMATICALLY SET TO CHANGE THE COLOR OF THE CHANGED ITEM + colorItem = document.getElementById('shoes-color'); + console.log(colorItem); + colorItem.checked = true; + itemTypetoColor(colorItem); + + itemTypeIndex = itemType.indexOf('shoes'); + itemList = allShoes; + // CHECKING DIRECTION TO SWITCH ITEMS + if (button.id.includes('next')) { + character.shoes++; + //MAKING SURE INDEX DOES NOT PASS THE ARRAY LENGTH + character.shoes === itemList.length + ? (character.shoes = 0) + : (character.shoes = character.shoes); + } else { + character.shoes--; + //MAKING SURE INDEX DOES NOT PASS THE ARRAY LENGTH + character.shoes === -1 + ? (character.shoes = itemList.length - 1) + : (character.shoes = character.shoes); + } + } + + const charaItem = itemType[itemTypeIndex]; + console.log(charaItem); + // USING ALL VARIABLES TO SET THE IMAGE OF THE CHARACTER (yes it's a mouthful this line here) + document.getElementById(charaItem).style.background = + url + charaItem + '/' + itemList[character[charaItem]] + '.png)'; + console.table(character); +}; + +document.getElementById('capture-btn').addEventListener('click', () => { + domtoimage.toPng(document.querySelector('#game-bg')) + .then((dataUrl) => { + const link = document.createElement('a'); + link.href = dataUrl; + link.download = 'Makeover_Outfit.png'; + link.click(); + }) + .catch((error) => { + console.error('Error capturing page:', error); + }); +}); \ No newline at end of file diff --git a/Games/Makeover_Game/styles.css b/Games/Makeover_Game/styles.css new file mode 100644 index 0000000000..f5b6e71d30 --- /dev/null +++ b/Games/Makeover_Game/styles.css @@ -0,0 +1,298 @@ +* { + font-family: Arial, Helvetica, sans-serif; +} + +html { + margin: 0; + padding: 0; + height: 100%; +} + +body { + margin: 0; + padding: 0; + background-color: antiquewhite; + width: 100%; + height: 100%; + display: grid; + place-items: center; +} + +footer { + position: absolute; + bottom: 0; +} +footer p { + font-weight: 600; +} +footer p a:hover { + color: #a892e4; +} + +.game-container { + position: absolute; + background-color: rgb(195, 170, 140); + width: 700px; + height: 500px; + display: grid; + box-shadow: 0px 0px 10px rgba(55, 55, 55, 0.7); +} + +#game-bg { + position: absolute; + width: 100%; + height: 100%; + background: url("../img/test/test-layout-bg.png"); +} + +/* Button Styles */ +#next-base, +#next-hair, +#next-top, +#next-bottom, +#next-shoe { + position: relative; + left: 7em; + width: 6em; + height: 25px; + padding: 0 2em 0 0.7em; + text-align: left; + color: white; + background: url("../img/test/next-btn.png"); + background-position: center; + background-size: 100%; + background-repeat: no-repeat; + border: 0; + border-radius: 25%; + border: 1px solid rgb(14, 46, 115); + box-shadow: 3px 3px 5px rgba(55, 55, 55, 0.7); +} + +#prev-base, +#prev-hair, +#prev-top, +#prev-bottom, +#prev-shoe { + position: relative; + width: 6em; + height: 25px; + padding: 0 0.7em 0 2em; + text-align: right; + color: white; + background: url("../img/test/prev-btn.png"); + background-position: center; + background-size: 100%; + background-repeat: no-repeat; + border: 0; + border-radius: 25%; + border: 1px solid rgb(14, 46, 115); + box-shadow: 3px 3px 5px rgba(55, 55, 55, 0.7); +} + +/* When hovering over the buttons! */ +#next-base:hover, +#prev-base:hover, +#next-hair:hover, +#prev-hair:hover, +#next-top:hover, +#prev-top:hover, +#next-bottom:hover, +#prev-bottom:hover, +#next-shoe:hover, +#prev-shoe:hover { + box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.3); +} + +/* The clothes to overite the character */ +#game-bg { + background: url("../img/bg.png"); + width: 100%; + height: 100%; + position: absolute; +} + +#base { + background: url("../img/base/base_1.png"); + width: 100%; + height: 100%; + position: absolute; +} + +#hair { + background: url("../img/hair/hair_1.png"); + width: 100%; + height: 100%; + position: absolute; +} + +#top { + background: url("../img/top/top_1.png"); + width: 100%; + height: 100%; + position: absolute; +} + +#bottom { + background: url("../img/bottom/bottom_1.png"); + width: 100%; + height: 100%; + position: absolute; +} + +#shoes { + background: url("../img/shoes/shoes_1.png"); + width: 100%; + height: 100%; + position: absolute; +} + +/* Button Position Set Up */ +form { + position: absolute; + display: grid; + width: 100%; + height: 100%; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: repeat(7, 1fr); + grid-template-areas: "logo-left logo base-right" "base-left base base-right" "head-left head head-right" "top-left top top-right" "blank-left blank blank-right" "bottom-left bottom bottom-right" "feet-left feet feet-right"; +} + +/* Positions of the buttons on the grid */ +.color-section { + display: flex; + flex-direction: column; + font-size: 12px; + grid-area: base-right; + align-self: center; + width: full; + color: white; + text-align: center; + margin: 0 2em; +} + +input[type=range] { + margin: 0.5em; +} + +#warning { + grid-area: head-right; +} +#warning .text { + margin-top: 0; + font-size: 12px; + text-align: center; + color: red; + opacity: 0; + transition: opacity 0.5s; +} +#warning .warn { + opacity: 100%; + transition: opacity 0.5s; +} + +#next-base { + grid-area: blank-right; + align-self: center; + margin-left: 3em; +} + +#next-hair { + grid-area: head-right; + align-self: end; + margin-left: 3em; +} + +#next-top { + grid-area: top-right; + align-self: end; + margin-left: 3em; +} + +#next-bottom { + grid-area: bottom-right; + margin-left: 3em; +} + +#next-shoe { + grid-area: feet-right; + margin-left: 3em; +} + +#prev-base { + grid-area: blank-right; + align-self: center; + margin-left: 2em; +} + +#prev-hair { + grid-area: head-right; + align-self: end; + margin-left: 2em; +} + +#prev-top { + grid-area: top-right; + align-self: end; + margin-left: 2em; +} + +#prev-bottom { + grid-area: bottom-right; + margin-left: 2em; +} + +#prev-shoe { + grid-area: feet-right; + margin-left: 2em; +} + +/* RADIO BUTTONS TO SELECT WHICH ITEM TO COLOR */ +#base-color { + grid-area: blank-right; + align-self: center; + margin: 0.35em 0 0 0.5em; +} + +#hair-color { + grid-area: head-right; + align-self: flex-end; + margin: 0 0 0.35em 0.5em; +} + +#top-color { + grid-area: top-right; + align-self: flex-end; + margin: 0 0 0.35em 0.5em; +} + +#bottom-color { + grid-area: bottom-right; + align-self: flex-start; + margin: 0.35em 0 0 0.5em; +} + +#shoes-color { + grid-area: feet-right; + align-self: flex-start; + margin: 0.35em 0 0 0.5em; +} + +#capture-btn { + position: absolute; + padding-bottom: -80px; + top: 0px; + left: 0px; + background: transparent; + border: none; + cursor: pointer; + z-index: 2; +} + +#capture-btn img { + width: 80px; + height: 80px; +} + +.warn { + color: red; +} diff --git a/README.md b/README.md index 96c64efc1f..5dcd6016a3 100644 --- a/README.md +++ b/README.md @@ -626,6 +626,8 @@ This repository also provides one such platforms where contributers come over an | [CSS Select](https://github.com/kunjgit/GameZone/tree/main/Games/CSS_Select) | [Squid](https://github.com/kunjgit/GameZone/tree/main/Games/Squid_Game) | [Flip Coin](https://github.com/kunjgit/GameZone/tree/main/Games/Flip_Coin) | [Witty Word Quest](https://github.com/kunjgit/GameZone/tree/main/Games/witty_word_quest) | [Typing Game](https://github.com/Ishan-77/GameZone/tree/main/Games/Typing_Game) | | [numeral-whiz](https://github.com/Ishan-77/GameZone/tree/main/Games/numeral-whiz) | [candy_match](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Match_Saga) | [Crossy_Road](https://github.com/tanujbordikar/GameZone/tree/Crossy_Road) | [HueHero](https://github.com/kunjgit/GameZone/tree/main/Games/HueHero) | [Puzzel_Winner](https://github.com/kunjgit/GameZone/tree/main/Games/Puzzel_Winner) | | [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who) | [Pop My Balloon](https://github.com/kunjgit/GameZone/tree/main/Games/Pop_My_Balloon) | [Color_Blast](https://github.com/kunjgit/GameZone/tree/main/Games/Color_Blast) | +| [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [Coloron](https://github.com/kunjgit/GameZone/tree/main/Games/Coloron). | +| [Black_jackk](https://github.com/kunjgit/GameZone/tree/main/Games/Black_jackk) | [Audio_Wordle](https://github.com/kunjgit/GameZone/tree/main/Games/Audio_Wordle) | [Makeover_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Makeover_Game) | [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [Coloron](https://github.com/kunjgit/GameZone/tree/main/Games/Coloron). | [Wordling](https://github.com/kunjgit/GameZone/tree/main/Games/Wordling) | [HTML5_Controller_Tester](https://github.com/kunjgit/GameZone/tree/main/Games/HTML5_Controller_Tester) @@ -635,7 +637,7 @@ This repository also provides one such platforms where contributers come over an | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [HTML5_Controller_Tester](https://github.com/kunjgit/GameZone/tree/main/Games/HTML5_Controller_Tester) | [numeral-whiz](https://github.com/Ishan-77/GameZone/tree/main/Games/numeral-whiz) | [candy_match](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Match_Saga) | [Crossy_Road](https://github.com/tanujbordikar/GameZone/tree/Crossy_Road) | [HueHero](https://github.com/kunjgit/GameZone/tree/main/Games/HueHero) | [Puzzel_Winner](https://github.com/kunjgit/GameZone/tree/main/Games/Puzzel_Winner) | | [Tower Stack](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Stack) | -| [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [TriHand_Tactics](https://github.com/kunjgit/GameZone/tree/main/Games/TriHand_Tactics) | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian) | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | + [TriHand_Tactics](https://github.com/kunjgit/GameZone/tree/main/Games/TriHand_Tactics)| | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [CatchTheBall](https://github.com/kunjgit/GameZone/tree/main/Games/CatchTheBall) | | [CopyCat](https://github.com/kunjgit/GameZone/tree/main/Games/CopyCat) | | [Cross_The_River_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Cross_The_River_Game) | @@ -788,8 +790,6 @@ This repository also provides one such platforms where contributers come over an | [Bubble'z Popper](https://github.com/Chandu6702/GameZone/tree/main/Games/Bubble'z Popper)| | [Dsa_quiz_game](https://github.com/kunjgit/GameZone/tree/main/Games/Dsa_quiz_game) | | [Gravity_Simulation_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Gravity_Simulation_Game) | - -| [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) | [Catch_The_Ball](https://github.com/kunjgit/GameZone/tree/main/Games/Catch_The_Ball) | | [Ball_in_Maze](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_in_Maze) | |[Dsa_quiz_game](https://github.com/kunjgit/GameZone/tree/main/Games/Dsa_quiz_game) | @@ -797,11 +797,8 @@ This repository also provides one such platforms where contributers come over an | [Anagarm-Word-Game](https://github.com/kunjgit/GameZone/tree/main/Games/Anagarm-Word-Game) | | [Brick Buster Game](https://github.com/kunjgit/GameZone/tree/main/Games/Brick Buster) | | [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) -======= | [SnakeBites](https://github.com/kunjgit/GameZone/tree/main/Games/SnakeBites) | | [Alphabet-and-Vowels](https://github.com/kunjgit/GameZone/tree/main/Games/Alphabet-and-Vowels) | -| [Brick Buster Game](https://github.com/kunjgit/GameZone/tree/main/Games/Brick%20Buster) | -| [Penguins Can't Fly](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Penguins_Can't_Fly) | | [Intellect Quest](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Intellect_Quest) | | [Number_Guessing_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Guessing_Game) | | [Currency_Converter](https://github.com/kunjgit/GameZone/tree/main/Games/Currency_Converter) | diff --git a/assets/images/Makeover_Game.png b/assets/images/Makeover_Game.png new file mode 100644 index 0000000000..246de7eb91 Binary files /dev/null and b/assets/images/Makeover_Game.png differ