Kitten Adventure
About this app
Join the kitten and its horse sidekick on an adventure with free play mode in a world of Windows 95-inspired objects.
Kitten Adventure 🐱 🐴 Setup detected a disk in your floppy disk drive. Please remove all disks from floppy disk drives. Click OK to restart your computer.
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 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>Kitten Adventure</title>
<meta name="description" content="Join the kitten and its horse sidekick on an adventure with free play mode in a world of Windows 95-inspired objects.">
<meta name="keywords" content="kitten, horse, adventure, game, play, sidekick, interactive, Windows 95, HTML5">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script type="text/javascript">
var kitten, horse, pups, scene;
var keys = {};
$(function () {
// Preload images
var imagesToLoad = [
'kitten.png',
'horse.png'
];
$(imagesToLoad).each(function () {
$('<img>').attr('src', this).appendTo('body').css('display', 'none');
});
kitten = {
x: 100,
y: 300,
width: 50,
height: 50,
velX: 0,
velY: 0,
speed: 3,
jumping: false,
ducking: false,
element: $('#kitten')
};
horse = {
x: 50,
y: 300,
width: 100,
height: 100,
followDistance: 100,
element: $('#horse')
};
pups = [];
for (var i = 0; i < 8; i++) {
pups.push({
x: 200 + i * 60,
y: 300,
width: 30,
height: 30,
element: $('<div class="pup">🐾</div>').appendTo('#scene')
});
}
scene = $('#scene');
$(window).keydown(function (e) {
keys[e.keyCode] = true;
});
$(window).keyup(function (e) {
keys[e.keyCode] = false;
});
gameLoop();
});
function gameLoop() {
requestAnimationFrame(gameLoop);
if (keys[37]) { // Left arrow
kitten.velX = -kitten.speed;
} else if (keys[39]) { // Right arrow
kitten.velX = kitten.speed;
} else {
kitten.velX = 0;
}
if (keys[38] && !kitten.jumping) { // Up arrow
kitten.jumping = true;
kitten.velY = -kitten.speed * 2;
}
if (keys[40]) { // Down arrow
kitten.ducking = true;
} else {
kitten.ducking = false;
}
kitten.y += kitten.velY;
kitten.x += kitten.velX;
if (kitten.y >= 300) {
kitten.y = 300;
kitten.jumping = false;
kitten.velY = 0;
} else {
kitten.velY += 0.5; // Gravity
}
// Horse follows kitten
if (kitten.x > horse.x + horse.followDistance) {
horse.x += 2;
} else if (kitten.x < horse.x - horse.followDistance) {
horse.x -= 2;
}
// Update positions
kitten.element.css({ left: kitten.x, top: kitten.y });
horse.element.css({ left: horse.x, top: horse.y });
pups.forEach(function (pup) {
pup.element.css({ left: pup.x, top: pup.y });
});
}
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Indie Flower', cursive;
background: #a9d9ff;
}
#scene {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.character, .pup {
position: absolute;
user-select: none;
}
#kitten {
width: 50px;
height: 50px;
background: url('kitten.png') no-repeat center center;
background-size: cover;
}
#horse {
width: 100px;
height: 100px;
background: url('horse.png') no-repeat center center;
background-size: cover;
}
.pup {
width: 30px;
height: 30px;
font-size: 30px;
text-align: center;
}
.window-tab {
position: absolute;
top: 50px;
left: 50px;
width: 400px;
height: 200px;
background-color: #f1f1f1;
border: 1px solid #000;
padding: 20px;
cursor: pointer;
}
.window-tab:hover {
background-color: #e1e1e1;
}
.window-tab.climbable {
cursor: pointer;
}
.window-tab.climbing {
animation: climb 1s infinite alternate;
}
@keyframes climb {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
</style>
</head>
<body>
<div id="scene">
<div id="kitten" class="character">🐱</div>
<div id="horse" class="character">🐴</div>
<!-- Pups are added dynamically -->
<div id="windowTab" class="window-tab climbable">Setup detected a disk in your floppy disk drive. Please remove all disks from floppy disk drives. Click OK to restart your computer.</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!