Developers Club geek daily blog

3 years ago
Today it will be a question how to create game without using js and other scripts. Only HTML/CSS, only heytkor.

Game on naked HTML/CSS

Of course the speech does not go (so far) about some delightful complexity games, but you only ponder: any scripts.

Plan


Let's create similarity all of the known game Duck hunter that there will be:

  • The flying ducks
  • It is possible to shoot at them
  • For it points are added

For our marking it is required very little
<!-- Утки -->
<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 all.

The main idea just that ducks — is the flying chekboksa which have two statuses: checked and not checked. And we cannot stylize chekboksa therefore pseudo-elements will go to development: before and: after.
background: url(../img/duck_light.png) no-repeat left center;

Let's force to fly them by means of css of 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%;
	}
}


On it the first point is finished, ducks are also they fly, anything difficult.

Kill duck


Shopping malls pseudo-elements are in blocks parents, cliques on them (pseudo-elements) will cause click event on chekboksa. Thus, label'y will not even be necessary for us, chekboksa will change the status to checked on clique on [type=checkbox]: before.

And when we click ducks? It is correct when we shoot at them. Respectively, at hit the duck has to die, points to be added. We will beat death of duck the .duck:checked selector. The truth is one underwater pebble here — flight of duck — it is animation, and styles of animation have advantage therefore it is simple to set, for example:

left: -50%;
opacity: 0;
z-index: -5;

it will not turn out.

What can be stronger than animation (and the plan of priority)? Only other animation. Therefore the died duck will be positioned by means of animation:
@keyframes utkaDie {
	0%{
		left: -50%;
	}
}

Actually negative positioning of duck is necessary only in order that she did not litter game space any more and it was impossible to click accidentally on her, having cleaned at chekboks checked status.

We consider points


Unfortunately, css does not allow to calculate directly quantity of elements with certain selector on the page. I will remind that we need to learn quantity of "ducks" of the being able checked. But there is counter-increment function. Counter-increment property increases value of the counter by unit which name we will enter.
.duck:checked{
	counter-increment: score;
}

Record means above that each element suitable under the .duck:checked selector increases our score counter (the name any). Have noted chekboks — the counter has increased, have removed mark — has right there decreased.

Well, certain internal counter is, it was necessary to display it as result of game. Let's make it, of course, by means of css-property content:
.score:after{
	content: counter(score);
}

Result


My personal outputs:
  1. Modern technologies surprise
  2. If at the good level you own though one technology, you can already create something interesting (so will be enough to ache that you only the maker-up)
  3. It is possible to impose game

Resources



It only concept, it is possible to finish still many that.

This article is a translation of the original post at habrahabr.ru/post/267701/
If you have any questions regarding the material covered in the article above, please, contact the original author of the post.
If you have any complaints about this article or you want this article to be deleted, please, drop an email here: sysmagazine.com@gmail.com.

We believe that the knowledge, which is available at the most popular Russian IT blog habrahabr.ru, should be accessed by everyone, even though it is poorly translated.
Shared knowledge makes the world better.
Best wishes.

comments powered by Disqus