diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..25de47a Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 81ae679..853a5c4 100644 --- a/README.md +++ b/README.md @@ -1 +1,29 @@ +# Assignment 2 - CSS game | Advanced CSS + +## What does the project do? + +- This project is a game that has been created using CSS. The objective of the game is to click on eggs that appear on the screen before the timer runs out, with a time limit of 30 seconds. + +## Why is the project useful? + +- From a practical standpoint, this project may not have any specific use or application. However, it can serve as an entertaining and engaging game for users to play and pass the time. Games like this can also be used to improve hand-eye coordination and reaction time, which can have practical benefits in real-world scenarios such as driving or sports. Additionally, creating games like this can help individuals develop their programming and design skills, which can be useful in future projects or career paths. + +## How can users get started with the project? + +- They can download the zip file to their computer and play the game. Or they can clone the repository and play. + +## Where can users get help with your project? + +- If users need help with the project they can contact the developers for assistance. This may be done through email, social media, or other contact methods listed on the project's website or documentation. + +## Which technology is used? + +- CSS is the primary technology used to create this game, but HTML have also been used to structure and organize the content on the page. +- We have used some javacript to hide articles for better UX javascript have also been used to create a timer and counter for the game. We did this to create a good feeling for the users and make the game seem more like a game. + +## Who maintains and contributes to the project? + +- Elina, Hannah and Jon are the individuals who maintain and contribute to the project, as they were the ones who created it. + +[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-24ddc0f5d75046c5622901739e7c5dd533143b0c8e959d652212380cedb1ea36.svg)](https://classroom.github.com/a/LlYauwvp) [![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-718a45dd9cf7e7f842a935f5ebbe5719a5e09af4491e668f4dbf3b35d5cca122.svg)](https://classroom.github.com/online_ide?assignment_repo_id=10919012&assignment_repo_type=AssignmentRepo) diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 0000000..ce636bc Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/chickcry.png b/img/chickcry.png new file mode 100644 index 0000000..e1b15c2 Binary files /dev/null and b/img/chickcry.png differ diff --git a/img/chickhappy.png b/img/chickhappy.png new file mode 100644 index 0000000..90f243f Binary files /dev/null and b/img/chickhappy.png differ diff --git a/img/chickneutral.png b/img/chickneutral.png new file mode 100644 index 0000000..3b45c14 Binary files /dev/null and b/img/chickneutral.png differ diff --git a/img/easteregg1.png b/img/easteregg1.png new file mode 100644 index 0000000..3b3f37b Binary files /dev/null and b/img/easteregg1.png differ diff --git a/img/easteregg10.png b/img/easteregg10.png new file mode 100644 index 0000000..63b60fc Binary files /dev/null and b/img/easteregg10.png differ diff --git a/img/easteregg11.png b/img/easteregg11.png new file mode 100644 index 0000000..a7976fd Binary files /dev/null and b/img/easteregg11.png differ diff --git a/img/easteregg12.png b/img/easteregg12.png new file mode 100644 index 0000000..0ef094f Binary files /dev/null and b/img/easteregg12.png differ diff --git a/img/easteregg13.png b/img/easteregg13.png new file mode 100644 index 0000000..0391837 Binary files /dev/null and b/img/easteregg13.png differ diff --git a/img/easteregg14.png b/img/easteregg14.png new file mode 100644 index 0000000..8974ed1 Binary files /dev/null and b/img/easteregg14.png differ diff --git a/img/easteregg15.png b/img/easteregg15.png new file mode 100644 index 0000000..f46de1b Binary files /dev/null and b/img/easteregg15.png differ diff --git a/img/easteregg16.png b/img/easteregg16.png new file mode 100644 index 0000000..95c9067 Binary files /dev/null and b/img/easteregg16.png differ diff --git a/img/easteregg17.png b/img/easteregg17.png new file mode 100644 index 0000000..be0243a Binary files /dev/null and b/img/easteregg17.png differ diff --git a/img/easteregg18.png b/img/easteregg18.png new file mode 100644 index 0000000..3d1cc99 Binary files /dev/null and b/img/easteregg18.png differ diff --git a/img/easteregg19.png b/img/easteregg19.png new file mode 100644 index 0000000..5532144 Binary files /dev/null and b/img/easteregg19.png differ diff --git a/img/easteregg2.png b/img/easteregg2.png new file mode 100644 index 0000000..1900e27 Binary files /dev/null and b/img/easteregg2.png differ diff --git a/img/easteregg20.png b/img/easteregg20.png new file mode 100644 index 0000000..79500fd Binary files /dev/null and b/img/easteregg20.png differ diff --git a/img/easteregg21.png b/img/easteregg21.png new file mode 100644 index 0000000..e5487c1 Binary files /dev/null and b/img/easteregg21.png differ diff --git a/img/easteregg22.png b/img/easteregg22.png new file mode 100644 index 0000000..f1038f4 Binary files /dev/null and b/img/easteregg22.png differ diff --git a/img/easteregg23.png b/img/easteregg23.png new file mode 100644 index 0000000..84e7d63 Binary files /dev/null and b/img/easteregg23.png differ diff --git a/img/easteregg24.png b/img/easteregg24.png new file mode 100644 index 0000000..544c731 Binary files /dev/null and b/img/easteregg24.png differ diff --git a/img/easteregg25.png b/img/easteregg25.png new file mode 100644 index 0000000..f4d5bb3 Binary files /dev/null and b/img/easteregg25.png differ diff --git a/img/easteregg3.png b/img/easteregg3.png new file mode 100644 index 0000000..5e72a09 Binary files /dev/null and b/img/easteregg3.png differ diff --git a/img/easteregg4.png b/img/easteregg4.png new file mode 100644 index 0000000..6ad1fc5 Binary files /dev/null and b/img/easteregg4.png differ diff --git a/img/easteregg5.png b/img/easteregg5.png new file mode 100644 index 0000000..098cd97 Binary files /dev/null and b/img/easteregg5.png differ diff --git a/img/easteregg6.png b/img/easteregg6.png new file mode 100644 index 0000000..ceb5a07 Binary files /dev/null and b/img/easteregg6.png differ diff --git a/img/easteregg7.png b/img/easteregg7.png new file mode 100644 index 0000000..b94490a Binary files /dev/null and b/img/easteregg7.png differ diff --git a/img/easteregg8.png b/img/easteregg8.png new file mode 100644 index 0000000..c921b10 Binary files /dev/null and b/img/easteregg8.png differ diff --git a/img/easteregg9.png b/img/easteregg9.png new file mode 100644 index 0000000..5eab787 Binary files /dev/null and b/img/easteregg9.png differ diff --git a/img/egg1.png b/img/egg1.png new file mode 100644 index 0000000..cc0151f Binary files /dev/null and b/img/egg1.png differ diff --git a/img/egg10.png b/img/egg10.png new file mode 100644 index 0000000..8d49ea1 Binary files /dev/null and b/img/egg10.png differ diff --git a/img/egg11.png b/img/egg11.png new file mode 100644 index 0000000..cb5e0f2 Binary files /dev/null and b/img/egg11.png differ diff --git a/img/egg12.png b/img/egg12.png new file mode 100644 index 0000000..85edd75 Binary files /dev/null and b/img/egg12.png differ diff --git a/img/egg13.png b/img/egg13.png new file mode 100644 index 0000000..da48fd2 Binary files /dev/null and b/img/egg13.png differ diff --git a/img/egg14.png b/img/egg14.png new file mode 100644 index 0000000..0184496 Binary files /dev/null and b/img/egg14.png differ diff --git a/img/egg15.png b/img/egg15.png new file mode 100644 index 0000000..1b151c1 Binary files /dev/null and b/img/egg15.png differ diff --git a/img/egg16.png b/img/egg16.png new file mode 100644 index 0000000..3c50289 Binary files /dev/null and b/img/egg16.png differ diff --git a/img/egg17.png b/img/egg17.png new file mode 100644 index 0000000..f59784a Binary files /dev/null and b/img/egg17.png differ diff --git a/img/egg18.png b/img/egg18.png new file mode 100644 index 0000000..514a4a6 Binary files /dev/null and b/img/egg18.png differ diff --git a/img/egg19.png b/img/egg19.png new file mode 100644 index 0000000..3fbd5a1 Binary files /dev/null and b/img/egg19.png differ diff --git a/img/egg2.png b/img/egg2.png new file mode 100644 index 0000000..0c46609 Binary files /dev/null and b/img/egg2.png differ diff --git a/img/egg20.png b/img/egg20.png new file mode 100644 index 0000000..5549b50 Binary files /dev/null and b/img/egg20.png differ diff --git a/img/egg21.png b/img/egg21.png new file mode 100644 index 0000000..81130a3 Binary files /dev/null and b/img/egg21.png differ diff --git a/img/egg22.png b/img/egg22.png new file mode 100644 index 0000000..390591e Binary files /dev/null and b/img/egg22.png differ diff --git a/img/egg23.png b/img/egg23.png new file mode 100644 index 0000000..243f5ed Binary files /dev/null and b/img/egg23.png differ diff --git a/img/egg24.png b/img/egg24.png new file mode 100644 index 0000000..f4afe60 Binary files /dev/null and b/img/egg24.png differ diff --git a/img/egg25.png b/img/egg25.png new file mode 100644 index 0000000..2992758 Binary files /dev/null and b/img/egg25.png differ diff --git a/img/egg3.png b/img/egg3.png new file mode 100644 index 0000000..d613f00 Binary files /dev/null and b/img/egg3.png differ diff --git a/img/egg4.png b/img/egg4.png new file mode 100644 index 0000000..d1cd928 Binary files /dev/null and b/img/egg4.png differ diff --git a/img/egg5.png b/img/egg5.png new file mode 100644 index 0000000..f2f45b9 Binary files /dev/null and b/img/egg5.png differ diff --git a/img/egg6.png b/img/egg6.png new file mode 100644 index 0000000..f8263b4 Binary files /dev/null and b/img/egg6.png differ diff --git a/img/egg7.png b/img/egg7.png new file mode 100644 index 0000000..403f060 Binary files /dev/null and b/img/egg7.png differ diff --git a/img/egg8.png b/img/egg8.png new file mode 100644 index 0000000..539cc00 Binary files /dev/null and b/img/egg8.png differ diff --git a/img/egg9.png b/img/egg9.png new file mode 100644 index 0000000..b756503 Binary files /dev/null and b/img/egg9.png differ diff --git a/img/favicon.ico b/img/favicon.ico new file mode 100644 index 0000000..28ae42b Binary files /dev/null and b/img/favicon.ico differ diff --git a/img/spoon.png b/img/spoon.png new file mode 100644 index 0000000..a9254d2 Binary files /dev/null and b/img/spoon.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..fcb4ecc --- /dev/null +++ b/index.html @@ -0,0 +1,119 @@ + + + + + + + + + + + + + Easter Game + + + +
+
+
+

