模拟养猫
by HyperGecko55228 lines7.6 KB
https://arcadelab.ai/play/game-hypergecko55<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>模拟养猫</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui}
html,body{
width:100%;
height:100%;
overflow:hidden;
background:#e8f6e8;
}
#game{
width:100vw;
height:100vh;
position:relative;
background:radial-gradient(circle, #ecf8ec 0%, #dcf0dc 100%);
background-image:url('https://p3-flow-image-sign.byteimg.com/tos-cn-i-a9rned3rph/63320881059b430c981574834092411c~tplv-a9rned3rph-image.image');
background-size:cover;
background-position:center;
}
.page{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
display:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.page.active{display:flex;}
h1{font-size:46px;color:#428a54;margin-bottom:70px}
.btn{
padding:16px 38px;
background:#82c994;
border:none;
border-radius:32px;
color:#ffffff;
font-size:22px;
cursor:pointer;
transition: all 0.25s ease;
}
.btn:active{transform:scale(0.95);background:#64b879}
.cat-wrap{
display:flex;
gap:24px;
}
.cat-item{
width:155px;
cursor:pointer;
background:#f3fbf3;
padding:12px;
border-radius:22px;
box-shadow: 0 3px 8px #c2ddc6;
transition:0.2s;
}
.cat-item:active{transform:scale(0.93)}
.cat-item img{width:100%}
.main-cat{
width:230px;
margin:20px 0;
transition: transform .3s;
}
.main-cat.happy{animation: shake 0.4s}
.main-cat.sleep{opacity:0.65;transform: translateY(10px)}
@keyframes shake{
0%,100%{transform:rotate(-4deg)}
50%{transform:rotate(4deg)}
}
.operate-bar{
position:absolute;
bottom: 45px;
width:94%;
display:flex;
gap: 10px;
flex-wrap:wrap;
justify-content:center;
}
.tip{
font-size: 20px;
color:#326b40;
padding: 0 15px;
text-align:center;
min-height:32px;
}
.cat-house{
width:140px;
margin-top:15px;
display:none;
}
.bubble{
background:#ffffff;
border-radius:20px;
padding:6px 14px;
position:absolute;
top:25%;
font-size:20px;
color:#428a54;
display:none;
}
</style>
</head>
<body>
<div id="game">
<audio id="meowSound" preload="auto">
<source src="https://assets.mixkit.co/sfx/preview/mixkit-cat-meow-1344.mp3" type="audio/mpeg">
<div id="page-home" class="page active">
<h1>模拟养猫</h1>
<button class="btn" onclick="goSelect()">开始选猫</button>
</div>
<div id="page-select" class="page">
<p class="tip">选择一只小猫带回家</p>
<div class="cat-wrap">
<div class="cat-item" onclick="pickCat(0)">
<img alt="白猫1" src="https://p3-flow-image-sign.byteimg.com/tos-cn-i-a9rned3rph/30221000389c4148a1f0224143020151~tplv-a9rned3rph-image.image">
</div>
<div class="cat-item" onclick="pickCat(1)">
<img alt="白猫2" src="https://p3-flow-image-sign.byteimg.com/tos-cn-i-a9rned3rph/58063f2136544438a355581133179151~tplv-a9rned3rph-image.image">
</div>
</div>
</div>
<div id="page-pet" class="page">
<p id="msgTip" class="tip">欢迎和小猫玩耍！</p>
<div id="petCat" class="main-cat">
<img id="catImg" width="100%">
</div>
<div id="meowBubble" class="bubble">喵~</div>
<img id="houseImg" class="cat-house" alt="小窝" src="https://p9-flow-image-sign.byteimg.com/tos-cn-i-a9rned3rph/89540013235c4252a0a3707514432476~tplv-a9rned3rph-image.image">
<div class="operate-bar">
<button class="btn" onclick="feedFood()">喂猫粮</button>
<button class="btn" onclick="makeNest()">搭建小窝</button>
<button class="btn" onclick="playStick()">逗猫棒玩耍</button>
<button class="btn" onclick="catSleep()">让小猫睡觉</button>
<button class="btn" onclick="feedFish()">投喂小鱼干</button>
</div>
</div>
</div>
<script>
let selected = 0;
let isSleeping = false;
const catSrcs = [
"https://p3-flow-image-sign.byteimg.com/tos-cn-i-a9rned3rph/30221000389c4148a1f0224143020151~tplv-a9rned3rph-image.image",
"https://p3-flow-image-sign.byteimg.com/tos-cn-i-a9rned3rph/58063f2136544438a355581133179151~tplv-a9rned3rph-image.image"
];
const tipDom = document.getElementById('msgTip');
const petCatDom = document.getElementById('petCat');
const catImgDom = document.getElementById('catImg');
const houseDom = document.getElementById('houseImg');
const bubbleDom = document.getElementById('meowBubble');
const audioDom = document.getElementById('meowSound');
function playMeow(){
audioDom.currentTime = 0;
audioDom.play().catch(e=>{})
}
function showMeow(text){
bubbleDom.innerText = text;
bubbleDom.style.display="block";
playMeow();
setTimeout(()=>{bubbleDom.style.display="none"},700)
}
function hideAllPage(){
document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'))
}
function goSelect(){
hideAllPage();
document.getElementById('page-select').classList.add('active')
}
function pickCat(idx){
selected = idx;
catImgDom.src = catSrcs[idx];
hideAllPage();
document.getElementById('page-pet').classList.add('active');
tipDom.innerText = "小猫来到你家啦！"
isSleeping=false;
}
function feedFood(){
if(isSleeping){
tipDom.innerText="小猫正在睡觉，不要打扰它";
return;
}
petCatDom.classList.add('happy');
tipDom.innerText = "小猫开心晃动身体，喵喵~";
showMeow("喵呜！");
setTimeout(()=>petCatDom.classList.remove('happy'), 450)
}
function makeNest(){
houseDom.style.display = "block";
tipDom.innerText = "你给小猫做好了暖暖的小窝";
}
function playStick(){
if(isSleeping){
tipDom.innerText="小猫正在睡觉，不要打扰它";
return;
}
petCatDom.classList.add('happy');
tipDom.innerText = "小猫追着逗猫棒蹦蹦跳跳！";
showMeow("喵~");
setTimeout(()=>petCatDom.classList.remove('happy'), 450)
}
function catSleep(){
if(houseDom.style.display !== 'block'){
tipDom.innerText = "先搭建小窝哦！";
return;
}
petCatDom.classList.add('sleep');
tipDom.innerText = "小猫蜷进窝里呼呼睡觉💤";
isSleeping=true;
}
function feedFish(){
if(!isSleeping){
tipDom.innerText="小猫还没睡觉呢，先哄它睡一会";
return;
}
petCatDom.classList.remove('sleep');
petCatDom.classList.add('happy');
tipDom.innerText = "小猫睡醒吃到小鱼干，过来蹭蹭你的手，喵喵！";
showMeow("喵喵🥰");
isSleeping=false;
setTimeout(()=>petCatDom.classList.remove('happy'),500)
}
</script>
</body>
</html>Game Source: 模拟养猫
Creator: HyperGecko55
Libraries: none
Complexity: complex (228 lines, 7.6 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-hypergecko55" to link back to the original. Then publish at arcadelab.ai/publish.