4 models have responded to the "Tamagotchi Virtual Pet" challenge. Compare their approaches side-by-side on Rival. This response is part of Rival's open dataset of 5,600+ AI model responses.
Tamagotchi Virtual Pet
Bert Nebulon Alpha's response to the 'Tamagotchi Virtual Pet' challenge.
Bert-Nebulon Alpha
November 24, 2025
Website
?Prompt
Create the HTML, CSS, and JavaScript for an interactive virtual pet simulation. Feel free to be creative with the pet's form (minimalist, abstract, etc.), its needs, and interactions. Provide visual feedback for actions and state changes. Store the pet's state in localStorage. The entire application must be a single-page self-contained HTML file.
Response
Couldn’t render this one. It’s giving abstract art.
This model didn’t return a displayable web page. Classic overachiever move.
View raw output
# Virtual Pet Simulation - "Nebula"
Here's a complete, self-contained virtual pet simulation in a single HTML file. This features an abstract "Nebula" pet with visual feedback, multiple needs, and localStorage persistence.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nebula - Virtual Pet</title>
<style>
:root {
--happy-color: #6ee7b7;
--hungry-color: #fbbf24;
--bored-color: #93c5fd;
--sick-color: #f87171;
--tired-color: #a78bfa;
--neutral-color: #d1d5db;
--background: #111827;
--text: #f9fafb;
--panel: #1f2937;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--background);
color: var(--text);
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
transition: background-color 0.5s ease;
}
h1 {
margin-bottom: 10px;
font-size: 2.5rem;
background: linear-gradient(90deg, var(--happy-color), var(--bored-color));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.pet-container {
position: relative;
width: 300px;
height: 300px;
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
}
.pet {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
background: radial-gradient(circle at 30% 30%, rgba(100, 200, 255, 0.8) 0%, rgba(50, 100, 200, 0.6) 50%, transparent 70%);
box-shadow: 0 0 50px rgba(100, 200, 255, 0.3);
transition: all 0.5s ease;
overflow: hidden;
}
.pet::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 70% 70%, rgba(255, 100, 200, 0.6) 0%, transparent 50%);
mix-blend-mode: screen;
}
.pet::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 30%);
border-radius: 50%;
}
.pet.happy {
transform: scale(1.05);
box-shadow: 0 0 60px rgba(110, 231, 183, 0.5);
}
.pet.hungry {
background: radial-gradient(circle at 30% 30%, rgba(251, 191, 36, 0.8) 0%, rgba(200, 100, 50, 0.6) 50%, transparent 70%);
box-shadow: 0 0 50px rgba(251, 191, 36, 0.3);
}
.pet.bored {
background: radial-gradient(circle at 30% 30%, rgba(147, 197, 253, 0.8) 0%, rgba(50, 100, 200, 0.4) 50%, transparent 70%);
animation: float 3s ease-in-out infinite;
}
.pet.sick {
background: radial-gradient(circle at 30% 30%, rgba(248, 113, 113, 0.8) 0%, rgba(200, 50, 50, 0.6) 50%, transparent 70%);
box-shadow: 0 0 50px rgba(248, 113, 113, 0.3);
transform: scale(0.95);
}
.pet.tired {
background: radial-gradient(circle at 30% 30%, rgba(167, 139, 250, 0.8) 0%, rgba(100, 50, 200, 0.6) 50%, transparent 70%);
box-shadow: 0 0 30px rgba(167, 139, 250, 0.2);
opacity: 0.8;
}
.pet.dead {
background: radial-gradient(circle at 30% 30%, rgba(100, 100, 100, 0.8) 0%, rgba(50, 50, 50, 0.6) 50%, transparent 70%);
box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);
opacity: 0.5;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.needs {
display: flex;
justify-content: space-around;
width: 100%;
max-width: 400px;
margin: 20px 0;
}
.need {
display: flex;
flex-direction: column;
align-items: center;
width: 80px;
}
.need-icon {
width: 40px;
height: 40px;
margin-bottom: 5px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.hunger-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fbbf24'%3E%3Cpath d='M12 2C8.686 2 6 4.686 6 8c0 4.411 6 12 6 12s6-7.589 6-12c0-3.314-2.686-6-6-6zm0 8c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z'/%3E%3C/svg%3E"); }
.happiness-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236ee7b7'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E"); }
.energy-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a78bfa'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E"); }
.health-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f87171'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E"); }
.boredom-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2393c5fd'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v2h-2zm0 4h2v6h-2z'/%3E%3C/svg%3E"); }
.need-meter {
width: 100%;
height: 10px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 5px;
overflow: hidden;
}
.need-fill {
height: 100%;
border-radius: 5px;
transition: width 0.5s ease, background-color 0.5s ease;
}
.actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 20px 0;
max-width: 400px;
}
button {
background-color: var(--panel);
color: var(--text);
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 5px;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
button:active {
transform: translateY(0);
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.action-icon {
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.feed-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fbbf24'%3E%3Cpath d='M8.1 13.34l2.83-2.83L3.91 3.5c-1.56 1.56-1.56 4.09 0 5.66l4.19 4.18zm6.78-1.81c1.53.71 3.68.21 5.27-1.38 1.91-1.91 2.28-4.65.81-6.12-1.46-1.46-4.20-1.10-6.12.81-1.59 1.59-2.09 3.74-1.38 5.27L3.7 19.87l1.41 1.41L12 14.41l6.88 6.88 1.41-1.41L13.41 13l1.47-1.47z'/%3E%3C/svg%3E"); }
.play-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2393c5fd'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l5.19-3.46L10 8.46V7l5 3.5-5 3.5v-1.54z'/%3E%3C/svg%3E"); }
.heal-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f87171'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E"); }
.sleep-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a78bfa'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E"); }
.clean-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236ee7b7'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3zm-5-2c0 2.21 1.79 4 4 4s4-1.79 4-4-1.79-4-4-4-4 1.79-4 4z'/%3E%3C/svg%3E"); }
.status {
margin: 10px 0;
padding: 10px;
border-radius: 5px;
background-color: var(--panel);
width: 100%;
max-width: 400px;
text-align: center;
min-height: 24px;
}
.particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.particle {
position: absolute;
border-radius: 50%;
opacity: 0;
pointer-events: none;
}
.age {
font-size: 0.9rem;
color: var(--neutral-color);
margin-top: 10px;
}
.reset-btn {
margin-top: 20px;
background-color: #ef4444;
}
.reset-btn:hover {
background-color: #dc2626;
}
.hidden {
display: none;
}
@media (max-width: 480px) {
.pet-container {
width: 250px;
height: 250px;
}
.pet {
width: 160px;
height: 160px;
}
.needs {
flex-direction: column;
align-items: center;
}
.need {
width: 100%;
margin: 5px 0;
}
}
</style>
</head>
<body>
<h1>Nebula</h1>
<div class="age">Age: <span id="age-display">0</span> days</div>
<div class="pet-container">
<div class="pet" id="pet">
<div class="particles" id="particles"></div>
</div>
</div>
<div class="status" id="status">Nebula is waiting for you...</div>
<div class="needs">
<div class="need">
<div class="need-icon hunger-icon"></div>
<div class="need-meter">
<div class="need-fill" id="hunger-fill"></div>
</div>
</div>
<div class="need">
<div class="need-icon happiness-icon"></div>
<div class="need-meter">
<div class="need-fill" id="happiness-fill"></div>
</div>
</div>
<div class="need">
<div class="need-icon energy-icon"></div>
<div class="need-meter">
<div class="need-fill" id="energy-fill"></div>
</div>
</div>
<div class="need">
<div class="need-icon health-icon"></div>
<div class="need-meter">
<div class="need-fill" id="health-fill"></div>
</div>
</div>
<div class="need">
<div class="need-icon boredom-icon"></div>
<div class="need-meter">
<div class="need-fill" id="boredom-fill"></div>
</div>
</div>
</div>
<div class="actions">
<button id="feed-btn">
<div class="action-icon feed-icon"></div>
Feed
</button>
<button id="play-btn">
<div class="action-icon play-icon"></div>
Play
</button>
<button id="heal-btn">
<div class="action-icon heal-icon"></div>
Heal
</button>
<button id="sleep-btn">
<div class="action-icon sleep-icon"></div>
Sleep
</button>
<button id="clean-btn">
<div class="action-icon clean-icon"></div>
Clean
</button>
</div>
<button id="reset-btn" class="reset-btn">Reset Game</button>
<script>
// Game state
const defaultState = {
hunger: 50,
happiness: 80,
energy: 80,
health: 100,
boredom: 30,
lastUpdate: Date.now(),
age: 0,
isDead: false,
isSleeping: false
};
let gameState = {...defaultState};
let gameInterval;
let ageInterval;
let particleInterval;
// DOM elements
const petElement = document.getElementById('pet');
const statusElement = document.getElementById('status');
const ageDisplay = document.getElementById('age-display');
const particlesContainer = document.getElementById('particles');
// Need fills
const needFills = {
hunger: document.getElementById('hunger-fill'),
happiness: document.getElementById('happiness-fill'),
energy: document.getElementById('energy-fill'),
health: document.getElementById('health-fill'),
boredom: document.getElementById('boredom-fill')
};
// Buttons
const buttons = {
feed: document.getElementById('feed-btn'),
play: document.getElementById('play-btn'),
heal: document.getElementById('heal-btn'),
sleep: document.getElementById('sleep-btn'),
clean: document.getElementById('clean-btn'),
reset: document.getElementById('reset-btn')
};
// Initialize the game
function initGame() {
loadGame();
updatePetAppearance();
updateNeedMeters();
updateButtons();
// Start game loop
gameInterval = setInterval(gameLoop, 1000);
ageInterval = setInterval(updateAge, 60000); // 1 minute = 1 day
particleInterval = setInterval(createParticles, 200);
// Set up event listeners
buttons.feed.addEventListener('click', () => feedPet());
buttons.play.addEventListener('click', () => playWithPet());
buttons.heal.addEventListener('click', () => healPet());
buttons.sleep.addEventListener('click', () => toggleSleep());
buttons.clean.addEventListener('click', () => cleanPet());
buttons.reset.addEventListener('click', () => resetGame());
// Initial status update
updateStatus();
}
// Game loop
function gameLoop() {
if (gameState.isDead) return;
const now = Date.now();
const timePassed = now - gameState.lastUpdate;
gameState.lastUpdate = now;
// Decrease needs over time
const decayRate = timePassed / 1000; // Convert to seconds
// Hunger increases over time
gameState.hunger = Math.min(100, gameState.hunger + decayRate * 0.5);
// Boredom increases over time
gameState.boredom = Math.min(100, gameState.boredom + decayRate * 0.3);
// Energy decreases over time (unless sleeping)
if (!gameState.isSleeping) {
gameState.energy = Math.max(0, gameState.energy - decayRate * 0.2);
} else {
// Energy recovers while sleeping
gameState.energy = Math.min(100, gameState.energy + decayRate * 0.8);
}
// Health decreases if needs are too low
if (gameState.hunger > 80 || gameState.boredom > 80 || gameState.energy < 20) {
gameState.health = Math.max(0, gameState.health - decayRate * 0.1);
}
// Happiness decreases if needs are not met
if (gameState.hunger > 60 || gameState.boredom > 60 || gameState.energy < 40) {
gameState.happiness = Math.max(0, gameState.happiness - decayRate * 0.2);
}
// Check if pet died
if (gameState.health <= 0 || gameState.hunger >= 100 || gameState.boredom >= 100) {
gameState.isDead = true;
gameState.happiness = 0;
gameState.health = 0;
clearInterval(gameInterval);
clearInterval(ageInterval);
clearInterval(particleInterval);
updateStatus();
}
updatePetAppearance();
updateNeedMeters();
updateButtons();
saveGame();
}
// Update pet's appearance based on state
function updatePetAppearance() {
// Reset all classes
petElement.className = 'pet';
if (gameState.isDead) {
petElement.classList.add('dead');
return;
}
// Determine primary state
if (gameState.health < 30) {
petElement.classList.add('sick');
} else if (gameState.hunger > 70) {
petElement.classList.add('hungry');
} else if (gameState.boredom > 70) {
petElement.classList.add('bored');
} else if (gameState.energy < 30) {
petElement.classList.add('tired');
} else if (gameState.happiness > 70) {
petElement.classList.add('happy');
}
if (gameState.isSleeping) {
petElement.classList.add('tired');
}
}
// Update need meters
function updateNeedMeters() {
for (const [need, fill] of Object.entries(needFills)) {
const value = gameState[need];
fill.style.width = `${value}%`;
// Set color based on value
if (value > 80) {
fill.style.backgroundColor = `var(--${need === 'happiness' ? 'happy' : need}-color)`;
} else if (value > 60) {
fill.style.backgroundColor = `color-mix(in srgb, var(--${need === 'happiness' ? 'happy' : need}-color) 70%, var(--neutral-color))`;
} else if (value > 40) {
fill.style.backgroundColor = `color-mix(in srgb, var(--${need === 'happiness' ? 'happy' : need}-color) 40%, var(--neutral-color))`;
} else {
fill.style.backgroundColor = 'var(--neutral-color)';
}
}
}
// Update button states
function updateButtons() {
buttons.feed.disabled = gameState.isDead || gameState.isSleeping;
buttons.play.disabled = gameState.isDead || gameState.isSleeping || gameState.energy < 20;
buttons.heal.disabled = gameState.isDead || gameState.health >= 100;
buttons.sleep.disabled = gameState.isDead;
buttons.clean.disabled = gameState.isDead || gameState.isSleeping;
if (gameState.isSleeping) {
buttons.sleep.textContent = 'Wake Up';
buttons.sleep.queryTamagotchi Virtual Pet
About Bert-Nebulon Alpha
Capabilities
ConversationReasoningAnalysis
Categories
TextCodeMultimodal
Specifications
- Provider
- Openrouter
- Released
- 2025-11-24
- Size
- LARGE
