git @ Cat's Eye Technologies Cosmos-Boulders / master src / cosmos-boulders / display.js
master

Tree @master (Download .tar.gz)

display.js @masterraw · history · blame

// SPDX-FileCopyrightText: In 2019, Chris Pressey, the original author of this work, placed it into the public domain.
// SPDX-License-Identifier: Unlicense
// For more information, please refer to <https://unlicense.org/>


import { SCREEN_WIDTH, SCREEN_HEIGHT, degreesToRadians } from './utils.js';


/* --[ Display functions ]-------------------------------------------------------- */


function drawPlayer(player, ctx) {
    const mode = player.get("mode");

    if (mode === 'GET_READY') {
        ctx.font = "16px sans-serif";
        ctx.textBaseline = "bottom";        
        ctx.textAlign = "center";
        ctx.fillStyle = "white";
        ctx.fillText("Get Ready!", SCREEN_WIDTH / 2, SCREEN_HEIGHT * 0.25);
    }

    const x = player.get("x");
    const y = player.get("y");

    ctx.save();
    ctx.translate(x, y);

    if (mode === 'GONE') {
        return;
    } else if (mode === 'EXPLODING') {
        ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.arc(Math.floor(Math.random() * 16) - 8, Math.floor(Math.random() * 16) - 8, 4, 0, Math.PI * 2, false);
        ctx.fill();
    } else {
        const theta = degreesToRadians(player.get("h"));
        ctx.rotate(theta + (Math.PI / 2));

        if (mode === 'GET_READY') {
            if (Math.floor(player.get("timer") / 10) % 2 === 0) {
                ctx.fillStyle = 'green';
            } else {
                ctx.fillStyle = 'blue';
            }
        } else {
            ctx.fillStyle = "red";
        }
        ctx.beginPath();
        ctx.moveTo(-10, 10);
        ctx.lineTo(0, -10);
        ctx.lineTo(10, 10);
        ctx.lineTo(-10, 10);
        ctx.fill();

        if (player.get("f") > 0) {
            ctx.beginPath();
            ctx.fillStyle = "yellow";
            ctx.moveTo(-5, 10);
            ctx.lineTo(5, 10);
            ctx.lineTo(0, 15);
            ctx.lineTo(-5, 10);
            ctx.fill();
        }
    }

    ctx.restore();
}


function drawMissile(missile, ctx) {
    const mode = missile.get("mode");
    const x = missile.get("x");
    const y = missile.get("y");

    if (mode === 'GONE') {
        return;
    } else if (mode === 'EXPLODING') {
        ctx.beginPath();
        ctx.fillStyle = "white";
        ctx.arc(x + Math.floor(Math.random() * 16) - 8, y + Math.floor(Math.random() * 16) - 8, 4, 0, Math.PI * 2, false);
        ctx.fill();
    } else {
        ctx.beginPath();
        ctx.strokeStyle = "blue";
        ctx.lineWidth = 3;
        ctx.moveTo(x - 2, y);
        ctx.lineTo(x + 2, y);
        ctx.stroke();
    }
}


function drawBoulder(boulder, ctx) {
    const mode = boulder.get("mode");
    const x = boulder.get("x");
    const y = boulder.get("y");

    if (mode === 'GONE') {
        return;
    } else if (mode === 'APPEARING') {
        ctx.beginPath();
        ctx.strokeStyle = "white";
        ctx.lineWidth = 1;
        const timer = boulder.get("timer");
        ctx.arc(x, y, timer % 10, 0, Math.PI * 2, false);
        ctx.stroke();
    } else if (mode === 'EXPLODING') {
        ctx.beginPath();
        ctx.fillStyle = "white";
        ctx.arc(x + Math.floor(Math.random() * 16) - 8, y + Math.floor(Math.random() * 16) - 8, 4, 0, Math.PI * 2, false);
        ctx.fill();
    } else {
        ctx.beginPath();
        ctx.fillStyle = "yellow";
        ctx.arc(x, y, 12, 0, Math.PI * 2, false);
        ctx.fill();
    }
}


function drawGame(game, canvas, ctx) {
    const mode = game.get("mode");
    const player = game.get("player");

    ctx.fillStyle = "brown";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.font = "16px sans-serif";
    ctx.textBaseline = "bottom";
    ctx.fillStyle = "white";

    ctx.textAlign = "left";
    ctx.fillText("Score: " + player.get("score"), 0, canvas.height);
    ctx.fillText("High Score: " + game.get("highScore"), 0, 16);

    ctx.textAlign = "right";
    ctx.fillText("Lives: " + player.get("lives"), canvas.width, canvas.height);
    ctx.fillText("Credits: " + game.get("credits"), canvas.width, 16);

    ctx.textAlign = "center";

    if (mode === 'ATTRACT_TITLE') {
        ctx.font = "40px sans-serif";
        ctx.fillText("COSMOS", canvas.width / 2, canvas.height * 0.40);
        ctx.fillText("BOULDERS", canvas.width / 2, canvas.height * 0.50);
        ctx.font = "16px sans-serif";
        if (game.get("credits") > 0) {
            ctx.fillText("Press Start", canvas.width / 2, canvas.height * 0.66);
        } else {
            ctx.fillText("Insert Coin", canvas.width / 2, canvas.height * 0.66);
        }
    } else if (mode === 'ATTRACT_HISCORES') {
        ctx.fillText("High Score for Today:", canvas.width / 2, canvas.height * 0.25);
        ctx.font = "40px sans-serif";
        ctx.fillText("" + game.get("highScore"), canvas.width / 2, canvas.height * 0.55);
        ctx.font = "16px sans-serif";
        ctx.fillText("Can YOU beat it?", canvas.width / 2, canvas.height * 0.75);
    } else if (mode === 'GAME_ON') {
        drawPlayer(player, ctx);
        game.get("missiles").forEach(function(missile) { drawMissile(missile, ctx); });
        game.get("boulders").forEach(function(boulder) { drawBoulder(boulder, ctx); });
    } else if (mode === 'GAME_OVER') {
        ctx.fillText("Game Over", canvas.width / 2, canvas.height / 2);
    }
}


export { drawGame };