diff --git a/J boy.png b/J boy.png new file mode 100644 index 0000000..c669cb1 Binary files /dev/null and b/J boy.png differ diff --git a/J.png b/J.png new file mode 100644 index 0000000..f5366f1 Binary files /dev/null and b/J.png differ diff --git a/M boy.png b/M boy.png new file mode 100644 index 0000000..9ad530f Binary files /dev/null and b/M boy.png differ diff --git a/M.png b/M.png new file mode 100644 index 0000000..41dbf4b Binary files /dev/null and b/M.png differ diff --git a/PIC 1.png b/PIC 1.png new file mode 100644 index 0000000..3e620ad Binary files /dev/null and b/PIC 1.png differ diff --git a/PIC 2.png b/PIC 2.png new file mode 100644 index 0000000..b22e996 Binary files /dev/null and b/PIC 2.png differ diff --git a/PIC 3.png b/PIC 3.png new file mode 100644 index 0000000..485d761 Binary files /dev/null and b/PIC 3.png differ diff --git a/Screenshot 2024-11-10 211130.png b/Screenshot 2024-11-10 211130.png new file mode 100644 index 0000000..aefb9ed Binary files /dev/null and b/Screenshot 2024-11-10 211130.png differ diff --git a/Screenshot 2024-11-10 211602.png b/Screenshot 2024-11-10 211602.png new file mode 100644 index 0000000..a712f63 Binary files /dev/null and b/Screenshot 2024-11-10 211602.png differ diff --git a/Screenshot 2024-11-16 214915.png b/Screenshot 2024-11-16 214915.png new file mode 100644 index 0000000..eb21c27 Binary files /dev/null and b/Screenshot 2024-11-16 214915.png differ diff --git a/Screenshot 2024-11-16 220129.png b/Screenshot 2024-11-16 220129.png new file mode 100644 index 0000000..d18f73e Binary files /dev/null and b/Screenshot 2024-11-16 220129.png differ diff --git a/Screenshot 2024-11-16 220550.png b/Screenshot 2024-11-16 220550.png new file mode 100644 index 0000000..0b92b9f Binary files /dev/null and b/Screenshot 2024-11-16 220550.png differ diff --git a/Star.jpeg b/Star.jpeg new file mode 100644 index 0000000..bd00831 Binary files /dev/null and b/Star.jpeg differ diff --git a/Z boy.png b/Z boy.png new file mode 100644 index 0000000..328ee4c Binary files /dev/null and b/Z boy.png differ diff --git a/Z.png b/Z.png new file mode 100644 index 0000000..cfa1031 Binary files /dev/null and b/Z.png differ diff --git a/cac.html b/cac.html new file mode 100644 index 0000000..fe32064 --- /dev/null +++ b/cac.html @@ -0,0 +1,195 @@ + + + + + + Find the Key - Escape Game + + + + + + +
+
+ +
+
+
+
+ +
+
+

Find the Key

+
+ +
+

Meet the Characters

+

+ Here are the characters featured in the game: +

+ +
+
+
+ Z, shy and timid girl +
+

Z (Me)

+

Shy and timid girl

+
+
+
+ +
+
+ M, easily pissed +
+

M (Mithra)

+

Easily pissed

+
+
+
+ +
+
+ J, believes in God +
+

J (Joelle)

+

Believes in God

+
+
+
+ +
+
+ Z boy, easily frightened +
+

Z boy
(Genderbend)

+

Easily frightened

+
+
+
+ +
+
+ M boy, has anger issues +
+

M boy (Genderbend)

+

Has anger issues

+
+
+
+ +
+
+ J boy, friendly +
+

J boy
(Genderbend)

+

Friendly

+
+
+
+
+
+ +
+

About Me

+

+ Hi! My name is Eng Zhi Cheng. I was born on 2nd June 2012 in Perak. I + love creating simple and fun games,
and this is one of my + favorite projects. In my free time, I enjoy playing games, and + learning new things.

You can contact me at + m001747@permatapintar.ukm.edu.my. +

