Arrow Clicker Game
About this app
Click the arrows and score points before the time runs out and Roblox logos rain for infinite points.
Arrow Clicker Game 60 0 ⬆️ ⬇️ ⬅️ ➡️
Related apps
Put this on your site
Source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arrow Clicker Game</title>
<meta name="description" content="Click the arrows and score points before the time runs out and Roblox logos rain for infinite points.">
<meta name="keywords" content="arrow, game, clicker, roblox, timer">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Press Start 2P', cursive;
text-align: center;
background: #f0f0f0;
}
#main-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.arrow {
cursor: pointer;
font-size: 48px;
user-select: none;
}
.score {
margin: 20px;
}
.timer {
margin-bottom: 20px;
}
.rain {
position: fixed;
top: -100px;
animation: rain 2s infinite;
}
@keyframes rain {
0% { top: -100px; }
100% { top: 110%; }
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var score = 0;
var timer = 60;
var rainInterval;
function updateScore() {
$('#score').text(score);
}
function updateTimer() {
$('#timer').text(timer);
if (timer === 0) {
clearInterval(countdownInterval);
clearInterval(rainInterval);
rainRobloxLogos();
}
}
function clickArrow() {
score += 1;
updateScore();
}
function clickRobloxLogo() {
score -= 1;
updateScore();
$(this).remove();
}
function rainRobloxLogos() {
rainInterval = setInterval(function() {
var logo = $('<div class="rain">🔴</div>');
logo.css({
left: Math.random() * $(window).width() + 'px',
transform: 'rotate(' + Math.random() * 360 + 'deg)',
animationDuration: (Math.random() * 3 + 1) + 's'
});
logo.on('click', clickRobloxLogo);
$('body').append(logo);
}, 100);
}
$('.arrow').on('click', clickArrow);
var countdownInterval = setInterval(function() {
timer -= 1;
updateTimer();
}, 1000);
});
</script>
</head>
<body>
<div id="main-container">
<div id="timer" class="timer">60</div>
<div id="score" class="score">0</div>
<div class="arrow" onclick="clickArrow()">⬆️</div>
<div class="arrow" onclick="clickArrow()">⬇️</div>
<div class="arrow" onclick="clickArrow()">⬅️</div>
<div class="arrow" onclick="clickArrow()">➡️</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!