plinko game with 20 pegs and 1 ball in typescript

To create a plinko game with 20 pegs and 1 ball in TypeScript, we would start by creating the game board using HTML5 Canvas. We would then generate 20 pegs evenly spaced across the top of the board, and one ball placed at the center of the top row.

To simulate the ball falling through the pegs, we would use a loop that calculates the ball's position and velocity on each frame of the game. The ball's trajectory can be determined by the angle at which it hits each peg, which can be randomly generated for each peg.

Here is some sample code to get you started:


index.ts
class Peg {
  x: number;
  y: number;
  radius: number;
  angle: number;

  constructor(x: number, y: number, radius: number, angle: number) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.angle = angle;
  }

  draw(ctx: CanvasRenderingContext2D) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = "white";
    ctx.fill();
    ctx.closePath();
  }
}

class Ball {
  x: number;
  y: number;
  radius: number;
  vx: number;
  vy: number;

  constructor(x: number, y: number, radius: number) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.vx = 0;
    this.vy = 0;
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.vy += 0.1; // Acceleration due to gravity
  }

  draw(ctx: CanvasRenderingContext2D) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.closePath();
  }
}

const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 600;

const pegs: Peg[] = [];
for (let i = 0; i < 20; i++) {
  const x = (i + 1) * (canvas.width / 21);
  const y = 100;
  const radius = 20;
  const angle = Math.PI / 4 * (Math.random() - 0.5); // Random angle between -22.5deg and 22.5deg
  pegs.push(new Peg(x, y, radius, angle));
}

const ball = new Ball(canvas.width / 2, 50, 10);

function animate() {
  // Clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw the pegs
  pegs.forEach((peg) => peg.draw(ctx));

  // Draw the ball
  ball.draw(ctx);

  // Update the ball's position and velocity
  ball.update();

  // Check for collisions with the pegs
  pegs.forEach((peg) => {
    const dx = ball.x - peg.x;
    const dy = ball.y - peg.y;
    const distance = Math.sqrt(dx * dx + dy * dy);
    if (distance < ball.radius + peg.radius) {
      // Calculate the ball's new velocity based on the peg's angle
      const slope = Math.tan(peg.angle);
      const vx = Math.sign(dx) * Math.sqrt(distance * 0.1) * Math.sqrt(1 / (slope * slope + 1));
      const vy = slope * vx;
      ball.vx = vx;
      ball.vy = vy;
    }
  });

  // Schedule the next frame
  requestAnimationFrame(animate);
}

// Start the animation loop
animate();
2320 chars
103 lines

This code creates a Peg class to represent each peg on the board, and a Ball class to represent the ball. It also generates 20 pegs with random angles across the top of the canvas, and creates a ball at the center of the top row.

The animate function is the main animation loop that updates and draws the ball and pegs on each frame. On each frame, it checks for collisions between the ball and each peg, and updates the ball's velocity accordingly.

This is just a basic example to get you started, but you can customize the game by adding more features like scoring or power-ups.

similar typescript code snippets

plinko game using threejs in typescript

plinko game in typescript

create a generic interface in typescript

store generic into localstorage in typescript

split a provided array into chunks of a provided size in javascript in typescript

check if enum is valid in typescript

create a function that calculates volume of a cube in typescript

a generic function for storing cache into localstorage in typescript

how to define an interface in typescript

loop in typescript

related categories

random number generation