💜末影珍珠精准传送

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>💜末影珍珠精准传送</title>
<style>
*{box-sizing:border-box;font-family:system-ui,-apple-system}
body{background:#0b0618;color:#e9ddff;text-align:center;margin:12px}
canvas{border:3px solid #a87bff;background:#04001a;border-radius:6px}
.wrap{max-width:620px;margin:0 auto}
.ctrl{background:#241b3b;padding:14px;border-radius:10px;margin-top:10px}
.row{margin:8px 0}
input[type=range]{width:220px}
button{background:#9966ff;color:#fff;border:0;padding:9px 18px;border-radius:7px;font-size:16px;margin:4px;cursor:pointer}
button:hover{background:#b88cff}
.msg{height:26px;color:#ffec80;margin:6px}
</style>
</head>
<body>
<div class="wrap">
<h2>💜末影珍珠·精准传送</h2>
<canvas id="cv" width="600" height="410"></canvas>
<div class="msg" id="tip">调好角度力度，扔珍珠！落点必须踩平台！</div>
<div class="ctrl">
<div class="row">角度：<input id="ang" type="range" min="0" max="85" value="22"> <span id="angTxt">22°</span></div>
<div class="row">力度：<input id="pow" type="range" min="7" max="29" value="15"> <span id="powTxt">15</span></div>
<button id="throw">✨扔末影珍珠</button>
<button id="rest">🔄重来</button>
<div style="margin-top:8px">剩余珍珠：<span id="cnt">5</span>｜紫色=终点</div>
</div>
</div>

<script>
const cv=document.getElementById("cv");
const ctx=cv.getContext("2d");
const angIpt=document.getElementById("ang");
const powIpt=document.getElementById("pow");
const angTxt=document.getElementById("angTxt");
const powTxt=document.getElementById("powTxt");
const throwBtn=document.getElementById("throw");
const restBtn=document.getElementById("rest");
const tip=document.getElementById("tip");
const cntDom=document.getElementById("cnt");

let px=60, py=290;
let pearls=5;
let over=false;
const platforms=[
  {x:40,y:310,w:90,h:22,c:"#6344aa"},
  {x:210,y:265,w:72,h:22,c:"#6344aa"},
  {x:370,y:220,w:72,h:22,c:"#6344aa"},
  {x:510,y:175,w:86,h:26,c:"#c97dff"}
];

angIpt.oninput=()=>angTxt.textContent=angIpt.value+"°";
powIpt.oninput=()=>powTxt.textContent=powIpt.value;

function draw(){
  ctx.fillStyle="#04001a";
  ctx.fillRect(0,0,cv.width,cv.height);
  ctx.fillStyle="#442277";
  for(let p of platforms){
    ctx.fillRect(p.x,p.y,p.w,p.h);
  }
  ctx.fillStyle="#ffe65c";
  ctx.beginPath();
  ctx.arc(px,py,11,0,Math.PI*2);ctx.fill();
}

function onPlatform(x,y){
  for(let p of platforms){
    if(x>=p.x && x<=p.x+p.w && y>=p.y && y<=p.y+p.h) return {ok:true,isEnd:p.c==="#c97dff"};
  }
  return {ok:false,isEnd:false};
}

throwBtn.onclick=()=>{
  if(over||pearls<=0)return;
  pearls--;cntDom.textContent=pearls;
  const a=+angIpt.value*Math.PI/180;
  const v=+powIpt.value;
  const g=0.32;
  let t=0;
  let bx=px,by=py;
  const anim=setInterval(()=>{
    t+=1;
    bx=px + v*Math.cos(a)*t;
    by=py - v*Math.sin(a)*t + g*t*t;
    draw();
    ctx.fillStyle="#bb88ff";
    ctx.beginPath();ctx.arc(bx,by,6,0,Math.PI*2);ctx.fill();
    if(by>cv.height-8||bx<0||bx>cv.width){
      clearInterval(anim);
      const res=onPlatform(bx,by);
      if(res.ok){
        px=bx;py=by;
        if(res.isEnd){tip.textContent="🎉通关！";over=true;}
        else tip.textContent="✅传送成功，继续前进";
      }else{tip.textContent="💀掉入虚空！";over=true;}
      draw();
    }
  },28);
};

restBtn.onclick=()=>{
  px=60;py=290;pearls=5;over=false;
  cntDom.textContent=5;tip.textContent="调好角度力度，扔珍珠！落点必须踩平台！";
  draw();
};
draw();
</script>
</body>