​

                                   ⬛⌨⬛⌨⬛

                                    ⬛CTAGES⬛

                                   ⬛⌨⬛⌨⬛

​

                                by Danny Baghdasarians

*/

​

// Handling Inputfield

let inputField;

let correctText;

​

// Handling Phases

let phase;

let phaseText = [];

​

// Handling Display Text

let textStoreLock = [];

let textStore = [];

let textStoreNumber;

let textStoreCounter;

let textColor = [];

let language = [];

​

// Handling Enemies

let enemy;

let enemyCount;

let enemyRate;

​

// Handling Game Over Line

let endLineY;

​

// Handling Score

let score;

let scoreForNextPhase;

let difficulty;

​

// Handling Menu Screens

let startScreenLock;

let tutorialScreenLock;

let endScreenLock;

let fade;

let tLerpX;

let tLerpY;

let agesLerpX;

let agesLerpY;

let nameFade;

let startButton;

let tutorialButton;

let replayButton;

​

// Handling Sounds

let keyClick;

let success;

let error;

let gameover;

let bgMusic;

let buttonClick;

let next;

​

//

// Preloading our sounds

//

function preload() {

  keyClick = loadSound("./keyClick.wav");

  success = loadSound("./success.wav");

  error = loadSound("./error.wav");

  gameover = loadSound("./gameover.mp3");

  buttonClick = loadSound("./buttonClick.wav");

  next = loadSound("./next.wav");

​

  // Background Music: https://freesound.org/people/michorvath/sounds/412343/

  bgMusic = loadSound("./bgMusic.wav");

}

​

//

// Initialize Values

//

function setupValues() {

  // Begin with our starting phase of 0

  phase = 0;

​

  // Text that will be entered

  phaseText[0] = "run::syntaxFix();";

  phaseText[1] = "run::segfaultClear();";

  phaseText[2] = "run::debugLine();";

  phaseText[3] = "syntaxFix();";

  phaseText[4] = "segfaultClear();";

  phaseText[5] = "debugLine();";

  phaseText[6] = "syntax()";

  phaseText[7] = "segfault()";

  phaseText[8] = "debug()";

​

  // Current correct text

  correctText = "";

​

  // Setup our "tutorial" text

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

    textStore[i] = "";

    textStoreLock[i] = true;

  }

  textStoreNumber = 0;

  textStoreCounter = 0;

​

  // Setup the colors of our texts

  textColor[0] = color(255, 0, 0);

  textColor[1] = color(0, 255, 0);

  textColor[2] = color(102, 178, 255);

​

  // How many enemies are currently on the screen

  enemyCount = 0;

  enemyRate = 0.3;

​

  // Height of our endline

  endLineY = height - 210;

​

  // Holds our current score

  score = 0;

​

  // Score needed to move onto next phase

  scoreForNextPhase = 5;

​

  // Games difficulty scale

  difficulty = 0.09;

​

  // Our "Languages" for our phases

  language[0] = "S";

  language[1] = "S++";

  language[2] = "Snake";

​

  // Determiens to load our start or end menus or not

  startScreenLock = false;

  tutorialScreenLock = false;

  endScreenLock = false;

}

​

//

// Initially set's up our input field

//

function setupInputField() {

  inputField = createInput();

  inputField.position(width / 2 - 145, height - 140);

  inputField.size(300, 40);

  inputField.style("font-family", "Concert One");

  inputField.style("font-size", "20px");

  inputField.input(myInputEvent);

  inputField.changed(onEnterPress);

}

​

function setup() {

  createCanvas(500, 700);

​

  // Loading our font

  textFont("Concert One");

​

  // Loading our start screen

  startScreenLock = true;

  tutorialScreenLock = true;

  endScreenLock = false;

  fade = 255;

  tLerpX = 185;

  tLerpY = 30;

  agesLerpX = 185;

  agesLerpY = -270;

  nameFade = 0;

  startButton = createButton("Start");

  startButton.position(width / 2 - 150, height - 300);

  startButton.size(300, 150);

  startButton.style("font-family", "Concert One");

  startButton.style("font-size", "100px");

  startButton.hide();

​

  // Loading our tutorial screen

  tutorialButton = createButton("Skip");

  tutorialButton.position(width / 2 - 65, height - 70);

  tutorialButton.size(100, 50);

  tutorialButton.style("font-family", "Concert One");

  tutorialButton.style("font-size", "30px");

  tutorialButton.hide();

​

  // Loading our replay screen

  replayButton = createButton("Replay");

  replayButton.position(width / 2 - 75, height - 150);

  replayButton.size(150, 50);

  replayButton.style("font-family", "Concert One");

  replayButton.style("font-size", "30px");

  replayButton.hide();

​

  keyClick.setVolume(0.5);

  success.setVolume(0.5);

  error.setVolume(0.5);

  gameover.setVolume(0.5);

  buttonClick.setVolume(0.5);

  next.setVolume(0.5);

  bgMusic.setVolume(0.25);

  bgMusic.loop();

}