+
+ + +
+

Fun Facts About the Game

+
+
+

Did you know?

+

The game was created in just 5 days of work!

+
+ +
+

Multiple Endings

+

+ The game has 6 different endings depending on the character you + chose at the start. +

+
+ +
+

Hidden Easter Eggs

+

There’s 2 secret sprites to find in the game.

+
+ Secret Room Screenshot 1 + Secret Room Screenshot 2 +
+
+
+
+
+ + + + diff --git a/feedback.html b/feedback.html new file mode 100644 index 0000000..f54cdc0 --- /dev/null +++ b/feedback.html @@ -0,0 +1,208 @@ + + + + + + Feedback - Find the Key + + + + +
+

Find the Key-Feedback

+

Any suggestions for future updates?

+
+ +
+
+ + + + + + + + + + +
+
+ + + + diff --git a/images.jpg b/images.jpg new file mode 100644 index 0000000..f9a5165 Binary files /dev/null and b/images.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..5243a5b --- /dev/null +++ b/index.html @@ -0,0 +1,250 @@ + + + + + + Find the Key - Escape Game + + + + + + +
+ +
+

Find the Key

+

An Escape Game Adventure by Zhi Cheng

+
+ +
+ + +
+
+

About the Game

+

+ "Find the Key" is an engaging escape game created in Scratch. Your + mission? Solve puzzles and escape from locked rooms by finding + hidden keys. Test your logic, problem-solving, and math skills in + this fun and challenging adventure! +

+
+ +
+

How to Play

+
    +
  1. Explore the room using your mouse to search for clues.
    2. +
  2. Interact with objects to uncover hints and keys.
    3. +
  3. + Solve puzzles to unlock doors and progress to the next level. +
    4. +
+
+ +
+

Features

+
    +
  • Quick and Fun Gameplay
    • +
  • Mouse-Only Controls
    • +
  • Challenging Math Puzzles
    • +
  • Multiple Levels
    • +
  • Immersive Visual Design
    • +
+
+ + + +
+

Play Now

+

+ Are you ready to escape? Test your skills by playing *Find the Key* + now! +

+
+ Play Now +
+ +
+

Reviews

+

"I like how there's different endings!" - Jane Doe

+

"I like the math questions!" - John Doe

+
+ +
+

Explore More Games

+

Discover other exciting projects by Zhi Cheng:

+ +
+
+ + Lululemon + +

Lululemon

+
+ +
+ + Jump + +

Space Jumping

+
+ +
+ + Jump +

Princess Fatal Demise

