index.html

---
layout: level
title: Game
---

<script src="game/libs/matter.js"></script>

<script type="module">

import { getLevelInitializers } from './game/levels.js'
import { Ball } from './game/objects/ball.js'
import { BadPlatform } from './game/objects/platform.js'
import { acceptUserInput } from './game/acceptUserInput.js'

let levelInits = getLevelInitializers();
let engine = Matter.Engine.create({
    constraintIterations: 10, // default is 2, higher helps not miss collisions
    positionIterations: 10,   // default is 6, higher helps not miss collisions
});
const MAX_LEVEL = levelInits.length - 1;// less one to account for null first element
let currentLevel = 1;
let gameState = {  
    levelComplete: false,
    dropCoords: null,
    gameObjectsToUpdate: [],
    activeSlingshots: [],
    areDrawingPlatform: false
};
let ball = null;
let lastBallDrop = 0;
let render = null;

function drawSourceIndicator() {
    const canvas = document.getElementById('sourceIndicator');
    const context = canvas.getContext('2d');
    const size = 50;
    canvas.width = size;
    canvas.height = size;
    const offsetX = -(size/2);
    const offsetY = -(size/2);
    canvas.style.left = (gameState.dropCoords[0] + offsetX) + 'px';
    canvas.style.top = (gameState.dropCoords[1] + offsetY) + 'px';

    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = 10;

    context.clearRect(0, 0, size, size);
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'aqua';
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = '#003300';
    context.stroke();
}

// display info on top of screen
function setupInfoDisplay() {
    let TUTORIAL_LEVEL_COUNT = 2;
    let displayText = '';
    if (currentLevel <= TUTORIAL_LEVEL_COUNT) {
        displayText = 'Tutorial: ' + currentLevel;
    } else {
        displayText = 'Level: ' + (currentLevel - TUTORIAL_LEVEL_COUNT)
    }
    document.getElementById('level').innerText = displayText;
    drawSourceIndicator();
}

function dropBall() {
    gameState.gameObjectsToUpdate.push(new Ball(gameState.dropCoords[0], gameState.dropCoords[1], engine));
    lastBallDrop = Date.now();
}

function buildRender() {
    let render = Matter.Render.create({
        element: document.body,
        engine: engine,
        options: {
            width: window.innerWidth,
            height: window.innerHeight,
            wireframes: false
        }
    });
    return render;
}

function drawBoundary() {
    let b = -10;
    new BadPlatform(-b, -b, window.innerWidth + b, -b, engine);
    new BadPlatform(-b, window.innerHeight + b, window.innerWidth + b, window.innerHeight + b, engine);
    new BadPlatform(-b, -b, -b, window.innerHeight + b, engine);
    new BadPlatform(window.innerWidth + b, -b, window.innerWidth + b, window.innerHeight + b, engine);
}

function resetLevel() {
    // Restart the engine and renderer to an intial state
    Matter.World.clear(engine.world, false);
    Matter.Engine.clear(engine);
    if (render) {
        Matter.Render.stop(render);
        render.canvas.parentNode.removeChild(render.canvas);
    }
    render = buildRender();
    // Build next level
    levelInits[currentLevel](engine, gameState);
    drawBoundary();
    setupInfoDisplay();
    dropBall();
    Matter.Render.run(render);// Restart the render
    acceptUserInput(engine, render, gameState);
}

// Game loop
async function update() {
    if (Date.now() - lastBallDrop >= 10) {
        dropBall();
    }

    for (let gObject of gameState.gameObjectsToUpdate) {
        gObject.update();
    }

    if (gameState.levelComplete == true) {
        await new Promise(resolve => setTimeout(resolve, 2000));// Pause for 2 seconds
        gameState.levelComplete = false;
        currentLevel += 1;
        if (currentLevel > MAX_LEVEL) {
            console.log("woot! game over!"); 
            return;
        }
        gameState.areDrawingPlatform = false;
        resetLevel();
    }

    Matter.Engine.update(engine, 1000 / 60 );
    requestAnimationFrame(update);
}

// Collision listeners
Matter.Events.on(engine, 'collisionStart', function(event) {
        let pairs = event.pairs;
        for (let i = 0; i < pairs.length; i++) {
            let pair = pairs[i];
            pair.bodyA.gameObject.collisionStart(pair.bodyB);// use back reference to get to enclosing gameObject
            pair.bodyB.gameObject.collisionStart(pair.bodyA);// use back reference to get to enclosing gameObject
        }
    });
Matter.Events.on(engine, 'collisionEnd', function(event) {
        let pairs = event.pairs;
        for (let i = 0; i < pairs.length; i++) {
            let pair = pairs[i];
            pair.bodyA.gameObject.collisionEnd(pair.bodyB);// use back reference to get to enclosing gameObject
            pair.bodyB.gameObject.collisionEnd(pair.bodyA);// use back reference to get to enclosing gameObject
        }
    });
const backgroundMusic = new Audio('backgroundMusic.mp3');
backgroundMusic.loop = true;
backgroundMusic.preload = 'auto';
// backgroundMusic.play();

document.getElementById('level-reset').onclick = resetLevel;// level reset button
resetLevel();
requestAnimationFrame(update);

</script>