Calculator Tools Calculator Tools
Create

Arrow Clicker Game

Nov 25, 2023

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>