Studio - APP

📷 素材アップロード

🛠️ プログラム作成 [修正モード]

ファイル名: .html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>おぱモンっち育成</title>
    <style>
        body { background: #fce4ec; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: 'Helvetica', sans-serif; }
        #game-container { background: #fff; width: 300px; padding: 20px; border-radius: 50px; border: 8px solid #ff80ab; box-shadow: 0 10px 0 #f06292; text-align: center; }
        
        /* 画面部分 */
        #screen { background: #e0f2f1; height: 180px; border-radius: 10px; border: 4px solid #b2dfdb; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; }
        
        /* ステータスバー */
        .status-area { display: flex; gap: 5px; margin-bottom: 10px; font-size: 12px; font-weight: bold; color: #ff4081; }
        
        /* キャラクター */
        #pet { font-size: 60px; transition: transform 0.3s; cursor: pointer; }
        .bounce { animation: bounce 0.6s infinite alternate; }
        @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* アイテム */
        .poo { position: absolute; font-size: 25px; bottom: 10px; }
        
        /* ボタン */
        .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
        button { background: #ff80ab; border: none; padding: 10px; border-radius: 20px; color: white; font-weight: bold; cursor: pointer; box-shadow: 0 4px 0 #f06292; }
        button:active { transform: translateY(2px); box-shadow: 0 2px 0 #f06292; }
        button:disabled { background: #ccc; box-shadow: none; cursor: not-allowed; }

#message { margin-top: 10px; font-size: 14px; color: #880e4f; height: 20px; }
    </style>
</head>
<body>

<div id="message">お腹が空いているよ！</div>

const pet = document.getElementById('pet');
    const hungerEl = document.getElementById('hunger-val');
    const cleanEl = document.getElementById('clean-val');
    const stageEl = document.getElementById('stage-val');
    const messageEl = document.getElementById('message');
    const pooContainer = document.getElementById('poo-container');

// メインループ（時間の経過とともにステータスが減る）
    const gameLoop = setInterval(() => {
        if (isDead || isSleeping) return;

hunger -= 2;
        cleanliness -= 1;

// うんこが出る確率
        if (Math.random() < 0.1) {
            spawnPoo();
        }

updateStats();
        checkEvolution();
        checkGameOver();
    }, 2000);

function updateStats() {
        hungerEl.innerText = Math.max(0, hunger);
        cleanEl.innerText = Math.max(0, cleanliness);
        
        if (hunger < 30) messageEl.innerText = "お腹ペコペコ！";
        else if (cleanliness < 30) messageEl.innerText = "部屋が汚いよ！";
        else messageEl.innerText = "元気だよ！";
    }

// ごはんをあげる
    function feed() {
        if (isDead || isSleeping) return;
        hunger = Math.min(100, hunger + 20);
        evolutionCount++;
        messageEl.innerText = "おいしい！";
        updateStats();
    }

// 掃除する
    function clean() {
        if (isDead || isSleeping) return;
        cleanliness = 100;
        pooContainer.innerHTML = '';
        messageEl.innerText = "ピカピカ！";
        updateStats();
    }

// 睡眠
    function toggleSleep() {
        if (isDead) return;
        isSleeping = !isSleeping;
        const btn = document.getElementById('sleep-btn');
        if (isSleeping) {
            pet.innerText = "💤";
            btn.innerText = "起こす(☀️)";
            messageEl.innerText = "スヤスヤ...";
        } else {
            updatePetIcon();
            btn.innerText = "寝かせる(💤)";
            messageEl.innerText = "おはよう！";
        }
    }

function spawnPoo() {
        const poo = document.createElement('span');
        poo.className = 'poo';
        poo.innerText = '💩';
        poo.style.left = Math.random() * 250 + 'px';
        pooContainer.appendChild(poo);
        cleanliness -= 10;
    }

function updatePetIcon() {
        if (isSleeping) return;
        if (stage === "赤ちゃん") pet.innerText = "🍼";
        else if (stage === "子供") pet.innerText = "🥚";
        else if (stage === "大人（おっぱい）") pet.innerText = "🍑"; // おっぱいっぽいアイコン
    }

function checkGameOver() {
        if (hunger <= 0 || cleanliness <= 0) {
            isDead = true;
            pet.innerText = "👻";
            pet.classList.remove('bounce');
            messageEl.innerText = "お亡くなりになりました...";
            clearInterval(gameLoop);
        }
    }

function resetGame() {
        location.reload();
    }
</script>

</body>
</html>

キャンセルして新規作成に戻る

📂 APP の作品

おぱモンっち育成

1.html (02/19 21:57)

✏️ 修正

Uzero Kids Programming Center

info.html (01/05 14:56)

✏️ 修正