✨
☀️
🌙
⭐️
☀️
🌙
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes explode {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(2); }
}
.animate-pulse {
animation: pulse 0.5s;
}
.animate-shake {
animation: shake 0.5s;
}
.animate-explode {
animation: explode 0.5s forwards;
}
.emoji {
font-size: 2rem;
display: inline-block;
transition: transform 0.2s;
}
.button {
font-size: 1.5rem;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
border: none;
border-radius: 10px;
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.1s;
}
.button:active {
transform: scale(0.95);
}
#feedback {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
pointer-events: none;
}
</style>
</head>
<body>
<div style="width: 100%; text-align: center; padding-top: 20px;">
<div id="celestials" style="display: flex; justify-content: center; margin-bottom: 20px;">
<span class="emoji" id="c1">✨</span>
<span class="emoji" id="c2">☀️</span>
<span class="emoji" id="c3">🌙</span>
<span class="emoji" id="c4">⭐️</span>
<span class="emoji" id="c5">☀️</span>
<span class="emoji" id="c6">🌙</span>
</div>
<div>
<button class="button" id="btnQ">Q 🔥</button>
<button class="button" id="btnW">W 🌊</button>
<button class="button" id="btnE">E 🌪️</button>
<button class="button" id="btnR">R 🔄</button>
</div>
</div>
<div id="feedback"></div>
<script>
const celestialIds = ['c1','c2','c3','c4','c5','c6'];
let celestials = ['✨','☀️','🌙','⭐️','☀️','🌙'];
let canStrong = {Q: true, W: true, E: true};
const patterns = [
['1','2','1','3','2','3'],
['1','2','3','2','1','3'],
['1','2','3','1','2','3'],
['1','2','3','1','3','2'],
['1','3','1','2','3','2'],
['1','3','2','1','3','2'],
['1','3','2','1','2','3'],
['1','3','2','3','1','2']
];
const iconMap = {
'1':'☀️',
'2':'🌙',
'3':'⭐️'
};
function render() {
for(let i=0;i<6;i++) {
document.getElementById(celestialIds[i]).innerText = celestials[i] || '❓';
}
}
function showFeedback(msg) {
const fb = document.getElementById('feedback');
fb.innerText = msg;
fb.classList.add('animate-explode');
fb.addEventListener('animationend', () => {
fb.innerText = '';
fb.classList.remove('animate-explode');
});
}
function replenish() {
const pattern = patterns[Math.floor(Math.random()*patterns.length)];
for(let i=1;i<6;i++) {
if(!celestials[i]) {
celestials[i] = iconMap[pattern[i]];
}
}
render();
}
function shiftLeft() {
for(let i=1;i<5;i++) {
celestials[i] = celestials[i+1];
}
celestials[5] = null;
}
function handleSkill(skill) {
const c2 = celestials[1];
const c3 = celestials[2];
if(['Q','W','E'].includes(skill)) {
if(!celestials[1]) return;
// Check for strong skill
if(canStrong[skill] &&
((skill === 'Q' && c2 === '☀️' && c3 === '☀️') ||
(skill === 'W' && c2 === '🌙' && c3 === '🌙') ||
(skill === 'E' && c2 === '⭐️' && c3 === '⭐️'))) {
// Strong skill
showFeedback(skill === 'Q' ? '🔥 強化Q発動!' : (skill === 'W' ? '🌊 強化W発動!' : '🌪️ 強化E発動!'));
celestials[1] = null;
celestials[2] = null;
canStrong[skill] = false;
shiftLeft();
replenish();
render();
return;
}
// Regular skill
showFeedback(skill === 'Q' ? '🔥 Qスキル発動!' : (skill === 'W' ? '🌊 Wスキル発動!' : '🌪️ Eスキル発動!'));
celestials[1] = null;
shiftLeft();
replenish();
render();
} else if(skill === 'R') {
// Swap first and second
[celestials[0], celestials[1]] = [celestials[1], celestials[0]];
showFeedback('🔄 Rスキル発動!');
render();
}
}
document.getElementById('btnQ').addEventListener('click', () => {
handleSkill('Q');
document.getElementById('btnQ').classList.add('animate-pulse');
document.getElementById('btnQ').addEventListener('animationend', () => {
document.getElementById('btnQ').classList.remove('animate-pulse');
}, {once: true});
});
document.getElementById('btnW').addEventListener('click', () => {
handleSkill('W');
document.getElementById('btnW').classList.add('animate-pulse');
document.getElementById('btnW').addEventListener('animationend', () => {
document.getElementById('btnW').classList.remove('animate-pulse');
}, {once: true});
});
document.getElementById('btnE').addEventListener('click', () => {
handleSkill('E');
document.getElementById('btnE').classList.add('animate-pulse');
document.getElementById('btnE').addEventListener('animationend', () => {
document.getElementById('btnE').classList.remove('animate-pulse');
}, {once: true});
});
document.getElementById('btnR').addEventListener('click', () => {
handleSkill('R');
document.getElementById('btnR').classList.add('animate-shake');
document.getElementById('btnR').addEventListener('animationend', () => {
document.getElementById('btnR').classList.remove('animate-shake');
}, {once: true});
});
document.addEventListener('keydown', (e) => {
const key = e.key.toUpperCase();
if(['Q','W','E','R'].includes(key)) {
handleSkill(key);
const btn = document.getElementById('btn' + key);
if(btn) {
btn.classList.add(key === 'R' ? 'animate-shake' : 'animate-pulse');
btn.addEventListener('animationend', () => {
btn.classList.remove(key === 'R' ? 'animate-shake' : 'animate-pulse');
}, {once: true});
}
}
});
// Initialize
render();
</script>
</body>
</html>
```