​

//

// Draws our background and field

//

function drawBackground() {

  // Black/Grey Background

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

    push();

    rectMode(CENTER);

    noStroke();

    fill(70 - i, 70 -i, 70 -i);

    rect(width/2, height/2, width - i, height - i);

    pop();

  }

  // Draw our Score

  textSize(30);

  noStroke();

  fill(255, 255, 255, 150);

  text("Score: " + score, width - 135, height - 220);

​

  // Draw our Language Text

  text("Language: " + language[phase], 0, height - 220);

​

  // Draw our end line

  noStroke();

  fill(random(210, 255), random(210, 255), random(210, 255));

  rect(0, endLineY, width, 15);

​

  // Draw our top of input line text

  if (textStoreNumber < 3) {

    textSize(35);

    fill(textColor[textStoreNumber]);

    if (textStoreCounter < 4) {

      text(correctText, width / 2 - 140, height - 150);

    } else if (textStoreCounter >= 4 && textStoreCounter < 7) {

      text(correctText, width / 2 - 120, height - 150);

    } else if (textStoreCounter >= 7 && textStoreCounter < 10) {

      text(correctText, width / 2 - 60, height - 150);

    }

  }

​

  // Draw our bottom of input line text

  textSize(25);

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

    if (i == 0) {

      fill(textColor[i]);

    } else if (i == 1) {

      fill(textColor[i]);

    } else if (i == 2) {

      fill(textColor[i]);

    }

    text(textStore[i], width / 2 - 95, height - 70 + i * 30);

  }

}

​

//

// Black/Grey Background

//

function greyBackground() {

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

    push();

    rectMode(CENTER);

    noStroke();

    fill(100 - i, 100 -i, 100 -i);

    rect(width/2, height/2, width - i, height - i);

    pop();

  }

}

​

//

// Our Starting Screen

//

function startingScreen() {

  greyBackground();

  noStroke();

  textSize(120);

  fill(255, 255, 255, fade);

  text("Coding\nThrough\nThe\nAGES", width / 2 - 185, height / 2 - 180);

​

  fill(255, 255, 255, 255);

  text("C", width / 2 - 185, height / 2 - 180);

  text("T", width / 2 - tLerpX, height / 2 - tLerpY);

  text("AGES", width / 2 - agesLerpX, height / 2 - agesLerpY);

​

  fill(255, 255, 255, nameFade);

  textSize(30);

  text("By Danny Baghdasarians", width / 2 - 160, height / 2 - 130);

  textSize(120);

  text('"       "', width / 2 - 212, height / 2 - 220);

​

  if (fade < 0 && tLerpY < 180) {

    tLerpX -= 0.45;

    tLerpY += 1;

​

    agesLerpX -= 0.8;

    agesLerpY += 3;

  } else if (tLerpY >= 180 && nameFade <= 255) {

    nameFade += 2;

  } else if (nameFade > 255) {

    startButton.show();

    startButton.mousePressed(startTutorial);

  }

  fade -= 0.9;

}

​

//

// Starts our tutorial with button click

//

function startTutorial() {

  clear();

  buttonClick.play();

  startButton.hide();

  startScreenLock = false;

}

​

//

// Our Tutorial Screen

//

function tutorialScreen() {

greyBackground();

  noStroke();

  textSize(50);

  fill(255, 255, 255);

  text("Instructions", width / 2 - 140, 55);

  textSize(18.5);

  fill(255, 255, 255);

  text(

    "[ Synopsis ] \n\nYou will be playing through various ages of\nprogramming and 3 different programming\nlanguages: S, S++, and Snake.\n\n[ Gameplay ]\n\nStarting off each new language, you will be given\na color coordinated line of code to use against the\nsame color enemy approaching. After the first 3 lines\nof code you will no longer be told what to type.\nUse the key below the input line to help you \nremember. Keep in mind that the color of the text\ncorresponds to the color of the enemy.\n\nIf the enemy touches the bar above your input line,\nthe game is over. Each new language unlocked makes\nthe line of code needed to be inputted easier,\nhowever... the enemies will be coming faster.\nLanguages will unlock automatically and lastly\nremember to type the line of code exactly as displayed\nand to click enter to submit your line of code.\nGoodluck.",

    20,

    95

  );

  tutorialButton.show();

  tutorialButton.mousePressed(startGame);

}

