使用Javascript创建HTML5画布游戏Bug粉碎器

我正在尝试使用Javascript创建一个类似于Bug Smasher或Ant Smasher游戏的画布游戏。这意味着obj将随机移动，当你点击它时，分数将增加。（我不允许使用JQuery） 我几乎完成了所有的工作。但有一个错误我无法理解：每次我点击对象时，分数都会增加，但它会覆盖数字“0”，如下所示：

这是我的代码：

// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
var timer = 0;
var caught = false;
var fps = 10;
document.body.appendChild(canvas);
canvas.width = 800;
canvas.height = 544;

// Background image
var bgReady = false;
var bgImage = new Image();

bgImage.onload = function () {
    bgReady = true;
};
bgImage.src = "images/background.png";

// nar image
var narReady = false;
var narImage = new Image();
narImage.onload = function () {
    narReady = true;
};
narImage.src = "images/nar.png";

var nar = {};
var narCaught = 0;
// When nar is caught, reset
var reset = function () {
    nar.x = 40 + (Math.random() * (canvas.width - 70));
    do {
        nar.y = 40 + (Math.random() * (canvas.height - 70));
    }
    while (nar.y < 100)
};

//mousedown event
window.addEventListener("mousedown", onMouseDown, false);
function onMouseDown(e) {

    if (e.button != 0) return;

    mouseXinCanvas = e.clientX;
    mouseYinCanvas = e.clientY;

    if (narBody(nar, mouseXinCanvas, mouseYinCanvas)) {
        caught = true;
        clearInterval(timer);
        timer = setInterval(reset, 20000 / fps);
        reset();
    }
    if (ResetScore(mouseXinCanvas, mouseYinCanvas)) {
        location.reload();
    }
    if (ResetSpeed(mouseXinCanvas, mouseYinCanvas)) {
        clearInterval(timer);
        timer = setInterval(reset, 20000 / fps);
        reset();
        render();
    }
};

//nar's body define
function narBody(nar, x, y) {

    if (x <= (nar.x + 80)
        && nar.x <= (x + 80)
        && y <= (nar.y + 80)
        && nar.y <= (y + 80)
    ) {
        fps = fps + 5;
        narCaught++;
        return true;
    }
    return false;
};

//Reset Score box
function ResetScore(x, y) {

    if (x > (305)
        && x < (545)
        && y > (15)
        && y < (85)
    ) {
        return true;
    }
    return false;
};

//Reset speed box
function ResetSpeed(x, y) {
    if (x > (605)
        && x < (845)
        && y > (15)
        && y < (85)
    ) {
        fps = 10;
        return true;
    }
    return false;
};

// Draw everything
var render = function () {
    if (bgReady) {
        ctx.drawImage(bgImage, 0, 100);
    }
    if (narReady) {
        ctx.drawImage(narImage, nar.x, nar.y);
    }
    if (caught == true) {
        if (bgReady) {
            ctx.drawImage(bgImage, 0, 100);
        }
        caught = false;
    }

    // Score, Title
    ctx.fillStyle = "rgb(65, 226, 24)";
    ctx.font = "34px Helvetica";
    ctx.textAlign = "left";
    ctx.textBaseline = "top";
    ctx.fillText("Catch Naruto!!!", 5, 40);
    ctx.font = "20px Helvetica";
    ctx.fillText("Score: " + narCaught, 10, 10);



    // Reset Score, Speed button
    ctx.fillStyle = "rgb(30, 168, 99)";
    ctx.fillRect(250, 10, 250, 80);
    ctx.fillRect(520, 10, 250, 80);
    ctx.fillStyle = "rgb(30, 168, 99)";
    ctx.fillRect(255, 15, 240, 70);
    ctx.fillRect(525, 15, 240, 70);
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.font = "34px Arial";
    ctx.fillText("Reset Score", 275, 30);
    ctx.fillText("Reset Speed", 545, 30);

};

// The main game loop
var main = function () {
    render();
    // Request to do this again ASAP
    requestAnimationFrame(main);
};

// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
// Let's play this game!
//var then = Date.now();
reset();
main();

