🎮ArcadeLab

山河列国志 乱世一统策略游戏

by MegaStar63
499 lines19.5 KB
▶ Play
<!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>
        *{margin:0;padding:0;box-sizing:border-box;font-family:微软雅黑;}
        body{background:#0f1522;color:#f0f4f9;padding:12px;}
        .box{background:#1a2336;border-radius:16px;padding:15px;margin-bottom:14px;border:solid 1px #313e55;}
        .title{font-size:22px;text-align:center;color:#f8d278;font-weight:bold;margin-bottom:10px;}
        .grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
        .info{background:#273349;padding:9px;border-radius:9px;font-size:14px;}
        button{width:100%;padding:11px;border:0;border-radius:10px;margin:5px 0;font-size:15px;font-weight:bold;}
        .b1{background:#d6af55;color:#000;}
        .b2{background:#3e5b88;color:#fff;}
        .b3{background:#7c3939;color:#fff;}
        .b4{background:#2c4936;color:#fff;}
        .b5{background:#503b72;color:#fff;}
        .b6{background:#82543c;color:#fff;}
        .b7{background:#b88048;color:#000;}
        .armytxt{line-height:1.6;font-size:14px;color:#cdd7e8;}
        .choose{background:#222c40;padding:14px;border-radius:12px;text-align:center;}
        .endgame{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);display:none;text-align:center;padding-top:180px;color:#f9d870;font-size:26px;font-weight:bold;}
    </style>
</head>
<body>

<div id="endPage" class="endgame">
    <div id="endText"></div>
    <br><button onclick="restartGame()" style="width:160px;margin:auto;">重新开局乱世</button>
</div>

<div id="startScreen" class="box">
    <div class="title">乱世山河 阵营抉择</div>
    <div class="choose">
        <p>选择你的立国势力,每种阵营自带专属天赋与独有神兵</p><br>
        <button class="b2" onclick="pickCamp(0)">中原王朝|攻守均衡·万民安稳【专属禁军】</button>
        <button class="b3" onclick="pickCamp(1)">北疆游牧|骑兵增幅·耗粮减少【雪原狼骑】</button>
        <button class="b4" onclick="pickCamp(2)">江南藩国|物产富饶·资源暴涨【碧水羽卫】</button>
        <button class="b5" onclick="pickCamp(3)">西漠雄邦|城防厚重·步兵无敌【黄沙死士】</button>
    </div>
</div>

<div id="gameAll" style="display:none;">
<div class="box">
    <div class="title">🏯山河列国志</div>
    <div id="cityname">当前城池:1级荒隅小城</div>
    <div id="yinghai">所属阵营:无</div>
    <div id="juewei">自身爵位:县域县令</div>
    <div class="grid">
        <div class="info">城池等级:<span id="lv">1</span>/10</div>
        <div class="info">城池防御:<span id="fangyu">120</span></div>
        <div class="info">现存人口:<span id="people">300</span></div>
        <div class="info">历经天数:<span id="day">1</span></div>
    </div>
</div>

<div class="box">
    <div class="title">📦物资储备</div>
    <div class="grid">
        <div class="info">现有白银:<span id="yinliang">150</span></div>
        <div class="info">储存粮草:<span id="liangcao">220</span></div>
        <div class="info">每回合银两+<span id="ylget">12</span></div>
        <div class="info">每回合粮草+<span id="lcget">18</span></div>
    </div>
    <div class="info">全军每回合粮草消耗:<span id="xiaohao">0</span></div>
    <div class="info">科技整体加成:<span id="kejiadd">0</span>%</div>
</div>

<div class="box">
    <div class="title">⚔️我方全军兵力</div>
    <div class="armytxt">
1.布衣民兵:<span id="b1">0</span>|攻15 血45<br>
2.林间弓手:<span id="b2">0</span>|攻28 血32<br>
3.坚盾甲兵:<span id="b3">0</span>|攻22 血90<br>
4.寒枪士卒:<span id="b4">0</span>|攻36 血60<br>
5.旷野轻骑:<span id="b5">0</span>|攻42 血52<br>
6.玄甲重骑:<span id="b6">0</span>|攻65 血115<br>
7.破城死士:<span id="b7">0</span>|攻58 血68<br>
8.追风铁骑:<span id="b8">0</span>|攻82 血130<br>
9.白羽神弓:<span id="b9">0</span>|攻95 血48<br>
10.镇国虎贲:<span id="b10">0</span>|攻125 血180
    </div>
    <div class="info">专属特种精兵:<span id="specialBing">0</span></div>
    <div class="info">受伤士兵数量:<span id="wound">0</span>人</div>
</div>

<div class="box">
    <div class="title">🎖武将主将 & 爵位</div>
    <div class="info">当前统领:<span id="jiangjun">无</span></div>
    <div class="info">全军统率加成:+<span id="tongshuai">0</span>战力</div>
    <button class="b5" onclick="getGeneral()">寻访招募名将</button>
    <button class="b6" onclick="upRank()">晋升自身爵位</button>
</div>

<div class="box">
    <div class="title">🪖征兵募士</div>
    <button class="b1" onclick="recruit(0)">招募民兵|20银</button>
    <button class="b1" onclick="recruit(1)">招募弓手|45银</button>
    <button class="b1" onclick="recruit(2)">招募盾甲兵|70银</button>
    <button class="b1" onclick="recruit(3)">招募长枪兵|62银</button>
    <button class="b2" onclick="recruit(4)">招募轻骑兵|95银</button>
    <button class="b2" onclick="recruit(5)">招募重骑兵|185银</button>
    <button class="b2" onclick="recruit(6)">招募破城死士|130银</button>
    <button class="b3" onclick="recruit(7)">招募追风铁骑|260银</button>
    <button class="b3" onclick="recruit(8)">招募白羽神弓|240银</button>
    <button class="b3" onclick="recruit(9)">招募镇国虎贲|420银</button>
    <button class="b7" onclick="recruitSpecial()">招募阵营专属特种兵</button>
</div>

<div class="box">
    <div class="title">🔬城池科技研发</div>
    <button class="b5" onclick="techNong()">农耕改良【增产粮草】</button>
    <button class="b5" onclick="techYe()">冶铁锻造【士兵增攻】</button>
    <button class="b5" onclick="techFang()">城防修筑【城墙加厚】</button>
    <button class="b5" onclick="techBing()">军务练兵【减少耗粮】</button>
</div>

<div class="box">
    <div class="title">🌍六国乱世战局</div>
    <div class="info">各大诸侯城池会自动发育,伺机联军讨伐</div>
    <button class="b6" onclick="enemyCheck()">查看六国战力排行</button>
    <button class="b2" onclick="enemySpy()">派遣间谍窥探敌国</button>
    <button class="b7" onclick="unifyWorld()">出征一统天下【最终决战】</button>
</div>

<div class="box">
    <div class="title">🛠城池治理</div>
    <button class="b4" onclick="nextTurn()">度过下一回合(敌方同步发育)</button>
    <button class="b2" onclick="upgradeCity()">升级城池</button>
    <button class="b2" onclick="fixWall()">修补城墙</button>
    <button class="b4" onclick="tradeMarket()">集市物资贸易</button>
    <button class="b4" onclick="cureSoldier()">医治伤病士卒</button>
    <button class="b3" onclick="barbarian()">抵御蛮族入侵</button>
    <button class="b3" onclick="attackEnemy()">征伐诸侯敌城</button>
    <button class="b5" onclick="randomEvent()">触发世间变故</button>
</div>
</div>

<script>
const campData = [
    {name:"中原王朝",bonusY:1,bonusF:1,defAdd:1,atkAdd:1,foodCut:1,spName:"皇城禁军",spAtk:142,spHp:165,spCost:480},
    {name:"北疆游牧",bonusY:1,bonusF:0.92,defAdd:0.95,atkAdd:1.18,foodCut:0.82,spName:"雪原狼骑",spAtk:155,spHp:140,spCost:455},
    {name:"江南藩国",bonusY:1.25,bonusF:1.22,defAdd:0.9,atkAdd:0.96,foodCut:1.05,spName:"碧水羽卫",spAtk:138,spHp:152,spCost:410},
    {name:"西漠雄邦",bonusY:0.93,bonusF:0.95,defAdd:1.35,atkAdd:1.05,foodCut:0.98,spName:"黄沙死士",spAtk:148,spHp:190,spCost:465}
];
const rankName = ["县域县令","边城太守","一方藩侯","九州藩王","乱世帝王"];
const cityLv = [
    {name:"荒隅小城",maxPop:800,def:120,silver:12,food:18,needS:160,needF:220},
    {name:"乡间古镇",maxPop:1500,def:230,silver:25,food:32,needS:350,needF:480},
    {name:"边塞重镇",maxPop:2800,def:380,silver:40,food:48,needS:620,needF:750},
    {name:"四方城郭",maxPop:4500,def:550,silver:58,food:65,needS:900,needF:1100},
    {name:"山河雄城",maxPop:7000,def:780,silver:82,food:86,needS:1400,needF:1650},
    {name:"千里名都",maxPop:9500,def:1050,silver:115,food:110,needS:2000,needF:2300},
    {name:"藩王府城",maxPop:13000,def:1360,silver:152,food:145,needS:2800,needF:3100},
    {name:"一方王都",maxPop:17000,def:1720,silver:195,food:180,needS:3900,needF:4200},
    {name:"万古帝都",maxPop:22000,def:2100,silver:248,food:235,needS:5500,needF:5800},
    {name:"神州皇城",maxPop:30000,def:2650,silver:320,food:300,needS:8000,needF:8500}
];
const soldierAttr = [
    {atk:15,hp:45,cost:20,food:2},
    {atk:28,hp:32,cost:45,food:3},
    {atk:22,hp:90,cost:70,food:4},
    {atk:36,hp:60,cost:62,food:3},
    {atk:42,hp:52,cost:95,food:6},
    {atk:65,hp:115,cost:185,food:8},
    {atk:58,hp:68,cost:130,food:5},
    {atk:82,hp:130,cost:260,food:9},
    {atk:95,hp:48,cost:240,food:7},
    {atk:125,hp:180,cost:420,food:12}
];
const generalList = [
    {name:"勇烈武将",power:35},
    {name:"铁血猛将",power:58},
    {name:"千里骁将",power:42},
    {name:"镇域统帅",power:75},
    {name:"无双名将",power:100}
];
let enemyCity = [
    {power:190,lv:1},
    {power:260,lv:2},
    {power:220,lv:1},
    {power:310,lv:2},
    {power:285,lv:2},
    {power:350,lv:3}
];
let campId = 0;
let rankLv = 0;
let level = 1;
let day = 1;
let pop = 300;
let wallDef = 120;
let silver = 150;
let food = 220;
let army = [0,0,0,0,0,0,0,0,0,0];
let specialSoldier = 0;
let woundSoldier = 0;
let leaderPower = 0;
let leaderName = "暂无";
let techBonus = 0;

function pickCamp(num){
    campId = num;
    document.getElementById("startScreen").style.display="none";
    document.getElementById("gameAll").style.display="block";
    freshData();
    alert("你已然立国,身处乱世山河,开始一统天下之路!");
}

function freshData(){
    let now = cityLv[level-1];
    let camp = campData[campId];
    document.getElementById("cityname").innerText = "当前城池:"+now.name;
    document.getElementById("yinghai").innerText = "所属阵营:"+campData[campId].name;
    document.getElementById("juewei").innerText = "自身爵位:"+rankName[rankLv];
    document.getElementById("lv").innerText = level;
    document.getElementById("fangyu").innerText = Math.floor(wallDef*camp.defAdd);
    document.getElementById("people").innerText = pop;
    document.getElementById("day").innerText = day;

    let getY = Math.floor(now.silver*(1+techBonus*0.03)*camp.bonusY);
    let getF = Math.floor(now.food*(1+techBonus*0.03)*camp.bonusF);
    document.getElementById("yinliang").innerText = silver;
    document.getElementById("liangcao").innerText = food;
    document.getElementById("ylget").innerText = getY;
    document.getElementById("lcget").innerText = getF;

    for(let i=0;i<10;i++){
        document.getElementById("b"+(i+1)).innerText = army[i];
    }
    document.getElementById("specialBing").innerText = specialSoldier;
    document.getElementById("wound").innerText = woundSoldier;
    document.getElementById("jiangjun").innerText = leaderName;
    document.getElementById("tongshuai").innerText = leaderPower;
    document.getElementById("kejiadd").innerText = techBonus;

    let allCost = 0;
    for(let i=0;i<10;i++){
        allCost += army[i] * soldierAttr[i].food;
    }
    allCost += specialSoldier*10;
    allCost = Math.floor(allCost*camp.foodCut*(1-techBonus*0.02));
    document.getElementById("xiaohao").innerText = allCost;

    if(wallDef <= 0){
        gameLose();
    }
    if(food <= 0 && allCost > 0){
        food = 0;
        for(let a=0;a<10;a++){
            army[a] = Math.floor(army[a]*0.85);
        }
        specialSoldier = Math.floor(specialSoldier*0.7);
        alert("粮草耗尽,士卒大量溃散逃亡!");
    }
}

function recruitSpecial(){
    let camp = campData[campId];
    if(level<5){
        alert("城池等级达到5级方可招募专属精兵");
        return;
    }
    if(silver>=camp.spCost){
        silver -= camp.spCost;
        specialSoldier++;
        freshData();
    }else{
        alert("银两不足,无法征召精锐特种兵")
    }
}

function nextTurn(){
    day++;
    let curr = cityLv[level-1];
    let camp = campData[campId];
    let consume = 0;
    for(let i=0;i<10;i++)consume+=army[i]*soldierAttr[i].food;
    consume += specialSoldier*10;
    consume = Math.floor(consume*camp.foodCut*(1-techBonus*0.02));

    silver += Math.floor(curr.silver*(1+techBonus*0.03)*camp.bonusY);
    food = food + Math.floor(curr.food*(1+techBonus*0.03)*camp.bonusF) - consume;
    pop = Math.min(pop+12,curr.maxPop);

    for(let i=0;i<6;i++){
        enemyCity[i].power += Math.floor(Math.random()*45+20);
        if(day%5===0)enemyCity[i].lv++;
    }
    if(day>=4 && Math.random()<0.35){
        let raid = enemyCity[Math.floor(Math.random()*6)].power;
        wallDef -= Math.floor(raid/12);
        alert("诸侯联军前来偷袭城池!城墙受损");
    }
    freshData();
    alert("岁月更迭,各方诸侯皆在暗中积蓄实力")
}

function upgradeCity(){
    if(level>=10){alert("已是至尊皇城,无法升级");return;}
    let needS = cityLv[level-1].needS;
    let needF = cityLv[level-1].needF;
    if(silver>=needS&&food>=needF){
        silver -= needS;
        food -= needF;
        level++;
        wallDef = cityLv[level-1].def;
        freshData();
        alert("城池进阶成功,疆域扩大,解锁全部兵种!")
    }else{alert("资源不足以扩建城池")}
}

function fixWall(){
    if(silver>=35){
        silver -= 35;
        wallDef += 48;
        freshData();
    }else alert("白银匮乏,无力修缮")
}

function recruit(num){
    let camp = campData[campId];
    let s = soldierAttr[num];
    if(silver >= s.cost){
        silver -= s.cost;
        army[num]++;
        freshData();
    }else{alert("钱财不足,无法募兵")}
}

function getGeneral(){
    if(silver>=220){
        silver -= 220;
        let rand = Math.floor(Math.random()*5);
        let newGen = generalList[rand];
        leaderName = newGen.name;
        leaderPower += newGen.power;
        freshData();
        alert("寻访收获一名名将!战力加成+"+newGen.power)
    }else alert("银两不足,无法寻访贤才")
}

function upRank(){
    if(rankLv>=4){alert("已然登顶帝王,爵位满级");return;}
    let costS = (rankLv+1)*320;
    let costF = (rankLv+1)*260;
    if(silver>=costS&&food>=costF){
        silver-=costS;food-=costF;
        rankLv++;leaderPower+=25;
        freshData();
        alert("爵位晋升成功,全军永久战力提升!")
    }else alert("物资达不到晋升标准")
}

function techNong(){
    if(silver>=180&&food>=150){silver-=180;food-=150;techBonus++;freshData();alert("农耕研发完毕,粮草永久增产")}
    else alert("资源不够")
}
function techYe(){
    if(silver>=200&&food>=120){silver-=200;food-=120;techBonus++;freshData();alert("冶铁锻造完成,全军攻击力提升")}
}
function techFang(){
    if(silver>=160&&food>=130){silver-=160;food-=130;wallDef+=60;techBonus++;freshData();alert("城防工事加固完成")}
}
function techBing(){
    if(silver>=240&&food>=180){silver-=240;food-=180;techBonus++;freshData();alert("军务练兵成型,士兵粮草消耗减少")}
}

function tradeMarket(){
    let choose = Math.floor(Math.random()*2);
    if(choose==0){food -=80;silver+=140;alert("售卖粮草换取白银")}
    else{silver-=120;food+=210;alert("花费银两购入粮草")}
    freshData();
}

function cureSoldier(){
    if(silver>=90&&woundSoldier>0){
        silver -=90;
        army[0] += woundSoldier;
        woundSoldier = 0;
        freshData();
        alert("全部伤病士兵调养痊愈,重回军营")
    }else alert("暂无伤兵或者钱财不足")
}

function enemyCheck(){
    let msg = "六国诸侯实力排行:\n";
    for(let i=0;i<6;i++){
        msg += "第"+(i+1)+"国 战力:"+enemyCity[i].power+" 城池等级:"+enemyCity[i].lv+"\n";
    }
    alert(msg);
}

function enemySpy(){
    if(silver>=110){
        silver-=110;
        let stealF = Math.floor(Math.random()*60+35);
        food += stealF;
        freshData();
        alert("间谍潜入敌国,窃取粮草"+stealF)
    }else alert("银两不足以派遣密探")
}

function randomEvent(){
    let r = Math.floor(Math.random()*4);
    if(r==0){food=Math.floor(food*0.75);alert("遭遇旱灾,粮草减产")}
    if(r==1){silver+=180;alert("商旅途经领地,赠予银两")}
    if(r==2){wallDef-=25;alert("狂风损毁部分城墙")}
    if(r==3){pop+=40;alert("流民前来投奔城池")}
    freshData();
}

function barbarian(){
    let camp = campData[campId];
    let myPower = leaderPower;
    for(let i=0;i<10;i++){
        myPower += army[i] * soldierAttr[i].atk*(1+techBonus*0.04)*camp.atkAdd;
    }
    myPower += specialSoldier * campData[campId].spAtk * 1.12;
    let enemyForce = Math.floor(Math.random()*280)+120;
    let bonus = 1.0;
    if(army[1]>0)bonus+=0.15;
    if(army[3]>0)bonus+=0.12;
    myPower = Math.floor(myPower*bonus);
    if(myPower >= enemyForce){
        let gainS = Math.floor(Math.random()*25);
        let gainF = Math.floor(Math.random()*35);
        silver += gainS;
        food += gainF;
        freshData();
        alert("击退蛮族入侵者!\n缴获白银"+gainS+" 粮草"+gainF);
    }else{
        let lose = Math.floor(enemyForce/18);
        woundSoldier += Math.floor(lose/3);
        for(let i=0;i<10;i++){
            army[i] = Math.max(0,army[i]-Math.floor(lose/10));
        }
        specialSoldier = Math.max(0,specialSoldier-Math.floor(lose/15));
        wallDef -= 30;
        freshData();
        alert("防守失利,兵马死伤,产生大量伤兵,城墙遭到损毁")
    }
}

function attackEnemy(){
    let camp = campData[campId];
    let myWar = leaderPower;
    for(let i=0;i<10;i++){
        myWar += army[i]*(soldierAttr[i].atk+soldierAttr[i].hp/3)*(1+techBonus*0.04)*camp.atkAdd;
    }
    myWar += specialSoldier*(camp.spAtk+camp.spHp/2);
    let maxFo = 0;
    for(let e of enemyCity)if(e.power>maxFo)maxFo=e.power;
    let foeDef = Math.floor(maxFo*3.2 + 180);
    if(myWar>foeDef){
        silver += 420;
        food += 360;
        for(let i=0;i<6;i++)enemyCity[i].power = Math.floor(enemyCity[i].power*0.7);
        freshData();
        alert("大破诸侯联军,碾压六国,缴获巨额物资")
    }else{
        wallDef -=55;
        woundSoldier +=15;
        specialSoldier = Math.max(0,specialSoldier-2);
        freshData();
        alert("征战惨败,我方损失惨重,城墙破损,士卒负伤")
    }
}

function unifyWorld(){
    let totalEnemy = 0;
    for(let e of enemyCity) totalEnemy+=e.power;
    let camp = campData[campId];
    let myAll = leaderPower;
    for(let i=0;i<10;i++){
        myAll += army[i]*(soldierAttr[i].atk+soldierAttr[i].hp/3)*camp.atkAdd;
    }
    myAll += specialSoldier*(camp.spAtk+camp.spHp/2)*1.15;
    let finalEnemy = Math.floor(totalEnemy*1.4);
    if(myAll >= finalEnemy){
        document.getElementById("endText").innerText="恭喜你\n平定六国乱世\n一统山河四方\n成就千古帝王霸业!";
        document.getElementById("endPage").style.display="block";
    }else{
        alert("全军战力不足,无法发起最终决战,继续积蓄实力")
    }
}

function gameLose(){
    document.getElementById("endText").innerText="城池尽数残破\n国土惨遭诸侯瓜分\n乱世争霸已然落败";
    document.getElementById("endPage").style.display="block";
}

function restartGame(){
    location.reload();
}
</script>
</body>
</html>

Game Source: 山河列国志 乱世一统策略游戏

Creator: MegaStar63

Libraries: none

Complexity: complex (499 lines, 19.5 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: -megastar63-mpw5gzxh" to link back to the original. Then publish at arcadelab.ai/publish.