Game Development Reference
In-Depth Information
function setBrick(buttonID) {
if (currentButton) {
currentButton.removeAttr("disabled");
}
currentButton = $("#" + buttonID);
currentButton.attr("disabled", "disabled");
switch (buttonID) {
case "square-brick":
selectedBrickClass = Square;
break;
case "triangle-brick":
selectedBrickClass = Triangle;
break;
case "circle-brick":
selectedBrickClass = Circle;
break;
case "curve-brick":
selectedBrickClass = Curve;
break;
}
}
Don't worry. That looks way more complicated than it actually is. At the top you see we use a global
variable called
currentButton
. We added it in the beginning to our
application.js
.
This variable will hold a reference to the currently selected button. On the first click, no button will be
referenced by
currentButton
, so the
if
statement is not executed.
After that, we use jQuery to add a
disabled
attribute to the button; because once you clicked it, you don't
need to click it again. We can easily access the button because we know the id as it's passed via the
function argument.
Now the
if
statement makes sense, too. When you click another button, you will have to re-enable the
currentButton
and disable the new one. Logic cycle, right?
Finally we use a switch statement to differentiate between the different behavior, depending on which
button was clicked. Now we use another global variable we created at the beginning:
selectedBrickClass
.
We always assign it with the right brick class, depending on the button.
We are almost good to go. Let's go to the
createBrickAt(column, row)
method and change just one little
thing. Instead of creating a square brick every time, we create a
selectedBrickClass
because it is only a
reference to the currently selected brick. It will look like this:
function createBrickAt(column, row) {
if (!selectedBrickClass) return;