//创建画布
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（'2d'）；
var定时器=0；
var=false；
var fps=10；
document.body.appendChild（画布）；
画布宽度=800；
canvas.height=544；
//背景图像
var bgrady=false；
var bgImage=新图像（）；
bgImage.onload=函数（）{
bgrady=true；
};
bgImage.src=“images/background.png”；
//nar图像
var narReady=false；
var narImage=新图像（）；
narImage.onload=函数（）{
narReady=true；
};
narImage.src=“images/nar.png”；
var-nar={}；
var narCaught=0；
//当捕捉到nar时，重置
变量重置=函数（）{
nar.x=40+（Math.random（）*（canvas.width-70））；
做{
nar.y=40+（Math.random（）*（canvas.height-70））；
}
而（相对湿度<100）
};
//鼠标下移事件
addEventListener（“mousedown”，onMouseDown，false）；
函数onMouseDown（e）{
如果（e.按钮！=0）返回；
mouseXinCanvas=e.clientX；
mouseyincavas=e.clientY；
if（narBody（nar、mouseXinCanvas、MouseyIncavas））{
捕获=真实；
清除间隔（计时器）；
定时器=设置间隔（重置，20000/fps）；
重置（）；
}
if（重置分数（mouseXinCanvas、MouseyIncavas））{
location.reload（）；
}
if（重置速度（mouseXinCanvas、MouseyIncavas））{
清除间隔（计时器）；
定时器=设置间隔（重置，20000/fps）；
重置（）；
render（）；
}
};
//纳尔的身体定义
函数体（nar，x，y）{
if（x（15）
&&y<（85）
) {
fps=10；
返回true；
}
返回false；
};
//画一切
var render=函数（）{
如果（bgReady）{
ctx.drawImage（bgImage，01100）；
}
如果（准备就绪）{
ctx.drawImage（narImage，nar.x，nar.y）；
}
如果（捕获==真）{
如果（bgReady）{
ctx.drawImage（bgImage，01100）；
}
捕获=错误；
}
//分数、头衔
ctx.fillStyle=“rgb（6522624）”；
ctx.font=“34px Helvetica”；
ctx.textAlign=“左”；
ctx.textb基线=“顶部”；
ctx.fillText（“捕捉火影忍者！！！”，5，40）；
ctx.font=“20px Helvetica”；
ctx.fillText（“分数：+narCaught，10,10）；
//重置分数、速度按钮
ctx.fillStyle=“rgb（30168,99）”；
ctx.fillRect（250,10250,80）；
ctx.fillRect（520,10250,80）；
ctx.fillStyle=“rgb（30168,99）”；
ctx.fillRect（255,15,240,70）；
ctx.fillRect（525,15240,70）；
ctx.fillStyle=“rgb（255，255，255）”；
ctx.font=“34px Arial”；
ctx.fillText（“重置分数”，275,30）；
ctx.fillText（“重置速度”，545,30）；
};
//主游戏循环
var main=函数（）{
render（）；
//请求尽快再次执行此操作
requestAnimationFrame（主）；
};
//对requestAnimationFrame的跨浏览器支持
var w=窗口；
requestAnimationFrame=w.requestAnimationFrame | | w.webkitRequestAnimationFrame | | w.msRequestAnimationFrame | | w.mozRequestAnimationFrame；
//让我们玩这个游戏吧！
//var then=Date.now（）；
重置（）；
main（）；

任务5

---

请帮忙（

这个问题很容易解决。在渲染新帧之前，只需清除前一帧的所有渲染

只需将以下行添加到

render

函数

ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

你会注意到文本的质量也提高了。这是因为你不再在旧文本的顶部绘制

我不知道背景图像是什么，所以我清除了整个画布。但是如果背景图像不是透明的，你只需要清除它没有覆盖的部分

请参见下面的更改

//创建画布
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（'2d'）；
var定时器=0；
var=false；
var fps=10；
document.body.appendChild（画布）；
画布宽度=800；
canvas.height=544；
//背景图像
var bgrady=false；
var bgImage=新图像（）；
bgImage.onload=函数（）{
bgrady=true；
};
bgImage.src=“images/background.png”；
//nar图像
var narReady=false；
var narImage=新图像（）；
narImage.onload=函数（）{
narReady=true；
};
narImage.src=“images/nar.png”；
var-nar={}；
var narCaught=0；
//当捕捉到nar时，重置
变量重置=函数（）{
nar.x=40+（Math.random（）*（canvas.width-70））；
做{
nar.y=40+（Math.random（）*（canvas.height-70））；
}
而（相对湿度<100）
};
//鼠标下移事件
addEventListener（“mousedown”，onMouseDown，false）；
函数onMouseDown（e）{
如果（e.按钮！=0）返回；
mouseXinCanvas=e.clientX；
mouseyincavas=e.clientY；
if（narBody（nar、mouseXinCanvas、MouseyIncavas））{
捕获=真实；
清除间隔（计时器）；
定时器=设置间隔（重置，20000/fps）；
重置（）；
}
if（重置分数（mouseXinCanvas、MouseyIncavas））{
location.reload（）；
}
if（重置速度（mouseXinCanvas、MouseyIncavas））{
清除间隔（计时器）；
定时器=设置间隔（重置，20000/fps）；
重置（）；
render（）；
}
};
//纳尔的身体定义
函数体（nar，x，y）{
if（x（15）
&&y<（85）
) {
fps=10；
返回true；
}
返回false；
};
//画一切
var render=函数（）{
//===========================================================
//添加以下行以清除显示。
clearRect（0,0，ctx.canvas.width，ctx.canvas.height）；
如果（bgReady）{
ctx.drawIma