MVP

bullet.js

@@ -0,0 +1,41 @@
+class Bullet extends Entity {
+    constructor(x, y) {
+        super(x, y, 0.001, 0.02);
+        this.element.className = 'bullet';
+    }
+
+    update() {
+        if (this.alive) {
+            this.y -= 0.01;
+            if (this.y < -0.1) {
+                this.destroy();
+            }
+
+            for (let cloud of clouds) {
+                if (this.isOverlapped(cloud)) {
+                    cloud.destroy();
+                    this.destroy();
+                }
+            }
+        }
+    }
+}
+
+class RainDrop extends Bullet {
+    constructor(x, y) {
+        super(x, y);
+        this.element.className = 'raindrop';
+    }
+
+    update() {
+        if (this.alive) {
+            this.y += 0.01;
+            if (this.y > 1.1) {
+                this.destroy();
+            } else if (this.isOverlapped(shootingPad)) {
+                gameOver('Game over');
+                this.destroy();
+            }
+        }
+    }
+}

cloud.js

@@ -0,0 +1,45 @@
+const VELOCITY = [0.002, 0.0001];
+const SHOOT_PROBABILITY = 0.0007;
+
+class Cloud extends Entity {
+    static shootProbability = SHOOT_PROBABILITY;
+
+    constructor(...args) {
+        super(...args);
+        this.element.className = 'cloud';
+
+        for (let i = 0; i < 10; i++) {
+            const cloudParticle = document.createElement('div');
+            cloudParticle.className = 'cloud-particle';
+            cloudParticle.style.width = `${randRange(50, 80)}%`;
+            cloudParticle.style.height = `${randRange(60, 100)}%`;
+            cloudParticle.style.left = `${randRange(2, 98)}%`;
+            cloudParticle.style.top = `${randRange(2, 98)}%`;
+            cloudParticle.style.animationDelay = `${randRange(-10, 0)}s`;
+            cloudParticle.style.animationDuration = `${randRange(0.5, 3)}s`;
+
+            this.element.appendChild(cloudParticle);
+        }
+    }
+
+    static reset() {
+        this.shootProbability = SHOOT_PROBABILITY;
+    }
+
+    update(direction) {
+        if (this.alive) {
+            this.x += VELOCITY[0] * direction;
+            this.y += VELOCITY[1];
+
+            if (Math.random() < Cloud.shootProbability) {
+                const raindrop = new RainDrop(this.x, this.y + 0.009);
+                bullets.add(raindrop);
+            }
+        }
+    }
+
+    destroy() {
+        super.destroy();
+        Cloud.shootProbability += 0.0001;
+    }
+}

entity.js

@@ -0,0 +1,36 @@
+class Entity {
+    constructor(x, y, w, h) {
+        this.x = x;
+        this.y = y;
+        this.w = w;
+        this.h = h;
+        this.element = document.createElement('div');
+        ROOT.appendChild(this.element);
+        this.draw();
+        this.alive = true;
+    }
+
+    draw() {
+        if (this.alive) {
+            this.element.style.left = `${this.x * 100}%`;
+            this.element.style.top = `${this.y * 100}%`;
+            this.element.style.width = `${this.w * 100}%`;
+            this.element.style.height = `${this.h * 100}%`;
+        }
+    }
+
+    destroy() {
+        this.element.remove();
+        this.alive = false;
+    }
+
+    isOverlapped(other) {
+        if (!this.alive || !other.alive) return false;
+        if (other.x + other.w / 2 < this.x - this.w / 2) return false;
+        if (other.x - other.w / 2 > this.x + this.w / 2) return false;
+        if (other.y + other.h / 2 < this.y - this.h / 2) return false;
+        if (other.y - other.h / 2 > this.y + this.h / 2) return false;
+
+        return true;
+    }
+}

game.js

