js-games/honkrun/honkrun.js

class Vector2D {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}

class Entity {
    constructor(pos, vel, size, color) {
        this.pos = pos;
        this.vel = vel;
        this.size = size;
        this.color = color;
    }

    collides(e) {
        return !(this.pos.x > e.pos.x + e.size.x || this.pos.x + this.size.x < e.pos.x)
            && !(this.pos.y > e.pos.y + e.size.y || this.pos.y + this.size.y < e.pos.y);
    }
}

var player = new Entity(
    new Vector2D(50, 0),
    new Vector2D(0, 0),
    new Vector2D(100, 100),
    "#FF0000"
);

var enemies = [];

var spawnCooldown = 0;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    evt.preventDefault();
    onKeyPress(charStr);
};

function resizeCanvas() {
    c.width = window.innerWidth;
    c.height = window.innerHeight;

    draw();
}

resizeCanvas();

function randInt(min, max) {
    return min + Math.random() * (max - min);
}

function drawEntity(e) {
    ctx.fillStyle = e.color;
    ctx.fillRect(e.pos.x, e.pos.y, e.size.x, e.size.y);
}

function draw() {
    ctx.clearRect(0, 0, c.width, c.height);
    drawEntity(player);

    enemies.forEach(drawEntity);
}

function update() {
    // Spawn enemies
    if (enemies.length < 5 && spawnCooldown <= 0) {
        enemies.push(new Entity(new Vector2D(c.width + randInt(50, 100), 0), new Vector2D(randInt(-15, -5), 0), new Vector2D(randInt(50, 200), randInt(50, 200)), "#00FF00"));
        spawnCooldown = randInt(1 * 60, 3 * 60); // 1-3 seconds
    }
    spawnCooldown--;

    // Apply physics to all entities
    (enemies.concat([player])).forEach(function (e) {
        e.pos.x += e.vel.x;
        e.pos.y += e.vel.y;

        e.vel.y += 1;
        if (e.pos.y + e.size.y > c.height) {
            e.vel.y = 0;
            e.pos.y = c.height - e.size.y;
        }

    });

    // Recolor enemies
    enemies.forEach(function (e) {
        if (e.pos.x < player.pos.x) {
            e.color = "#0000FF";
        }
    });

    // Kill enemies
    enemies = enemies.filter(function (e) {
        return e.pos.x > -e.size.x;
    });

    // Kill player
    enemies.forEach(function (e) {
        if (e.collides(player)) {
            console.log("Game over!");
            clearInterval(interval);
        }
    });
}

function onKeyPress(key) {
    switch (key) {
        case "w":
            if (player.pos.y + player.size.y == c.height) {
                player.vel.y = -40;
            }
            break;
    }
}

function mainloop() {
    update();
    draw();
}

var interval = setInterval(mainloop, 1000 / 60); // 60 fps