// require /microgames/sketches/p5.play.js

​

let gameIsWon = null;

let gameIsStarted = false;

let gameIsDone = false;

​

const SCREEN_WIDTH = 240;

const SCREEN_HEIGHT = 160;

const PIXEL_FACTOR = 2;

​

const NUMBER_OF_SHAPES = 6;

​

let gameFrames = 0;

​

const DURATION = 1.5; // in sec

const MAX_FRAMES = DURATION * 60;

​

const SHAPE_SIZE = 60;

const SHAPE_MARGIN = 20;

​

const colors = ["red", "blue", "yellow", "green", "purple", "orange"];

​

const shapes = ["triangle", "square", "circle"];

​

const selection = {

  offColor: null,

  shapeIndex: null,

  shapes: [

    {

      shape: null,

      color: null,

    },

  ],

};

​

let sprites = null;

​

function setup() {

  createCanvas(SCREEN_WIDTH * PIXEL_FACTOR, SCREEN_HEIGHT * PIXEL_FACTOR);

​

  noSmooth();

​

  sprites = new Group();

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

    const posX =

      (width -

        SHAPE_SIZE * NUMBER_OF_SHAPES -

        SHAPE_MARGIN * (NUMBER_OF_SHAPES - 1)) /

        2 +

      i * (SHAPE_SIZE + SHAPE_MARGIN) +

      SHAPE_SIZE / 2;

    const posY = (height - SHAPE_SIZE) / 2 - 40 + SHAPE_SIZE / 2;

​

    const shapeSprite = createSprite(posX, posY, SHAPE_SIZE, SHAPE_SIZE);

    shapeSprite.immovable = true;

    shapeSprite.mouseActive = true;

    shapeSprite.setDefaultCollider();

    // shapeSprite.debug = true

    sprites.add(shapeSprite);

  }

​

  textSize(20);

}

​

function draw() {

  background(0);

  if (!gameIsStarted) {

    push();

    fill(255);

    textAlign(CENTER);

    text("Start Micro Game\n Press Space", width / 2, height / 2);

    pop();

  } else {

    if (gameIsDone) {

      drawWinBackground();

      push();

      fill(255);

      textAlign(CENTER);

      text(gameIsWon ? "You won!" : "You lost…", width / 2, height / 2);

      text("Restart: Press Space", width / 2, height / 2 + 40);

      pop();

    } else {

      checkGame();

    }

  }

}

​

const checkGame = () => {

  let selectedID = false;

​

  const correctShape = selection.shapes[selection.shapeIndex];

​

  drawWinBackground();

​

  push();

  textAlign(CENTER);

  text(`Pick:`, width / 2, height - 80);

  push();

  textAlign(RIGHT);

  fill(selection.offColor);

  text(correctShape.color, width / 2 - 5, height - 60);

  pop();

  textAlign(LEFT);

  text(correctShape.shape, width / 2 + 5, height - 60);

  pop();

​

  selection.shapes.forEach((s, i) => {

    push();

​

    const thisSprite = sprites[i];

    translate(thisSprite.position.x, thisSprite.position.y);

​

    if (thisSprite.mouseIsPressed) {

      selectedID = i;

    }

​

    fill(s.color);

    switch (s.shape) {

      case "circle":

        circle(0, 0, SHAPE_SIZE);

        break;

      case "triangle":

        translate(0, SHAPE_SIZE / -2);

        triangle(0, 0, SHAPE_SIZE / -2, SHAPE_SIZE, SHAPE_SIZE / 2, SHAPE_SIZE);

        break;

      case "square":

      default:

        translate(SHAPE_SIZE / -2, SHAPE_SIZE / -2);

        rect(0, 0, SHAPE_SIZE, SHAPE_SIZE);

        break;

    }

    pop();

  });

​

  push();

  noStroke();

  fill(255);

  const timerWidth = map(gameFrames, 0, MAX_FRAMES, width - 40, 0);

  rect(20, height - 30, timerWidth, 10);

  pop();

​

  gameFrames++;

​

  if (gameIsWon === null && selectedID !== false) {

    checkIfWon(selectedID);

  }

​

  if (gameFrames >= MAX_FRAMES) {

    endGame();

  }

};

​

const startGame = () => {

  gameIsStarted = true;

  gameFrames = 0;

​

  createNewSelection();

};

​

const resetGame = () => {

  gameIsStarted = false;

  gameIsDone = false;

  gameIsWon = null;

};

​

const endGame = () => {

  gameIsDone = true;

  if (gameIsWon === null) {

    gameIsWon = false;

  }

};

​

const checkIfWon = (i) => {

  gameIsWon = selection.shapeIndex === i;

};

​

const drawWinBackground = () => {

  switch (gameIsWon) {

    case true:

      background("green");

      break;

    case false:

      background("red");

      break;

    default:

      background(220);

      break;

  }

};

​

function keyPressed() {

  if (key === " ") {

    // start game

    if (!gameIsStarted) {

      startGame();

      // restart game if game has ended

    } else if (gameIsDone) {

      resetGame();

    }

  }

}

​

const createNewSelection = () => {

  selection.shapes = [];

  const missleadingColors = new Set();

​

  while (selection.shapes.length < NUMBER_OF_SHAPES) {

    const newSelection = {

      color: random(colors),

      shape: random(shapes),

    };

    if (

      selection.shapes.find(

        (c) => c.color === newSelection.color && c.shape === newSelection.shape

      )

    ) {

      console.log("already exists");

    } else {

      selection.shapes.push(newSelection);

      missleadingColors.add(newSelection.color);

    }

  }

​

  selection.shapeIndex = floor(random(NUMBER_OF_SHAPES));

​

  const missleadingColorsArray = Array.from(missleadingColors).filter(

    (c) => c !== selection.shapes[selection.shapeIndex].color

  );

  selection.offColor = random(missleadingColorsArray);

};

​