Final Piano

// Virtual Piano Game with Piece Selection

let whiteKeys = [];

let blackKeys = [];

let sounds = {};

let whiteKeyNotes = ['C', 'D', 'E', 'F', 'G', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'A', 'B'];

let blackKeyNotes = ['C#', 'D#', '', 'F#', 'G#', 'A#', '', 'C#', 'D#', '', 'F#', 'G#', 'A#', ''];

let backgroundEffects = [];

let gameState = 'start'; // 'start', 'playing', 'win', 'lose'

let score = 0;

let level = 1;

let gameSequence = []; // Sequence of notes to be played

let gameIndex = 0; // Index of the current note in the sequence

let currentNote = '';

let selectedPiece = '';

​

// Available Pieces

let pieces = {

  "Twinkle Twinkle": ['C', 'C', 'G', 'G', 'A', 'A', 'G', 'F', 'F', 'E', 'E', 'D', 'D', 'C', 

                      'G', 'G', 'F', 'F', 'E', 'E', 'D', 'G', 'G', 'F', 'F', 'E', 'E', 'D', 

                      'C', 'C', 'G', 'G', 'A', 'A', 'G', 'F', 'F', 'E', 'E', 'D', 'D', 'C'],

  "Mary Had a Little Lamb": ['E', 'D', 'C', 'D', 'E', 'E', 'E', 'D', 'D', 'D', 'E', 'G', 'G'],

  "Chopsticks": ['C', 'C', 'E', 'E', 'F', 'F', 'E', 'E', 'D', 'D', 'C', 'C', 

                 'C', 'C', 'E', 'E', 'F', 'F', 'E', 'E', 'D', 'D', 'C', 'C'],

  "Ode to Joy": ['E', 'E', 'F', 'G', 'G', 'F', 'E', 'D', 'C', 'C', 'D', 'E', 'E', 'D', 'D']

};

​

function preload() {

  // Load piano sounds for each key

  let noteFiles = {

    'A': 'A.wav',

    'B': 'B.wav',

    'C': 'C.wav',

    'D': 'D.mp3',

    'E': 'E.wav',

    'F': 'F.wav',

    'G': 'G.wav'

  };

​

  for (let note in noteFiles) {

    sounds[note] = loadSound(noteFiles[note]);

  }

}

​

function setup() {

  createCanvas(800, 400);

  let keyWidth = width / whiteKeyNotes.length;

​

  // Create white keys

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

    whiteKeys.push(new Key(i * keyWidth, 0, keyWidth, height, whiteKeyNotes[i], 'white'));

  }

​

  // Create black keys (only for specific positions)

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

    if (blackKeyNotes[i] !== '') {

      blackKeys.push(new Key(i * keyWidth + keyWidth * 0.75, 0, keyWidth * 0.5, height * 0.6, blackKeyNotes[i], 'black'));

    }

  }

​

  displayPieceSelection(); // Show selection screen

}

​

function draw() {

  background(50, 50, 100);

​

  // Display background effects

  for (let i = backgroundEffects.length - 1; i >= 0; i--) {

    backgroundEffects[i].update();

    backgroundEffects[i].display();

    if (backgroundEffects[i].isDead()) {

      backgroundEffects.splice(i, 1);

    }

  }

​

  // Display game status (Score, Level, etc.)

  displayGameInfo();

​

  // Draw white keys

  for (let key of whiteKeys) {

    key.display();

  }

​

  // Draw black keys

  for (let key of blackKeys) {

    key.display();

  }

​

  // Display the current game state (start, win, lose)

  if (gameState === 'start') {

    displayPieceSelection();

  } else if (gameState === 'win') {

    displayWinScreen();

  } else if (gameState === 'lose') {

    displayLoseScreen();

  }

​

  // Play game sequence (for teaching mode)

  if (gameState === 'playing') {

    showNextNoteInSequence();

  }

}

​

function mousePressed() {

  if (gameState === 'start') {

    selectPiece(); // Select a piece on click

  } else {

    // Check if a key is pressed

    for (let key of [...blackKeys, ...whiteKeys]) {

      if (key.contains(mouseX, mouseY)) {

        key.playSound();

        checkAnswer(key.note);

      }

    }

  }

}

​

