Fps для тайла карты не отображается - PullRequest
Новая
       1

Fps для тайла карты не отображается

0 голосов
/ 17 февраля 2019

Я пытаюсь сделать так, чтобы fps на моей простой карте тайлов отображался (вверху справа), но по какой-то причине он не отображается в браузере, когда я его загружаю.Я следовал руководству по Technologies4 me на YouTube и внес несколько изменений в код.Я новичок, так что это может быть опечатка, но я бы очень признателен за помощь. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <canvas id="game" width="600" height="300"></canvas>
    <script>
        var ctx=null;
        var tileW=30, TileH=30;
        var mapW=20, mapH=10;

        var currentSecond= 0, frameCount=0, framesLastSecond=0; 

        var gameMap=[
            0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
            0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
            0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
            0,0,0,0,0,0,3,3,0,0,3,3,0,0,0,0,0,0,0,0,
            0,0,0,0,0,0,0,0,0,0,0,0,0,3,3,0,0,0,0,0,
            0,0,0,0,2,2,2,2,2,0,0,0,0,0,0,0,0,0,0,0,
            0,0,0,2,2,2,2,2,2,2,0,0,0,0,0,0,2,0,0,2,
            1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,
            1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,
            1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,
        ];
        window.onload=function(){
            ctx=document.getElementById("game").getContext("2d");
            requestAnimationFrame(drawGame);
            ctx.font="bold 10px sans-serif"; 

        };
        function drawGame(){
            if(ctx==null){return;}

            var sec=Math.floor(Date.now()/1000);
            if(sec!=currentSecond){
                currentSecond=sec;
                framesLastSecond=frameCount;
                frameCount=1;
            }
            else{frameCount++;}

            for(var y=0; y<mapH; y++){
                for(var x=0; x<mapW; x++){
                    switch(gameMap[((y*mapW)+x)]){
                        case 0:
                            ctx.fillStyle="White";
                            break;
                        default:
                        ctx.fillStyle="Green";
                    }
                    ctx.fillRect(x*tileW,y*TileH,tileW,TileH);
                }
            }
            ctx.fillStyle="Red";
            ctx.fillText=("FPS: "+framesLastSecond, 10, 20);

            requestAnimationFrame(drawGame);
        }
    </script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 17 февраля 2019

Это просто опечатка.ctx.fillText - это функция, но вы назначаете ее вместо вызова.

Удалите = в ctx.fillText=("FPS: "+framesLastSecond, 10, 20);: 

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <canvas id="game" width="600" height="300"></canvas>
  <script>
    var ctx = null;
    var tileW = 30,
      TileH = 30;
    var mapW = 20,
      mapH = 10;

    var currentSecond = 0,
      frameCount = 0,
      framesLastSecond = 0;

    var gameMap = [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 2, 0, 0, 2,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1,
    ];
    window.onload = function() {
      ctx = document.getElementById("game").getContext("2d");
      ctx.font = "bold 10px sans-serif";
      requestAnimationFrame(drawGame);
      
    };

    function drawGame() {
      if (ctx == null) {
        return;
      }

      var sec = Math.floor(Date.now() / 1000);
      if (sec != currentSecond) {
        currentSecond = sec;
        framesLastSecond = frameCount;
        frameCount = 1;
      } else {
        frameCount++;
      }

      for (var y = 0; y < mapH; y++) {
        for (var x = 0; x < mapW; x++) {
          switch (gameMap[((y * mapW) + x)]) {
            case 0:
              ctx.fillStyle = "White";
              break;
            default:
              ctx.fillStyle = "Green";
          }
          ctx.fillRect(x * tileW, y * TileH, tileW, TileH);
        }
      }
      ctx.fillStyle = "Red";
      ctx.fillText("FPS: " + framesLastSecond, 10, 20);

      requestAnimationFrame(drawGame);
    }
  </script>
</body>

</html>
0 голосов
/ 17 февраля 2019

Измените это:

ctx.fillText=("FPS: "+framesLastSecond, 10, 20);

на это:

ctx.fillText("FPS: "+framesLastSecond, 10, 20);

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...