Egg hunt

+

You crave an omelette. Go hunt for eggs! +

+ Neutral chicken +

How to play: Crack all the eggs as fast as you can!

+ +
+
+
+
+

Gametime

+
+

Eggs cracked: 0

+

Time elapsed: 00:00:00

+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..748aa14 --- /dev/null +++ b/script.js @@ -0,0 +1,86 @@ +// get all the checkboxes +const checkboxes = document.querySelectorAll('input[type="checkbox"]'); + +// add event listener to each checkbox +checkboxes.forEach(function(checkbox) { + checkbox.addEventListener('change', function() { + // get the number of checked checkboxes + const checkedCount = document.querySelectorAll('input[type="checkbox"]:checked').length; + + // update the counter display + const counter = document.querySelector('#counter'); + counter.textContent = checkedCount; + }); +}); + +// Timer + +// get all the checkboxes + +// add event listener to each checkbox +checkboxes.forEach(function(checkbox) { + checkbox.addEventListener('change', function() { + // get the number of checked checkboxes + const checkedCount = document.querySelectorAll('input[type="checkbox"]:checked').length; + + // update the counter display + const counter = document.querySelector('#counter'); + counter.textContent = checkedCount; + }); +}); + +// Timer + +const counter = document.getElementById('counter'); +const timer = document.getElementById('timer'); +let startTime; +let timerInterval; + +function startTimer() { + startTime = new Date().getTime(); + timerInterval = setInterval(updateTimer, 1000); +} + +function updateTimer() { + const elapsedTime = new Date().getTime() - startTime; + const seconds = Math.floor(elapsedTime / 1000); + const minutes = Math.floor(seconds / 60); + timer.textContent = `${minutes.toString().padStart(2, '0')}:${(seconds % 60).toString().padStart(2, '0')}`; +} + +let numChecked = 0; +checkboxes.forEach(function(checkbox) { + checkbox.addEventListener('click', function() { + if (numChecked === 0) { + startTimer(); + } + if (checkbox.checked) { + numChecked++; + } else { + numChecked--; + } + counter.textContent = numChecked; + if (numChecked === checkboxes.length) { + clearInterval(timerInterval); + alert(`You cracked all the eggs in ${timer.textContent}!`); + } + }); +}); + +// Hide and show articles +const startButton = document.querySelector('#startScreen button'); +const gameScreen = document.querySelector('#gameScreen'); +const returnButton = document.querySelector('#gameScreen button'); + + +startButton.addEventListener('click', () => { + // hide the start screen + startScreen.style.display = 'none'; + // show the game screen + gameScreen.style.display = 'block'; +}); + +returnButton.addEventListener('click', () => { + // reset the game + location.reload(); +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..a651446 --- /dev/null +++ b/styles.css @@ -0,0 +1,368 @@ +:root { + --main-bg-color: rgb(193, 240, 251); + --button-color: rgb(188, 219, 131); + --white-color: rgb(255, 255, 255); + --blue-color: rgb(138, 195, 208); + --darkgray-color: rgb(61, 61, 61); + --animation-time: 1s; +} + +@keyframes blink-animation { + to { + visibility: hidden; + } +} + +@keyframes shake { + 10%, + 90% { + transform: translate3d(-1px, 0, 0); + } + + 20%, + 80% { + transform: translate3d(2px, 0, 0); + } + + 30%, + 50%, + 70% { + transform: translate3d(-4px, 0, 0); + } + + 40%, + 60% { + transform: translate3d(4px, 0, 0); + } +} + +#gameScreen { + display: none; +} + +body { + background-image: radial-gradient(var(--white-color) 28.8%, transparent 30.8%), + radial-gradient(var(--white-color) 28.8%, transparent 30.8%); + background-position: 0px 0px, 104px 104px; + background-size: 208px 208px; + background-color: var(--main-bg-color); + font-family: "Dongle", sans-serif; + font-size: 27px; + line-height: 20px; + cursor: url("img/spoon.png"), auto; +} + +main { + flex-direction: row; + overflow: hidden; + scroll-behavior: smooth; +} + +button { + margin: 10px; + padding: 10px 20px 10px 20px; + background-color: var(--button-color); + border-radius: 8px; + border: none; + font-family: "Dongle", sans-serif; + font-size: 25px; +} + +button:hover { + transform: scale(0.9); +} + +main, +.wrapper--information, +.game--information { + align-items: center; +} + +div p, +h1 { + width: 240px; + text-align: center; +} + +main, +.gameboard, +.wrapper--information, +.game--information { + display: flex; +} + +main, +.gameboard { + justify-content: center; +} + +.wrapper--information, +.game--information { + flex-direction: column; +} + +.gameboard, +.wrapper--information { + background-color: var(--white-color); +} + +.wrapper--information { + width: 430px; + height: 550px; + border-radius: 50% 60% 50% 50% / 70% 70% 40% 40%; + border: 1px solid var(--darkgray-color); + padding-top: 60px; + border: 1px solid var(--blue-color); + padding-top: 50px; +} + +.wrapper--information img:hover { + animation: shake var(--animation-time) cubic-bezier(0.36, 0.07, 0.19, 0.97); +} + +.gameboard { + flex-wrap: wrap; + width: 550px; + padding: 50px; + border: 5px solid var(--blue-color); +} + +input[type="checkbox"] { + display: inline-block; + height: 100px; + width: 100px; + background-repeat: no-repeat; + appearance: none; + cursor: url("img/spoon.png"), auto; + animation: blink-animation var(--animation-time) steps(2, start) infinite; +} + +.gameboard__checkbox--eggimage1 { + background-image: url(img/easteregg1.png); + --animation-time: 1s; +} + +.gameboard__checkbox--eggimage2 { + background-image: url(img/easteregg2.png); + --animation-time: 2s; +} + +.gameboard__checkbox--eggimage3 { + background-image: url(img/easteregg3.png); + --animation-time: 4s; +} + +.gameboard__checkbox--eggimage4 { + background-image: url(img/easteregg4.png); + --animation-time: 1s; +} + +.gameboard__checkbox--eggimage5 { + background-image: url(img/easteregg5.png); + --animation-time: 3s; +} + +.gameboard__checkbox--eggimage6 { + background-image: url(img/easteregg6.png); + --animation-time: 3s; +} + +.gameboard__checkbox--eggimage7 { + background-image: url(img/easteregg7.png); + --animation-time: 1s; +} + +.gameboard__checkbox--eggimage8 { + background-image: url(img/easteregg8.png); + --animation-time: 2s; +} + +.gameboard__checkbox--eggimage9 { + background-image: url(img/easteregg9.png); + --animation-time: 4s; +} + +.gameboard__checkbox--eggimage10 { + background-image: url(img/easteregg10.png); + --animation-time: 2s; +} + +.gameboard__checkbox--eggimage11 { + background-image: url(img/easteregg11.png); + --animation-time: 2s; +} + +.gameboard__checkbox--eggimage12 { + background-image: url(img/easteregg12.png); + --animation-time: 3s; +} + +.gameboard__checkbox--eggimage13 { + background-image: url(img/easteregg13.png); + --animation-time: 1s; +} + +.gameboard__checkbox--eggimage14 { + background-image: url(img/easteregg14.png); + --animation-time: 2s; +} + +.gameboard__checkbox--eggimage15 { + background-image: url(img/easteregg15.png); + --animation-time: 1s; +} + +.gameboard__checkbox--eggimage16 { + background-image: url(img/easteregg16.png); + --animation-time: 1s; +} + +.gameboard__checkbox--eggimage17 { + background-image: url(img/easteregg17.png); + --animation-time: 4s; +} + +.gameboard__checkbox--eggimage18 { + background-image: url(img/easteregg18.png); + --animation-time: 2s; +} + +.gameboard__checkbox--eggimage19 { + background-image: url(img/easteregg19.png); + --animation-time: 1s; +} + +.gameboard__checkbox--eggimage20 { + background-image: url(img/easteregg20.png); + --animation-time: 3s; +} + +.gameboard__checkbox--eggimage21 { + background-image: url(img/easteregg21.png); + --animation-time: 4s; +} + +.gameboard__checkbox--eggimage22 { + background-image: url(img/easteregg22.png); + --animation-time: 2s; +} + +.gameboard__checkbox--eggimage23 { + background-image: url(img/easteregg23.png); + --animation-time: 1s; +} + +.gameboard__checkbox--eggimage24 { + background-image: url(img/easteregg24.png); + --animation-time: 3s; +} + +.gameboard__checkbox--eggimage25 { + background-image: url(img/easteregg25.png); + --animation-time: 4s; +} + +input[type="checkbox"]:checked { + animation: none; + pointer-events: none; +} + +.gameboard__checkbox--eggimage1:checked { + background-image: url(img/egg1.png); +} + +.gameboard__checkbox--eggimage2:checked { + background-image: url(img/egg2.png); +} + +.gameboard__checkbox--eggimage3:checked { + background-image: url(img/egg3.png); +} + +.gameboard__checkbox--eggimage4:checked { + background-image: url(img/egg4.png); +} + +.gameboard__checkbox--eggimage5:checked { + background-image: url(img/egg5.png); +} + +.gameboard__checkbox--eggimage6:checked { + background-image: url(img/egg6.png); +} + +.gameboard__checkbox--eggimage7:checked { + background-image: url(img/egg7.png); +} + +.gameboard__checkbox--eggimage8:checked { + background-image: url(img/egg8.png); +} + +.gameboard__checkbox--eggimage9:checked { + background-image: url(img/egg9.png); +} + +.gameboard__checkbox--eggimage10:checked { + background-image: url(img/egg10.png); +} + +.gameboard__checkbox--eggimage11:checked { + background-image: url(img/egg11.png); +} + +.gameboard__checkbox--eggimage12:checked { + background-image: url(img/egg12.png); +} + +.gameboard__checkbox--eggimage13:checked { + background-image: url(img/egg13.png); +} + +.gameboard__checkbox--eggimage14:checked { + background-image: url(img/egg14.png); +} + +.gameboard__checkbox--eggimage15:checked { + background-image: url(img/egg15.png); +} + +.gameboard__checkbox--eggimage16:checked { + background-image: url(img/egg16.png); +} + +.gameboard__checkbox--eggimage17:checked { + background-image: url(img/egg17.png); +} + +.gameboard__checkbox--eggimage18:checked { + background-image: url(img/egg18.png); +} + +.gameboard__checkbox--eggimage19:checked { + background-image: url(img/egg19.png); +} + +.gameboard__checkbox--eggimage20:checked { + background-image: url(img/egg20.png); +} + +.gameboard__checkbox--eggimage21:checked { + background-image: url(img/egg21.png); +} + +.gameboard__checkbox--eggimage22:checked { + background-image: url(img/egg22.png); +} + +.gameboard__checkbox--eggimage23:checked { + background-image: url(img/egg23.png); +} + +.gameboard__checkbox--eggimage24:checked { + background-image: url(img/egg24.png); +} + +.gameboard__checkbox--eggimage25:checked { + background-image: url(img/egg25.png); +}