Typing Game, by Ben Rosenblum

    Objective - press corresponding key before it leaves the screen

    Points - correct key: points += 1

    Penalty - incorrect key pressed: lives -= 2, keypress missed: lives -= 1

    States: 0 = Menu, 1 = game, 2 = Game over

    getLetter components: 

      timer - longer time spent = shorter duration of letter window

      letters - blink in, fade out                     done - thanks prof

              - duration                               done

              - randomized location                    done

              - randomized rotation (?)                6

              - randomized color                       1

              - easy to identify font(s)               kinda 

      music - background music                         4

            - tones for correct/incorrect              5

      Points system                                    done

      Lives system                                     maybe

*/

function preload() {

  // myFont = loadFont('assets/inconsolata.otf');

}

​

//setup variables

var ww;

var wh;

var state;

var letters;

var holdstate;

//getLetter variables

var fade = 255;

var counter = 0;

var letter;

var tsrandom;

var ts;

var tw;

var th;

//scoring variables

var score;

var lettercount;

var didGuess = false;

var guessWrong = 0;

var guessRight = 0;

​

​

function setup() {

  ww = windowWidth;

  wh = windowHeight;

  strokeWeight(0);

  state = 0; //change state to 0/1/2 to start at beginning/typing/end

  score = 0;

  lettercount = 0;

  letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

​

  createCanvas(windowWidth, 0.95 * windowHeight);

  background(240);

}

​

function draw() {

  console.log(state);

  if (state === 0) {

    removeElements();

    background(240);

    bigbuttons();

    // menubg(ww, wh);

    // menutxt(ww, wh);

    // getLetter(ww, wh, letters)

  }

​

  //play state

  if (state === 1) {

    removeElements()

    // getLetter();

    pointdisp();

    // checkLetter()

    drawLetter(); // separate drawing and event code

    buttons();

    if (score === 30) {

      state = 2;

    }

  }

  //game end menu

  if (state === 2) {

    removeElements()

    endscreen();

    buttons();

  }

  if (state === 3) {

    removeElements();

    guide();

    bigbuttons();

  }

}

​

function buttons() {

  bguide = createButton("Guide");

  bguide.position(0.75*width, 0);

  bguide.mousePressed(state3);

  bguide.mouseReleased(returnstate);

  bguide.size(width/4, height/12)

  bguide.style('font-size', '30px');

​

  breset = createButton("Reset");

  breset.position(0, 11*height/12);

  breset.mousePressed(backtomain);

  breset.size(width/4, height/12);

  breset.style('font-size', '30px');

  bcheat = createButton("Cheat");

  bcheat.mousePressed(cheat)

}

​

function cheat() {

  score = 30;

  lettercount = 30;

}

​

function bigbuttons() {

  bplay = createButton("PLAY");

  bplay.position(width/3, 2*height/5);

  bplay.mousePressed(statePlay);

  // bplay.center("horizontal")

  // bplay.center("vertical")

  bplay.size(width/3, height/6);

  bplay.style('font-size', '60px');

  bguide = createButton("Guide");

  bguide.position(0.75*width, 0);

  bguide.mousePressed(state3);

  bguide.mouseReleased(returnstate);

  bguide.size(width/4, height/12)

  bguide.style('font-size', '30px');

​

  breset = createButton("Reset");

  breset.position(0, 11*height/12);

  breset.mousePressed(backtomain);

  breset.size(width/4, height/12);

  breset.style('font-size', '30px');

}

​

//play button, change state to 1

function statePlay() {

  if (state != 1) {

    state = 1;

    getLetter(); // get a new letter here and reset the fade and counter

    // draw(); // don't call draw p5 calls draw

  }

}

​

//reset to main menu, change state to 0

function backtomain() {

  score = 0;

  lettercount = 0;

  counter = 0;

  state = 0;

}

​

//random letter generator

​

function getLetter() {

  //random letter math

  guessRight = 0;

  guessWrong = 0

  didGuess = false;

  letter = random(letters.split(""));

  tsrandom = random(6, 20);

  ts = ww / tsrandom;

  tw = random(0.1, 0.9);

  th = random(0.2, 0.8);

  counter = 0;

  fade = 255;

}

​

function drawLetter() {

  // just do drawing here

  background(240); // you need to draw the background all the time, this might just go in draw, having it after counter > 100 was making it look like there was a delay between states

  counter++;

  fill(guessWrong, guessRight, 0, fade);

​

  textStyle(BOLD);

  textAlign(CENTER, CENTER);

  textSize(ts);

  text(letter, ww * tw, wh * th);

​

  fade -= 2;

  //points

  pointdisp();

​

  //while(counter<100) fade -= 2      DO NOT USE, MAKES CRASH -- > while loops are prone to stack overflow if used incorrectly, whats happening here is that if the counter is under 100 it gets stuck in a loop because this doesn't update the counter, it will loop until the counter is > 100 but the only thing that changes here is the fade value, so counter value never changes, while loop never ends

​

  if (counter > 100) {

    getLetter(); // once you hit the counter, get a new letter

    lettercount += 1; // this could go in getLetter, but fine here

  }

}

