​

let ball;

let world, engine;

let mConstraint;

let slingshot;

let timer = 10; // Timer countdown starting at 10

let goalCount = 0; // Goal counter

let gameOver = false; // Flag to track if the game is over

let startScreen = true; // Flag to track if the game is on the start screen

let dragging = false;

​

let ballImg;

​

function preload() {

  ballImg = loadImage("football.png");

}

​

let { Vec2D, Rect } = toxi.geom;

let { VerletPhysics2D, VerletParticle2D, VerletSpring2D } = toxi.physics2d;

let { GravityBehavior } = toxi.physics2d.behaviors;

let cols = 23;

let rows = 7;

​

let particles = make2DArray(cols, rows);

let springs = [];

​

let w = 10;

​

let physics;

​

function setup() {

  const canvas = createCanvas(440, 640); // Create canvas and store the reference

  engine = Engine.create();

  world = engine.world;

  physics = new VerletPhysics2D();

​

  let gravity = new Vec2D(0, 1);

  let gb = new GravityBehavior(gravity);

  physics.addBehavior(gb);

​

  // Ball and Slingshot

  ball = new Ball(150, 300, 25);

  slingshot = new SlingShot(150, 300, ball.body);

​

  // Create the mouse constraint after the canvas is created

  const mouse = Mouse.create(canvas.elt); // Now canvas.elt is valid

  const options = {

    mouse: mouse,

  };

​

  // Fix for HiDPI displays

  mouse.pixelRatio = pixelDensity();

  mConstraint = MouseConstraint.create(engine, options);

  World.add(world, mConstraint);

​

  // Initialize particles and springs...

  let startX = width / 2 - (cols * w) / 2;

  let startY = 20;

​

  let x = startX;

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

    let y = startY;

    for (let j = 0; j < rows; j++) {

      let p = new Particle(x, y);

      particles[i][j] = p;

      physics.addParticle(p);

      y = y + w;

    }

    x = x + w;

  }

​

  // Add springs between particles...

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

    for (let j = 0; j < rows; j++) {

      let a = particles[i][j];

      if (i != cols - 1) {

        let b1 = particles[i + 1][j];

        let s1 = new Spring(a, b1);

        springs.push(s1);

        physics.addSpring(s1);

      }

      if (j != rows - 1) {

        let b2 = particles[i][j + 1];

        let s2 = new Spring(a, b2);

        springs.push(s2);

        physics.addSpring(s2);

      }

    }

  }

​

  // Lock particles along the top edge

  for (let i = 0; i < cols; i += 4) {

    particles[i][0].lock();

  }

​

  // Start Timer

  setInterval(() => {

    if (!gameOver && !startScreen) {

      if (timer > 0) {

        timer--;

      } else {

        gameOver = true;

      }

    }

  }, 1000);

}

​

function keyPressed() {

  if (key == " ") {

    World.remove(world, ball.body);

    ball = new Ball(150, 300, 25);

    slingshot.attach(ball.body);

  }

}

​

function mousePressed() {

  if (startScreen) {

    startScreen = false; // Hide the start screen once game begins

  }

​

  // Check if the mouse is pressed near the ball to start dragging

  if (

    !gameOver &&

    dist(mouseX, mouseY, ball.body.position.x, ball.body.position.y) < ball.r

  ) {

    dragging = true;

    slingshot.attach(ball.body); // Attach the ball to the slingshot

  }

​

  if (

    gameOver &&

    mouseX > width / 2 - 100 &&

    mouseX < width / 2 + 100 &&

    mouseY > height / 2 + 30 &&

    mouseY < height / 2 + 70

  ) {

    // Reset the game

    gameOver = false;

    timer = 10;

    goalCount = 0;

    ball = new Ball(150, 300, 25); // Reset the ball position

    slingshot.attach(ball.body); // Reattach the slingshot

  }

}

​

function mouseDragged() {

  // If dragging, move the ball with the mouse

  if (dragging) {

    ball.body.position.x = mouseX;

    ball.body.position.y = mouseY;

  }

}

​

function mouseReleased() {

  // When mouse is released, apply a force to the ball and release the slingshot

  if (dragging) {

    let force = createVector(mouseX - 150, mouseY - 300); // Calculate force from initial position

    force.mult(-0.01); // Apply force to ball (you can adjust this multiplier)

    Matter.Body.applyForce(ball.body, ball.body.position, {

      x: force.x,

      y: force.y,

    });

    slingshot.fly(); // Detach the ball from the slingshot

    dragging = false;

  }

}

​

