104 lines
3.1 KiB
HTML
104 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="jp">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
<title>血小板 | PonyWave Tools</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta property="og:image" content="https://tools.ponywave.de/cell/1.png">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="血小板 | PonyWave Tools">
|
|
<meta property="og:description" content="Platelet Clicker">
|
|
<meta property="og:url" content="https://tools.ponywave.de/cell">
|
|
<link rel="preload" href="2.png" as="image">
|
|
<script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="cell"></script>
|
|
<style>
|
|
|
|
body, .container {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: auto;
|
|
|
|
background-size: cover;
|
|
background-position: center;
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
#img_normal {
|
|
background-image: url("1.png");
|
|
}
|
|
|
|
#img_click {
|
|
background-image: url("2.png");
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<noscript>Please enable JavaScript execution in your browser</noscript>
|
|
|
|
<div id="div_root" class="container">
|
|
<div id="img_normal"></div>
|
|
<div id="img_click"></div>
|
|
</div>
|
|
|
|
<script type="application/javascript">
|
|
var div_root = document.getElementById('div_root');
|
|
|
|
var images = [ document.getElementById('img_normal'), document.getElementById('img_click') ];
|
|
|
|
var snd_click = new Audio('click.ogg');
|
|
var snd_react = [new Audio('react1.ogg'), new Audio('react2.ogg')];
|
|
var snd_music = new Audio('music.ogg');
|
|
snd_music.loop = true;
|
|
|
|
var clicks = 0;
|
|
var reaction = 0;
|
|
|
|
function show_image(index) {
|
|
for (var i = 0; i < images.length; ++i)
|
|
images[i].className = (i === index) ? "container" : "hidden container";
|
|
}
|
|
|
|
function pok(e) {
|
|
if(snd_music.paused) snd_music.play();
|
|
|
|
show_image(1);
|
|
|
|
snd_click.play();
|
|
|
|
if(++clicks % 3 === 0) {
|
|
var index = Math.floor(Math.random() * snd_react.length);
|
|
snd_react[index].play();
|
|
}
|
|
}
|
|
|
|
function releas(e) {
|
|
show_image(0);
|
|
}
|
|
|
|
show_image(0);
|
|
|
|
div_root.addEventListener('mousedown', function(e) { if(e.button !== 0) return; pok(e); });
|
|
div_root.addEventListener('mouseup', function(e) { if(e.button !== 0) return; releas(e); });
|
|
div_root.addEventListener('touchstart', function(e) { pok(e); e.preventDefault(); });
|
|
div_root.addEventListener('touchmove', function(e) { e.preventDefault(); });
|
|
div_root.addEventListener('touchend', function(e) { releas(e); });
|
|
div_root.addEventListener('touchcancel', function(e) { releas(e); });
|
|
</script>
|
|
</body>
|
|
</html>
|