​

//

// Our End Screen

//

function endScreen() {

greyBackground();

  inputField.hide();

  replayButton.show();

  replayButton.mousePressed(restartGame);

​

  noStroke();

  textSize(80);

  fill(255, 255, 255);

  text("Gameover!\n\n Score: " + score, width / 2 - 180, 230);

}

​

//

// Restart our game with button click

//

function restartGame() {

  replayButton.hide();

  buttonClick.play();

  bgMusic.stop();

  setup();

}

​

//

// Starts our tutorial with button click

//

function startGame() {

  clear();

  buttonClick.play();

  tutorialButton.hide();

​

  setupValues();

  setupInputField();

​

  // Begin our first phase

  phaseControl();

}

​

function draw() {

  // Drawing our starting Scene

  if (startScreenLock == true) {

    startingScreen();

  } else if (startScreenLock == false && tutorialScreenLock == true) {

    tutorialScreen();

  } else if (

    startScreenLock == false &&

    endScreenLock == false &&

    tutorialScreenLock == false

  ) {

    moveEnemies();

    gameStatus();

  } else if (

    startScreenLock == false &&

    endScreenLock == true &&

    tutorialScreenLock == false

  ) {

    endScreen();

  }

}

​

//

// Controls what happens during each phase

//

function phaseControl() {

  // First Phase

  if (phase == 0) {

    determineText();

  }

  // Second Phase

  else if (phase == 1) {

    determineText();

  }

  // Third Phase

  else if (phase == 2) {

    determineText();

  }

}

​

//

// Determines what the text input should be

//

function determineText() {

  // First Phase //

  if (phase == 0) {

    if (textStoreLock[2] == true) {

      correctText = phaseText[textStoreCounter];

​

      enemy = new Enemy(textStoreNumber, enemyRate + difficulty * score);

      enemy.spawn();

​

      textStoreCounter++;

      enemyCount++;

​

      return;

    }

​

    let randomText = int(random(0, 3));

​

    correctText = phaseText[randomText];

​

    enemy = new Enemy(randomText, enemyRate + difficulty * score);

    enemy.spawn();

    enemyCount++;

​

    return;

  }

  // Second Phase //

  else if (phase == 1) {

    if (textStoreLock[2] == true) {

      correctText = phaseText[textStoreCounter];

​

      enemy = new Enemy(textStoreNumber, enemyRate + difficulty * score);

      enemy.spawn();

​

      textStoreCounter++;

      enemyCount++;

​

      return;

    }

​

    let randomText = int(random(3, 6));

​

    correctText = phaseText[randomText];

​

    enemy = new Enemy(randomText, enemyRate + difficulty * score);

    enemy.spawn();

    enemyCount++;

​

    return;

  }

  // Third Phase //

  else if (phase == 2) {

    if (textStoreLock[2] == true) {

      correctText = phaseText[textStoreCounter];

​

      enemy = new Enemy(textStoreNumber, enemyRate + difficulty * score);

      enemy.spawn();

​

      textStoreCounter++;

      enemyCount++;

​

      return;

    }

​

    let randomText = int(random(6, 9));

​

    correctText = phaseText[randomText];

​

    enemy = new Enemy(randomText, enemyRate + difficulty * score);

    enemy.spawn();

    enemyCount++;

​

    return;

  }

}

​

//

// What happens when player is typing

//

function myInputEvent() {

  keyClick.play();

}

​

//

// What happens when the enter button is pressed in the input field

//

function onEnterPress() {

  if (this.value() == correctText) {

    this.value("");

    success.play();

​

    textStore[textStoreNumber] = correctText;

    textStoreLock[textStoreNumber] = false;

    textStoreNumber++;

​

    score++;

​

    // Check to see if we should enter next phase

    if (score % scoreForNextPhase == 0 && score != 0) {

      if (phase != 2) {

        next.play();

        phase++;

​

        resetTextStore();

        phaseControl();

​

        drawBackground();

​

        return;

      }

    }

​

    drawBackground();

    determineText();

  } else {

    error.play();

  }

}

​

//

// Sets our lock to all true again to begin a new phase

//

function resetTextStore() {

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

    textStoreLock[i] = true;

    textStore[i] = "";

  }

​

  textStoreNumber = 0;

}

​

//

// Moves our enemies down

//

function moveEnemies() {

  drawBackground();

  enemy.move();

  enemy.show();

}

​

//

// Checks status of the game

//

function gameStatus() {

  // Checks to see if the enemy crossed the line

  if (enemy.getY() >= endLineY - 15) {

    gameover.play();

    endScreenLock = true;

  }

}

​