<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>NEKO LIFE</title>
<style>
*{box-sizing:border-box}
body{margin:0;background:#100d20;color:#fff;font-family:system-ui,sans-serif;text-align:center}
header{padding:18px;color:#bda1ff;font-size:25px;font-weight:900;letter-spacing:3px}
main{max-width:440px;margin:auto;padding:12px}
.card{background:linear-gradient(145deg,#211a3c,#11152b);border:1px solid #59449b;border-radius:20px;padding:16px;margin-bottom:14px;box-shadow:0 0 20px #4620a422}
#pet{font-size:100px;line-height:1.5;filter:drop-shadow(0 0 18px #a77aff)}
#petname{font-size:23px;font-weight:bold;color:#d8c6ff}
#level{color:#7ceaff}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:#15152e;padding:10px;border-radius:12px;text-align:left;font-size:13px}
.bar{height:9px;background:#38334f;border-radius:9px;margin-top:7px;overflow:hidden}
.fill{height:100%;width:50%;background:linear-gradient(90deg,#8d5bff,#39e6ff);transition:width .2s}
button{border:0;border-radius:12px;background:linear-gradient(110deg,#7544ee,#3268ff);color:white;font-size:15px;font-weight:bold;padding:14px 8px;cursor:pointer}
button:active{transform:scale(.96)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.actions button{min-height:65px}
.sub{background:#27213e}
#msg{color:#8fe9ff;min-height:25px}
small{color:#aaa}
</style>
</head>
<body>
<header>โฆ NEKO LIFE โฆ</header>
<main>
<div class="card">
<div id="pet">๐ฑ</div>
<div id="petname">ใซใ</div>
<div id="level">Lv. 1 ยท ใใญใ</div>
<p id="msg">ใซใใผ๏ผใใฃใใใซๆฎใใใ๏ผ</p>
<div class="stats">
<div class="stat">๐ ใใชใ <b id="foodN">80</b>
<div class="bar"><div class="fill" id="foodB"></div></div>
</div>
<div class="stat">๐ ใใใใ <b id="happyN">80</b>
<div class="bar"><div class="fill" id="happyB"></div></div>
</div>
<div class="stat">โก ๅ
ๆฐ <b id="energyN">80</b>
<div class="bar"><div class="fill" id="energyB"></div></div>
</div>
<div class="stat">๐ ใชใคใๅบฆ <b id="loveN">0</b>
<div class="bar"><div class="fill" id="loveB"></div></div>
</div>
</div>
</div>
<div class="card">
<div class="stats">
<div>๐ช ใณใคใณ<br><b id="coins">50</b></div>
<div>โจ ็ต้จๅค<br><b id="xp">0 / 100</b></div>
</div>
</div>
<div class="card">
<h3>๐พ ใใใใใใ</h3>
<div class="actions">
<button onclick="act('food')">๐ ใใฏใ<br>็กๆ</button>
<button onclick="act('play')">๐พ ใใใถ<br>็กๆ</button>
<button onclick="act('sleep')">๐ค ใใฒใใญ<br>็กๆ</button>
<button onclick="act('love')">๐ ใชใงใ<br>็กๆ</button>
<button onclick="act('toy')">๐งธ ใใใกใ<br>30ใณใคใณ</button>
<button onclick="act('treat')">๐ฐ ใใใค<br>20ใณใคใณ</button>
</div>
</div>
<div class="card">
<h3>๐ต ใตใฆใณใ</h3>
<button id="musicBtn" onclick="toggleMusic()">๐ BGMใๅ็</button>
<button class="sub" onclick="sound=!sound;this.textContent=sound?'๐ ๅนๆ้ณ ON':'๐ ๅนๆ้ณ OFF'">๐ ๅนๆ้ณ ON</button>
<p><small>ๆๅใซBGMใใฟใณใๆผใใจ้ณใๆตใใใ</small></p>
</div>
<div class="card">
<h3>๐พ ใใผใฟ</h3>
<button class="sub" onclick="save()">ใปใผใใใ</button>
<button class="sub" onclick="load()">ใญใผใใใ</button>
<button class="sub" onclick="renamePet()">ๅๅใๅคใใ</button>
<button class="sub" onclick="location.reload()">็ป้ขใๆดๆฐ</button>
</div>
<small>NEKO LIFE ยท PET SIMULATOR</small>
</main>
<script>
const $=id=>document.getElementById(id);
let s={name:'ใซใ',lv:1,food:80,happy:80,energy:80,love:0,coins:50,xp:0};
let sound=true,audio=null,music=false,timer=null,step=0;
function tone(f,d=.14,v=.06){
if(!sound||!audio)return;
let o=audio.createOscillator(),g=audio.createGain();
o.type='sine';o.frequency.value=f;
g.gain.setValueAtTime(v,audio.currentTime);
g.gain.exponentialRampToValueAtTime(.001,audio.currentTime+d);
o.connect(g);g.connect(audio.destination);o.start();o.stop(audio.currentTime+d);
}
function toggleMusic(){
if(!audio)audio=new(window.AudioContext||window.webkitAudioContext)();
audio.resume();
music=!music;
$('musicBtn').textContent=music?'๐ BGMๅ็ไธญ๏ผๅๆญข๏ผ':'๐ BGMใๅ็';
if(timer){clearInterval(timer);timer=null}
if(music){
let melody=[523,659,784,659,587,698,880,698,523,659,784,1046,784,659,587,392];
step=0;
timer=setInterval(()=>{
if(!music)return;
tone(melody[step%melody.length],.23,.035);
if(step%4===0)tone(130,.12,.018);
step++;
},260);
}
}
function act(a){
let msg='',gain=0;
if(a==='food'){
if(s.food>=100)return say('ใใชใใใฃใฑใใ ใ๏ผ');
s.food=Math.min(100,s.food+25);s.coins+=2;gain=10;msg='ใใใใใใใใใ๏ผ ๐';
}
if(a==='play'){
if(s.energy<15)return say('ใญใใใโฆๅ
ใซไผใพใใฆใญ');
s.happy=Math.min(100,s.happy+15);s.energy-=15;s.food=Math.max(0,s.food-8);s.coins+=5;gain=20;msg='ใซใใฃ๏ผใใฎใใ๏ผ ๐พ';
}
if(a==='sleep'){
s.energy=Math.min(100,s.energy+35);s.food=Math.max(0,s.food-5);gain=8;msg='ใใใใโฆ๐ค';
}
if(a==='love'){
s.love=Math.min(100,s.love+8);s.happy=Math.min(100,s.happy+5);gain=10;msg='ใดใญใดใญโฆใ ใใใ๏ผ ๐';
}
if(a==='toy'||a==='treat'){
let cost=a==='toy'?30:20;
if(s.coins<cost)return say('ใณใคใณใ่ถณใใชใใ๏ผ');
s.coins-=cost;
if(a==='toy'){s.happy=Math.min(100,s.happy+30);s.love=Math.min(100,s.love+5);gain=25;msg='ๆฐใใใใใกใใ ๏ผ ๐งธ'}
else{s.food=Math.min(100,s.food+15);s.happy=Math.min(100,s.happy+10);gain=15;msg='ใใพใใฆใใใใ๏ผ ๐ฐ'}
}
s.xp+=gain;
while(s.xp>=100){s.xp-=100;s.lv++;s.coins+=30;msg='๐ ใฌใใซใขใใ๏ผ 30ใณใคใณ็ฒๅพ๏ผ'}
tone(a==='sleep'?392:660);
say(msg);render();
}
function say(m){$('msg').textContent=m}
function render(){
for(let k of ['food','happy','energy','love']){
$(k+'N').textContent=s[k];
$(k+'B').style.width=s[k]+'%';
}
$('petname').textContent=s.name;
$('level').textContent='Lv. '+s.lv+' ยท '+(s.lv<5?'ใใญใ':s.lv<10?'ใใจใชใฎใญใ':'ไผ่ชฌใฎใญใ');
$('pet').textContent=s.lv>=10?'๐โโฌ':s.lv>=5?'๐บ':'๐ฑ';
$('coins').textContent=s.coins;
$('xp').textContent=s.xp+' / 100';
}
function save(){
try{localStorage.setItem('nekoLifeSave',JSON.stringify(s));say('๐พ ใปใผใใใใ๏ผ')}
catch(e){say('ไฟๅญใงใใชใ็ฐๅขใ ใใ็ป้ขใ้ใใชใใงใญ')}
}
function load(){
try{
let d=localStorage.getItem('nekoLifeSave');
if(!d)return say('ใปใผใใใผใฟใใชใใ');
s={...s,...JSON.parse(d)};render();say('๐พ ใใผใฟใใญใผใใใใ๏ผ')
}catch(e){say('ใญใผใใงใใชใใฃใใ')}
}
function renamePet(){
let n=prompt('ๆฐใใๅๅใๅ
ฅๅใใฆใญ',s.name);
if(n&&n.trim()){s.name=n.trim().slice(0,12);render();say('ๅๅใๅคๆดใใใ๏ผ')}
}
render();
setInterval(()=>{
if(s.food>0)s.food=Math.max(0,s.food-1);
if(s.food===0)s.happy=Math.max(0,s.happy-1);
render();
},60000);
</script>
</body>
</html>