Katamari Damacy Timeless
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>
NEW APPS
These are apps made by the community!