​

//check if pressed correct letter, add point/accuracy

function keyPressed() {

  if (didGuess) return;

  if (key.toUpperCase() === letter) {

    // background(240);

    score += 1;

    fill("rgb(242,255,242)");

    rect(0, 0, width, height);

    fill("black");

    pointdisp();

    counter = 60;

    didGuess = true;

    // lettercount += 1;

    guessRight = 200;

    // getLetter();

    // text(`${key} ${keyCode}`, 10, 40);

    // print(key, ' ', keyCode);

  }

  if (key.toUpperCase() != letter) {

    fill("rgb(255,240,240)");

    rect(0, 0, width, height);

    fill("black");

    pointdisp();

    counter = 60;

    // lettercount += 1;

    // didGuess = true;

    guessWrong = +150;

    // getLetter();

  }

}

​

//self explanatory

function endscreen() {

  background(240);

  fill("black");

  textStyle(BOLD);

  textAlign(CENTER, CENTER);

  textSize(ww / 10);

  text("Nicely done!", ww / 2, wh / 3);

  textSize(wh / 40);

  text(

    "You got 30 out of " + lettercount + " letters correct!",

    ww / 2,

    (3 * wh) / 5

  );

  text(

    "You had a " + 100 * (score / lettercount) + "% accuracy rate!",

    ww / 2,

    (3.25 * wh) / 5

  );

}

​

//displays point counter

function pointdisp() {

  textStyle(NORMAL);

  textAlign(LEFT, BASELINE);

  textSize(ww / 40);

  fill(0,0,0);

  text("Correct Letters: " + score + "/30", 0.05 * ww, 0.05 * wh);

  text("Total Letter Count: " + lettercount, 0.05 * ww, 0.08 * wh);

}

//displays guide

function guide() {

  background(240);

  fill("black");

  textStyle(BOLD);

  textAlign(CENTER, CENTER);

  textSize(ww / 10);

  text("Match the Letter!", ww / 2, wh / 3);

  textSize(wh / 40);

  text(

    "Type the letter you see on the screen to score a point!",

    ww / 2,

    (3 * wh) / 5

  );

  text(

    "If you don't type in time, or you type the wrong number, you won't get a point!",

    ww / 2,

    (3.25 * wh) / 5

  );

}

function state3() {

  holdstate = state;

  state = 3;

}

function returnstate() {

  state = holdstate;

}

​

​

/* ================================================================================================================

​

​

                           THESE ARE ALL THE REMOVED CODE

​

​

================================================================================================================ */

​

// // Simple "Game Start UI"

// function menubg(ww, wh) {

//   rectMode(CENTER);

//   fill("gray");

//   rect(ww / 2, (1.25 * wh) / 4, ww / 2, wh / 5); //main big

//   rect(ww / 3, wh / 2, ww / 6, wh / 15); //left top

//   rect((2 * ww) / 3, wh / 2, ww / 6, wh / 15); //right top

//   rect(ww / 3, wh / 1.7, ww / 6, wh / 15); //left bottom

//   rect((2 * ww) / 3, wh / 1.7, ww / 6, wh / 15); //right bottom

// }

// // Simple "Game Start UI"

// function menutxt(ww, wh) {

//   textStyle(BOLD);

//   textAlign(CENTER, CENTER);

//   textSize(wh / 6);

//   fill("black");

//   strokeWeight(0);

//   // rect(ww/2, wh/3, ww/2, wh/6) //main big

//   text("PLAY", ww / 2, wh / 3);

//   textSize(wh / 30);

//   text("Use buttons below canvas until these work", ww / 2, wh / 5);

//   text(

//     "Also, not sure why the green/red only show up in corner of screen",

//     ww / 2,

//     wh / 4

//   );

//   // rect(ww/3, wh/2, ww/6, wh/15) //left top

//   text("Color", ww / 3, wh / 2);

//   // rect(2*ww/3, wh/2, ww/6, wh/15) //right top

//   text("Difficulty", (2 * ww) / 3, wh / 2);

//   // rect(ww/3, wh/1.7, ww/6, wh/15) //left bottom

//   text("Music", ww / 3, wh / 1.7);

//   // rect(2*ww/3, wh/1.7, ww/6, wh/15) //right bottom

//   text("Guide", (2 * ww) / 3, wh / 1.7);

// }

​

​