Calculator Tools Calculator Tools
Create

Katamari Damacy Timeless

Nov 12, 2023

About this app

Play Katamari Damacy Timeless! Grab all objects, grow your ball to the universe size and beat the high score!

Katamari Damacy Timeless Score: 0

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Katamari Damacy Timeless</title>
<meta name="description" content="Play Katamari Damacy Timeless! Grab all objects, grow your ball to the universe size and beat the high score!">
<meta name="keywords" content="Katamari Damacy, Game, Fun, High Score, Universe">

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Old+English+Text+MT|Permanent+Marker|Pacifico|Monoton|Lobster|Kaushan+Script'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script type="text/javascript">
try {
var score = 0;
var ballSize = 10;
var maxBallSize = 884;
var gameObjects = [];
var gameObjectCount = 26;
var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split('');
var fonts = ["Old English Text MT", "Permanent Marker", "Pacifico", "Monoton", "Lobster", "Kaushan Script"];
var ball;

function createGameObject(letter, font, x, y) {
var div = document.createElement('div');
div.textContent = letter;
div.style.position = 'absolute';
div.style.left = x + 'px';
div.style.top = y + 'px';
div.style.fontFamily = font;
div.style.fontSize = '20px';
div.classList.add('game-object');
return div;
}

function updateScore() {
document.getElementById('score').textContent = "Score: " + score;
}

function checkCollision(obj) {
var rect1 = ball.getBoundingClientRect();
var rect2 = obj.getBoundingClientRect();
return !(rect2.left > rect1.right ||
rect2.right < rect1.left ||
rect2.top > rect1.bottom ||
rect2.bottom < rect1.top);
}

function gameLoop() {
gameObjects.forEach(function(obj, i) {
if (checkCollision(obj)) {
obj.remove();
gameObjects.splice(i, 1);
score++;
ballSize++;
ball.style.width = ball.style.height = ballSize + 'px';
updateScore();
}
});

if (gameObjects.length === 0) {
alert("You've eaten the entire universe! Final Score: " + score);
}
}

document.addEventListener("DOMContentLoaded", function() {
ball = document.getElementById('ball');
for (var i = 0; i < gameObjectCount; i++) {
var x = Math.random() * window.innerWidth;
var y = Math.random() * window.innerHeight;
var obj = createGameObject(letters[i % 26], fonts[i % 6], x, y);
gameObjects.push(obj);
document.body.appendChild(obj);
}

window.setInterval(gameLoop, 100);

window.addEventListener('keydown', function(e) {
switch(e.key) {
case 'ArrowUp': ball.style.top = (parseInt(ball.style.top) - 10) + 'px'; break;
case 'ArrowDown': ball.style.top = (parseInt(ball.style.top) + 10) + 'px'; break;
case 'ArrowLeft': ball.style.left = (parseInt(ball.style.left) - 10) + 'px'; break;
case 'ArrowRight': ball.style.left = (parseInt(ball.style.left) + 10) + 'px'; break;
}
});
});

} catch (error) {
throw error;
}
</script>

<style>
#ball {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background-color: #FF00FF;
border-radius: 50%;
}

.game-object {
color: #0000FF;
background-color: #FFFF00;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 id="score">Score: 0</h1>
<div id="ball"></div>
</div>
</body>
</html>