65 lines
2.1 KiB
HTML
65 lines
2.1 KiB
HTML
<style>
|
|
.poisson {
|
|
color: blue;
|
|
border: solid 1px blue;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
#map {
|
|
border: solid 1px black;
|
|
width: 500px;
|
|
height: 700px;
|
|
}
|
|
</style>
|
|
|
|
<h1>FisherType</h1>
|
|
<div id="map">
|
|
</div>
|
|
<input type="text" id="input" />
|
|
|
|
<script>
|
|
var mots = [
|
|
"boulbi", "hassoul", "am am am am", "toz", "ordinateur", "table", "poisson", "sherif", "lune",
|
|
"hassanat", "stéphane", "hessel", "quoi", "nan mais", "chapeau", "compliqué", "oui", "têtu",
|
|
"gougougaga", "dora", "exploratrice", "gay", "lgbtqa+-^10", "oreilles", "yeux", "perceuse",
|
|
];
|
|
var map = document.getElementById("map");
|
|
var input = document.getElementById("input");
|
|
var coord_map = map.getBoundingClientRect();
|
|
var poissons = document.getElementsByClassName("poisson");
|
|
|
|
setInterval(() => {
|
|
map.innerHTML += "<div class='poisson'>" + mots[parseInt(Math.floor(Math.random()*mots.length))] + "</div>";
|
|
var poisson = poissons[poissons.length-1]
|
|
poisson.style.top = coord_map.top;
|
|
poisson.style.left = coord_map.left + (coord_map.width-poisson.getBoundingClientRect().width)*Math.random();
|
|
poisson.setAttribute("pos", poisson.style.left.replace("px", ""));
|
|
poisson.setAttribute("i", 0);
|
|
}, 1000);
|
|
|
|
input.onkeyup = () => {
|
|
for (var i in poissons) {
|
|
var p = poissons[i];
|
|
if (input.value == p.innerHTML) {
|
|
input.value = "";
|
|
p.remove();
|
|
}
|
|
}
|
|
};
|
|
|
|
setInterval(() => {
|
|
for (var i in poissons) {
|
|
if (isNaN(i)) continue;
|
|
var p = poissons[i];
|
|
var new_top = parseInt(p.style.top.replace("px", "")) + 10;
|
|
p.style.top = new_top;
|
|
p.setAttribute("i", parseInt(p.getAttribute("i")) + 1);
|
|
p.style.left = parseInt(p.getAttribute('pos')) + Math.sin(parseInt(p.getAttribute('i')))*10;
|
|
if (new_top > coord_map.height + coord_map.top - p.getBoundingClientRect().height) {
|
|
p.remove();
|
|
}
|
|
}
|
|
}, 100);
|
|
</script>
|