Color Match

A classic. Try to remember a color, then pick the right color when presented with multiple options.

The technique of randomizing colors in a grid as to confuse the person playing took a lot of trial and error. But, from watching others play the game, it seems to have worked!

Can you reach over 25?

Click to play; remember the color you see, then select the right third of the screen when prompted to 

let state = "rest"
let target
let suggestions = []
let stdev = 100
let cleared = 0
let score = 0
let seed = 0

function setup() {
  createCanvas(400, 400);
  target = color(250);
  seed = random(10000)
  noStroke()
}

function draw() {
  if (state == "rest") {
    background(target)
    fill(brightness(target) > 50 ? 20 : 240)
    textSize(50)
    if (score == 0) {
      textAlign(CENTER, BOTTOM)
      text("Color Match", 200, 80)
      textAlign(CENTER, TOP)
      text("Click to start", 200, 400-80)
    } else {
      textAlign(CENTER, TOP)
      text("Continue", 200, 400-80)
    }
    textSize(80)
    textAlign(CENTER, CENTER)
    text(score, 200, 200)
  }
  if (state == "target") {
    background(target)
    fill(brightness(target) > 50 ? 20 : 240)
    textSize(80)
    textAlign(CENTER, CENTER)
    text(score, 200, 200)
    textSize(50)
    textAlign(CENTER, TOP)
    text("Remember", 200, 400-80)
  }
  if (state == "clear") {
    cleared += deltaTime
    if (cleared > 1000) {
      state = "suggestions"
    }
    let clearColor = color(random(255), random(255), random(255))
    background(220)
    randomSeed(score + seed)
    let w = ceil(random(10))
    let h = ceil(random(10))
    for (let i = 0; i < w; i ++) {
      for (let j = 0; j < h; j ++) {
        let k = floor(random(3))
        let k2 = ceil(random(2)) + k
        let k3 = ceil(random(2)) + k2
        let col = paletteLerp(
          [[suggestions[k % 3], 0], [suggestions[k2 % 3], 0.33], [suggestions[k3 % 3], 0.66]],
          cleared / 1000)
        push()
        beginClip()
        rect(i * width / w, j * height / h, width / w, height / h)
        endClip()
        background(col)
        fill(brightness(col) > 50 ? 20 : 240)
        textSize(80)
        textAlign(CENTER, CENTER)
        text(score, 200, 200)
        pop()
      }
    }
    randomSeed()
  }
  if (state == "suggestions") {
    for (let i = 0; i < suggestions.length; i ++) {
      push()
      beginClip()
      rect(i * width / suggestions.length, 0, width / suggestions.length, height)
      endClip()
      background(suggestions[i])
      fill(brightness(suggestions[i]) > 50 ? 20 : 240)
      textSize(50)
      textAlign(CENTER, TOP)
      text("Pick", 200, 400-80)
      textSize(80)
      textAlign(CENTER, CENTER)
      text(score, 200, 200)
      pop()
    }
  }
  if (state == "lost") {
    background(target)
    fill(brightness(target) > 50 ? 20 : 240)
    for (let i = 0; i < suggestions.length; i ++) {
      push()
      beginClip()
      rect(i * width / suggestions.length, 250, width / suggestions.length, 150)
      endClip()
      background(suggestions[i])
      fill(brightness(suggestions[i]) > 50 ? 20 : 240)
      textSize(50)
      textAlign(CENTER, TOP)
      text("Wrong!", 200, 400-80)
      pop()
    }
    textSize(50)
    textAlign(CENTER, BOTTOM)
    text("You lose", 200, 80)
    textSize(80)
    textAlign(CENTER, CENTER)
    text(score, 200, 200)
  }
}

function mousePressed() {
  if (state == "rest") {
    state = "target"
    target = color(random(255), random(255), random(255))
    suggestions = Array(2).fill().map(() => 
      color(
        randomGaussian(red(target), stdev),
        randomGaussian(green(target), stdev),
        randomGaussian(blue(target), stdev)
      )
    )
    suggestions.push(target)
    suggestions = shuffle(suggestions)
  } else if (state == "target") {
    state = "clear"
    cleared = 0
  } else if (state == "suggestions") {
    selectedI = constrain(floor(mouseX / (width / suggestions.length)), 0, suggestions.length)
    if (suggestions[selectedI] == target) {
      score ++
      stdev *= 0.9
      state = "rest"
    } else {
      state = "lost"
    }
  } else if (state == "lost") {
    score = 0
    stdev = 100
    seed = random(10000)
    state = "rest"
  }
}

(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/bCH8mnDec)

Experiments tagged p5 (54/85)

Experiments tagged game (4/11)

Experiments on this site (54/85)