AdvancedCSS2023 · github-classroom · Apr 20, 2023 · Apr 20, 2023 · Apr 20, 2023 · Apr 22, 2023
diff --git 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
diff --git a/img/dirt-background.jpg b/img/dirt-background.jpg
diff --git a/img/gif-mole.gif b/img/gif-mole.gif
diff --git a/img/hammer.png b/img/hammer.png
diff --git a/img/mole.svg b/img/mole.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Game</title>
+
+    <link rel="stylesheet" href="styles/index.css">
+</head>
+<body>
+    <div class="game">
+        <div class="game__screen">
+
+            <input id="1" type="checkbox" name="mole" />
+            <label for="1" id="mole1" class="mole"></label>
+            <input id="2" type="checkbox" name="mole" />
+            <label for="2" id="mole2" class="mole"></label>
+            <input id="3" type="checkbox" name="mole" />
+            <label for="3" id="mole3" class="mole"></label>
+            <input id="4" type="checkbox" name="mole" />
+            <label for="4" id="mole4" class="mole"></label>
+            <input id="5" type="checkbox" name="mole" />
+            <label for="5" id="mole5" class="mole"></label>
+            <input id="6" type="checkbox" name="mole" />
+            <label for="6" id="mole6" class="mole"></label>
+            <input id="7" type="checkbox" name="mole" />
+            <label for="7" id="mole7" class="mole"></label>
+            <div class="text">
+                <h1>Hit The Moles!</h1>
+                <h2>Hits</h2>
+            </div>
+
+
+            <div class="game__screen--ground1"></div>
+
+            <div class="game__screen--ground2"></div>
+
+            <div class="game__screen--ground3"></div>
+
+
+            <div class="game__screen__victory">
+                <h1>
+                    YOU WIN!
+                </h1>
+            </div>
+        </div>
+
+    </div>
+</body>
+</html>
diff --git a/styles/_animation.scss b/styles/_animation.scss
@@ -0,0 +1,11 @@
+@keyframes moveDown {
+  0% {
+    transform: translateY(10%);
+  }
+  25% {
+      transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}
diff --git a/styles/_clear.scss b/styles/_clear.scss
@@ -0,0 +1,4 @@
+*, body {
+    margin: 0;
+    padding: 0;
+}
diff --git a/styles/_cursor.scss 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
@@ -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
@@ -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
@@ -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
@@ -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);