<html>
 <head>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>
 </head>
 <body>
 </body>
</html>
body {
  padding: 0;
  margin: 0;
  background: rgb(230, 230, 230);
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
	var guessItem = null;
	var interval = 60;
	var results = [];
	var solution = null;
	var gameOver = false;

	function setup() {
		createCanvas(1920, 1080);
	}

	function draw() {
		var gameScore = getGameScore(results);
		if (gameScore.loss === 3 || gameScore.total === 10) {
			gameOver = true;
			displayGameOver(gameScore);
			return;
		}
		background(0);
		if (frameCount === 1 || frameCount % interval === 0) {
			solution = null;
			guessItem = new GuessItem(width / 2, height / 2, 1);
		}

		if (guessItem) {
			guessItem.render();
		}

		if (solution == true || solution === false) {
			solutionMessage(gameScore.total, solution);
		}
		
	}

	function solutionMessage(seed, solution) {
		var trueMessages = [
			'GOOD JOB!',
			'DOING GREAT!',
			'OMG!',
			'SUCH WIN!',
			'I APPRECIATE YOU',
			'IMPRESSIVE'
		];

		var falseMessages = [
			'OH NO!',
			'BETTER LUCK NEXT TIME!',
			'PFTTTT',
			':('
		];

		var messages;

		push();
		textAlign(CENTER, CENTER);
		fill(237, 34, 93);
		textSize(36);
		randomSeed(seed * 10000);

		if (solution === true) {
			background(255);
			messages = trueMessages;
		} else if (solution === false) {
			background(0);
			messages = falseMessages;
		}
		
		text(messages[parseInt(random(messages.length), 10)], width / 2, height / 2);
		pop();
	}

	function displayGameOver(score) {
		push();
		background(255);
		textSize(24);
		textAlign(CENTER, CENTER);
		translate(width / 2, height / 2);
		fill(237, 34, 93);
		text('GAME OVER!', 0, 0);
		translate(0, 36);
		fill(0);
		text('You have ' + score.win + ' correct guesses', 0, 0);
		translate(0, 100);
		textSize(16);
		var alternatingValue = map(sin(frameCount / 10), -1, 1, 0, 255);
		fill(237, 34, 93, alternatingValue);
		text('PRESS ENTER', 0, 0);
		pop();
	}

	function getGameScore(score) {
		var wins = 0;
		var losses = 0;
		var total = score.length;

		for (var i = 0; i < total; i++) {
			var item = score[i];
			if (item === true) {
				wins = wins + 1;
			} else {
				losses = losses + 1;
			}
		}

		return {
			win: wins,
			loss: losses,
			total: total
		};
	}

	function restartTheGame() {
		results = [];
		solution = null;
		gameOver = false;
	}

	function keyPressed() {
		if (gameOver === true) {
			if (keyCode === ENTER) {
				console.log('restart the game');
				restartTheGame();
				return;
			}
		}

		if (guessItem !== null) {
			console.log('you pressed: ', key);
			solution = guessItem.solve(key);
			console.log(solution);
			if (solution) {
				results.push(true);
			} else {
				results.push(false);
			}
			guessItem = null;
		} else {
			console.log('nothing to be solved');
		}
	}

	function GuessItem(x, y, scl) {
		this.x = x;
		this.y = y;
		this.scale = scl;
		this.scaleIncrement = 0.25;
		this.clr = 255;
		this.content = getContent();
		this.alpha = 255;
		this.alphaDecrement = 6;
		this.solved;
		this.contentMap = {
			'1': 'one',
			'2': 'two',
			'3': 'three',
			'4': 'four',
			'5': 'five',
			'6': 'six',
			'7': 'seven',
			'8': 'eight',
			'9': 'nine',
			'0': 'zero'
		};
		this.colors = [
			[63, 184, 175],
			[127, 199, 175],
			[218, 216, 167],
			[255, 158, 157],
			[255, 61, 127],
			[55, 191, 211],
			[159, 223, 82],
			[234, 209, 43],
			[250, 69, 8],
			[194, 13, 0]
		];

		function getContent() {
			return String(parseInt(random(10), 10));
		}

		this.solve = function(input) {
			var solved;
			if (input === this.content) {
				solved = true;
			} else {
				solved = false;
			}
			this.solved = solved;
			return solved;
		}

		this.drawEllipse = function(size, strkWeight, speedMultiplier, seed) {
			push();
			randomSeed(seed);
			translate(this.x, this.y);
			var ellipseSize = this.scale * speedMultiplier;
			scale(ellipseSize);
			var clr = this.colors[parseInt(random(this.colors.length), 10)]
			stroke(clr);
			noFill();
			strokeWeight(strkWeight);
			ellipse(0, 0, size, size);
			pop();
		}

		this.render = function() {
			push();
			this.drawEllipse(100, 15, 2, 1 * this.content * 1000);
			this.drawEllipse(60, 7, 2, 1 * this.content * 2000);
			this.drawEllipse(35, 3, 1.2, 1 * this.content * 3000);
			pop();

			push();
			fill(this.clr, this.alpha);
			textAlign(CENTER, CENTER);
			translate(this.x, this.y);
			scale(this.scale);
			text(this.contentMap[this.content], 0, 0);
			this.scale = this.scale + this.scaleIncrement;
			this.alpha = this.alpha - this.alphaDecrement;
			pop();
		}
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.