+
+
+
+ +
+
+ + + + diff --git a/mo.png b/mo.png new file mode 100644 index 0000000..8ec8e69 Binary files /dev/null and b/mo.png differ diff --git a/photo_2024-11-16_20-19-24.jpg b/photo_2024-11-16_20-19-24.jpg new file mode 100644 index 0000000..de70838 Binary files /dev/null and b/photo_2024-11-16_20-19-24.jpg differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..1e31308 --- /dev/null +++ b/style.css @@ -0,0 +1,192 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #f9f9f9; + color: #333; + line-height: 1.6; + display: flex; + flex-direction: column; + min-height: 100vh; /* Make sure body takes full height */ +} + +header { + text-align: center; + padding: 0.5em 1em; + background-color: #ffffff; + width: 100%; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +header h1 { + font-size: 3em; + color: #333; + margin-bottom: 0.5em; +} + +header p { + font-size: 1.25em; + color: #666; +} + +.main-layout { + display: flex; + flex-direction: row; /* Use row layout for main layout */ + flex-grow: 1; /* Make main layout grow to fill available space */ +} + +main { + padding: 2em 1em; + width: calc(100% - 250px); /* Subtract the sidebar width */ + margin-left: 250px; /* Offset to make room for the sidebar */ +} + +.sidebar { + position: fixed; + width: 250px; + background-color: #222; + color: white; + padding: 20px; + box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1); + top: 70px; + left: 0; + height: calc(100vh - 70px); + overflow-y: auto; + z-index: 10; +} + +.sidebar ul { + list-style: none; +} + +.sidebar ul li { + margin: 15px 0; + margin-left: 10px; +} + +.sidebar ul li a { + color: white; + text-decoration: none; + font-size: 18px; +} + +.sidebar ul li a:hover { + text-decoration: underline; +} + +ul { + list-style-type: none; + padding-left: 0; +} + +.ll { + font-size: 17px; +} + +section { + padding: 2em 1em; + background-color: #ffffff; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + margin-bottom: 2em; +} + +section h2 { + font-size: 2em; + color: #333; + margin-bottom: 0.75em; +} + +section p { + font-size: 1.1em; + color: #555; + margin-bottom: 1em; +} + +.gallery { + display: flex; + gap: 1em; + justify-content: center; +} + +.gallery img { + width: 30%; + border-radius: 8px; + transition: transform 0.3s ease; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +.gallery img:hover { + transform: scale(1.05); +} + +#explore img:hover { + transform: scale(1.05); +} + +.play-button { + display: inline-block; + padding: 0.75em 1.5em; + color: #fff; + background-color: #0066cc; + text-decoration: none; + font-weight: bold; + border-radius: 6px; + transition: background-color 0.3s ease; + margin-top: 1.5em; +} + +.play-button:hover { + background-color: #004b99; +} + +.cursor { + position: absolute; + width: 20px; + height: 20px; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 50%; + pointer-events: none; + transition: transform 0.1s ease-in-out; + transform: translate(-50%, -50%); +} + +@media (max-width: 768px) { + .sidebar { + position: relative; + width: 100%; + top: 0; + left: 0; + } + + main { + margin-left: 0; + } + + .gallery img { + width: 45%; + } +} + +#explore { + text-align: center; +} + +.image-container { + display: flex; /* Aligns images in a horizontal row */ + justify-content: center; /* Centers the images horizontally */ + gap: 20px; /* Adds space between the images */ +} + +.image-item { + text-align: center; /* Centers the text below each image */ +} + +.image-item p { + margin-top: 10px; /* Adds space between the image and the text */ + font-size: 16px; /* Adjust text size as needed */ +} diff --git a/style2.css b/style2.css new file mode 100644 index 0000000..2534559 --- /dev/null +++ b/style2.css @@ -0,0 +1,340 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #f9f9f9; + color: #333; + line-height: 1.6; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +header { + text-align: center; + padding: 1.5em 2em; + background-color: #ff4e50; /* Solid color instead of gradient */ + width: 100%; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); + color: white; + text-transform: uppercase; + letter-spacing: 2px; +} + +header h1 { + font-size: 4em; + margin-bottom: 0.5em; + text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2); +} + +header p { + font-size: 1.3em; + margin-bottom: 0.5em; + color: rgba(255, 255, 255, 0.8); +} + +#characters { + padding: 60px 20px; + text-align: center; + background-color: #fff; +} + +.section-title { + font-size: 3rem; + font-weight: 700; + color: #2a2a2a; + margin-bottom: 20px; + text-transform: uppercase; + letter-spacing: 2px; + line-height: 1.3; + background: linear-gradient(90deg, #ff7b7b, #ffb07d); +} + + +.section-description { + font-size: 1.2rem; + color: #777; + margin-bottom: 50px; + font-weight: 400; + max-width: 800px; + margin-left: auto; + margin-right: auto; + line-height: 1.8; +} + +.character-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 40px; + justify-items: center; + padding: 0 20px; +} + +.character { + position: relative; + background-color: #fff; + border-radius: 20px; + overflow: hidden; + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); + transition: transform 0.3s ease, box-shadow 0.3s ease; + max-width: 300px; + text-align: center; + padding: 20px; + z-index: 1; +} + +.character:hover { + transform: translateY(-15px) scale(1.05); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); +} + +.character img { + width: 100%; + height: 220px; + object-fit: cover; + border-radius: 12px; + transition: transform 0.3s ease; +} + +.character:hover img { + transform: scale(1.1); +} + +.character h3 { + font-size: 1.7rem; + color: #333; + font-weight: 700; + margin-top: 15px; + transition: color 0.3s ease; +} + +.character p { + font-size: 1.1rem; + color: #777; + margin-top: 10px; + font-weight: 500; + transition: color 0.3s ease; +} + +.character:hover h3, +.character:hover p { + color: #ff4e50; +} + +@media (max-width: 768px) { + .character-list { + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + } + + .section-title { + font-size: 2.5rem; + } +} + +@media (max-width: 480px) { + .character-list { + grid-template-columns: 1fr; + } +} + +#about-me { + background-color: #fff; /* Keeping a clean background */ + background-image: url('images.jpg'); /* Optional background image */ + background-size: cover; + background-position: center; + padding: 4em 2em; + border-radius: 12px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + margin-top: 3em; + color: #333; + position: relative; +} + +#about-me::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.4); /* Dark overlay for better contrast */ + border-radius: 12px; + z-index: -1; +} + +#about-me h2 { + font-size: 2.5rem; + font-weight: 700; + color: #ff4e50; + text-transform: uppercase; + letter-spacing: 2px; + margin-bottom: 20px; +} + +#about-me p { + font-size: 1.2em; + color: #ddd; + line-height: 1.8; + margin-bottom: 1.5em; + font-weight: 400; +} + +footer { + background: #1a1a1d; + color: white; + padding: 50px 0; + text-align: center; + font-family: 'Arial', sans-serif; + position: relative; + box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.1); + border-radius: 12px; +} + +footer p { + font-size: 18px; + margin-bottom: 30px; + font-weight: bold; + letter-spacing: 1px; + color: #ffde00; +} + +.footer-links { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + justify-content: center; + gap: 30px; +} + +.footer-links li { + margin: 0; +} + +.footer-links a { + color: white; + font-size: 20px; + text-decoration: none; + font-weight: 600; + transition: color 0.3s ease, transform 0.3s ease, letter-spacing 0.3s ease; +} + +.footer-links a:hover { + color: #ff4e50; + transform: scale(1.1); + letter-spacing: 1px; +} + +footer::before { + content: ''; + display: block; + width: 50%; + height: 1px; + margin: 20px auto; + background-color: #fff; +} + +footer .social-icons { + margin-top: 30px; + font-size: 30px; +} + +footer .social-icons a { + color: white; + margin: 0 20px; + text-decoration: none; + transition: color 0.3s ease, transform 0.3s ease; +} + +footer .social-icons a:hover { + color: #ff4e50; + transform: scale(1.2); +} + +#fun-facts { + background-color: #fff; + padding: 4em; + border-radius: 12px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); + margin-top: 3em; + text-align: center; +} + +#fun-facts h2 { + font-size: 3rem; + color: #333; + margin-bottom: 1.5em; + text-transform: uppercase; + letter-spacing: 2px; + color: #ff7b7b; +} + +.fun-facts-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2em; + padding: 0 20px; +} + +.fun-fact-item { + background-color: #ff7b7b; + color: white; + padding: 2em; + border-radius: 12px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + justify-content: space-between; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.fun-fact-item:hover { + transform: translateY(-10px) scale(1.05); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); +} + +.fun-fact-item h3 { + font-size: 1.6rem; + color: #fff; + margin-bottom: 1em; + font-weight: 700; + text-transform: uppercase; +} + +.fun-fact-item p { + font-size: 1.1rem; + color: #fff; + line-height: 1.8; +} + +.secret-room-images { + margin-top: 1em; + display: flex; + gap: 1.5em; + justify-content: center; +} + +.secret-room-images img { + width: 45%; + border-radius: 8px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; +} + +.secret-room-images img:hover { + transform: scale(1.1); +} + +@media (max-width: 768px) { + .fun-facts-container { + grid-template-columns: 1fr; + } + + .secret-room-images img { + width: 100%; + } +}