@@ -0,0 +1,93 @@
+const $ = (s) => document.querySelector(s);
+const $$ = (s) => Array.from(document.querySelectorAll(s));
+const ROOT = $('#root');
+
+const clouds = new Set();
+const bullets = new Set();
+let shootingPad = new ShootingPad();
+const X_BOUND = 0.05;
+let running = true;
+let direction = 1;
+let lives = 3;
+
+const initCloudField = () => {
+    for (let y = 0; y < 6; y++) {
+        for (let x = 0; x < 11; x++) {
+            const cloud = new Cloud(X_BOUND + 0.06 * x, 0.04 + 0.04 * y, 0.03, 0.02);
+            clouds.add(cloud);
+        }
+    }
+}
+
+const start = () => {
+    $('.result')?.remove();
+
+    shootingPad?.destroy();
+    shootingPad = new ShootingPad();
+
+    bullets.forEach(c => c.destroy());
+    bullets.clear();
+
+    clouds.forEach(c => c.destroy());
+    clouds.clear();
+    Cloud.reset();
+    initCloudField();
+
+    running = true;
+    loop();
+}
+
+const gameOver = (result) => {
+    const resultLabel = document.createElement('div');
+    resultLabel.className = 'result';
+    resultLabel.textContent = result;
+    ROOT.appendChild(resultLabel);
+    running = false;
+}
+
+const loop = () => {
+    if (!running) return;
+
+    let directionUpdated = false;
+    Array.from(clouds).forEach(c => {
+        c.update(direction);
+        c.draw();
+        if (c.x < X_BOUND - 0.01 || c.x > 1.01 - X_BOUND) {
+            directionUpdated = true;
+        }
+        if (!c.alive) {
+            clouds.delete(c);
+        }
+    });
+
+    if (directionUpdated) {
+        direction = -direction;
+    }
+
+    Array.from(bullets).forEach(b => {
+        b.update();
+        b.draw();
+
+        if (!b.alive) {
+            bullets.delete(b);
+        }
+    });
+
+    shootingPad.update();
+    shootingPad.draw();
+
+    if (clouds.size === 0) {
+        gameOver('WIN');
+    }
+
+    requestAnimationFrame(loop);
+};
+
+
+document.addEventListener('keypress', () => {
+    if (!running) {
+        start();
+    }
+});
+
+start();

index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OLC Codejam 2022</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <div id="root">
+        </div>
+        <script src="utils.js"></script>
+        <script src="entity.js"></script>
+        <script src="bullet.js"></script>
+        <script src="shooting_pad.js"></script>
+        <script src="cloud.js"></script>
+        <script src="game.js"></script>
+    </body>
+</html>

shooting_pad.js

@@ -0,0 +1,36 @@
+const keys = {};
+
+document.addEventListener('keydown', (e) => {
+    keys[e.key] = true;
+});
+document.addEventListener('keyup', (e) => {
+    keys[e.key] = false;
+});
+
+class ShootingPad extends Entity {
+    constructor() {
+        super(0.5, 0.95, 0.04, 0.03);
+        this.element.className = 'shooting-pad';
+        this.lastShootTime = Date.now();
+    }
+
+    update() {
+        if (keys['ArrowLeft']) {
+            this.x -= VELOCITY[0] * 2;
+        }
+        if (keys['ArrowRight']) {
+            this.x += VELOCITY[0] * 2;
+        }
+        if (this.x < X_BOUND) {
+            this.x = X_BOUND;
+        }
+        if (this.x > 1 - X_BOUND) {
+            this.x = 1 - X_BOUND;
+        }
+        if (keys[' '] && Date.now() - this.lastShootTime >= 300) {
+            this.lastShootTime = Date.now();
+            const bullet = new Bullet(this.x, this.y - 0.009);
+            bullets.add(bullet);
+        }
+    }
+}

style.css

@@ -0,0 +1,81 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgb(51, 51, 51);
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+#root {
+    background: rgb(31, 31, 31);
+    position: relative;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    max-height: 100%;
+    aspect-ratio: 16/9;
+    overflow: hidden;
+}
+
+#root div {
+    transform: translate(-50%, -50%);
+    position: absolute;
+}
+
+.cloud-particle {
+    border-radius: 50%;
+    background: rgb(255, 255, 255);
+    animation-name: cloud;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+.shooting-pad {
+    background: red;
+}
+
+.bullet {
+    background: yellow;
+    width: 1px !important;
+}
+
+.raindrop {
+    background: cyan;
+    width: 1px !important;
+}
+
+.result {
+    left: 50%;
+    top: 50%;
+    font-size: 108px;
+    font-family: arial;
+    color: white;
+}
+
+.result:after {
+    content: 'Press any key to restart';
+    position: absolute;
+    font-size: 48px;
+    width: fit-content;
+    top: 85%;
+    left: 50%;
+    transform: translate(-50%);
+}
+
+
+@keyframes cloud {
+    from {
+        transform: translate(-50%) scale(1.2);
+        opacity: 0.7;
+    }
+
+    to {
+        transform: translate(-50%) scale(0.2);
+        opacity: 0.1;
+    }
+}

todo.md

@@ -0,0 +1,10 @@
+# TODO
+
+- lives
+- clouds should strike lightnings sometimes
+- bg rain effect
+- shooting platform sprite
+- boss?
+- umbrella shields
+- music & sounds
+

utils.js

@@ -0,0 +1 @@
+const randRange = (low, high) => Math.random() * (high - low) + low;