Added Page 404 Shooting Range

MjavadH · Sep 26, 2023 · a6a4122 · a6a4122
1 parent c9e5472
commit a6a4122
Show file tree

Hide file tree

Showing 18 changed files with 205 additions and 0 deletions.
diff --git a/Minimal/Shooting Range/Image.png b/Minimal/Shooting Range/Image.png
diff --git a/Minimal/Shooting Range/assets/GunSound/Sound1.mp3 b/Minimal/Shooting Range/assets/GunSound/Sound1.mp3
diff --git a/Minimal/Shooting Range/assets/GunSound/Sound2.mp3 b/Minimal/Shooting Range/assets/GunSound/Sound2.mp3
diff --git a/Minimal/Shooting Range/assets/Target/Target1.png b/Minimal/Shooting Range/assets/Target/Target1.png
diff --git a/Minimal/Shooting Range/assets/Target/Target2.png b/Minimal/Shooting Range/assets/Target/Target2.png
diff --git a/Minimal/Shooting Range/assets/Traces/Trace1.png b/Minimal/Shooting Range/assets/Traces/Trace1.png
diff --git a/Minimal/Shooting Range/assets/Traces/Trace2.png b/Minimal/Shooting Range/assets/Traces/Trace2.png
diff --git a/Minimal/Shooting Range/assets/Traces/Trace3.png b/Minimal/Shooting Range/assets/Traces/Trace3.png
diff --git a/Minimal/Shooting Range/assets/Traces/Trace4.png b/Minimal/Shooting Range/assets/Traces/Trace4.png
diff --git a/Minimal/Shooting Range/assets/Traces/Trace5.png b/Minimal/Shooting Range/assets/Traces/Trace5.png
diff --git a/Minimal/Shooting Range/assets/cursor/cursor.png b/Minimal/Shooting Range/assets/cursor/cursor.png
diff --git a/Minimal/Shooting Range/assets/cursor/cursor2.png b/Minimal/Shooting Range/assets/cursor/cursor2.png
diff --git a/Minimal/Shooting Range/assets/cursor/cursor3.png b/Minimal/Shooting Range/assets/cursor/cursor3.png
diff --git a/Minimal/Shooting Range/assets/cursor/cursor4.png b/Minimal/Shooting Range/assets/cursor/cursor4.png
diff --git a/Minimal/Shooting Range/assets/cursor/cursor5.png b/Minimal/Shooting Range/assets/cursor/cursor5.png
diff --git a/Minimal/Shooting Range/assets/script.js b/Minimal/Shooting Range/assets/script.js
@@ -0,0 +1,51 @@
+let background = document.getElementById("background");
+let Crosshair = document.getElementById("Crosshair");
+let hold = false;
+let soundsrc = "assets/GunSound/Sound2.mp3"
+document.addEventListener("click", Fire);
+document.addEventListener("mousemove", Cursor);
+document.addEventListener("keydown", Hold_Breath);
+document.addEventListener("keyup", Hold_Breath);
+
+function Hold_Breath(e) {
+    if (e.shiftKey){
+        hold = true;
+        Crosshair.style.animationPlayState = "paused";
+    }
+    else{
+        hold = false;
+        Crosshair.style.animationPlayState = "running";
+    }
+}
+function Cursor(e) {
+    Crosshair.style.left = (e.clientX - (Crosshair.clientWidth / 2)) + "px";
+    Crosshair.style.top = (e.clientY - (Crosshair.clientHeight / 2)) + "px";
+}
+
+function Fire(e) {
+    let Traces = CreateTraces(e.clientX, e.clientY)
+    background.appendChild(Traces);
+    new Audio(soundsrc).play();
+    setTimeout(() => {
+        Traces.remove();
+    }, 10000);
+}
+
+function CreateTraces(x, y) {
+    let Traces = document.createElement("div");
+    Traces.className = "Traces";
+    if (hold){
+        Traces.style.top = (y - 11) + "px";
+        Traces.style.left = (x - 12) + "px";
+    }
+    else{
+        Traces.style.top = (y + Random_Position(-30, 10)) + "px";
+        Traces.style.left = (x + Random_Position(-30, 10)) + "px";
+    }
+    Traces.style.backgroundImage = "url(assets/Traces/Trace" + Random_Position(1, 5) + ".png)";
+    return Traces
+}
+
+function Random_Position(min, max) {
+    return Math.floor(Math.random() * (max - (min) + 1)) + (min);
+}
diff --git a/Minimal/Shooting Range/assets/style.css b/Minimal/Shooting Range/assets/style.css
@@ -0,0 +1,130 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    font-family: 'Space Mono', cursive;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    cursor: none;
+}
+
+.main {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.main h1 {
+    font-size: 10em;
+    user-select: none;
+}
+
+.main h1 span {
+    margin: 0 1.5rem;
+    color: transparent;
+    -webkit-text-stroke: 3px #000;
+}
+
+.background {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#Crosshair {
+    position: absolute;
+    user-select: none;
+    width: 80px;
+    height: 80px;
+    top: 0;
+    left: 0;
+    background: url("cursor/cursor4.png") no-repeat;
+    background-size: cover;
+    z-index: 2;
+    -webkit-animation: Breath 5s linear infinite;
+    -o-animation: Breath 5s linear infinite;
+    animation: Breath 5s linear infinite;
+}
+
+@keyframes Breath {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(10px);
+    }
+}
+
+.aim {
+    position: absolute;
+}
+
+#aim1 {
+    left: 60px;
+    width: 200px;
+}
+
+#aim2 {
+    right: 50px;
+    width: 250px;
+}
+
+.Traces {
+    width: 25px;
+    height: 25px;
+    position: absolute;
+    border-radius: 50%;
+    user-select: none;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+@media (max-height: 320px) {
+    #aim2 {
+        display: none;
+    }
+}
+
+@media (max-width: 767px) {
+    .main h1 {
+        font-size: 7em;
+    }
+
+    #aim1 {
+        display: none;
+    }
+
+    #aim2 {
+        right: auto;
+        width: 60%;
+        bottom: 25px;
+    }
+}
+
+@media (max-width: 991px) and (min-height: 800px) {
+    #aim1 {
+        left: auto;
+        top: 25px;
+    }
+
+    #aim2 {
+        right: auto;
+        bottom: 25px;
+    }
+}
diff --git a/Minimal/Shooting Range/index.html b/Minimal/Shooting Range/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Page 404 Shooting Range</title>
+    <!--Style-->
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body id="body">
+<main class="main">
+    <h1>4<span>0</span>4</h1>
+</main>
+<section id="background" class="background">
+    <div id="Crosshair"></div>
+    <img id="aim1" class="aim" src="assets/Target/Target1.png">
+    <img id="aim2" class="aim" src="assets/Target/Target2.png">
+</section>
+
+<script src="assets/script.js"></script>
+</body>
+</html>