简易小黑屋

by NovaViper55

96 lines3.1 KB

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易小黑屋</title>
    <style>
        *{background:#111;color:#eee;font-family:微软雅黑;}
        body{max-width:700px;margin:30px auto;padding:10px;}
        .log{height:320px;overflow-y:auto;border:1px #555 solid;padding:10px;margin-bottom:15px;white-space:pre-line;}
        button{padding:8px 14px;margin:4px;border:1px #777 solid;cursor:pointer;}
        button:disabled{opacity:0.3;cursor:not-allowed;}
        .info{margin:12px 0;color:#aaa;}
    </style>
</head>
<body>
<div class="info">
    木头：<span id="wood">5</span> | 火堆状态：<span id="fire">熄灭</span> | 小屋：<span id="house">未建造</span>
</div>
<div class="log" id="gameLog">你在一间冰冷漆黑的小屋醒来，四周一片死寂，手边散落5根木头。\n</div>
<div class="btns">
    <button id="btnFire">生火（消耗2木头）</button>
    <button id="btnWood">外出伐木（+1木头，火堆点燃才可）</button>
    <button id="btnBuild">建造小屋（消耗10木头）</button>
    <button id="btnExplore">野外探索（有小屋才可）</button>
</div>

<script>
// 游戏数据
let data = {
    wood:5,
    fire:false,
    house:false,
}
const logDom = document.getElementById('gameLog');
const woodDom = document.getElementById('wood');
const fireDom = document.getElementById('fire');
const houseDom = document.getElementById('house');
const btnFire = document.getElementById('btnFire');
const btnWood = document.getElementById('btnWood');
const btnBuild = document.getElementById('btnBuild');
const btnExplore = document.getElementById('btnExplore');

// 日志输出
function addLog(text){
    logDom.innerHTML += text + '\n';
    logDom.scrollTop = logDom.scrollHeight;
}
// 刷新面板数据
function refreshUI(){
    woodDom.innerText = data.wood;
    fireDom.innerText = data.fire?'燃烧中':'熄灭';
    houseDom.innerText = data.house?'已建成':'未建造';
    // 按钮禁用逻辑
    btnFire.disabled = data.fire || data.wood<2;
    btnWood.disabled = !data.fire;
    btnBuild.disabled = data.wood<10;
    btnExplore.disabled = !data.house;
}

// 1.生火
btnFire.onclick = ()=>{
    data.wood -=2;
    data.fire = true;
    addLog('你用木头点燃火堆，房间渐渐温暖起来。');
    refreshUI();
}
// 2.伐木
btnWood.onclick = ()=>{
    data.wood +=1;
    addLog('外出砍伐树木，带回1根木头。');
    refreshUI();
}
// 3.建小屋
btnBuild.onclick = ()=>{
    data.wood -=10;
    data.house = true;
    addLog('耗费木料搭建简易庇护小屋，从此可外出探索。');
    refreshUI();
}
// 4.野外探索
btnExplore.onclick = ()=>{
    let rand = Math.random();
    if(rand>0.5){
        let get = Math.floor(Math.random()*4)+2;
        data.wood += get;
        addLog(`野外探险顺利，捡到${get}根枯木！`);
    }else{
        addLog('野外一无所获，空手回到小屋。');
    }
    refreshUI();
}
refreshUI();
</script>
</body>
</html>

Game Source: 简易小黑屋

Creator: NovaViper55

Libraries: none

Complexity: moderate (96 lines, 3.1 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: -novaviper55" to link back to the original. Then publish at arcadelab.ai/publish.