1
\$\begingroup\$

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()
                    }
                }
            }
        ]
    }
}
\$\endgroup\$
1
\$\begingroup\$

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]
\$\endgroup\$
  • \$\begingroup\$ Can you tell me how i should do that? \$\endgroup\$ – Flojo Mar 20 '13 at 11:48
  • \$\begingroup\$ Okay. I added a few code examples. \$\endgroup\$ – TGolisch Mar 20 '13 at 17:33
  • \$\begingroup\$ thank you :), but now it keeps telling me i forgot the ';' but it's there, exactly like you did \$\endgroup\$ – Flojo Mar 20 '13 at 18:22
  • \$\begingroup\$ 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. \$\endgroup\$ – TGolisch Mar 20 '13 at 18:51
  • \$\begingroup\$ I did, but only changed the var's, not rest of the code, because there were '!' signs all the time \$\endgroup\$ – Flojo Mar 20 '13 at 19:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.