如何重绘 javascript 中的文本？

Question

我的游戏有问题，我很确定它与重绘有关。所以这个游戏是，如果你通过箭头键手动控制你的黑色立方体来触摸蓝色立方体，你每次都会得到一个点。好吧，当你这样做的时候，它会自动产生新的分数。这张图更好解释（谢谢）：

这里是JSFiddle Format，点击右上角的edit编辑代码。警告：您需要点击游戏才能运行。

代码如下：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Snake Game</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <!-- Basic styling, centering the canvas -->
    <style>

    </style>
</head>

<body>
<canvas id = "game" width = "500" height = "500"></canvas>

    <script>
    $(document).ready(function(){
   var WIDTH = 500;
   var HEIGHT = 500;
   var keys = {};
   var canvas = document.getElementById('game');
   var ctx = canvas.getContext('2d');
   var score=0;

   var snake = {
      x:null,
      y:null,
      width:15,
      height:15,
      speed : 7,
      draw:function(){
        ctx.save();
        ctx.fillStyle = 'black'
        ctx.fillRect(this.x, this.y, this.width, this.height);
        ctx.restore();

      },
 /*
left arrow  37
up arrow  38
right arrow 39
down arrow  40

  */
      update:function(){

        if(keys[39]){
          ctx.clearRect(this.x, this.y, this.width, this.height);
          this.x += this.speed;
        }
        if(keys[37]){
          ctx.clearRect(this.x, this.y, this.width, this.height);
          this.x -= this.speed;
        }
        if(keys[38]){
          ctx.clearRect(this.x, this.y, this.width, this.height);
          this.y -= this.speed;
        }
        if(keys[40]){
          ctx.clearRect(this.x, this.y, this.width, this.height);
          this.y += this.speed;
        }

        //Checks if it is out of Bounds
        if(this.x>WIDTH-this.width){
          this.x=WIDTH-this.width;

        }
        if(this.x<0){
          this.x=0;

        }
        if(this.y>HEIGHT-this.width){
          this.y=HEIGHT-this.width;
        }
        if(this.y<0){
          this.y=0;
        }

        //Checks Collision
         var Collision = function(ax, ay, aw, ah, bx, by, bw, bh) {
              return ax < bx+bw && ay < by+bh && bx < ax+aw && by < ay+ah;
                };

        if(Collision(snake.x,snake.y,snake.width,snake.height,fruits.x,fruits.y,fruits.width,fruits.height)){
          ctx.clearRect(fruits.x, fruits.y, fruits.width, fruits.height);
          score +=1;
          fruits.x = Math.floor(Math.random()*WIDTH);
          fruits.y = Math.floor(Math.random()*HEIGHT);
        }

      }
   }

   var fruits = {
      x:null,
      y:null,
      width:15,
      height:15,
      draw:function(){
        ctx.save();
        ctx.fillStyle = 'blue'
        ctx.fillRect(this.x, this.y, this.width, this.height);
        ctx.restore();
      },
      update:function(){

      }
   }

   function main(){

    document.addEventListener("keydown" , function(event){
                keys[event.keyCode] = true;
            })

  document.addEventListener("keyup" , function(event){
                delete keys[event.keyCode];
            })

    init();

     var loop = function (){
   update();
   draw();
      window.requestAnimationFrame(loop, canvas);
    };
        window.requestAnimationFrame(loop, canvas);
   }



   function init(){


    snake.x = 20;
    snake.y = 20;
    fruits.x = (WIDTH)/2;
    fruits.y = HEIGHT/2;

   }

   function draw(){

    //Drawing the Square
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(0,HEIGHT);
    ctx.lineTo(HEIGHT,WIDTH);
    ctx.lineTo(WIDTH,0)
    ctx.lineTo(0,0)
    ctx.stroke();

     ctx.save();
    ctx.fillStyle = "red";
    ctx.font = "bold 40px monaco";
    ctx.fillText(score,60,100);
    ctx.save();

    snake.draw();
    fruits.draw();

    ctx.restore();


   }

  function update(){
    snake.update();
    fruits.update();

  }



main();

   })
    </script>
</body>

</html>

Answer 1

试试这个...

ctx.save();
ctx.clearRect(1, 1, WIDTH - 2, HEIGHT - 2);
ctx.fillStyle = "red";
ctx.font = "bold 40px monaco";
ctx.fillText(score,60,100);
ctx.save();

在你的 JSFiddle 中，它对我来说似乎工作正常。矩形是整个屏幕，因此您可以根据需要减小它的大小。

如何重绘 javascript 中的文本？

How to repaint a text in javascript?

javascript

repaint