Optimizing memory game

Question

Can anyone help me optimize my code? I really don't know what to do about all the var rectangles and var colors.

package PO;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.control.Button;
var rectangle1: Rectangle;
var rectangle2: Rectangle;
var rectangle3: Rectangle;
var rectangle4: Rectangle;
var rectangle5: Rectangle;
var rectangle6: Rectangle;
var rectangle7: Rectangle;
var rectangle8: Rectangle;
var rectangle9: Rectangle;
var rectangle10: Rectangle;
var rectangle11: Rectangle;
var rectangle12: Rectangle;
var rectangle13: Rectangle;
var rectangle14: Rectangle;
var rectangle15: Rectangle;
var rectangle16: Rectangle;
var kleur1 = "red";
var kleur2 = "red";
var kleur3 = "red";
var kleur4 = "red";
var kleur5 = "red";
var kleur6 = "red";
var kleur7 = "red";
var kleur8 = "red";
var kleur9 = "red";
var kleur10 = "red";
var kleur11 = "red";
var kleur12 = "red";
var kleur13 = "red";
var kleur14 = "red";
var kleur15 = "red";
var kleur16 = "red";
var tekst = "beginnen maar";
var aantalclicks = 0;
var kaartkeuze = ["",""];
var scene: Scene;
var button: Button;
function KaartControle (){
 if (aantalclicks == 2){
 if(kaartkeuze [0] == kaartkeuze[1]){
 tekst = "goed bezig!";
 aantalclicks = 0;
 }
 }
 else if (aantalclicks == 3) {
 tekst = "jammer!";
 kleur1 = "red";
 kleur2 = "red";
 kleur3 = "red";
 kleur4 = "red";
 kleur5 = "red";
 kleur6 = "red";
 kleur7 = "red";
 kleur8 = "red";
 kleur9 = "red";
 kleur10 = "red";
 kleur11 = "red";
 kleur12 = "red";
 kleur13 = "red";
 kleur14 = "red";
 kleur15 = "red";
 kleur16 = "red";
 aantalclicks = 0;
 }
}
Stage {
 title: "Memory"
 scene: Scene {
 width: 500
 height: 300
 content: [
 Text {
 font: Font {
 size: 16
 }
 x: 10
 y: 30
 content: bind tekst;
 }
 button = Button {
 translateX: 300
 translateY: 150
 text: "reset"
 visible: true
 action: function() {
 kleur1 = "red";
 kleur2 = "red";
 kleur3 = "red";
 kleur4 = "red";
 kleur5 = "red";
 kleur6 = "red";
 kleur7 = "red";
 kleur8 = "red";
 kleur9 = "red";
 kleur10 = "red";
 kleur11 = "red";
 kleur12 = "red";
 kleur13 = "red";
 kleur14 = "red";
 kleur15 = "red";
 kleur16 = "red";
 aantalclicks = 0;
 }
 }
 //Kaart 1
 rectangle1 = Rectangle {
 width: 50
 height: 50
 x: 10
 y: 50
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur1)
 onMouseClicked: function(event) {
 if (kleur1 == "red"){
 kleur1 = "green";
 kaartkeuze[aantalclicks]="1";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 //Kaart 2
 rectangle2 = Rectangle {
 width: 50
 height: 50
 x: 10
 y: 110
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur2)
 onMouseClicked: function(event) {
 if (kleur2 == "red"){
 kleur2 = "green";
 kaartkeuze[aantalclicks]="1";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 //Kaart 3
 rectangle3 = Rectangle {
 width: 50
 height: 50
 x: 10
 y: 170
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur3)
 onMouseClicked: function(event) {
 if (kleur3 == "red"){
 kleur3 = "blue";
 kaartkeuze[aantalclicks]="2";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 //Kaart 4
 rectangle4 = Rectangle {
 width: 50
 height: 50
 x: 10
 y: 230
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur4)
 onMouseClicked: function(event) {
 if (kleur4 == "red"){
 kleur4 = "blue";
 kaartkeuze[aantalclicks]="2";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 //Kaart 5
 rectangle5 = Rectangle {
 width: 50
 height: 50
 x: 70
 y: 50
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur5)
 onMouseClicked: function(event) {
 if (kleur5 == "red"){
 kleur5 = "yellow";
 kaartkeuze[aantalclicks]="3";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 //Kaart 6
 rectangle6 = Rectangle {
 width: 50
 height: 50
 x: 70
 y: 110
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur6)
 onMouseClicked: function(event) {
 if (kleur6 == "red"){
 kleur6 = "yellow";
 kaartkeuze[aantalclicks]="3";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 //Kaart 7
 rectangle7 = Rectangle {
 width: 50
 height: 50
 x: 70
 y: 170
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur7)
 onMouseClicked: function(event) {
 if (kleur7 == "red"){
 kleur7 = "purple";
 kaartkeuze[aantalclicks]="4";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 //Kaart 8
 rectangle8 = Rectangle {
 width: 50
 height: 50
 x: 70
 y: 230
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur8)
 onMouseClicked: function(event) {
 if (kleur8 == "red"){
 kleur8 = "purple";
 kaartkeuze[aantalclicks]="4";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 //Kaart 9
 rectangle9 = Rectangle {
 width: 50
 height: 50
 x: 130
 y: 50
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur9)
 onMouseClicked: function(event) {
 if (kleur9 == "red"){
 kleur9 = "grey";
 kaartkeuze[aantalclicks]="5";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 //Kaart 10
 rectangle10 = Rectangle {
 width: 50
 height: 50
 x: 130
 y: 110
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur10)
 onMouseClicked: function(event) {
 if (kleur10 == "red"){
 kleur10 = "grey";
 kaartkeuze[aantalclicks]="5";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 //Kaart 11
 rectangle11 = Rectangle {
 width: 50
 height: 50
 x: 130
 y: 170
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur11)
 onMouseClicked: function(event) {
 if (kleur11 == "red"){
 kleur11 = "pink";
 kaartkeuze[aantalclicks]="6";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 //Kaart 12
 rectangle12 = Rectangle {
 width: 50
 height: 50
 x: 130
 y: 230
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur12)
 onMouseClicked: function(event) {
 if (kleur12 == "red"){
 kleur12 = "pink";
 kaartkeuze[aantalclicks]="6";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 //Kaart 13
 rectangle13 = Rectangle {
 width: 50
 height: 50
 x: 190
 y: 50
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur13)
 onMouseClicked: function(event) {
 if (kleur13 == "red"){
 kleur13 = "orange";
 kaartkeuze[aantalclicks]="7";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 //Kaart 14
 rectangle14 = Rectangle {
 width: 50
 height: 50
 x: 190
 y: 110
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur14)
 onMouseClicked: function(event) {
 if (kleur14 == "red"){
 kleur14 = "orange";
 kaartkeuze[aantalclicks]="7";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 //Kaart 15
 rectangle15 = Rectangle {
 width: 50
 height: 50
 x: 190
 y: 170
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur15)
 onMouseClicked: function(event) {
 if (kleur15 == "red"){
 kleur15 = "black";
 kaartkeuze[aantalclicks]="8";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 //Kaart 16
 rectangle16 = Rectangle {
 width: 50
 height: 50
 x: 190
 y: 230
 arcWidth: 10
 arcHeight: 10
 fill: bind Color.web(kleur16)
 onMouseClicked: function(event) {
 if (kleur16 == "red"){
 kleur16 = "black";
 kaartkeuze[aantalclicks]="8";
 aantalclicks ++;
 KaartControle()
 }
 }
 }
 ]
 }
}

Answer 1

You could reduce a some of your code by declaring your Rectangles and colors (kleur) as arrays. Then you could initialize (or reset) the kleur array elements within a loop.

For example: Instead of

var rectangle1: Rectangle;
var rectangle2: Rectangle;
var rectangle3: Rectangle;
var rectangle4: Rectangle;
//...

try

var rectangle[16]: Rectangle;

and instead of

var kleur1 = "red";
var kleur2 = "red";
var kleur3 = "red";
//...

try

var kleur[16];
var x;
for (x=0; x<16; x++)
 kleur[x] = "red";

Then, wherever you say

kleur1

you can say

kleur[1]

• Flojo: Can you tell me how i should do that?
• TGolisch: Okay. I added a few code examples.
• Flojo: thank you :), but now it keeps telling me i forgot the ';' but it's there, exactly like you did
• TGolisch: Could you please post your revised code above (as a revision to the original code)? I'll see if I can spot the missing semicolon.
• Flojo: I did, but only changed the var's, not rest of the code, because there were '!' signs all the time