如何要求玩家输入p5.js十六进制代码

Question

我有一个“立方体点击游戏”的代码，我正在搞乱

let angleX = 0;
let angleY = 0;
let sideLength;
let vertices = [];
let particles = [];
let score = 1;
let variableToToggle = false;
let variableToToggle2 = false;
let variableToToggle3 = false;
let cubeScaleFactor = 0.5; // Adjust this factor to control the size of the cube
let particleScaleFactor; // This will be calculated based on the original canvas size
let col1 = null; // Updated to allow selection through buttons
let startScreen = true; // Added to track if the start screen is active
let buttonGraphics; // Graphics buffer for button text
let xenoxFont; // Declare xenoxFont variable

function preload() {
  // Load the Xenox font
  xenoxFont = loadFont('xenox.ttf'); 
}

function setup() {
  createCanvas(400, 400, WEBGL);

  // Calculate sideLength based on the smaller dimension of the canvas
  sideLength = min(width, height) * cubeScaleFactor / 2;

  // Calculate particleScaleFactor based on the original canvas size (400, 400)
  particleScaleFactor = sqrt((width * height) / (400 * 400));

  // Define vertices for the cube
  for (let i = -1; i <= 1; i += 2) {
    for (let j = -1; j <= 1; j += 2) {
      for (let k = -1; k <= 1; k += 2) {
        vertices.push(createVector(i * sideLength / 2, j * sideLength / 2, k * sideLength / 2));
      }
    }
  }

  // Create a graphics buffer for button text
  buttonGraphics = createGraphics(400, 400);
  buttonGraphics.textFont(xenoxFont); 
  buttonGraphics.textAlign(CENTER, CENTER);
  buttonGraphics.textSize(20);

  // Display start screen buttons
  displayStartScreen();
}

function draw() {
  // Draw the main content
  if (startScreen) {
    // Draw start screen background
    background(255);

    // Display start screen buttons
    displayStartScreen();
  } else {
    if (score % 50 === 0) {
      variableToToggle = !variableToToggle;
      score++;
      if (variableToToggle2 == false) {
        variableToToggle3 = !variableToToggle3;
      }
    }

    // Toggle background color
    if (variableToToggle == false) {
      background(220);
    } else {
      background(10);
    }
    cubeCreate();

    // Draw and update particles
    for (let i = particles.length - 1; i >= 0; i--) {
      particles[i].update();
      particles[i].display();
      if (particles[i].isOffScreen()) {
        particles.splice(i, 1);
      }
    }
  }
}

function mousePressed() {
  if (startScreen) {
    // Check if the mouse is over a color button on the start screen
    const numButtons = 5;
    const buttonHeight = height / numButtons;

    for (let i = 0; i < numButtons; i++) {
      let buttonY = height / 2 - buttonHeight + i * buttonHeight;
      if (mouseX > width / 2 - 200 && mouseX < width / 2 + 200 && mouseY > buttonY - 1.5 * buttonHeight && mouseY < buttonY - 0.5 * buttonHeight) {
        col1 = i; // Adjust the col1 value accordingly
        startScreen = false;
        clearStartScreen();
      }
    }
  } else {
    // Check if the mouse is inside the cube
    let d = dist(mouseX - width / 2, mouseY - height / 2, 0, 0);
    if (d < sideLength) {
      // Generate particles in both directions and update the score
      for (let i = 0; i < 10; i++) {
        particles.push(new CubeParticle(1)); // Particle in the current direction
        particles.push(new CubeParticle(-1)); // Particle in the opposite direction
      }
      score++;
    }
  }
}


function displayStartScreen() {
  // Display start screen with 5 buttons
  for (let i = 0; i < 5; i++) {
    buttonGraphics.fill(150);
    buttonGraphics.rect(0, i * 80, 400, 80);
    buttonGraphics.fill(255);
    buttonGraphics.text('Color ' + (i + 1), 200, 40 + i * 80);
  }
  texture(buttonGraphics);
  plane(400, 400);
}

function clearStartScreen() {
  // Clear start screen button
  background(255);
}

class CubeParticle {
  constructor(direction) {
    this.position = createVector(0, 0, 0);
    this.velocity = createVector(random(-2, 2) * particleScaleFactor * direction, random(-5, -1) * particleScaleFactor, random(-2, 2) * particleScaleFactor * direction);
    this.size = 5 * particleScaleFactor;

    // Contrast the hue of the cube color
    this.hue = (random(360) + 180) % 360; // Random hue with 180-degree contrast
  }

