Color match Game

//Color match Game

var idList = [0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7];
var rows = 4;
var cols = 4;
var index = 0;
var blockSize;
var spacing = 0;
var blocks = [];
var clickCounter = 0;
var matchCounter = 0;
var firstBlock;
var secondBlock;
var scoreTimer;
var resetTime = 0;
var button;
var col;

function setup() {
var myCanvas = createCanvas(320, 320);
myCanvas.parent('myContainer');
colorMode(HSB);
blockSize = width / 4;
strokeWeight(4);
shuffle(idList, true);
for (var x = 0; x < cols; x++) {
for (var y = 0; y < rows; y++) {
var blockX = ((spacing + blockSize) * x) + spacing;
var blockY = ((spacing + blockSize) * y) + spacing;
blocks.push(new Block(blockX, blockY, blockSize, idList[index]));
index++;
}
}
col= color(220,190,230,100);
button = createButton('Click Restart');
button.position(120, 330);
button.size(200,30)
button.style("font-size", "17px");
button.style("color", "#fff");
button.style("background-color",col)
//  button.html("Click Restart2");
button.mousePressed(changeBG);
button.hide();
}

function draw() {
background(80);
for (var i = 0; i < blocks.length; i++) {
hello();

blocks[i].display();
}
if (matchCounter == blocks.length / 2) {
gameOver();
button.show();
}
}
function hello(){
var m = millis();
noStroke();
textAlign(CENTER);
if(m > 3*1000 ){
fill(255);
text(" ", 500, 50);
}else{
textSize(28);
fill(20);
var hd = "Color Blending Game\nClick Start";
text(hd, width/2, 150);
}
}
function flip() {
for (var i = 0; i < blocks.length; i++) {
blocks[i].colorState = blocks[i].back;
}
}
function matchPair() {
for (var i = 0; i < blocks.length; i++) {
if (blocks[i].id == firstBlock) {
blocks[i].alive = false;
}
}
}
function gameOver() {
fill(235, 50);
noStroke();
//  rect(0, 120, width, 240);
textSize(40);
fill(40);
textAlign(CENTER);;
text("Game Clear", width / 2, (height / 2) - 100);
textSize(32);
text("Time: " + scoreTimer + " sec", width / 2, (height / 2) - 50);
textSize(18);
text("Button Click to Restart", width / 2, (height / 2) + 80);
}
function changeBG() {
reset();
button.hide();
}
function reset() {
shuffle(idList, true);
blocks = [];
index = 0;
for (var x = 0; x < cols; x++) {
for (var y = 0; y < rows; y++) {
var blockX = ((spacing + blockSize) * x) + spacing;
var blockY = ((spacing + blockSize) * y) + spacing;
blocks.push(new Block(blockX, blockY, blockSize, idList[index]));
console.log(idList[index]);
index++;
}
}

for (var i = 0; i < blocks.length; i++) {
blocks[i].alive = true;
blocks[i].colorState = blocks[i].back;
}
matchCounter = 0;
resetTime = floor(millis() / 1000);
}
function checkPair() {
if (clickCounter == 2) {
if (firstBlock == secondBlock) {
matchCounter++;
setTimeout(matchPair, 200);
} else {
setTimeout(flip, 200);
}
clickCounter = 0;
}
}
function mouseClicked() {
for (var i = 0; i < blocks.length; i++) {
blocks[i].clicked();
}
checkPair();
scoreTimer = floor(millis() / 1000) - resetTime;
}
function touchEnded(){
for (var i = 0; i < blocks.length; i++) {
blocks[i].clicked();
}
checkPair();
scoreTimer = floor(millis() / 1000) - resetTime;
}
function Block(x, y, w, id) {
this.x = x;
this.y = y;
this.w = w;
this.id = id;
this.front = color(id * 22, 70, 70);
this.back = 255;
this.colorState = this.back;
this.alive = true;
this.display = function() {
if (this.alive == true) {
stroke(80);
fill(this.colorState);
rect(this.x, this.y, this.w, this.w);
}
}
this.clicked = function() {
if (this.colorState == this.back && this.alive) {
if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.w) {
this.colorState = this.front;
if (clickCounter == 0) {
firstBlock = this.id;
} else if (clickCounter == 1) {
secondBlock = this.id;
}
clickCounter++;
}
}
}
}

preview

 top