Add files via upload

Pixel-Paradox · Dec 26, 2023 · 7ca5bdb · 7ca5bdb
1 parent c056421
commit 7ca5bdb
Show file tree

Hide file tree

Showing 10 changed files with 342 additions and 0 deletions.
diff --git a/Pixel-Adventure.ico b/Pixel-Adventure.ico
diff --git a/Pixel-Adventure.png b/Pixel-Adventure.png
diff --git a/Pixel-Adventure.svg b/Pixel-Adventure.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<html lang="fr">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+        <link rel="stylesheet" type="text/css" href="pagw.css">
+        <link rel="stylesheet" type="text/css" href="menu.css">
+        <script defer src="pagw.js"></script>
+        <script defer src="menu.js"></script>
+        <link rel="icon" href="Pixel-Adventure.ico" type="image/x-icon">
+        <link rel="icon" href="Pixel-Adventure.png" type="image/png">
+        <link rel="icon" type="image/svg+xml" href="Pixel-Adventure.svg">
+        <title>pagw</title>
+    </head>
+
+    <body>
+        <div class="menu">
+            <div class="reprendre btn">Reprendre</div>
+            <div class="size">
+                <input type="number" class="inputSize btn" pattern="[0-9]*" placeholder="Largeur" min="1" max="100">
+                <input type="number" class="inputSize btn" pattern="[0-9]*" placeholder="Hauteur" min="1" max="100">
+            </div>
+            <div class="ecran btn">Plein écran</div>
+        </div>
+
+        <canvas></canvas>
+    </body>
+</html>
diff --git a/map.png b/map.png
diff --git a/menu.css b/menu.css
@@ -0,0 +1,76 @@
+.menu {
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 30px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 3000;
+    visibility: hidden;
+    opacity: 0;
+    transition: 2s; 
+    text-align: center;
+
+}
+
+.menu.active {
+
+    visibility: visible; 
+    opacity: 1;
+    transition: 2s;
+
+}
+
+.btn {
+
+    backdrop-filter: blur(25px);
+    z-index: 2000;
+    width: 400px;
+    display: flex;            
+    justify-content: center;    
+    align-items: center; 
+    height: 40px;
+    border-radius: 10px;
+    padding: 30px;
+    background-color: rgba(255, 255, 255, 0.2);
+    color: white;
+    font-size: 1.5em;
+    cursor: pointer;
+    transition: all 1s;
+    box-shadow : 7px 15px 5px rgba(255, 255, 255, 0.1);
+
+
+}
+
+.btn:hover {
+
+    height: 80px;
+
+}
+
+.size {
+
+    display: flex;          
+    justify-content: center; 
+    gap: 20px; 
+
+}
+
+.inputSize {
+
+    border: none;
+    width: 190px;
+    display: flex;
+
+
+}
+
+::placeholder {
+
+    color: white;
+
+}
diff --git a/menu.js b/menu.js
@@ -0,0 +1,88 @@
+const menu = document.querySelector(".menu");
+const reprendre = document.querySelector(".reprendre");
+const inputSizes = document.querySelectorAll(".inputSize");
+const ecran = document.querySelector(".ecran");
+
+
+document.addEventListener('keydown', function(event) {
+    if (event.keyCode === 81) {
+        menu.classList.toggle("active");
+    }
+});
+
+reprendre.onclick = function() {
+    menu.classList.remove("active");
+};
+
+inputSizes.forEach((input, index) => {
+    input.addEventListener('input', function() {
+        let value = parseInt(this.value);
+
+        if (value > 100) {
+            value = 100;
+        }
+
+        if (value < 1) {
+            value = 1;
+        }
+
+        localStorage.setItem(index === 0 ? "canvasWidth" : "canvasHeight", value.toString());
+
+        if (index === 0) {
+            canvas.style.width = `${value}vw`;
+        } else {
+            canvas.style.height = `${value}vh`;
+        }
+    });
+});
+
+window.addEventListener('DOMContentLoaded', function() {
+    const storedWidth = localStorage.getItem("canvasWidth");
+    const storedHeight = localStorage.getItem("canvasHeight");
+
+    if (storedWidth) {
+        canvas.style.width = `${storedWidth}vw`;
+    }
+
+    if (storedHeight) {
+        canvas.style.height = `${storedHeight}vh`;
+    }
+});
+
+let pleinEcranActif = false;
+
+ecran.onclick = function() {
+    if (!pleinEcranActif) {
+        enterFullscreen();
+        pleinEcranActif = true;
+        ecran.textContent = "Enlever le plein écran";
+    } else {
+        exitFullscreen();
+        pleinEcranActif = false;
+        ecran.textContent = "plein écran";
+    }
+};
+
+function enterFullscreen() {
+    if (document.documentElement.requestFullscreen) {
+        document.documentElement.requestFullscreen();
+    } else if (document.documentElement.mozRequestFullScreen) {
+        document.documentElement.mozRequestFullScreen();
+    } else if (document.documentElement.webkitRequestFullscreen) {
+        document.documentElement.webkitRequestFullscreen();
+    } else if (document.documentElement.msRequestFullscreen) {
+        document.documentElement.msRequestFullscreen();
+    }
+}
+
+function exitFullscreen() {
+    if (document.exitFullscreen) {
+        document.exitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+    } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+    } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+    }
+}
diff --git a/pagw.css b/pagw.css
@@ -0,0 +1,28 @@
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
+
+* {
+
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    font-family: 'Ubuntu', sans-serif;
+
+}
+
+body {
+
+    background-color: black; 
+    overflow: hidden;
+
+}
+
+canvas {
+
+    width: 100%;
+    height: 100vh;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+}
diff --git a/pagw.js b/pagw.js
@@ -0,0 +1,25 @@
+const canvas = document.querySelector('canvas');
+const c = canvas.getContext('2d');
+
+c.fillStyle = "white";
+c.fillRect(0, 0, canvas.width, canvas.height);
+
+const image = new Image();
+image.src = 'map.png';
+
+const playerImage = new Image();
+playerImage.src = 'player.png';
+
+image.onload = function() {
+    c.drawImage(image, -100, -200);
+    const scale = 10;
+    const newWidth = playerImage.width / scale;
+    const newHeight = playerImage.height / scale;
+    c.drawImage(
+        playerImage,
+        canvas.width / 2 - newWidth / 2,
+        canvas.height / 2 - newHeight / 2,
+        newWidth,
+        newHeight
+    );
+};
diff --git a/player.png b/player.png