  update() {
    this.position.add(this.velocity);
    this.velocity.y += 0.1 * particleScaleFactor; // Gravity
  }

  display() {
    push();
    translate(this.position.x, this.position.y, this.position.z);
    fill(this.hue, 100, 100);
    box(this.size);
    pop();
  }

  isOffScreen() {
    return this.position.y > height / 2;
  }
}

function cubeCreate() {
  rotateX(angleX);
  rotateY(angleY);

  // Draw the cube
  if (variableToToggle2 == false) {
    variableToToggle3 = true;
    if (col1 == 0) {
      stroke(0);
      fill(150, 150, 255, 250);
    } else if (col1 == 1) {
      stroke(0, 0, 255, 250);
      fill(50, 50, 255, 150);
    } else if (col1 == 2) {
      stroke(255, 0, 0, 250);
      fill(255, 50, 50, 150);
    } else if (col1 == 3) {
      stroke(255, 150, 0, 250);
      fill(255, 200, 50, 150);
    } else if (col1 == 4){
      
    } else {
      stroke(0);
      fill(150, 150, 150, 250);
    }
  }

  beginShape();
  // Bottom face
  vertex(vertices[0].x, vertices[0].y, vertices[0].z);
  vertex(vertices[2].x, vertices[2].y, vertices[2].z);
  vertex(vertices[6].x, vertices[6].y, vertices[6].z);
  vertex(vertices[4].x, vertices[4].y, vertices[4].z);
  endShape(CLOSE);

  beginShape();
  // Top face
  vertex(vertices[1].x, vertices[1].y, vertices[1].z);
  vertex(vertices[3].x, vertices[3].y, vertices[3].z);
  vertex(vertices[7].x, vertices[7].y, vertices[7].z);
  vertex(vertices[5].x, vertices[5].y, vertices[5].z);
  endShape(CLOSE);

  beginShape();
  // Side faces
  vertex(vertices[0].x, vertices[0].y, vertices[0].z);
  vertex(vertices[1].x, vertices[1].y, vertices[1].z);
  vertex(vertices[3].x, vertices[3].y, vertices[3].z);
  vertex(vertices[2].x, vertices[2].y, vertices[2].z);
  endShape(CLOSE);

  beginShape();
  vertex(vertices[4].x, vertices[4].y, vertices[4].z);
  vertex(vertices[5].x, vertices[5].y, vertices[5].z);
  vertex(vertices[7].x, vertices[7].y, vertices[7].z);
  vertex(vertices[6].x, vertices[6].y, vertices[6].z);
  endShape(CLOSE);

  // Front and back faces
  beginShape();
  vertex(vertices[0].x, vertices[0].y, vertices[0].z);
  vertex(vertices[1].x, vertices[1].y, vertices[1].z);
  vertex(vertices[5].x, vertices[5].y, vertices[5].z);
  vertex(vertices[4].x, vertices[4].y, vertices[4].z);
  endShape(CLOSE);

  beginShape();
  vertex(vertices[2].x, vertices[2].y, vertices[2].z);
  vertex(vertices[3].x, vertices[3].y, vertices[3].z);
  vertex(vertices[7].x, vertices[7].y, vertices[7].z);
  vertex(vertices[6].x, vertices[6].y, vertices[6].z);
  endShape(CLOSE);

  // Update rotation angles
  angleX += 0.01;
  angleY += 0.01;
}

我想要第五个按钮进入十六进制代码输入

我考虑过使用钥匙检测系统 示例

您按下了 color5 按钮

带有闪烁垂直线的矩形轮廓，模仿您在代码中的位置

功能 keyPressed() 检测十六进制代码所需的数字和字母键

输入按钮输入或按 ENTER

应该返回红色文本十六进制代码不存在或如果它不是有效的十六进制代码

一些问题 #1 你不能复制和粘贴十六进制代码 #2（可以说更重要）我很难嵌入这样的函数（如果我知道一种方法有效，我愿意这样做）

有人可以帮助我吗？

请注意 - 我使用的是 WEBGL 格式，所以文本真的很奇怪 我唯一的额外文件是 xenox 文本（如果你想测试它，它可以是重命名为 xenox.ttf 的任何字体）

Answer 1

使用 textInput() 函数有效