JavaScript添加计分器问题：分数更新时游戏界面消失

问题根源 #

你代码里每次计分更新时调用的document.write(score)是核心问题——这个方法会清空当前页面的所有DOM内容，然后重新写入传入的内容，导致原本的canvas游戏界面、标题元素全部被删除，最终只剩分数文本。

解决方案 #

你已经在页面中定义了<p id="score"></p>用于展示分数，直接更新这个元素的内容即可，完全不需要使用document.write。

关键代码修改 #

把dispararCentro函数里所有的document.write(score)替换为：

document.getElementById("score").textContent = score;

完整修正后的代码 #

<meta charset="utf-8">

<canvas width="600" height="400"></canvas>

<h1>Puntos totales:</h1>
<p id="score"></p>


<script type="text/javascript">

var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");


pincel.fillStyle = "Lightgrey";
pincel.fillRect(0,0,600,400);

var radio = 15;
var xAleatorio;
var yAleatorio;
var score = 0


function disenharCircunferencia(x,y,radio,color) {

    pincel.fillStyle = color;
    pincel.beginPath();
    pincel.arc(x,y,radio,0,2*Math.PI);
    pincel.fill();

}

function limpiarPantalla(){

    pincel.clearRect(0,0,600,600); //limpiar el canvas, se le pasan las coordenadas del canvas

}   


var x = 0


function disenharObjetivo(x,y){

    disenharCircunferencia(x,y,radio+30,"red");
    disenharCircunferencia(x,y,radio+15,"white");
    disenharCircunferencia(x,y,radio,"red");

}

function sortearPosicion(maximo){

    return Math.floor(Math.random()*maximo); //redondea para abajo

}

function actualizarPantalla(){

    limpiarPantalla();
    xAleatorio = sortearPosicion(600);
    yAleatorio = sortearPosicion(400);
    disenharObjetivo(xAleatorio,yAleatorio);


}

setInterval(actualizarPantalla,5000); //Llamar funciones cada cierto tiempo (en este caso cada 5 milisegundos)

function dispararCentro(evento){

    var x = evento.pageX - pantalla.offsetLeft; //capturo la coordenada x y le resto el offset
    var y = evento.pageY - pantalla.offsetTop; //capturo la coordenada y y le resto el offset

    console.log(evento.pageX)

    if ( (x < xAleatorio + radio) && (x > xAleatorio - radio) && (y < yAleatorio + radio) && (y > yAleatorio - radio) ) {

        score = score + 20;
        document.getElementById("score").textContent = score;
        alert("Tiro certero. Puntos acumulados " + score);

    }
    else if ( (x < xAleatorio + (radio+15)) && (x > xAleatorio - (radio+15)) && (y < yAleatorio + (radio+15)) && (y > yAleatorio - (radio+15)) ) {

        score = score + 10;
        document.getElementById("score").textContent = score;
        alert("Tiro certero. Puntos acumulados " + score);

    } 
    else if ( (x < xAleatorio + (radio+30)) && (x > xAleatorio - (radio+30)) && (y < yAleatorio + (radio+30)) && (y > yAleatorio - (radio+30)) ) {

        score = score + 5;
        document.getElementById("score").textContent = score;
        alert("Tiro certero. Puntos acumulados " + score);
    }
}


pantalla.onclick = dispararCentro;

</script> 

额外优化建议 #

当前用alert提示分数会暂停游戏进程，体验不佳。可以考虑添加一个浮动的临时提示框，比如在页面底部设置一个div，用setTimeout让提示自动消失，这样游戏不会被中断。

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