山河列国志 乱世一统策略游戏
by MegaStar63499 lines19.5 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>
*{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.