优化记忆游戏

Question

有人能帮我优化我的代码吗？我真的不知道如何处理所有的var矩形和var颜色。

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

您可以通过将矩形和颜色(kleur)声明为数组来减少部分代码。然后，可以在循环中初始化(或重置) kleur数组元素。

例如:而不是

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

试一试

var rectangle[16]: Rectangle;

而不是

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

试一试

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

然后，无论你说什么

kleur1

你可以说

kleur[1]