function displayPieceSelection() {

  textAlign(CENTER, CENTER);

  textSize(28);

  fill(255); // White text

  rect(width / 2 - 180, height / 4 - 30, 360, 60); // Background box (dark gray)

  fill(0);

  text('Choose a Piece to Learn:', width / 2, height / 4);

​

  let yOffset = height / 2;

  let pieceNames = Object.keys(pieces);

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

    textSize(24);

    fill(255); // White text

    rect(width / 2 - 180, yOffset + (i * 40) - 20, 360, 40); // Background box (dark gray for each piece)

    fill(0);

    text(pieceNames[i], width / 2, yOffset + (i * 40));

  }

​

  textSize(24);

  fill(255, 0, 0);

  text('Select a piano piece!', width / 2, height - 30);

}

​

function selectPiece() {

  // Check which piece is clicked

  let pieceNames = Object.keys(pieces);

  let yOffset = height / 2;

​

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

    if (mouseY > (yOffset + (i * 40) - 20) && mouseY < (yOffset + (i * 40) + 20)) {

      selectedPiece = pieceNames[i];

      gameSequence = pieces[selectedPiece];

      startGame(); // Start the game with the selected piece

      break;

    }

  }

}

​

function startGame() {

  score = 0;

  level = 1;

  gameIndex = 0;

  gameState = 'playing'; // Game starts in the 'playing' state

}

​

function checkAnswer(note) {

  // Check if the pressed key matches the current note in the sequence

  if (note === gameSequence[gameIndex]) {

    score++;

    gameIndex++;

    createBackgroundEffect(mouseX, mouseY);

​

    // If the sequence is completed

    if (gameIndex === gameSequence.length) {

      gameState = 'win'; // If the whole sequence is completed

    }

  } else {

    gameState = 'lose'; // If wrong answer, the game is over

  }

}

​

function displayGameInfo() {

  // Display score and level

  textAlign(CENTER, CENTER);

  textSize(16);

  fill(255);

  rect(width / 2 - 100, height - 50, 200, 40); // Background box (dark gray)

  fill(0);

  text(`Score: ${score} | Level: ${level}`, width / 2, height - 30);

}

​

function showNextNoteInSequence() {

  // Show the current note in the sequence to press

  currentNote = gameSequence[gameIndex];

  textAlign(CENTER, CENTER);

  textSize(32);

  fill(255);

  rect(width / 2 - 100, 50 - 30, 200, 60); // Background box (dark gray)

  fill(0);

  text(`Press: ${currentNote}`, width / 2, 50);

}

​

function displayWinScreen() {

  textAlign(CENTER, CENTER);

  textSize(24);

  fill(255, 255, 0); // Yellow text

  rect(width / 2 - 180, height / 2 - 60, 360, 60); // Background box (dark gray)

  fill(0);

  text('Congratulations! You won!', width / 2, height / 2 - 30);

  textSize(16);

  rect(width / 2 - 100, height / 2 + 10, 200, 40); // Background box (dark gray)

  fill(255); // White text for readability

  text('Click to play again!', width / 2, height / 2 + 30);

}

​

function displayLoseScreen() {

  textAlign(CENTER, CENTER);

  textSize(32);

  fill(255, 0, 0); // Red text

  rect(width / 2 - 180, height / 2 - 60, 360, 60); // Background box (dark gray)

  fill(0);

  text('Oops! You lost!', width / 2, height / 2 - 30);

  textSize(16);

  rect(width / 2 - 100, height / 2 + 10, 200, 40); // Background box (dark gray)

  fill(255); // White text for readability

  text('Click to try again!', width / 2, height / 2 + 30);

}

​

class Key {

  constructor(x, y, w, h, note, color) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.note = note;

    this.color = color;

    this.isPressed = false;

    this.particleSystem = new ParticleSystem(); // Initialize ParticleSystem here

  }

​

  display() {

    fill(this.isPressed ? 'lightgray' : this.color);

    stroke(0);

    rect(this.x, this.y, this.w, this.h);

​

    if (this.isPressed) {

      this.particleSystem.emit(this.x + this.w / 2, this.y + this.h / 2);

    }

    this.particleSystem.update();

    this.particleSystem.display();

  }

​

  contains(px, py) {

    return px > this.x && px < this.x + this.w && py > this.y && py < this.h;

  }

