如何在p5.js类函数中用椭圆绘制花朵并解决小游戏相关开发问题

Daisy类封装修复 #

• 原类仅绘制单个椭圆，坐标固定在构造函数中未实时跟随鼠标，导致无法正常渲染
• 修复后的类将所有花瓣、花心绘制逻辑放入render方法，实时读取mouseX计算坐标，新增生命属性用于颜色控制

累计漏接逻辑实现 #

• 新增全局变量missedCount统计漏接雨滴次数
• 雨滴掉出屏幕时漏接次数+1并重置雨滴位置，次数≥3时才触发游戏结束
• 重置游戏时同步重置漏接次数

雏菊变色效果实现 #

• 基于Daisy类的剩余生命属性，使用map方法将生命数值映射为RGB色值，随漏接次数增加从白色逐渐过渡到深棕色

完整修改后代码 #

let screen = 0;
let score= 0;
let missedCount = 0;
let drop1;
let drop2;
let drop3;
let daisy;

function setup() {
  createCanvas(600, 400);
  drop1 = new rdrop1(70);
  drop2 = new rdrop1(50);
  drop3 = new rdrop1(25);
  daisy = new Daisy();
}

function draw() {
  if(screen == 0){
    startScreen();
  }
  else if(screen == 1){
    gameScreen();
  } else if(screen == 2) {
    // 结束界面逻辑
    background(9, 143, 18);
    fill(255);
    textAlign(CENTER);
    textSize(40);
    text('游戏结束', width / 2, height / 2);
    textSize(20);
    text(`最终得分：${score}`, width / 2, height / 2 + 40);
    text('点击返回首页', width / 2, height / 2 + 80);
  }
}

function startScreen(){
  background(9, 143, 18);
  fill(255);
  textAlign(CENTER);
  textSize(40);
  text('water the daisy', width / 2, height / 2);
  textSize(20);
  text('click to start', width / 2, height / 2 + 40);
  reset();
}

function gameScreen(){
  background(9, 143, 18);
  fill(255);
  text(`得分 = ${score} | 剩余生命 = ${3 - missedCount}`, 80,25);
  noStroke();
  
  // 渲染雏菊
  daisy.render();
  
  drop1.update();
  drop1.render();
  drop2.update();
  drop2.render();
  drop3.update();
  drop3.render();
  
  // 漏接逻辑
  if(drop1.y>height){
    missedCount +=1;
    daisy.takeDamage();
    drop1.reset();
    if(missedCount >=3) screen = 2;
  }
  if(drop2.y>height){
    missedCount +=1;
    daisy.takeDamage();
    drop2.reset();
    if(missedCount >=3) screen = 2;
  }
  if(drop3.y>height){
    missedCount +=1;
    daisy.takeDamage();
    drop3.reset();
    if(missedCount >=3) screen = 2;
  }
  
  // 接雨滴逻辑
  if(drop1.y>height-75 && drop1.x>mouseX-20 && drop1.x<mouseX+20){
    score+= 1;
    drop1.reset();
  }
  if(drop2.y>height-75 && drop2.x>mouseX-20 && drop2.x<mouseX+20){
    score+= 1;
    drop2.reset();
  }
  if(drop3.y>height-75 && drop3.x>mouseX-20 && drop3.x<mouseX+20){
    score+= 1;
    drop3.reset();
  }
}

function mousePressed(){
  if(screen==0){
    screen=1;
  }
  else if(screen==2){
    screen=0;
  }
}

function reset(){
  score=0;
  missedCount = 0;
  daisy.reset();
  drop1.speed=0.8;
  drop1.y=-10;
  drop2.speed=0.8;
  drop2.y=-10;
  drop3.speed=0.8;
  drop3.y=-10;
}

class rdrop1{
  constructor(size){
    this.y = -10;
    this.x = random(20,width-20);
    this.size = size;
    this.speed = 2;
  }
  
  update(){
    this.y += this.speed
  }
  
  render(){
    fill(7,179,223);
    ellipse(this.x,this.y,this.size,this.size);
  }
  
  reset(){
    this.y = -10
    this.x = random(20,width-20)
    this.speed+= 0.2
  }
}

class Daisy{
  constructor() {
    this.petalSize = 50;
    this.coreSize = 30;
    this.maxLife = 3;
    this.life = this.maxLife;
  }

  takeDamage() {
    this.life = max(0, this.life - 1);
  }

  reset() {
    this.life = this.maxLife;
  }
  
  render(){ 
    ellipseMode(CENTER);
    // 动态计算花瓣颜色
    let r = map(this.life, 0, this.maxLife, 54, 240);
    let g = map(this.life, 0, this.maxLife, 32, 252);
    let b = map(this.life, 0, this.maxLife, 10, 243);
    fill(r, g, b);
    // 绘制四个花瓣
    ellipse(mouseX-25,height-50,this.petalSize,this.petalSize);
    ellipse(mouseX+25,height-50,this.petalSize,this.petalSize);
    ellipse(mouseX,height-75,this.petalSize,this.petalSize);
    ellipse(mouseX,height-25,this.petalSize,this.petalSize);
    // 绘制花心
    fill(235, 216, 52);
    ellipse(mouseX,height-50,this.coreSize,this.coreSize);
  }
}

对应的HTML代码无需修改，保持原有引用即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js" crossorigin=""></script>

内容的提问来源于stack exchange，提问作者crownM