ccbb-game.js

// Set the starting scene
var scene = 0

// Setup some global variables
var alphabet = []
var currentLetterToFind
var positions

// Store the frames as the game is played to be used as a timer
var numberOfFrames = 0

// Set a default winning text to be randomized later
var finalWinningText = "Wow!"

// Color of the letters
var colorPalette = [
  [ 240, 0, 100 ],
  [ 247, 90, 29 ],
  [ 8, 170, 143 ],
  [ 242, 24, 67 ],
  [ 243, 162, 32 ],
  [ 1, 170, 254 ],
  [ 86, 72, 157 ],
  [ 0, 120, 194 ],
  [ 120, 100, 170 ],
  [ 251, 196, 14 ]
]

// Different congradulations text
var congratsText = [
  "Great Job!",
  "Wow!",
  "You Rock!",
  "Fantastic!"
]

function setupPositions(){
  // Positions of the letters on the canvas
  positions = [
    [ 497,362 ],
    [ 613, 362 ],
    [ 181, 437 ],
    [ 352, 437 ],
    [ 468, 437 ],
    [ 584, 437 ],
    [ 700, 437 ],
    [ 816, 437 ],
    [ 932, 437 ],
    [ 164, 525 ],
    [ 336, 525 ],
    [ 452, 525 ],
    [ 568, 525 ],
    [ 684, 525 ],
    [ 800, 525 ],
    [ 916, 525 ],
    [ 1032, 525 ],
    [ 134, 623 ],
    [ 245, 623 ],
    [ 365, 623 ],
    [ 481, 623 ],
    [ 597, 623 ],
    [ 713, 623 ],
    [ 829, 623 ],
    [ 956, 623 ],
    [ 1058, 623 ]
  ]
}

function preload(){
  // Import Font
  font = loadFont( "ccbb.ttf" )

  // Import Images
  treeImage = loadImage( "tree.svg" )
  treeIntroImage = loadImage( "tree-intro.svg" )

  // Import Sounds
  soundFormats( "mp3" )
  yeahSound = loadSound( "yeah.mp3" )
  waSound = loadSound( "wa.mp3" )
}

function sceneIntro() {
      // Start Screen

      // Create the white canvas over the background border
      var canvasWidth = width - 156
      var canvasHeight = height - 80

      fill( 254, 207, 65 )
      rect( 78, 80, canvasWidth, canvasHeight )

      // Title
      textSize( 120 )
      textAlign( RIGHT, RIGHT );
      fill( 120, 71, 179 )
      text( "Chicka", 1050, 200 )
      text( "Chicka", 1050, 300 )
      fill( 88, 203, 181 )
      text( "Boom Boom", 1050, 400 )
      text( "Game", 1050, 500 )

      // Image
      image( treeIntroImage, -10, 70 )

      // Start Button
      fill( 204, 59, 76)
      rect( 750, 600, 300, 100)
      textSize( 60 )
      fill( 255, 255, 255)
      text( "START", 1000, 670 )

}

function sceneCongrats(){
  // Ending Screen

  // Create the white canvas over the background border
  var canvasWidth = width - 156
  var canvasHeight = height - 80

  fill( 255,255,255 )
  rect( 78, 80, canvasWidth, canvasHeight )

  // Congradulations Text
  textSize( 120 )
  textAlign( RIGHT, RIGHT );
  fill( 120, 71, 179 )
  text( finalWinningText, 1050, 300 )
  fill( 88, 203, 181 )
  text( "You Won", 1050, 400 )

  // Show how long it took based on number of frames accumulated
  var calulatedSeconds = Math.floor( numberOfFrames / 60 )
  textSize( 50 )
  fill( 253, 155, 30 )
  text( "In  " + calulatedSeconds + "  seconds", 1050, 500 )

  // Tree Image
  image(treeIntroImage, -10,70)

  // Play Again Button
  fill(204,59,76)
  rect(650, 600, 400, 100)
  textSize( 60 )
  fill(255,255,255)
  text("Play Again", 1000, 670)
}

function randomizeAlphabet(){
  // Assign the position on the canvas, rotation and color values for each letter
  for ( i = 0; i < 26; i++ ){
    var randomColor = Math.floor( random( 0, 9 ) )

    // Pick a random position on the canvas to go into
    var randomPosition = Math.floor( random( 0, positions.length ) )

    // Take the positions stored in the position array and store them
    // as the character's position
    var characterPositionX =  positions[ randomPosition ][ 0 ]
    var characterPositionY = positions[ randomPosition][ 1 ]

    // Push that posision into the alphabet array
    alphabet[i][1] = characterPositionX
    alphabet[i][2] = characterPositionY

    // Randomly rotate the letter and store that in the array
    var randomRotation
    var positiveOrNegative = random( 0, 1 )
    if (positiveOrNegative > .5 ){
      randomRotation = random( 0, 120 )
    }
    else{
      randomRotation = -random( 0, 120 )
    }
    alphabet[ i ][ 3 ] = randomRotation

    // Randomly assign a color from the stored color palette
    alphabet[ i ][ 4 ] = colorPalette[ randomColor ]

    //remove the used position from the array
    positions.splice(randomPosition, 1)
  }
}

