858 lines
23 KiB
HTML
858 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-Hant">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>電子寵物 - 頭後方 ZZZ / 💀 + 墓碑</title>
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
background: radial-gradient(circle at top, #ffe8c7, #f5c7c7);
|
||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
}
|
||
|
||
/* 外殼 */
|
||
.device {
|
||
width: 280px;
|
||
height: 340px;
|
||
border-radius: 60% 60% 55% 55%;
|
||
background: radial-gradient(circle at 30% 0%, #ffe7ff, #ffc6f1);
|
||
box-shadow:
|
||
0 18px 40px rgba(0, 0, 0, 0.35),
|
||
inset 0 4px 10px rgba(255, 255, 255, 0.8);
|
||
padding-top: 38px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 18px;
|
||
}
|
||
|
||
.device-title {
|
||
font-size: 14px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: #333;
|
||
}
|
||
|
||
.screen-wrapper {
|
||
width: 210px;
|
||
height: 160px;
|
||
border-radius: 18px;
|
||
background: #888;
|
||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
|
||
padding: 6px;
|
||
}
|
||
|
||
.screen {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10px;
|
||
background: #c3e4aa;
|
||
overflow: hidden;
|
||
box-shadow:
|
||
inset 0 0 0 2px rgba(0, 0, 0, 0.25),
|
||
inset 0 0 10px rgba(0, 0, 0, 0.35);
|
||
}
|
||
|
||
/* LCD 格線 */
|
||
.screen::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
|
||
background-size: 3px 3px;
|
||
opacity: 0.55;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.buttons {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.btn {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle at 30% 20%, #fff8e7, #f3a3af);
|
||
box-shadow:
|
||
0 4px 0 #c26c7a,
|
||
0 4px 8px rgba(0, 0, 0, 0.35);
|
||
}
|
||
|
||
/* 狀態切換按鈕（Demo 用） */
|
||
.state-controls {
|
||
display: flex;
|
||
gap: 8px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.state-controls button {
|
||
padding: 4px 10px;
|
||
border-radius: 999px;
|
||
border: none;
|
||
cursor: pointer;
|
||
background: #ffffffaa;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.state-controls button.active {
|
||
background: #ffb3c6;
|
||
}
|
||
|
||
/* ---------------- 通用寵物 sprite ---------------- */
|
||
|
||
.pet-root {
|
||
position: absolute;
|
||
transform-origin: center bottom;
|
||
}
|
||
|
||
.pet-inner {
|
||
position: relative;
|
||
transform-origin: center bottom;
|
||
}
|
||
|
||
.pet-inner.face-right {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.pet-inner.face-left {
|
||
transform: scaleX(-1);
|
||
}
|
||
|
||
.pet-pixel {
|
||
position: absolute;
|
||
}
|
||
|
||
/* ===== 狀態：Idle / Sleep / Sick / Dead（控制小雞） ===== */
|
||
|
||
.state-idle .pet-root {
|
||
animation:
|
||
pet-breathe-idle 2s ease-in-out infinite,
|
||
pet-head-tilt 6s ease-in-out infinite;
|
||
filter: none;
|
||
opacity: 1;
|
||
display: block;
|
||
}
|
||
|
||
.state-sleep .pet-root {
|
||
animation: pet-breathe-sleep 4s ease-in-out infinite;
|
||
filter: none;
|
||
opacity: 1;
|
||
display: block;
|
||
}
|
||
|
||
.state-sick .pet-root {
|
||
animation:
|
||
pet-breathe-idle 2s ease-in-out infinite,
|
||
pet-sick-shake 0.6s ease-in-out infinite;
|
||
filter: brightness(0.8) saturate(0.9);
|
||
opacity: 1;
|
||
display: block;
|
||
}
|
||
|
||
/* Dead：小雞整隻消失，由墓碑取代 */
|
||
.state-dead .pet-root {
|
||
display: none;
|
||
}
|
||
|
||
@keyframes pet-breathe-idle {
|
||
|
||
0%,
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.03);
|
||
}
|
||
}
|
||
|
||
@keyframes pet-breathe-sleep {
|
||
|
||
0%,
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.015);
|
||
}
|
||
}
|
||
|
||
@keyframes pet-head-tilt {
|
||
|
||
0%,
|
||
100% {
|
||
transform: rotate(0deg) scale(1);
|
||
}
|
||
|
||
25% {
|
||
transform: rotate(-2deg) scale(1.02);
|
||
}
|
||
|
||
75% {
|
||
transform: rotate(2deg) scale(1.02);
|
||
}
|
||
}
|
||
|
||
@keyframes pet-sick-shake {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
25% {
|
||
transform: translateX(-2px);
|
||
}
|
||
|
||
75% {
|
||
transform: translateX(2px);
|
||
}
|
||
}
|
||
|
||
/* ===== 尾巴 ===== */
|
||
|
||
.tail-pixel {
|
||
transform-origin: center center;
|
||
}
|
||
|
||
.state-idle .tail-pixel {
|
||
animation: tail-wag-idle 0.5s ease-in-out infinite;
|
||
}
|
||
|
||
.state-sleep .tail-pixel {
|
||
animation: tail-wag-sleep 1.6s ease-in-out infinite;
|
||
}
|
||
|
||
.state-sick .tail-pixel {
|
||
animation: tail-wag-sick 0.7s ease-in-out infinite;
|
||
}
|
||
|
||
.state-dead .tail-pixel {
|
||
animation: none;
|
||
}
|
||
|
||
@keyframes tail-wag-idle {
|
||
0% {
|
||
transform: translateX(0px);
|
||
}
|
||
|
||
50% {
|
||
transform: translateX(1px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0px);
|
||
}
|
||
}
|
||
|
||
@keyframes tail-wag-sleep {
|
||
0% {
|
||
transform: translateX(0px);
|
||
}
|
||
|
||
50% {
|
||
transform: translateX(0.5px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0px);
|
||
}
|
||
}
|
||
|
||
@keyframes tail-wag-sick {
|
||
0% {
|
||
transform: translateX(0px);
|
||
}
|
||
|
||
50% {
|
||
transform: translateX(0.8px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0px);
|
||
}
|
||
}
|
||
|
||
/* ===== 腳 ===== */
|
||
|
||
.leg-front,
|
||
.leg-back {
|
||
transform-origin: center center;
|
||
}
|
||
|
||
.state-idle .leg-front {
|
||
animation: leg-front-step 0.6s ease-in-out infinite;
|
||
}
|
||
|
||
.state-idle .leg-back {
|
||
animation: leg-back-step 0.6s ease-in-out infinite;
|
||
}
|
||
|
||
.state-sick .leg-front,
|
||
.state-sick .leg-back {
|
||
animation: leg-sick-step 0.8s ease-in-out infinite;
|
||
}
|
||
|
||
.state-sleep .leg-front,
|
||
.state-sleep .leg-back,
|
||
.state-dead .leg-front,
|
||
.state-dead .leg-back {
|
||
animation: none;
|
||
}
|
||
|
||
@keyframes leg-front-step {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
50% {
|
||
transform: translateY(-1px);
|
||
}
|
||
}
|
||
|
||
@keyframes leg-back-step {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
50% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes leg-sick-step {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
50% {
|
||
transform: translateY(-0.5px);
|
||
}
|
||
}
|
||
|
||
/* ===== 耳朵 ===== */
|
||
|
||
.ear-pixel {
|
||
transform-origin: center center;
|
||
}
|
||
|
||
.state-idle .ear-pixel {
|
||
animation: ear-twitch 3.2s ease-in-out infinite;
|
||
}
|
||
|
||
.state-sick .ear-pixel {
|
||
animation: ear-twitch 4s ease-in-out infinite;
|
||
}
|
||
|
||
.state-sleep .ear-pixel,
|
||
.state-dead .ear-pixel {
|
||
animation: none;
|
||
}
|
||
|
||
@keyframes ear-twitch {
|
||
|
||
0%,
|
||
90%,
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
92% {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
96% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* ===== 腮紅 ===== */
|
||
|
||
.blush-dot {
|
||
transform-origin: center center;
|
||
}
|
||
|
||
.state-idle .blush-dot,
|
||
.state-sick .blush-dot {
|
||
animation: blush-pulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
.state-sleep .blush-dot {
|
||
animation: blush-pulse 3s ease-in-out infinite;
|
||
}
|
||
|
||
.state-dead .blush-dot {
|
||
animation: none;
|
||
}
|
||
|
||
@keyframes blush-pulse {
|
||
|
||
0%,
|
||
100% {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* ===== Sleep ZZZ（跟著頭後方跑） ===== */
|
||
|
||
.sleep-zzz {
|
||
position: absolute;
|
||
font-weight: bold;
|
||
color: #5a7a4a;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
display: none;
|
||
}
|
||
|
||
.sleep-zzz span {
|
||
position: absolute;
|
||
font-size: 10px;
|
||
opacity: 0;
|
||
animation: zzz-float 3s ease-in-out infinite;
|
||
}
|
||
|
||
.sleep-zzz .z1 {
|
||
left: 0;
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.sleep-zzz .z2 {
|
||
left: 8px;
|
||
animation-delay: 0.8s;
|
||
}
|
||
|
||
.sleep-zzz .z3 {
|
||
left: 15px;
|
||
animation-delay: 1.6s;
|
||
}
|
||
|
||
@keyframes zzz-float {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(0) scale(0.7);
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
transform: translateY(-4px) scale(0.9);
|
||
}
|
||
|
||
80% {
|
||
opacity: 1;
|
||
transform: translateY(-16px) scale(1.05);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-24px) scale(1.1);
|
||
}
|
||
}
|
||
|
||
.state-sleep .sleep-zzz {
|
||
display: block;
|
||
opacity: 1;
|
||
}
|
||
|
||
.state-dead .sleep-zzz {
|
||
display: none;
|
||
opacity: 0;
|
||
}
|
||
|
||
/* ===== Sick 骷髏頭（跟著頭後方跑） ===== */
|
||
|
||
.sick-icon {
|
||
position: absolute;
|
||
font-size: 14px;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
display: none;
|
||
}
|
||
|
||
.state-sick .sick-icon {
|
||
display: block;
|
||
opacity: 1;
|
||
animation: sick-icon-pulse 1.2s ease-in-out infinite;
|
||
}
|
||
|
||
.state-sleep .sick-icon,
|
||
.state-dead .sick-icon {
|
||
display: none;
|
||
opacity: 0;
|
||
}
|
||
|
||
@keyframes sick-icon-pulse {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
50% {
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
|
||
/* ===== 墓碑 ===== */
|
||
|
||
.tombstone {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 52%;
|
||
transform: translate(-50%, -50%);
|
||
width: 48px;
|
||
height: 56px;
|
||
border-radius: 16px 16px 6px 6px;
|
||
background: #9ba7a0;
|
||
border: 2px solid #5e6861;
|
||
box-shadow:
|
||
0 0 0 2px rgba(0, 0, 0, 0.2),
|
||
0 4px 4px rgba(0, 0, 0, 0.35);
|
||
display: none;
|
||
}
|
||
|
||
.tombstone::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 8px;
|
||
right: 8px;
|
||
top: 16px;
|
||
height: 2px;
|
||
background: #5e6861;
|
||
}
|
||
|
||
.tombstone::after {
|
||
content: "RIP";
|
||
position: absolute;
|
||
top: 22px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 8px;
|
||
letter-spacing: 1px;
|
||
color: #39413c;
|
||
}
|
||
|
||
.state-dead .tombstone {
|
||
display: block;
|
||
animation: tomb-float 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes tomb-float {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translate(-50%, -50%) translateY(0);
|
||
}
|
||
|
||
50% {
|
||
transform: translate(-50%, -50%) translateY(-4px);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="device">
|
||
<div class="device-title">PET EGG</div>
|
||
|
||
<div class="screen-wrapper">
|
||
<div class="screen" id="screen">
|
||
<!-- 睡覺 ZZZ（位置由 JS 根據頭＋朝向計算） -->
|
||
<div class="sleep-zzz" id="sleepIcon">
|
||
<span class="z1">Z</span>
|
||
<span class="z2">Z</span>
|
||
<span class="z3">Z</span>
|
||
</div>
|
||
<!-- 生病骷髏頭（位置由 JS 根據頭＋朝向計算） -->
|
||
<div class="sick-icon" id="sickIcon">💀</div>
|
||
<!-- 死亡墓碑 -->
|
||
<div class="tombstone"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="buttons">
|
||
<div class="btn"></div>
|
||
<div class="btn"></div>
|
||
<div class="btn"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Demo 狀態切換 -->
|
||
<div class="state-controls">
|
||
<button data-state="idle" class="active">Idle</button>
|
||
<button data-state="sleep">Sleep</button>
|
||
<button data-state="sick">Sick</button>
|
||
<button data-state="dead">Dead</button>
|
||
</div>
|
||
|
||
<script>
|
||
/* =======================
|
||
1. PRESET
|
||
======================= */
|
||
|
||
const SPRITE_PRESETS = {
|
||
tigerChick: {
|
||
name: 'tigerChick',
|
||
pixelSize: 3,
|
||
sprite: [
|
||
'1100000111000000',
|
||
'1241111331000000',
|
||
'1005102301000000',
|
||
'1054103320000000',
|
||
'1241143320100000',
|
||
'1230432311100110',
|
||
'1245321330100421',
|
||
'1240001311100111',
|
||
'1020103030111421',
|
||
'0100000331245210',
|
||
'0001111111240210',
|
||
'0015022221345210',
|
||
'0004022235350010',
|
||
'0011400023203210',
|
||
'0005011112115210',
|
||
'0001100001100110',
|
||
],
|
||
palette: {
|
||
'1': '#2b2825',
|
||
'2': '#d0974b',
|
||
'3': '#e09037',
|
||
'4': '#4a2b0d',
|
||
'5': '#724e22',
|
||
},
|
||
tailPixels: [
|
||
[15, 8], [14, 8],
|
||
[15, 9], [14, 9],
|
||
[15, 10], [14, 10],
|
||
[15, 11], [14, 11],
|
||
],
|
||
legFrontPixels: [
|
||
[6, 13], [7, 13],
|
||
[6, 14], [7, 14],
|
||
],
|
||
legBackPixels: [
|
||
[9, 13], [10, 13],
|
||
[9, 14], [10, 14],
|
||
],
|
||
earPixels: [
|
||
[2, 0], [3, 0], [4, 0],
|
||
[11, 0], [12, 0], [13, 0],
|
||
],
|
||
blushPixels: [
|
||
[4, 7], [5, 7],
|
||
[10, 7], [11, 7],
|
||
],
|
||
// 頭後方標記點（依朝向不同用不同座標）
|
||
iconBackLeft: { x: 3, y: 2 }, // 面向右時：在左邊這個點附近（後腦勺）
|
||
iconBackRight: { x: 12, y: 2 }, // 面向左時：在右邊這個點附近（後腦勺）
|
||
},
|
||
};
|
||
|
||
const CURRENT_PRESET = SPRITE_PRESETS.tigerChick;
|
||
let currentState = 'idle';
|
||
|
||
/* =======================
|
||
2. 建立 sprite
|
||
======================= */
|
||
|
||
function createPetSprite(preset) {
|
||
const {
|
||
sprite, palette, pixelSize,
|
||
tailPixels = [],
|
||
legFrontPixels = [],
|
||
legBackPixels = [],
|
||
earPixels = [],
|
||
blushPixels = [],
|
||
} = preset;
|
||
|
||
const rows = sprite.length;
|
||
const cols = sprite[0].length;
|
||
const width = cols * pixelSize;
|
||
const height = rows * pixelSize;
|
||
|
||
const rootEl = document.createElement('div');
|
||
rootEl.className = 'pet-root';
|
||
rootEl.style.width = width + 'px';
|
||
rootEl.style.height = height + 'px';
|
||
|
||
const innerEl = document.createElement('div');
|
||
innerEl.className = 'pet-inner face-right';
|
||
rootEl.appendChild(innerEl);
|
||
|
||
sprite.forEach((row, y) => {
|
||
[...row].forEach((ch, x) => {
|
||
if (ch === '0') return;
|
||
|
||
const dot = document.createElement('div');
|
||
|
||
const isTail = tailPixels.some(([tx, ty]) => tx === x && ty === y);
|
||
const isLegFront = legFrontPixels.some(([lx, ly]) => lx === x && ly === y);
|
||
const isLegBack = legBackPixels.some(([lx, ly]) => lx === x && ly === y);
|
||
const isEar = earPixels.some(([ex, ey]) => ex === x && ey === y);
|
||
const isBlush = blushPixels.some(([bx, by]) => bx === x && by === y);
|
||
|
||
let className = 'pet-pixel';
|
||
if (isTail) className += ' tail-pixel';
|
||
if (isLegFront) className += ' leg-front';
|
||
if (isLegBack) className += ' leg-back';
|
||
if (isEar) className += ' ear-pixel';
|
||
if (isBlush) className += ' blush-dot';
|
||
|
||
dot.className = className;
|
||
dot.style.width = pixelSize + 'px';
|
||
dot.style.height = pixelSize + 'px';
|
||
dot.style.left = (x * pixelSize) + 'px';
|
||
dot.style.top = (y * pixelSize) + 'px';
|
||
dot.style.background = palette[ch] || '#000';
|
||
|
||
innerEl.appendChild(dot);
|
||
});
|
||
});
|
||
|
||
return { rootEl, innerEl, width, height };
|
||
}
|
||
|
||
/* =======================
|
||
3. 初始化 + 移動 + 頭後方 ICON 定位
|
||
======================= */
|
||
|
||
const screenEl = document.getElementById('screen');
|
||
const sleepIconEl = document.getElementById('sleepIcon');
|
||
const sickIconEl = document.getElementById('sickIcon');
|
||
|
||
const { rootEl: petRoot, innerEl: petInner } = (function initPetOnScreen(preset, screenEl) {
|
||
const { rootEl, innerEl, width, height } = createPetSprite(preset);
|
||
screenEl.appendChild(rootEl);
|
||
|
||
const margin = 8;
|
||
|
||
let x = Math.floor(screenEl.clientWidth / 2 - width / 2);
|
||
let y = Math.floor(screenEl.clientHeight / 2 - height / 2);
|
||
rootEl.style.left = x + 'px';
|
||
rootEl.style.top = y + 'px';
|
||
|
||
function updateHeadIconsPosition() {
|
||
const { pixelSize, iconBackLeft, iconBackRight } = CURRENT_PRESET;
|
||
const isFacingRight = innerEl.classList.contains('face-right');
|
||
|
||
// 面向右 → icon 用左邊的標記點；面向左 → icon 用右邊的標記點
|
||
const marker = isFacingRight ? iconBackLeft : iconBackRight;
|
||
|
||
const baseX = rootEl.offsetLeft + marker.x * pixelSize;
|
||
const baseY = rootEl.offsetTop + marker.y * pixelSize;
|
||
|
||
// ZZZ 稍微比頭高一點
|
||
sleepIconEl.style.left = (baseX - 2) + 'px';
|
||
sleepIconEl.style.top = (baseY - 10) + 'px';
|
||
|
||
// 骷髏頭稍微貼近頭後側一點
|
||
sickIconEl.style.left = (baseX - 2) + 'px';
|
||
sickIconEl.style.top = (baseY - 6) + 'px';
|
||
}
|
||
|
||
function moveRandomly() {
|
||
if (currentState === 'sleep' || currentState === 'dead') {
|
||
updateHeadIconsPosition();
|
||
return;
|
||
}
|
||
|
||
const step = preset.pixelSize * 2;
|
||
const dir = Math.floor(Math.random() * 4);
|
||
|
||
const oldX = rootEl.offsetLeft;
|
||
const oldY = rootEl.offsetTop;
|
||
|
||
let newX = oldX;
|
||
let newY = oldY;
|
||
|
||
if (dir === 0) newY -= step;
|
||
if (dir === 1) newY += step;
|
||
if (dir === 2) newX -= step;
|
||
if (dir === 3) newX += step;
|
||
|
||
const maxX = screenEl.clientWidth - width - margin;
|
||
const maxY = screenEl.clientHeight - height - margin;
|
||
const minX = margin;
|
||
const minY = margin;
|
||
|
||
newX = Math.max(minX, Math.min(maxX, newX));
|
||
newY = Math.max(minY, Math.min(maxY, newY));
|
||
|
||
rootEl.style.left = newX + 'px';
|
||
rootEl.style.top = newY + 'px';
|
||
|
||
const dx = newX - oldX;
|
||
if (dx > 0) {
|
||
innerEl.classList.remove('face-right');
|
||
innerEl.classList.add('face-left');
|
||
} else if (dx < 0) {
|
||
innerEl.classList.remove('face-left');
|
||
innerEl.classList.add('face-right');
|
||
}
|
||
|
||
updateHeadIconsPosition();
|
||
}
|
||
|
||
// 初始定位一次
|
||
updateHeadIconsPosition();
|
||
// 每 600ms 移動／更新一次
|
||
setInterval(moveRandomly, 600);
|
||
|
||
// 視窗尺寸變化時也重新對頭定位一次
|
||
window.addEventListener('resize', updateHeadIconsPosition);
|
||
|
||
return { rootEl, innerEl };
|
||
})(CURRENT_PRESET, screenEl);
|
||
|
||
/* =======================
|
||
4. 狀態切換
|
||
======================= */
|
||
|
||
function setState(newState) {
|
||
currentState = newState;
|
||
|
||
screenEl.classList.remove('state-idle', 'state-sleep', 'state-sick', 'state-dead');
|
||
screenEl.classList.add('state-' + newState);
|
||
|
||
document.querySelectorAll('.state-controls button').forEach(btn => {
|
||
btn.classList.toggle('active', btn.dataset.state === newState);
|
||
});
|
||
}
|
||
|
||
document.querySelectorAll('.state-controls button').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
setState(btn.dataset.state);
|
||
});
|
||
});
|
||
|
||
setState('idle');
|
||
</script>
|
||
</body>
|
||
|
||
</html> |