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()
}
}
}
]
}
}
