为什么我的 Fish Game 得分会在更新时自行叠加？

Question

这个游戏的原理是一条鱼吃小鱼，然后慢慢变大。每次鱼吃另一条鱼时，分数应该更新。当你吃一条鱼时，分数会更新为 1，但直到你吃了一堆鱼（它会有所不同），它才会更新为 2，然后 2 显示在 1 之上。

阅读风险自负：

<!DOCTYPE html>
<html>
 <head>
    <title> Fish Game! </title>
    <script src="https://simplycodingcourses.com/files/simplyjs/simply.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    
 <script type="text/javascript">
    function start(){
             sjs.open("target", 800, 500);

             var background = new sjs.Image("Images/background.png");
             background.setSize(sjs.getWidth(), sjs.getHeight());

             //Player Properties below here
             var player = new sjs.Image("Images/fish_left.png");
             player.type = "player";
             player.setSize(100,50);
             player.friction = .1;
             player.accel = .6;

             sjs.keyDown(RIGHT_KEY, function(){
                 player.setImage("Images/fish_right.png");
                 player.pushRight();
             });

             sjs.keyDown(LEFT_KEY, function(){
                 player.setImage("Images/fish_left.png");
                 player.pushLeft();
             });

             sjs.keyDown(UP_KEY, function(){
                 player.pushUp();
             });

             sjs.keyDown(DOWN_KEY, function(){
                 player.pushDown();
             });


         //Powerup

         setInterval(function(){
             var x = Math.floor(Math.random() * 783);
             var y = Math.floor(Math.random() * 470);
             var powerUp = new 
             sjs.Image("Images/crumbs.png");
             powerUp.type = "powerUp";
             powerUp.setGravity();
             powerUp.setSize(17,30);
             powerUp.noBounds = true;
             powerUp.moveTo(x, y);
             powerUp.friction = 0.2;
         }, 5000);

         sjs.onHit("powerUp", "bottom_screen", function(x,y){
             x.destroy();
         });

         sjs.onHit("player","powerUp", function(x,y){
             x.grow(60,30);
             setTimeout(function(){
                 x.grow(-60,-30)
             }, 5000);
             y.destroy();
         });

         //Enemies
         setInterval(function(){
             var speed = Math.round(1 + Math.random()*10);
             if(Math.random() > 0.5){
                 var enemy = new sjs.Image("Images/fish2_right.png");
                 enemy.type = "enemy";
                 enemy.setSize(100,50);
                 enemy.noBounds = true;
                 enemy.friction = 0;
                 enemy.pushRight(speed);
                 enemy.scaleSize(.5 + Math.random() *1.2);
                 enemy.moveTo(-enemy.getWidth(), Math.random()*(enemy.getClamp().y));
             } else{
                 var enemy = new sjs.Image("Images/fish2_left.png");
                 enemy.type = "enemy";
                 enemy.setSize(100,50);
                 enemy.noBounds = true
                 enemy.friction = 0;
                 enemy.pushLeft(speed);
                 enemy.scaleSize(.5 + Math.random() * 1.2);
                 enemy.moveTo(sjs.getWidth(), Math.random()*(enemy.getClamp().y));
             }
             sjs.left_screen.offset(-500);
             sjs.right_screen.offset(500);

             sjs.onHit("enemy",["right_screen","left_screen"],function(x,y){
                 x.destroy();
             });

             //Score 
             var score = 0;
             var score_txt = new sjs.Text("Score: ", 21, "orange");

             sjs.onHit("player","enemy",function(x,y){
                 if(x.getWidth() > y.getWidth() && x.getHeight() > y.getHeight()) {
                     score = score + 1;
                     score_txt.setText("Score: " + score);
                     localStorage.setItem("score", score);
                     x.grow(10,5);
                     if(score >= 20){
                         window.location = "win.html";
                     }
                 } else {
                    //x.destroy();
                    //window.location = "gameover.html";
                    console.log("Normally I would die but that got annoying so for now you will just get me AAAAA");
                 }

                 y.destroy();
             });

         },1000);

         } //end start
 </script>
 </head>
 <body onload="start()">
    <h1>Fish Dominance</h1>

    <div id="target" style="margin:auto;background:white;"></div>
 </body>
 </html>

Answer 1

实际上，我对那个库一无所知 Simply.js 但从图片上看，您正在绘制相同的文本，通过查看您的代码，我看到对象 score_txt = new sjs.Text("Score: ", 21, "orange"); 那是每 1 秒创建一次，因此您应该在开始时在 start 函数中创建一次，score 变量也是如此以跟踪分数，例如

function start(){
  var score = 0;
  var score_txt = new sjs.Text("Score: ", 21, "orange");
  // the rest of your code
}

为什么我的 Fish Game 得分会在更新时自行叠加？

Why does my Fish Game score overlay itself as it updates?

html

javascript

local-storage