function draw() {

  // Set background to green (football field color)

  background(0, 128, 0); // RGB value for green

​

  // If game over, display the play again button

  if (gameOver) {

    fill(255);

    textSize(32);

    textAlign(CENTER, CENTER);

    text("Game Over", width / 2, height / 2 - 50);

    textSize(24);

    text("Click here to play again", width / 2, height / 2 + 50);

  }

​

  // If start screen is active, display instructions

  if (startScreen) {

    background(0);

    fill(255); // White fill for the text

    stroke(0); // Black outline

    strokeWeight(2); // Outline thickness

​

    // Title

    textSize(32);

    textAlign(CENTER, CENTER);

    text("Welcome to Net Blaster!", width / 2, height / 2 - 50);

​

    // Instructions - Split into two lines to fit on screen

    textSize(24);

    textAlign(CENTER, CENTER);

    text("Use the slingshot to score goals! 🎯", width / 2, height / 2 + 10);

    text("Press space to launch a new ball! ⚽", width / 2, height / 2 + 40);

​

    // Click to start text

    textSize(16);

    text("Click here to start", width / 2, height / 2 + 100);

  } else {

    Matter.Engine.update(engine);

    slingshot.show();

    ball.show();

​

    // Draw football field demarcations (white lines)

    stroke(255); // White color for lines

    strokeWeight(2);

​

    // Draw the field boundaries (rotate to vertical orientation)

    noFill();

    rect(20, 20, width - 40, height - 40); // Outer rectangle (field boundary)

​

    // Draw midfield line (horizontal)

    line(20, height / 2, width - 20, height / 2);

​

    // Draw penalty boxes (horizontal) with smaller dimensions

    rect(width / 3, 20, width / 3, height / 10); // Left penalty box

    rect(width / 3, height - height / 10 - 20, width / 3, height / 10); // Right penalty box

​

    // Draw goal boxes (horizontal) with wider and taller dimensions

    let goalBoxWidth = width / 2 + 80;

    let goalBoxHeight = height / 5;

    rect(width / 4 - 40, 20, goalBoxWidth, goalBoxHeight); // Left goal box

    rect(

      width / 4 - 40,

      height - goalBoxHeight - 20,

      goalBoxWidth,

      goalBoxHeight

    ); // Right penalty box

​

    // Draw the center circle (centered vertically and horizontally)

    ellipse(width / 2, height / 2, 80, 80); // Center circle

​

    // Detect collision with the goal net

    let goalBoxX = width / 4 - 40;

    let goalBoxY = 20;

    let goalBoxW = goalBoxWidth;

    let goalBoxH = goalBoxHeight;

​

    if (

      ball.body.position.x > goalBoxX &&

      ball.body.position.x < goalBoxX + goalBoxW &&

      ball.body.position.y > goalBoxY &&

      ball.body.position.y < goalBoxY + goalBoxH

    ) {

      // Increment goal count only once

      if (!ball.scored) {

        goalCount++;

        ball.scored = true; // Flag the ball as having scored

      }

​

      // Check for collision between ball and net particles

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

        for (let j = 0; j < rows; j++) {

          let particle = particles[i][j];

          let distance = dist(

            ball.body.position.x,

            ball.body.position.y,

            particle.x,

            particle.y

          );

​

          // If the ball is near a particle (within a certain radius), apply a force to simulate the impact

          if (distance < ball.r + w / 2) {

            // Adjust as needed for particle radius

            // Apply a force to the particle to simulate it moving upon impact

            let forceX = (particle.x - ball.body.position.x) * 2;

            let forceY = (particle.y - ball.body.position.y) * 2;

​

            particle.addForce(new Vec2D(forceX, forceY));

​

            // Optionally, slow down or stop the ball's motion to simulate catching

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

          }

        }

      }

    }

​

    // Draw timer

    textSize(16); // Smaller font size

    fill(0); // Black color

    textAlign(LEFT, TOP);

    text("Time: " + timer, 10, 10);

​

    // Draw goal counter

    textAlign(RIGHT, TOP);

    text("Goals: " + goalCount, width - 10, 10);

​

    // Update and display springs and particles

    physics.update();

    for (let s of springs) {

      s.display();

    }

  }

}

function make2DArray(cols, rows) {

  let arr = new Array(cols);

  for (let i = 0; i < arr.length; i++) {

    arr[i] = new Array(rows);

  }

  return arr;

}

​

// How cute is this simple Particle class?!

class Particle extends VerletParticle2D {

  constructor(x, y, r) {

    super(x, y);

    this.r = r;

  }

​

  show() {

    fill(127);

    stroke(0);

    circle(this.x, this.y, this.r * 2);

  }

}

​

class Spring extends VerletSpring2D {

  constructor(a, b) {

    super(a, b, w, 0.25);

  }

​

  display() {

    stroke(0);

    strokeWeight(2);

    line(this.a.x, this.a.y, this.b.x, this.b.y);

  }

}

​