Kitten's Creative Playground
About this app
Join the kitten and horse in a playful GUI adventure!
Kitten's Creative Playground Window Title Window content goes here...
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>Kitten's Creative Playground</title>
<meta name="description" content="Join the kitten and horse in a playful GUI adventure!">
<meta name="keywords" content="HTML, CSS, JavaScript, Kitten, Horse, Interactive, Play, GUI">
<style>
body, html {
height: 100%;
margin: 0;
overflow: hidden;
font-family: 'Comic Neue', cursive;
}
#game-area {
width: 100%;
height: 100%;
position: relative;
background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
overflow: hidden;
}
.character {
width: 50px;
height: 50px;
position: absolute;
bottom: 20px;
}
#kitten {
background: url('https://placekitten.com/50/50') no-repeat center center;
background-size: cover;
}
#horse {
background: url('https://place-horse.com/50-50.html') no-repeat center center;
background-size: cover;
left: -60px; /* Starting off screen */
}
.gui-tool {
position: absolute;
cursor: pointer;
}
.window {
width: 100px;
height: 100px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid black;
}
.window .title-bar {
height: 20px;
background-color: gray;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px;
cursor: move;
}
.window .title-bar .title {
color: white;
font-size: 12px;
margin-left: 4px;
}
.window .content {
padding: 10px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var kitten = document.getElementById('kitten');
var horse = document.getElementById('horse');
var gameArea = document.getElementById('game-area');
var jumpHeight = 100;
var isJumping = false;
var horseFollowDelay = 300;
function moveKitten(direction) {
var left = parseInt(kitten.style.left, 10) || 0;
kitten.style.left = (left + direction * 10) + 'px';
}
function jumpKitten() {
if (isJumping) return;
isJumping = true;
var initialBottom = parseInt(kitten.style.bottom, 10) || 0;
var upInterval = setInterval(function() {
if ((parseInt(kitten.style.bottom, 10) || 0) < initialBottom + jumpHeight) {
kitten.style.bottom = (parseInt(kitten.style.bottom, 10) || 0) + 5 + 'px';
} else {
clearInterval(upInterval);
var downInterval = setInterval(function() {
if ((parseInt(kitten.style.bottom, 10) || 0) > initialBottom) {
kitten.style.bottom = (parseInt(kitten.style.bottom, 10) || 0) - 5 + 'px';
} else {
clearInterval(downInterval);
isJumping = false;
}
}, 10);
}
}, 10);
}
function followKitten() {
setTimeout(function() {
horse.style.left = kitten.style.left;
}, horseFollowDelay);
}
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowRight') {
moveKitten(1);
followKitten();
} else if (event.key === 'ArrowLeft') {
moveKitten(-1);
followKitten();
} else if (event.key === 'ArrowUp') {
jumpKitten();
} else if (event.key === 'ArrowDown') {
// Duck logic can be implemented here if required.
}
});
// Window Dragging Logic
var windows = document.getElementsByClassName('window');
for (var i = 0; i < windows.length; i++) {
dragElement(windows[i]);
}
function dragElement(element) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (element.getElementsByClassName('title-bar')[0]) {
element.getElementsByClassName('title-bar')[0].onmousedown = dragMouseDown;
} else {
element.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
element.style.top = (element.offsetTop - pos2) + "px";
element.style.left = (element.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
});
</script>
<link href="https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap" rel="stylesheet">
</head>
<body>
<div id="game-area">
<div id="kitten" class="character"></div>
<div id="horse" class="character"></div>
</div>
<div class="window">
<div class="title-bar">
<div class="title">Window Title</div>
</div>
<div class="content">
Window content goes here...
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!