​

  playSound() {

    if (sounds[this.note]) {

      sounds[this.note].play();

    }

    this.isPressed = true;

    setTimeout(() => (this.isPressed = false), 200);

  }

}

​

class Particle {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.size = random(10, 20);

    this.lifespan = 255;

    this.vx = random(-2, 2);

    this.vy = random(-4, -2);

    this.color = color(random(100, 255), random(100, 255), random(100, 255), this.lifespan);

  }

​

  update() {

    this.x += this.vx;

    this.y += this.vy;

    this.lifespan -= 8;

  }

​

  display() {

    noStroke();

    fill(this.color);

    ellipse(this.x, this.y, this.size);

  }

​

  isDead() {

    return this.lifespan <= 0;

  }

}

​

class ParticleSystem {

  constructor() {

    this.particles = [];

  }

​

  emit(x, y) {

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

      this.particles.push(new Particle(x, y));

    }

  }

​

  update() {

    for (let i = this.particles.length - 1; i >= 0; i--) {

      let particle = this.particles[i];

      particle.update();

      if (particle.isDead()) {

        this.particles.splice(i, 1);

      }

    }

  }

​

  display() {

    for (let particle of this.particles) {

      particle.display();

    }

  }

}

​

function createBackgroundEffect(x, y) {

  backgroundEffects.push(new BackgroundEffect(x, y));

}

​

class BackgroundEffect {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.radius = random(20, 50);

    this.lifespan = 255;

    this.color = color(random(50, 255), random(50, 255), random(50, 255), this.lifespan);

  }

​

  update() {

    this.radius += 2;

    this.lifespan -= 5;

    this.color.setAlpha(this.lifespan);

  }

​

  display() {

    noFill();

    stroke(this.color);

    strokeWeight(2);

    ellipse(this.x, this.y, this.radius * 2);

  }

​

  isDead() {

    return this.lifespan <= 0;

  }

}

​

function displayWinScreen() {

  textAlign(CENTER, CENTER);

  textSize(24);

  fill(255, 255, 0); // Yellow text

  rect(width / 2 - 180, height / 2 - 60, 360, 60); // Background box (dark gray)

  fill(0);

  text('Congratulations! You won!', width / 2, height / 2 - 30);

​

  let playAgainButton = createButton('Play Again');

  playAgainButton.position(width / 2 - 50, height / 2 + 20);

  playAgainButton.mousePressed(() => restartGame(playAgainButton));

  playAgainButton.style('font-size', '16px');

  playAgainButton.style('padding', '10px');

  playAgainButton.style('position', 'absolute');

  playAgainButton.style('left', `${width / 2 - 50}px`);

  playAgainButton.style('top', `${height / 2 + 20}px`);

}

​

function displayLoseScreen() {

  textAlign(CENTER, CENTER);

  textSize(32);

  fill(255, 0, 0); // Red text

  rect(width / 2 - 180, height / 2 - 60, 360, 60); // Background box (dark gray)

  fill(0);

  text('Oops! You lost!', width / 2, height / 2 - 30);

​

  let tryAgainButton = createButton('Try Again');

  tryAgainButton.position(width / 2 - 50, height / 2 + 20);

  tryAgainButton.mousePressed(() => restartGame(tryAgainButton));

  tryAgainButton.style('font-size', '16px');

  tryAgainButton.style('padding', '10px');

  tryAgainButton.style('position', 'absolute');

  tryAgainButton.style('left', `${width / 2 - 50}px`);

  tryAgainButton.style('top', `${height / 2 + 20}px`);

}

​

function restartGame(button) {

  // Remove the button

  button.remove();

​

  // Reset the game state

  score = 0;

  level = 1;

  gameIndex = 0;

  gameState = 'start'; // Return to the piece selection screen

  gameSequence = [];

  selectedPiece = '';

}

​

let restartButton = null; // Store the restart button globally

​

function displayWinScreen() {

  textAlign(CENTER, CENTER);

  textSize(24);

  fill(255, 255, 0); // Yellow text

  rect(width / 2 - 180, height / 2 - 60, 360, 60); // Background box (dark gray)

  fill(0);

  text('Congratulations! You won!', width / 2, height / 2 - 30);

​

  if (!restartButton) {

    restartButton = createButton('Play Again');

    restartButton.style('font-size', '16px');

    restartButton.style('padding', '10px');

    restartButton.style('position', 'absolute');

    restartButton.style('left', `${width / 2 - 50}px`);

    restartButton.style('top', `${height / 2 + 20}px`);

    restartButton.mousePressed(() => restartGame());

  }

}