function setup() {
  createCanvas( 1200, 750 )
  noStroke()
  angleMode( DEGREES )
  background( 253, 155, 30 )

  // Setup the array of characters with placeholder values for x, y, color, and rotation
  // using the ascii character code, in case I want to do lowercase or other characters
  for ( var z = 65; z < 91; z ++ ){
     var currentCharacter = String.fromCharCode( z )
     alphabet.push( [currentCharacter, 0, 0, 0, 0 ] )
  }
  // Set the first letter to be found in the game
  currentLetterToFind = alphabet[ 0 ]

  // Create the dots that surround the canvas
  drawCirclePattern()

  // Get the list of all the positions available on the canvas
  setupPositions()

  // Randomize the order of the alphabet and attach x, y, rotation, and color
  randomizeAlphabet()
}

function drawCirclePattern() {
  // Creates the dots that surround the canvas
  var numberOfRows = 19
  var numberOfColumns = 38
  var radius = 14
  var marginX = 34
  var marginY = 38
  var xPosition = 20
  var yPosition = 16
  var rotation = 0

  fill ( 215, 21, 101 )

  // Create each row
  for (j = 0; j < numberOfRows; j++ ){
    // Create each column's circle
    for (i = 0; i < numberOfColumns; i++ ){
      // Add the circle with a little bit of randomness for the Y position
      ellipse( xPosition, yPosition + ( random( -3, 3 ) ), radius, radius )
      xPosition += marginX
    }
    // Offset the even numbered rows
    if ( j % 2 == 0 ){
      xPosition = -41
    }
    else{
      xPosition = 20
    }
    yPosition +=  marginY
  }
}

function collectedArea(){
  // Create the area that indicates what letter needs to be found
  // Position on the canvas for the text to sit
  var abcPositionX = 150

  // The current letter that needs to be found
  var currentLetterIndex = alphabet.indexOf( currentLetterToFind )

  // THe "Letters Found " text
  fill( 204, 59, 76 )
  rect( 0, 680, width, 70 )
  fill( 255, 255, 255 )
  textSize( 30 )
  text( "Letters Found: ", abcPositionX, 715 )

  // Position for the letters on the canvas
  abcPositionX = 280
  for (k = 0; k < currentLetterIndex; k++ ){
    text( alphabet[k][0], abcPositionX, 715 )
    abcPositionX +=35
  }
}

function draw() {
  textFont(font)
  // Determine which scence should be shown
  if (scene == 0) { sceneIntro() }
  else if(scene == 3){ sceneCongrats() }
  else{
    // The game screen
    // Create the white canvas over the border
    numberOfFrames++
    var canvasWidth = width - 156
    var canvasHeight = height - 80

    fill( 255, 255, 255 )
    rect( 78, 80, canvasWidth, canvasHeight )

    setupPositions()

    // Add in the tree
    image(treeImage, 160,-10)

    // Draw the letters on the page
    for ( i = 0; i < 26; i++ ){
      // Keep track of what the current letter to find is
      var currentLetterIndex = alphabet.indexOf(currentLetterToFind)

      // If the letter has already been found, make it gray
      if (alphabet.indexOf(currentLetterToFind) > i){
        fill( 220 , 220, 220 )
      }
      else{
        // Assign the stored color value
        fill( alphabet[i][4] )
      }

      // Text settings
      textSize( 120 )
      textAlign( CENTER, CENTER );

      // This is where we rotate the letters
      // Move the origin of the canvas to the center of the character
    	translate(alphabet[i][1], alphabet[i][2]);
    	rotate(alphabet[i][3])

      // Set the letter, position is 0,0 becuase the orgin shifted to its stored
      // coordinates
      text( alphabet[i][0], 0, 0)

      // Reset the translation and rotation, because those are accumulated
      rotate(-alphabet[i][3])
      translate(-alphabet[i][1], -alphabet[i][2])

      // Remove the used position from the array, can't have more than one letter
      // in the same spot
      positions.splice(alphabet[i][3], 1)
    }
    // Add in the "Letters Found" area
    collectedArea()
  }

}

function mouseClicked(){
  // Check if it's the intro splash scene
  if (scene == 0){
    // Only allow clicking on the button
    if (mouseX > 750 && mouseX < 1050 && mouseY > 600 && mouseY < 700){
      setup()
      scene = 1
    }

  }
  // Check if it's the congrats scene
  else if (scene == 3){
    // Only allow clicking on the button
    if (mouseX > 750 && mouseX < 1050 && mouseY > 600 && mouseY < 700){
      setup()
      scene = 1
      // Reset the timer
      numberOfFrames = 0
    }

  }
  else{
    // During the game, check if the user has clicked the current letter
    var clickDistance = dist ( mouseX, mouseY, currentLetterToFind[1], currentLetterToFind[2] )
    if (clickDistance < 50 ){
      // Play a sound that you found the right letter
      yeahSound.setVolume(1);
      yeahSound.play();
      // Increment the next letter to be found
      var currentLetterIndex = alphabet.indexOf(currentLetterToFind)
      var nextLetterIndex = currentLetterIndex + 1
      if (nextLetterIndex == 26){
        // All the letters were found!
        // Pick a random congrats text
        finalWinningText = congratsText[Math.floor(random(0,3))]
        // Go to the congrats scene
        scene = 3
        setup()
      }
      else{
        // User is still finding the letters, go find the next letter
        scene = 1
        currentLetterToFind = alphabet[nextLetterIndex]
      }
    }
    else{
      // Didn't find the right one
      waSound.setVolume(1)
      waSound.play()
    }
  }
}