Katamari Damacy Game
About this app
A fun and interactive game where you roll a ball and pick up objects to grow in size and score points.
Katamari Damacy Game Katamari Damacy 🌍 Game Score: 0
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<!DOCTYPE html>
<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 Game</title>
<meta name="description" content="A fun and interactive game where you roll a ball and pick up objects to grow in size and score points.">
<meta name="keywords" content="Game, Interactive, Katamari Damacy, High Score">
<link href="https://fonts.googleapis.com/css2?family=Old+English+Text+MT&display=swap" rel="stylesheet">
<style>
body {
background: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 100%);
font-family: 'Old English Text MT', cursive;
}
#game {
position: relative;
height: 500px;
overflow: hidden;
border: 3px solid #000;
border-radius: 10px;
background: url('https://via.placeholder.com/800x600') no-repeat center;
}
.object {
position: absolute;
width: 10px;
height: 10px;
background-color: #f00;
}
#ball {
position: absolute;
width: 20px;
height: 20px;
background-color: #00f;
}
#score-board {
position: fixed;
top: 10px;
right: 10px;
padding: 10px;
border: 3px solid #000;
border-radius: 10px;
background-color: #fff;
}
</style>
<script>
try {
let score = 0;
let ballSize = 20;
const updateScore = (points) => {
score += points;
document.getElementById('score').innerText = `Score: ${score}`;
ballSize += points;
document.getElementById('ball').style.width = `${ballSize}px`;
document.getElementById('ball').style.height = `${ballSize}px`;
};
const checkCollision = () => {
const objects = document.querySelectorAll('.object');
objects.forEach((object) => {
const rect1 = document.getElementById('ball').getBoundingClientRect();
const rect2 = object.getBoundingClientRect();
const overlap = !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)
if (overlap) {
object.parentNode.removeChild(object);
updateScore(1);
}
});
};
document.addEventListener('DOMContentLoaded', function() {
document.onkeydown = function(e) {
const ball = document.getElementById('ball');
const rect = ball.getBoundingClientRect();
switch (e.keyCode) {
case 37:
ball.style.left = `${rect.left - 10}px`;
break;
case 38:
ball.style.top = `${rect.top - 10}px`;
break;
case 39:
ball.style.left = `${rect.left + 10}px`;
break;
case 40:
ball.style.top = `${rect.top + 10}px`;
break;
}
checkCollision();
};
});
} catch (error) {
throw error;
}
</script>
</head>
<body>
<div id="main-container" class="container">
<h1>Katamari Damacy 🌍 Game</h1>
<div id="game">
<div id="ball"></div>
<!-- Objects will be dynamically added here -->
</div>
<div id="score-board">
<h2 id="score">Score: 0</h2>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!