​

function displayLoseScreen() {

  textAlign(CENTER, CENTER);

  textSize(32);

  fill(255, 0, 0); // Red text

  rect(width / 2 - 180, height / 2 - 60, 360, 60); // Background box (dark gray)

  fill(0);

  text('Oops! You lost!', width / 2, height / 2 - 30);

​

  if (!restartButton) {

    restartButton = createButton('Try Again');

    restartButton.style('font-size', '16px');

    restartButton.style('padding', '10px');

    restartButton.style('position', 'absolute');

    restartButton.style('left', `${width / 2 - 50}px`);

    restartButton.style('top', `${height / 2 + 20}px`);

    restartButton.mousePressed(() => restartGame());

  }

}

​

function restartGame() {

  // Remove the button

  if (restartButton) {

    restartButton.remove();

    restartButton = null;

  }

​

  // Reset the game state

  score = 0;

  level = 1;

  gameIndex = 0;

  gameState = 'start'; // Return to the piece selection screen

  gameSequence = [];

  selectedPiece = '';

}

​

function setup() {

  createCanvas(800, 400);

​

  // Ensure restart button is not created at the beginning

  if (restartButton) {

    restartButton.remove();

    restartButton = null;

  }

​

  let keyWidth = width / whiteKeyNotes.length;

​

  // Create white keys

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

    whiteKeys.push(new Key(i * keyWidth, 0, keyWidth, height, whiteKeyNotes[i], 'white'));

  }

​

  // Create black keys (only for specific positions)

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

    if (blackKeyNotes[i] !== '') {

      blackKeys.push(new Key(i * keyWidth + keyWidth * 0.75, 0, keyWidth * 0.5, height * 0.6, blackKeyNotes[i], 'black'));

    }

  }

​

  displayPieceSelection(); // Show selection screen

}

​

​

​

​

​

​

​

​

​

​

function displayPieceSelection() {

  background(50, 50, 100); // Clear background

  // Create the colorful box

  let boxWidth = 360;

  let boxHeight = 100;

  let boxX = width / 2 - boxWidth / 2;

  let boxY = height / 4 - boxHeight / 2;

​

  // Draw the box with gradient colors

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

    let inter = map(i, 0, boxHeight, 0, 1);

    let c = lerpColor(color(255, 100, 150), color(100, 150, 255), inter); // Gradient from pink to blue

    stroke(c);

    line(boxX, boxY + i, boxX + boxWidth, boxY + i);

  }

​

  // Add the "Magic Keys" text

  textAlign(CENTER, CENTER);

  textSize(36);

  fill(255); // White text

  text('Magic Keys', width / 2, height / 4);

​

  // Display piece options

  let yOffset = height / 2;

  let pieceNames = Object.keys(pieces);

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

    textSize(24);

    fill(255); // White text

    rect(width / 2 - 180, yOffset + (i * 40) - 20, 360, 40); // Background box (dark gray for each piece)

    fill(0);

    text(pieceNames[i], width / 2, yOffset + (i * 40));

  }

​

  textSize(24);

  fill(255, 0, 0);

  text('Click on a piece name to begin!', width / 2, height - 30);

}

​

​

function draw() {

  background(50, 50, 100);

​

  // Display game status (Score, Level, etc.)

  displayGameInfo();

​

  // Draw white keys

  for (let key of whiteKeys) {

    key.display();

  }

​

  // Draw black keys

  for (let key of blackKeys) {

    key.display();

  }

​

  // Display the current game state (start, win, lose)

  if (gameState === 'start') {

    displayPieceSelection();

  } else if (gameState === 'win') {

    displayWinScreen();

  } else if (gameState === 'lose') {

    displayLoseScreen();

  }

​

  // Play game sequence (for teaching mode)

  if (gameState === 'playing') {

    showNextNoteInSequence();

  }

​

  // Display background effects (place them last to render on top)

  for (let i = backgroundEffects.length - 1; i >= 0; i--) {

    backgroundEffects[i].update();

    backgroundEffects[i].display();

    if (backgroundEffects[i].isDead()) {

      backgroundEffects.splice(i, 1);

    }

  }

}

​

​

​