diff --git a/README.md b/README.md index 066ab1f..0902743 100644 --- a/README.md +++ b/README.md @@ -1 +1,19 @@ -[![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-718a45dd9cf7e7f842a935f5ebbe5719a5e09af4491e668f4dbf3b35d5cca122.svg)](https://classroom.github.com/online_ide?assignment_repo_id=10936558&assignment_repo_type=AssignmentRepo) +What the project does: +This project makes it so that you can have a blast by whacking some moles. For me it is to practice my css abilities. + + +Why the project is useful: +It is simply a fun and creative excercise to learn from. For the user it is just some fun. + +How users can get started with the project: +https://advancedcss2023.github.io/assignment-2---css-games-group_13/ +To get started you can go to the page where the game is hosted and start whacking the moles. The user can also download the game and host it localy. + +Where users can get help with your project: +Users can clone the repository to their computer and and tweak the code, if they want to. But they need to make a request that need to get allowed by a admin to push new content. + +Which technology is used: +Html and scss + +Who maintains and contributes to the project: +Vegard diff --git a/img/dead-mole.svg b/img/dead-mole.svg new file mode 100644 index 0000000..3d7e61e --- /dev/null +++ b/img/dead-mole.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/img/dirt-background.jpg b/img/dirt-background.jpg new file mode 100644 index 0000000..83af535 Binary files /dev/null and b/img/dirt-background.jpg differ diff --git a/img/gif-mole.gif b/img/gif-mole.gif new file mode 100644 index 0000000..b3cefed Binary files /dev/null and b/img/gif-mole.gif differ diff --git a/img/hammer.png b/img/hammer.png new file mode 100644 index 0000000..558a141 Binary files /dev/null and b/img/hammer.png differ diff --git a/img/mole.svg b/img/mole.svg new file mode 100644 index 0000000..fda88ab --- /dev/null +++ b/img/mole.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..d968590 --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + + + Game + + + + +
+
+ + + + + + + + + + + + + + + +
+

Hit The Moles!

+

Hits

+
+ + +
+ +
+ +
+ + +
+

+ YOU WIN! +

+
+
+ +
+ + \ No newline at end of file diff --git a/styles/_animation.scss b/styles/_animation.scss new file mode 100644 index 0000000..8ca37ce --- /dev/null +++ b/styles/_animation.scss @@ -0,0 +1,11 @@ +@keyframes moveDown { + 0% { + transform: translateY(10%); + } + 25% { + transform: translateY(100%); + } + 100% { + transform: translateY(100%); + } +} \ No newline at end of file diff --git a/styles/_clear.scss b/styles/_clear.scss new file mode 100644 index 0000000..693ce29 --- /dev/null +++ b/styles/_clear.scss @@ -0,0 +1,4 @@ +*, body { + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/styles/_cursor.scss b/styles/_cursor.scss new file mode 100644 index 0000000..2ac988a --- /dev/null +++ b/styles/_cursor.scss @@ -0,0 +1,5 @@ +* { + cursor: url('../img/hammer.png') 0 5, auto; + user-select: none; +} + diff --git a/styles/_fonts.scss b/styles/_fonts.scss new file mode 100644 index 0000000..7f953a7 --- /dev/null +++ b/styles/_fonts.scss @@ -0,0 +1,29 @@ +// Import the DynaPuff font +@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;500&display=swap'); + +// Set the font family for your headings +h1, h2, h4 { + font-family: 'DynaPuff', cursive; +} + +// Additional styling for your headings +h1 { + font-weight: 500; + font-size: 2.5rem; + line-height: 1.2; + +} + +h2 { + font-weight: 400; + font-size: 2rem; + line-height: 1.2; + +} + +h4 { + font-weight: 500; + font-size: 1.5rem; + line-height: 1.2; + +} diff --git a/styles/_layout.scss b/styles/_layout.scss new file mode 100644 index 0000000..6fbb530 --- /dev/null +++ b/styles/_layout.scss @@ -0,0 +1,95 @@ +body { + height: 100vh; + + + + + .game { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: url(../img/dirt-background.jpg); + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + + + + &__screen { + height: $full-height; + width: $screen-width; + background-color: $primary-color; + overflow: hidden; + position: relative; + display: flex; + justify-content: center; + text-align: center; + + + &--ground1 { + height: 330px; + width: 500px; + background: linear-gradient($dirt-color1, $dirt-color3); + position: absolute; + bottom: 400px; + z-index: 50; + + } + &--ground2 { + height: 330px; + width: 500px; + background: linear-gradient($dirt-color1, $dirt-color2); + position: absolute; + bottom: 200px; + z-index: 70; + + } + &--ground3 { + height: 300px; + width: 500px; + background: linear-gradient($dirt-color2, $dirt-color3); + position: absolute; + bottom: 0; + z-index: 100; + + } + + &__victory { + height: $full-height; + width: $screen-width; + background-image: url('../img/gif-mole.gif'); + background-size: cover; + background-repeat: no-repeat; + background-position: center center; + position: absolute; + top: 100vh; + z-index: 999; + transition-property: top; + transition-timing-function: ease-in-out; + display: grid; + + h1 { + justify-self: center; + margin-top: 20%; + } + } + + + } + + + } + +} + +input:checked ~ +input:checked ~ +input:checked ~ +input:checked ~ +input:checked ~ +input:checked ~ +input:checked ~ .game__screen__victory { + top: 0; +} + diff --git a/styles/_mole.scss b/styles/_mole.scss new file mode 100644 index 0000000..e2b5299 --- /dev/null +++ b/styles/_mole.scss @@ -0,0 +1,98 @@ + + +h2:before { + content: counter(hits) '/7'; +} + +input { + height: 0; + width: 0; +} + +input:checked { + counter-increment: hits; +} + + +label { + display: inline-block; + height: 175px; + width: 100px; + background-size: cover; +} + +label:before { + content: ""; + display: inline-block; + height: 175px; + width: 120px; + background-image: url(../img/mole.svg); + background-size: cover; +} + +input:checked + label:before { + background-image: url(../img/dead-mole.svg); +} + +input:checked + label { + pointer-events: none; + animation-play-state: paused !important; +} + + +#mole1 { + top: 60px; + left: 60px; + animation: moveDown $ease-in-out-curve 5.7s alternate; + + animation-iteration-count: infinite; +} +#mole2 { + top: 60px; + left: 250px; + animation: moveDown $ease-in-out-curve 5s alternate; + animation-iteration-count: infinite; +} +#mole3 { + top: 260px; + left: 30px; + z-index: 60; + animation: moveDown $ease-in-out-curve 4.7s alternate; + animation-iteration-count: infinite; +} +#mole4 { + top: 260px; + left: 160px; + z-index: 60; + animation: moveDown $ease-in-out-curve 6s alternate; + animation-iteration-count: infinite; +} +#mole5 { + top: 260px; + left: 340px; + z-index: 60; + animation: moveDown $ease-in-out-curve 4.3s alternate; + + animation-iteration-count: infinite; +} +#mole6 { + top: 490px; + left: 140px; + z-index: 90; + animation: moveDown $ease-in-out-curve 5.2s alternate; + + animation-iteration-count: infinite; +} +#mole7 { + top: 490px; + left: 380px; + z-index: 90; + animation: moveDown $ease-in-out-curve 4s alternate; + + animation-iteration-count: infinite; +} +.mole { + position: absolute; + +} + diff --git a/styles/_variables.scss b/styles/_variables.scss new file mode 100644 index 0000000..cbc5c05 --- /dev/null +++ b/styles/_variables.scss @@ -0,0 +1,16 @@ +// spacing +$full-height: 100vh; +$screen-width: 500px; + + +//colors +$primary-color: #007bff; +$secondary-color: #ff0000; +$dirt-color1: #95604d; +$dirt-color2: #814734; +$dirt-color3: #6c3e2d; + + + +//animation +$ease-in-out-curve: cubic-bezier(.25, .1, .25, 1); diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 0000000..c9c2dcd --- /dev/null +++ b/styles/index.css @@ -0,0 +1,211 @@ +@import url("https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;500&display=swap"); +*, body { + margin: 0; + padding: 0; +} + +h1, h2, h4 { + font-family: "DynaPuff", cursive; +} + +h1 { + font-weight: 500; + font-size: 2.5rem; + line-height: 1.2; +} + +h2 { + font-weight: 400; + font-size: 2rem; + line-height: 1.2; +} + +h4 { + font-weight: 500; + font-size: 1.5rem; + line-height: 1.2; +} + +@keyframes moveDown { + 0% { + transform: translateY(10%); + } + 25% { + transform: translateY(100%); + } + 100% { + transform: translateY(100%); + } +} +* { + cursor: url("../img/hammer.png") 0 5, auto; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +h2:before { + content: counter(hits) "/7"; +} + +input { + height: 0; + width: 0; +} + +input:checked { + counter-increment: hits; +} + +label { + display: inline-block; + height: 175px; + width: 100px; + background-size: cover; +} + +label:before { + content: ""; + display: inline-block; + height: 175px; + width: 120px; + background-image: url(../img/mole.svg); + background-size: cover; +} + +input:checked + label:before { + background-image: url(../img/dead-mole.svg); +} + +input:checked + label { + pointer-events: none; + animation-play-state: paused !important; +} + +#mole1 { + top: 60px; + left: 60px; + animation: moveDown cubic-bezier(0.25, 0.1, 0.25, 1) 5.7s alternate; + animation-iteration-count: infinite; +} + +#mole2 { + top: 60px; + left: 250px; + animation: moveDown cubic-bezier(0.25, 0.1, 0.25, 1) 5s alternate; + animation-iteration-count: infinite; +} + +#mole3 { + top: 260px; + left: 30px; + z-index: 60; + animation: moveDown cubic-bezier(0.25, 0.1, 0.25, 1) 4.7s alternate; + animation-iteration-count: infinite; +} + +#mole4 { + top: 260px; + left: 160px; + z-index: 60; + animation: moveDown cubic-bezier(0.25, 0.1, 0.25, 1) 6s alternate; + animation-iteration-count: infinite; +} + +#mole5 { + top: 260px; + left: 340px; + z-index: 60; + animation: moveDown cubic-bezier(0.25, 0.1, 0.25, 1) 4.3s alternate; + animation-iteration-count: infinite; +} + +#mole6 { + top: 490px; + left: 140px; + z-index: 90; + animation: moveDown cubic-bezier(0.25, 0.1, 0.25, 1) 5.2s alternate; + animation-iteration-count: infinite; +} + +#mole7 { + top: 490px; + left: 380px; + z-index: 90; + animation: moveDown cubic-bezier(0.25, 0.1, 0.25, 1) 4s alternate; + animation-iteration-count: infinite; +} + +.mole { + position: absolute; +} + +body { + height: 100vh; +} +body .game { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: url(../img/dirt-background.jpg); + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; +} +body .game__screen { + height: 100vh; + width: 500px; + background-color: #007bff; + overflow: hidden; + position: relative; + display: flex; + justify-content: center; + text-align: center; +} +body .game__screen--ground1 { + height: 330px; + width: 500px; + background: linear-gradient(#95604d, #6c3e2d); + position: absolute; + bottom: 400px; + z-index: 50; +} +body .game__screen--ground2 { + height: 330px; + width: 500px; + background: linear-gradient(#95604d, #814734); + position: absolute; + bottom: 200px; + z-index: 70; +} +body .game__screen--ground3 { + height: 300px; + width: 500px; + background: linear-gradient(#814734, #6c3e2d); + position: absolute; + bottom: 0; + z-index: 100; +} +body .game__screen__victory { + height: 100vh; + width: 500px; + background-image: url("../img/gif-mole.gif"); + background-size: cover; + background-repeat: no-repeat; + background-position: center center; + position: absolute; + top: 100vh; + z-index: 999; + transition-property: top; + transition-timing-function: ease-in-out; + display: grid; +} +body .game__screen__victory h1 { + justify-self: center; + margin-top: 20%; +} + +input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ .game__screen__victory { + top: 0; +}/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/styles/index.css.map b/styles/index.css.map new file mode 100644 index 0000000..dd8ef81 --- /dev/null +++ b/styles/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["_fonts.scss","_clear.scss","index.css","_animation.scss","_cursor.scss","_mole.scss","_layout.scss","_variables.scss"],"names":[],"mappings":"AACQ,0FAAA;ACDR;EACI,SAAA;EACA,UAAA;ACEJ;;AFAA;EACE,gCAAA;AEGF;;AFCA;EACE,gBAAA;EACA,iBAAA;EACA,gBAAA;AEEF;;AFEA;EACE,gBAAA;EACA,eAAA;EACA,gBAAA;AECF;;AFGA;EACE,gBAAA;EACA,iBAAA;EACA,gBAAA;AEAF;;AC1BA;EACE;IACE,0BAAA;ED6BF;EC3BA;IACI,2BAAA;ED6BJ;EC3BA;IACE,2BAAA;ED6BF;AACF;AEtCA;EACI,0CAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;AFwCJ;;AGxCA;EACI,2BAAA;AH2CJ;;AGxCA;EACI,SAAA;EACA,QAAA;AH2CJ;;AGxCA;EACI,uBAAA;AH2CJ;;AGvCA;EACI,qBAAA;EACA,aAAA;EACA,YAAA;EACA,sBAAA;AH0CJ;;AGvCA;EACI,WAAA;EACA,qBAAA;EACA,aAAA;EACA,YAAA;EACA,sCAAA;EACA,sBAAA;AH0CJ;;AGvCA;EACI,2CAAA;AH0CJ;;AGvCA;EACI,oBAAA;EACA,uCAAA;AH0CJ;;AGtCA;EACI,SAAA;EACA,UAAA;EACA,mEAAA;EAEA,mCAAA;AHwCJ;;AGtCA;EACI,SAAA;EACA,WAAA;EACA,iEAAA;EACA,mCAAA;AHyCJ;;AGvCA;EACI,UAAA;EACA,UAAA;EACA,WAAA;EACA,mEAAA;EACA,mCAAA;AH0CJ;;AGxCA;EACI,UAAA;EACA,WAAA;EACA,WAAA;EACA,iEAAA;EACA,mCAAA;AH2CJ;;AGzCA;EACI,UAAA;EACA,WAAA;EACA,WAAA;EACA,mEAAA;EAEA,mCAAA;AH2CJ;;AGzCA;EACI,UAAA;EACA,WAAA;EACA,WAAA;EACA,mEAAA;EAEA,mCAAA;AH2CJ;;AGzCA;EACI,UAAA;EACA,WAAA;EACA,WAAA;EACA,iEAAA;EAEA,mCAAA;AH2CJ;;AGzCA;EACI,kBAAA;AH4CJ;;AI1IA;EACI,aAAA;AJ6IJ;AIxII;EACI,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,2CAAA;EACA,sBAAA;EACA,4BAAA;EACA,4BAAA;AJ0IR;AItIQ;EACI,aClBE;EDmBF,YClBG;EDmBH,yBCfI;EDgBJ,gBAAA;EACA,kBAAA;EACA,aAAA;EACA,uBAAA;EACA,kBAAA;AJwIZ;AIrIY;EACI,aAAA;EACA,YAAA;EACA,6CAAA;EACA,kBAAA;EACA,aAAA;EACA,WAAA;AJuIhB;AIpIY;EACI,aAAA;EACA,YAAA;EACA,6CAAA;EACA,kBAAA;EACA,aAAA;EACA,WAAA;AJsIhB;AInIY;EACI,aAAA;EACA,YAAA;EACA,6CAAA;EACA,kBAAA;EACA,SAAA;EACA,YAAA;AJqIhB;AIjIY;EACI,aCzDF;ED0DE,YCzDD;ED0DC,4CAAA;EACA,sBAAA;EACA,4BAAA;EACA,kCAAA;EACA,kBAAA;EACA,UAAA;EACA,YAAA;EACA,wBAAA;EACA,uCAAA;EACA,aAAA;AJmIhB;AIjIgB;EACI,oBAAA;EACA,eAAA;AJmIpB;;AIvHA;EAOI,MAAA;AJoHJ","file":"index.css"} \ No newline at end of file diff --git a/styles/index.scss b/styles/index.scss new file mode 100644 index 0000000..1fadac2 --- /dev/null +++ b/styles/index.scss @@ -0,0 +1,13 @@ +@import 'clear'; + +@import 'fonts'; + +@import 'variables'; + +@import 'animation'; + +@import 'cursor'; + +@import 'mole'; + +@import 'layout';