Playing on bare HTML / CSS
Today we will talk about how to create a game without using js and other scripts. Only HTML / CSS, only heytkor.
Of course, we are not talking (for now) about some amazing complexity of games, but just think about it: no scripts.
Create a semblance of the well-known game Duck hunter, that there will be:
')
Very little will be needed for our markup.
Actually everything.
The main idea is that ducks are flying checkboxes that have two states: checked and not checked. And we cannot stylize checkboxes, therefore pseudo-elements will go into development: before and: after.
Make them fly with css animations
At this point, the first point is complete, there are ducks and they fly, nothing complicated.
Since the pseudo-elements are inside the parent blocks, then clicking on them (pseudo-elements) will trigger the event of a click on checkboxes. Thus, we don’t even need labels, checkboxes will change their state to checked by clicking on [type = checkbox]: before.
And when do we click on ducks? That's right when we shoot them. Accordingly, when hit, the duck must die, points are added. We will kill the duck with the selector .duck: checked. The truth is there is one underwater pebble here - duck flying is animation, and animation styles have an advantage, so just ask, for example:
will not work.
What could be stronger than the animation (and in terms of priority)? Just another animation. Therefore, the deceased duck will be positioned using animation:
Actually, the negative positioning of the duck is only necessary so that it no longer litters the game space and it was impossible to accidentally click on it, removing the checked state from the checkbox.
Unfortunately, css does not allow you to directly calculate the number of elements with a specific selector on the page. Let me remind you that we need to find out the number of "ducks" in the checked state. But there is a counter-increment function. The counter-increment property increases the counter value by one, the name of which we indicate.
The record above means that each element matching the selector .duck: checked increases our score counter (arbitrary name). Checked the checkbox - the counter increased, removed the mark - immediately decreased.
Well, there is a certain internal counter, it remains to display it as a result of the game. We do this, of course, with the help of the css-content property:
My personal conclusions:
This is just a concept, there is still much to be done.
Of course, we are not talking (for now) about some amazing complexity of games, but just think about it: no scripts.
Plan
Create a semblance of the well-known game Duck hunter, that there will be:
')
- Flying ducks
- You can shoot them
- Points are awarded for this.
Very little will be needed for our markup.
<!-- --> <input type="checkbox" class="duck"> <input type="checkbox" class="duck"> <input type="checkbox" class="duck"> <input type="checkbox" class="duck"> <input type="checkbox" class="duck"> <!-- --> <div class="score"></div> Actually everything.
The main idea is that ducks are flying checkboxes that have two states: checked and not checked. And we cannot stylize checkboxes, therefore pseudo-elements will go into development: before and: after.
background: url(../img/duck_light.png) no-repeat left center; Make them fly with css animations
Banal animation
@keyframes utkaFly { 0%{ left: 150%; top:10%; } 25%{ left: 80%; top:50%; } 50%{ left: 50%; top:30%; } 75%{ left: 30%; top:40%; } 100%{ left: -50%; top:10%; } } At this point, the first point is complete, there are ducks and they fly, nothing complicated.
Kill the duck
Since the pseudo-elements are inside the parent blocks, then clicking on them (pseudo-elements) will trigger the event of a click on checkboxes. Thus, we don’t even need labels, checkboxes will change their state to checked by clicking on [type = checkbox]: before.
And when do we click on ducks? That's right when we shoot them. Accordingly, when hit, the duck must die, points are added. We will kill the duck with the selector .duck: checked. The truth is there is one underwater pebble here - duck flying is animation, and animation styles have an advantage, so just ask, for example:
left: -50%; opacity: 0; z-index: -5; will not work.
What could be stronger than the animation (and in terms of priority)? Just another animation. Therefore, the deceased duck will be positioned using animation:
@keyframes utkaDie { 0%{ left: -50%; } } Actually, the negative positioning of the duck is only necessary so that it no longer litters the game space and it was impossible to accidentally click on it, removing the checked state from the checkbox.
Counting glasses
Unfortunately, css does not allow you to directly calculate the number of elements with a specific selector on the page. Let me remind you that we need to find out the number of "ducks" in the checked state. But there is a counter-increment function. The counter-increment property increases the counter value by one, the name of which we indicate.
.duck:checked{ counter-increment: score; } The record above means that each element matching the selector .duck: checked increases our score counter (arbitrary name). Checked the checkbox - the counter increased, removed the mark - immediately decreased.
Well, there is a certain internal counter, it remains to display it as a result of the game. We do this, of course, with the help of the css-content property:
.score:after{ content: counter(score); } Total
My personal conclusions:
- Modern technologies are surprising
- If you have at least one technology at a good level, you can already create something interesting (so stop whining that you are just a layout designer)
- You can make a game
Resources
This is just a concept, there is still much to be done.
Source: https://habr.com/ru/post/267701/
All Articles