CSS games. Part 2: StarCraft
Good day, habrovtsy.
As a result of the last article, I realized that the topic is interesting to the public, so I prepared another material, a little more complicated.
There are still no scripts, only HTML / CSS.
Watch the video and under the cat.
Of course, the speech (so far) is not about a full-fledged game, but I will show the concept.
I called the game "help traffic find friends."
She can do this by building a nexus and “training” her friends. Therefore, the goal of the game is to help traffic find friends.
So let's go.
')
First of all, in CSS we have the whole game tied up on checkboxes and radio buttons and a slider "~". Therefore, the variable elements must be on top of the page.
Let's call them "states"
Besides the fact that they should be at the top, they should not yet be inside blocks, since the selector "~" selects elements of the same level.
That is, having markup
This selector will not select anything.
This is because .some is nested in #map, that is, at a different nesting level.
In this case, the selector must start with the closest element of the same level.
As we all know, starcraft buildings are arranged on a grid. Accordingly, we need to make the same grid.
It will consist of blocks containing certain states that this cell can assume - for example, a nexus is built on it:
For the final mapping, we have the .view block (they can be many for different states).
Turns on the state when you click on the corresponding label: turn on the checkbox - .view is visible:
The label itself is also visible under certain conditions. For example, when we are going to build a nexus, we have a “visible” (display: block) label responsible for this state:
When you hover over a cell, we want to see in advance how our building will stand. To do this, just stylize a label span nested (span is larger than a label, a label the size of a cell).
So, we see the preliminary location of the building, but the block and the image close the neighboring cells, so that it is difficult to beat the state on them: hover (which just initiates the display of the preliminary construction).
Glory to the gods, we can already use the CSS4 property
This property allows you to disable the response of the block to mouse events, as if to make it transparent for the mouse.
Neither click nor hover element is perceived. Even select an element using a magnifying glass from the developer panel is impossible. At the same time, he is quite visible to himself exactly at the z-level at which he should.
We have several units and buildings, and highlighting each of these elements, we want to see different buttons on the taskbar.
This is achieved by switching the radio buttons, because each time we can select only one building / unit (in the original, not so).
I wanted to do some reset to the default states of some radio buttons that are responsible for the state of the panel when a unit / building is selected.
I put the label in the label in the label hoping that clicking on the contents of the label will cause a click on the container. But to my surprise it did not work, only the internal label is clicked.
Of course, this is just a Proof-of-Concept and there is a lot to be done and remake here, I just indicated a direction for reflection.
As a result of the last article, I realized that the topic is interesting to the public, so I prepared another material, a little more complicated.
There are still no scripts, only HTML / CSS.
Watch the video and under the cat.
Of course, the speech (so far) is not about a full-fledged game, but I will show the concept.
I called the game "help traffic find friends."
She can do this by building a nexus and “training” her friends. Therefore, the goal of the game is to help traffic find friends.
So let's go.
')
First of all, in CSS we have the whole game tied up on checkboxes and radio buttons and a slider "~". Therefore, the variable elements must be on top of the page.
Let's call them "states"
<!-- --> <!-- --> <input type="radio" name="button-level-2" id="default-state-level-2"> <input type="radio" name="button-level-1" id="default-state-level-1"> <input type="radio" name="unit" id="default-state-unit"> <!-- --> <!-- --> <input class="state build-button probe" type="radio" name="button-level-1" id="build-button"> <!-- --> <input class="state build-nexus start-build" type="radio" name="button-level-2" id="build-nexus"> <!-- --> <input class="state build-probe-1" type="checkbox" id="build-probe-1"> <input class="state build-probe-2" type="checkbox" id="build-probe-2"> <input class="state build-probe-3" type="checkbox" id="build-probe-3"> <input class="state build-probe-4" type="checkbox" id="build-probe-4"> <input class="state build-probe-5" type="checkbox" id="build-probe-5"> <!-- / --> <!-- --> <input class="state unit probe" type="radio" name="unit" id="start-probe"> <input class="state unit nexus" type="radio" name="unit" id="nexus-select"> <!-- / --> <!-- / --> Besides the fact that they should be at the top, they should not yet be inside blocks, since the selector "~" selects elements of the same level.
That is, having markup
<input type="radio" name="unit" id="default-state-unit"> <div id="map"> <div class="some">Hiho</div> </div> This selector will not select anything.
#default-state-unit:checked ~ .some This is because .some is nested in #map, that is, at a different nesting level.
In this case, the selector must start with the closest element of the same level.
#default-state-unit:checked ~ #map .some Grid
As we all know, starcraft buildings are arranged on a grid. Accordingly, we need to make the same grid.
It will consist of blocks containing certain states that this cell can assume - for example, a nexus is built on it:
<!-- --> <div class="cell-label"> <!-- --> <label for="cell_6_nexus" class="nexus status unit"> <span class="inner"></span> </label> <input type="checkbox" id="cell_6_nexus" class="cell-state"> <label class="view nexus unit" for="nexus-select"> <div class="probes"> <div class="probe"></div> <div class="probe"></div> <div class="probe"></div> <div class="probe"></div> <div class="probe"></div> </div> </label> </div> <!-- / --> For the final mapping, we have the .view block (they can be many for different states).
Turns on the state when you click on the corresponding label: turn on the checkbox - .view is visible:
#map .cell-label .cell-state:checked + .view{ display: block; } The label itself is also visible under certain conditions. For example, when we are going to build a nexus, we have a “visible” (display: block) label responsible for this state:
.state.build-nexus:checked ~ #map .cell-label:hover label.status.nexus{ display: block; } When you hover over a cell, we want to see in advance how our building will stand. To do this, just stylize a label span nested (span is larger than a label, a label the size of a cell).
So, we see the preliminary location of the building, but the block and the image close the neighboring cells, so that it is difficult to beat the state on them: hover (which just initiates the display of the preliminary construction).
Glory to the gods, we can already use the CSS4 property
pointer-events: none; This property allows you to disable the response of the block to mouse events, as if to make it transparent for the mouse.
Neither click nor hover element is perceived. Even select an element using a magnifying glass from the developer panel is impossible. At the same time, he is quite visible to himself exactly at the z-level at which he should.
Units
We have several units and buildings, and highlighting each of these elements, we want to see different buttons on the taskbar.
This is achieved by switching the radio buttons, because each time we can select only one building / unit (in the original, not so).
Conclusion
I wanted to do some reset to the default states of some radio buttons that are responsible for the state of the panel when a unit / building is selected.
I put the label in the label in the label hoping that clicking on the contents of the label will cause a click on the container. But to my surprise it did not work, only the internal label is clicked.
<!-- --> <input type="radio" name="button-level-2" id="default-state-level-2"> <input type="radio" name="button-level-1" id="default-state-level-1"> <input type="radio" name="unit" id="default-state-unit"> <!-- --> <label for="default-state-level-2" class="reset"> <label for="default-state-level-1" class="reset"> <label for="default-state-unit" class="reset"></label> </label> </label> <!-- / --> Of course, this is just a Proof-of-Concept and there is a lot to be done and remake here, I just indicated a direction for reflection.
Resources
Source: https://habr.com/ru/post/267801/
All Articles