let world;

let dropdown;

let balls = [];

let elasticBody;

let score = 0;

let timer = 60;

let isGameActive = false;

let gameMode = 'Select a term';

let backgrounds = {};

let currentBg;

​

function preload() {

    // Load background images

    backgrounds.velocity = loadImage('tempImagevCqO9h.gif');

    backgrounds.acceleration = loadImage('acc.jpg');

    backgrounds.gravity = loadImage('tempImagexnPlEJ.gif');

    backgrounds.friction = loadImage('fric.jpg');

    backgrounds.elasticity = loadImage('elas.jpg');

    backgrounds.momentum = loadImage('tempImage0AX8sV.gif');

    backgrounds.energy = loadImage('en.jpg');

    backgrounds.projectile = loadImage('tempImagevwbJ1K.gif');

    backgrounds.rotational = loadImage('rot.jpg');

    backgrounds.wave = loadImage('wave.jpg');

}

​

// Ball class

class Ball {

    constructor(x, y) {

        this.body = Matter.Bodies.circle(x, y, 20, {

            restitution: 0.8, // Bounciness (elasticity)

            friction: 0.1

        });

        Matter.World.add(world, this.body);

        this.radius = 20;

    }

​

    display() {

        let pos = this.body.position;

        let angle = this.body.angle;

        push();

        translate(pos.x, pos.y);

        rotate(angle);

        ellipseMode(CENTER);

        fill(127);

        stroke(0);

        ellipse(0, 0, this.radius * 2);

        pop();

    }

​

    reset() {

        Matter.Body.setPosition(this.body, { x: random(50, 750), y: random(50, 550) });

        Matter.Body.setVelocity(this.body, { x: 0, y: 0 });

        Matter.Body.setAngularVelocity(this.body, 0);

    }

}

​

// ElasticBody class

class ElasticBody {

    constructor(x, y) {

        this.body = Matter.Bodies.rectangle(x, y, 100, 20, {

            restitution: 0.6, // Elasticity

            friction: 0.05

        });

        Matter.World.add(world, this.body);

        this.width = 100;

        this.height = 20;

    }

​

    display() {

        let pos = this.body.position;

        let angle = this.body.angle;

        push();

        translate(pos.x, pos.y);

        rotate(angle);

        rectMode(CENTER);

        fill(200);

        stroke(0);

        rect(0, 0, this.width, this.height);

        pop();

    }

​

    reset() {

        Matter.Body.setPosition(this.body, { x: width / 2, y: height / 2 });

        Matter.Body.setVelocity(this.body, { x: 0, y: 0 });

        Matter.Body.setAngularVelocity(this.body, 0);

    }

}

​

function setup() {

    createCanvas(800, 600);

    engine = Matter.Engine.create();

    world = engine.world;

​

    // Create dropdown for physics terms

    dropdown = createSelect();

    dropdown.option('Select a term');

    dropdown.option('Velocity');

    dropdown.option('Acceleration');

    dropdown.option('Gravity');

    dropdown.option('Friction');

    dropdown.option('Elasticity');

    dropdown.option('Momentum');

    dropdown.option('Energy Conservation');

    dropdown.option('Projectile Motion');

    dropdown.option('Rotational Dynamics');

    dropdown.option('Wave Dynamics');

    dropdown.changed(startSimulation);

​

    // Initialize balls and elastic body

    for (let i = 0; i < 5; i++) {

        balls.push(new Ball(random(50, 750), random(50, 550)));

    }

    elasticBody = new ElasticBody(width / 2, height / 2);

​

    // Start the timer

    setInterval(updateTimer, 1000);

}

​

function startSimulation() {

    if (dropdown.value() === 'Select a term') return;

    score = 0; // Reset score

    timer = 60; // Reset timer

    isGameActive = true; // Activate game

    balls.forEach(ball => ball.reset());

    elasticBody.reset(); // Reset elastic body

​

    // Set the current background based on selected term

    currentBg = backgrounds[dropdown.value().toLowerCase()];

}

​

function updateTimer() {

    if (isGameActive) {

        timer--;

        if (timer <= 0) {

            isGameActive = false; // End game when timer reaches zero

        }

    }

}

​

function draw() {

    // Draw the current background image

    if (currentBg) {

        background(currentBg);

    } else {

        background(240); // Default background if none is set

    }

​

    Matter.Engine.update(engine);

​

    // Draw score and timer

    fill(0);

    textSize(24);

    text(`Score: ${score}`, 20, 30);

    text(`Time: ${timer}`, width - 120, 30);

​

    if (isGameActive) {

        // Draw all balls and elastic body

        balls.forEach(ball => ball.display());

        elasticBody.display();

    } else {

        fill(255, 0, 0);

        textSize(48);

        textAlign(CENTER);

        text('Game Over!', width / 2, height / 2);

        textSize(24);

        text(`Final Score: ${score}`, width / 2, height / 2 + 40);

    }

}

​