西游闯关

<!-- ARCADELAB -->
<!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>
*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui}
body{background:#111;color:#fff;text-align:center;padding:10px}
button{padding:16px 8px;margin:5px;border:none;border-radius:12px;font-size:18px}
.char{background:#36f;color:#fff;width:45%}
.skill{background:#2a4;color:#fff;width:30%}
.ult{background:#d22;color:#fff;width:90%}
#info{margin:10px;font-size:18px}
#gameView{border:2px solid #f80;background:#222;margin:10px auto;width:100%;max-width:600px;height:280px}
</style>
</head>
<body>
<h2>西游闯关</h2>
<div id="tip">选择角色</div>
<div id="selBox">
<button class="char" onclick="pick('wukong')">孙悟空</button>
<button class="char" onclick="pick('bajie')">猪八戒</button>
<button class="char" onclick="pick('shaseng')">沙僧</button>
<button class="char" onclick="pick('tangseng')">唐僧</button>
</div>
<div id="lvBox" style="display:none">
<p>关卡：<span id="lvName"></span>｜BOSS：<span id="bossName"></span></p>
<button onclick="start()">开始战斗</button>
</div>
<canvas id="gameView"></canvas>
<div id="skillBox" style="display:none">
<div style="display:flex;gap:3px;justify-content:center">
<button class="skill" id="s1">技能1</button>
<button class="skill" id="s2">技能2</button>
<button class="skill" id="s3">技能3</button>
</div>
<button class="ult" id="ultBtn" disabled>大招（4点）</button>
<div id="info">技能点：<span id="sp">0</span>/4｜我的血量：<span id="hp">100</span>｜BOSS血量：<span id="bossHp">200</span></div>
</div>
<script>
const canvas = document.getElementById('gameView');
const ctx = canvas.getContext('2d');
canvas.width=580;canvas.height=260;
let game={char:null,sp:0,hp:100,level:1,running:false};
const chars={
wukong:{name:"孙悟空",hp:100,sk:["金箍棒横扫","筋斗云冲刺","火眼金睛"],ult:"大圣齐天"},
bajie:{name:"猪八戒",hp:130,sk:["钉耙重击","九齿旋风","贪吃回血"],ult:"天蓬降世"},
shaseng:{name:"沙僧",hp:120,sk:["降妖杖劈砍","流沙护盾","流沙陷阱"],ult:"黄沙万里"},
tangseng:{name:"唐僧",hp:80,sk:["紧箍咒","佛光普照","诵经禁锢"],ult:"如来法旨"}
};
const levels=[
{name:"火焰山",boss:"牛魔王",hp:220},
{name:"大闹天庭",boss:"二郎神",hp:280},
{name:"黑暗天庭",boss:"玉帝",hp:350}
];
function pick(c){
game.char=chars[c];
document.getElementById('tip').innerText="已选："+game.char.name;
document.getElementById('selBox').style.display="none";
document.getElementById('lvBox').style.display="block";
refreshLv();
}
function refreshLv(){
const l=levels[game.level-1];
document.getElementById('lvName').innerText=l.name;
document.getElementById('bossName').innerText=l.boss;
game.bossHp=l.hp;game.maxBossHp=l.hp;
}
function start(){
game.running=true;game.sp=0;game.hp=game.char.hp;
document.getElementById('lvBox').style.display="none";
document.getElementById('skillBox').style.display="block";
document.getElementById('s1').innerText=game.char.sk[0];
document.getElementById('s2').innerText=game.char.sk[1];
document.getElementById('s3').innerText=game.char.sk[2];
document.getElementById('ultBtn').innerText="大招："+game.char.ult;
bind();
loop();
}
function bind(){
document.getElementById('s1').onclick=()=>use(1);
document.getElementById('s2').onclick=()=>use(2);
document.getElementById('s3').onclick=()=>use(3);
document.getElementById('ultBtn').onclick=ult;
}
function use(id){
if(!game.running)return;
if(game.char.name=="猪八戒"&&id===3){game.hp+=20;if(game.hp>game.char.hp)game.hp=game.char.hp}
else if(game.char.name=="唐僧"&&id===2){game.hp+=25;if(game.hp>game.char.hp)game.hp=game.char.hp}
else game.bossHp-=25;
game.sp++;if(game.sp>4)game.sp=4;
update();check();
}
function ult(){
if(game.sp<4||!game.running)return;
game.sp=0;game.bossHp-=80;update();check();
}
function update(){
document.getElementById('sp').innerText=game.sp;
document.getElementById('hp').innerText=game.hp;
document.getElementById('bossHp').innerText=Math.max(0,game.bossHp);
document.getElementById('ultBtn').disabled=game.sp<4;
}
function check(){
if(game.bossHp<=0){
game.running=false;
if(game.level>=3){alert("恭喜通关全部三章！");return;}
alert("击败BOSS，进入下一关！");
game.level++;refreshLv();
document.getElementById('skillBox').style.display="none";
document.getElementById('lvBox').style.display="block";
}
if(game.hp<=0){
game.running=false;alert("战败！重新来！");
game.level=1;game.hp=game.char.hp;refreshLv();
document.getElementById('skillBox').style.display="none";
document.getElementById('lvBox').style.display="block";
}
}
function loop(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle="#442200";ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle="#fff";ctx.font="22px sans-serif";
ctx.fillText(game.char.name+" VS "+levels[game.level-1].boss,150,50);
if(!game.running)return;
if(Math.random()<0.015){game.hp-=8;if(game.hp<0)game.hp=0;update();check();}
requestAnimationFrame(loop);
}
</script>
</body>
</html>