initial commit: v1

index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Duckosaur</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="player.gif" type="image/gif">
+</head>
+<body>
+    <div id="game-div">
+        <div id="score-div">0</div>
+        <div id="text-div">Press any key to start</div>
+        <div id="ducko-div"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,105 @@
+// The player
+const ducko = document.querySelector("#ducko-div");
+
+// The score
+const score = document.querySelector("#score-div");
+
+// The text
+const text_div = document.querySelector("#text-div");
+
+// The game div
+const game = document.querySelector("#game-div");
+
+window.spawn_interval;
+window.move_interval;
+let started = false;
+let first_start = true;
+
+// Jump
+function jump() {
+    if (! ducko.classList.contains("jumping")) {
+        ducko.classList.add("jumping");
+        setTimeout(function() {
+            ducko.classList.remove("jumping");
+        }, 900);
+
+        // To check if the player is high enough to dodge the cactus
+        setTimeout(function () {
+            ducko.classList.add("safe");
+            setTimeout( function() {
+                ducko.classList.remove("safe");
+            }, 550);
+        }, 140);
+    }
+}
+
+document.body.addEventListener("keypress", key_pressed);
+document.body.addEventListener("click", key_pressed);
+document.body.addEventListener("touchstart", key_pressed);
+text_div.addEventListener("click", reset);
+text_div.addEventListener("touchstart", reset);
+
+// Spawn a cactus
+function cactusSpawn() {
+    let cactus = document.createElement("div");
+    cactus.classList.add("cactus");
+    cactus.style.right = "0vw";
+    game.appendChild(cactus);
+}
+
+// Move all cactus
+function cactusMove() {
+    var all_cactus = document.querySelectorAll(".cactus");
+    all_cactus.forEach(cactus => {
+        let right = parseInt(cactus.style.right.slice(0, -2));
+        if (right <= 99) {
+            cactus.style.right = right + 1 + "vw";
+            if ((! ducko.classList.contains("safe")) && 85 <= right && right <= 94) {
+                clearInterval(window.move_interval);
+                clearInterval(window.spawn_interval);
+                text_div.innerHTML = "Your score : " + (parseInt(score.textContent) + 1) + "<br>Click here to restart";
+                started = false;
+            };
+        } else {
+            cactus.classList.remove("cactus");
+        }
+    });
+    score.textContent = parseInt(score.textContent) + 1;
+}
+
+function cactusRandom() {
+    let x = Math.random();
+    if (x < 0.5) {
+        cactusSpawn();
+    }
+}
+
+function start() {
+    window.spawn_interval = setInterval(cactusRandom, 1200);
+    window.move_interval = setInterval(cactusMove, 40);
+    started = true;
+    first_start = false;
+    text_div.innerHTML = "";
+}
+
+function reset() {
+    if (!started && !first_start) {
+        started = true;
+        var all_cactus = document.querySelectorAll(".cactus");
+        all_cactus.forEach(cactus => {
+            cactus.classList.remove("cactus");
+        });
+        text_div.innerHTML = "";
+        score.textContent = 0;
+        window.spawn_interval = setInterval(cactusRandom, 1200);
+        window.move_interval = setInterval(cactusMove, 40);
+    }
+}
+
+function key_pressed() {
+    if (started) {
+        jump();
+    } else if (first_start) {
+        start();
+    }
+}

style.css

@@ -0,0 +1,67 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Helvetica;
+}
+
+#game-div {
+    height: 24vw;
+    width: 100%;
+    position: relative;
+    top: 48vh;
+    transform: translateY(-50%);
+    background: linear-gradient(0deg, rgb(232, 219, 146) 0%, rgb(237, 212, 138) 33%,rgb(38, 165, 255) 100%);
+}
+
+#ducko-div {
+    width: 9vw;
+    height: 12vw;
+    position: absolute;
+    left: 4vw;
+    bottom: 0;
+    background-image: url(player.gif);
+    background-size: cover;
+}
+
+@keyframes jump {
+    0% { bottom: 0vw; }
+    50% { bottom: 12vw; }
+    100% { bottom: 0vw;}
+}
+
+.jumping {
+    animation-name: jump;
+    animation-duration: 1s;
+}
+
+.cactus {
+    width: 4vw;
+    height: 6vw;
+    position: absolute;
+    bottom: 1vw;
+    background-image: url(cactus.png);
+    background-size: cover;
+}
+
+#score-div {
+    position: absolute;
+    top: 1vw;
+    right: 1vw;
+    color: #fff;
+    font-weight: bold;
+    font-size: 2vw;
+    font-family: Helvetica;
+}
+
+#text-div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-weight: bold;
+    font-size: 4vw;
+    font-family: Helvetica;
+    text-align: center;
+    cursor: pointer;
+}