<!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}
html,body{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000000;
  font-family: "PingFang SC",system-ui,sans-serif;
}
#canvas{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}
/*顶部文字*/
.header-text{
  position:absolute;
  width:100%;
  top:70px;
  text-align:center;
  color:#ffffff;
  z-index: 2;
}
.title{
  font-size:32px;
  letter-spacing:8px;
  margin-bottom:12px;
}
.tip{
  font-size:14px;
  opacity:0.55;
}
/*底部愿望输入区域*/
.wish-area{
  position:absolute;
  width:100%;
  bottom:110px;
  padding:0 22px;
  display:flex;
  gap:10px;
  z-index:2;
}
#wishInput{
  flex:1;
  padding:15px 20px;
  border-radius:999px;
  border:none;
  background:rgba(255,255,255,0.11);
  color:#fff;
  font-size:16px;
  outline:none;
}
#wishInput::placeholder{
  color:rgba(200,200,200,0.65);
}
#sendBtn{
  padding:0 26px;
  border-radius:999px;
  border:none;
  background:#ffffff;
  font-size:16px;
  cursor:pointer;
}
#sendBtn:active{
  background:#dddddd;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="header-text">
  <div class="title">星 空 许 愿</div>
  <div class="tip">点击夜空，让流星更多</div>
</div>
<div class="wish-area">
  <input id="wishInput" placeholder="写下你的愿望…">
  <button id="sendBtn">放飞</button>
</div>

<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let w, h;
// 画布自适应大小
function resizeCanvas(){
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize',resizeCanvas);

// 静态小星星（背景繁星）
let starList = [];
for(let i=0; i<220; i++){
  starList.push({
    x:Math.random()*w,
    y:Math.random()*h,
    r:Math.random()*1.2
  })
}

// 流星类
class Meteor{
  constructor(){
    this.reset();
  }
  reset(){
    this.x = Math.random() * w;
    this.y = Math.random() * h*0.45;
    this.length = Math.random() * 90 + 25;
    this.speed = Math.random()*5 +3;
    this.alpha = 1;
  }
  draw(){
    ctx.beginPath();
    ctx.moveTo(this.x,this.y);
    ctx.lineTo(this.x + this.length, this.y + this.length);
    let grad = ctx.createLinearGradient(this.x,this.y,this.x+this.length,this.y+this.length);
    grad.addColorStop(0,`rgba(255,255,255,${this.alpha})`);
    grad.addColorStop(1,"rgba(255,255,255,0)");
    ctx.strokeStyle = grad;
    ctx.lineWidth = 1.8;
    ctx.stroke();
  }
  update(){
    this.x += this.speed;
    this.y += this.speed;
    this.alpha -= 0.011;
    if(this.alpha <= 0) this.reset();
  }
}
let meteorArr = [];
function addMeteor(num=3){
  for(let i=0;i<num;i++) meteorArr.push(new Meteor());
}
addMeteor(4); //初始流星数量

//点击画布增加流星
canvas.onclick = ()=> addMeteor(4);

//动画循环
function animate(){
  ctx.clearRect(0,0,w,h);
  //绘制背景静态星星
  ctx.fillStyle="#fff";
  starList.forEach(star=>{
    ctx.beginPath();
    ctx.arc(star.x,star.y,star.r,0,Math.PI*2);
    ctx.fill();
  })
  //绘制流星
  meteorArr.forEach(meteor=>{
    meteor.draw();
    meteor.update();
  })
  requestAnimationFrame(animate);
}
animate();

//放飞按钮逻辑
const wishInput = document.getElementById("wishInput");
const sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = ()=>{
  let wishText = wishInput.value.trim();
  if(wishText){
    alert(`愿望已放飞：${wishText}`);
    addMeteor(9);
    wishInput.value = "";
  }
}
</script>
</body>
</html>
