替换屏幕文本

Question

我正在为这个游戏编写代码，每次点击一个球你都会得到一分。您的总分应反映在 points 变量保持分数的顶部。然而，乐谱每次都打印在自身之上。这意味着当您从 0 点变为 1 点时，1 会打印在 0 之上，依此类推。我知道在打印新乐谱之前我必须删除或替换以前的乐谱，但我是 JavaScript 的新手，我不知道该怎么做。

我的代码：

var x = Math.floor(Math.random() * 550);
var y = Math.floor(Math.random() * 350);
var r = 40;
var points = 0;

function setup() {
  createCanvas(550,350);
  background(0);
}

function draw() {
  fill (255)
  ellipse (x, y, r, r)
  text(("Score:" + points), width/2, 40)
}

function inside(mx, my){
    let d = dist(mx, my, x, y);
    return d < r - 10;
  }

function mousePressed() {
   if(inside(mouseX, mouseY)){
  points++; 
  }
}

Answer 1

嗯，你可以简单地使用 innerText 来显示你的分数

<p id="score"></p>

function mousePressed() {
  var hhi = dist (hballx, hbally, mouseX, mouseY)
  ellipse (hballx, hbally, hballsize, hballsize)
  if (hhi < hballsize/2) {
    hballx = (getRandomInt(550))
    hbally = (getRandomInt(350))
  score = score + 1;
document.getElementById("score").innerText = score; // it will replace the previous score if the score changes 
  }
}

Answer 2

您可以尝试创建 div。

var x = Math.floor(Math.random() * 550);
var y = Math.floor(Math.random() * 350);
var r = 40;
var points = 0;
let scoreDiv = null;

function setup() {
  createCanvas(550,350);
  background(0);
  scoreDiv = createDiv('');
  scoreDiv.position(width / 2, 40)
  scoreDiv.style('color', '#FFFFFF');
}

function draw() {
  fill (255)
  ellipse (x, y, r, r)
  scoreDiv.elt.innerText = `Score: ${points}`;
}

function inside(mx, my){
    let d = dist(mx, my, x, y);
    return d < r - 10;
  }

function mousePressed() {
   if(inside(mouseX, mouseY)){
    points++; 
  }
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>

替换屏幕文本

Replace On Screen Text

javascript

p5.js