Question

我一直在研究一个简单的匹配益智游戏。目前我已经能够将倒计时时间和匹配的瓷砖数量显示为文本，并且我正在尝试创建一个以完成最佳时间（基本上这个人完成拼图的速度有多快）。但是每当我尝试创建它时，文本都不会显示。我在编写代码时注意到，如果我将变量“txt”放在后面跟一个“。”。自动完成框将以.text作为可用选项出现，因此我将获得“txt.text”。但是，在编写bestTimeTxt变量时，我没有得到那个选项，这是我用来显示时间的。我不确定我做错了什么，这是我的代码。

    <!DOCTYPE html>
<html>
  <head>
    <title>Recipe: Drawing a square</title>
    <script src="easel.js"></script>
    <script type="text/javascript">


      var canvas;
      var stage;
      var squareSide = 70;
      var squareOutline = 5;
      var max_rgb_color_value = 255;
      var gray = Graphics.getRGB(20, 20, 20);
      var placementArray = []; 
      var tileClicked;
      var timeAllowable;
      var totalMatchesPossible;
      var matchesFound;
      var txt;
      var bestTime;
      var bestTimeTxt;
      var matchesFoundText;
      var squares;

      function init() {
        var rows = 5;
        var columns = 6;
        var squarePadding = 10;

        canvas = document.getElementById('myCanvas');



        stage = new Stage(canvas);

        var numberOfTiles = rows*columns;

        matchesFound = 0;

        timeAllowable = 5;

        bestTime = 0

        txt = new Text(timeAllowable, "30px Monospace", "#000");
        txt.textBaseline = "top"; // draw text relative to the top of the em box.
        txt.x = 500;
        txt.y = 0;

        bestTimeTxt = new Text(bestTime, "30px Monospace", "#000");
        bestTimeTxt.textBaseLine = "top";
        bestTimeTxt.x = 300;
        bestTimeTxt.y = 0;

        stage.addChild(txt);
        stage.addChild(bestTimeTxt);

        squares = [];

        totalMatchesPossible = numberOfTiles/2;

        Ticker.init();
        Ticker.addListener(window);
        Ticker.setPaused(false);

        matchesFoundText = new Text("Pairs Found: "+matchesFound+"/"+totalMatchesPossible, "30px Monospace", "#000");
        matchesFoundText.textBaseline = "top"; // draw text relative to the top of the em box.
        matchesFoundText.x = 500;
        matchesFoundText.y = 40;

        stage.addChild(matchesFoundText);

        setPlacementArray(numberOfTiles);

        for(var i=0;i<numberOfTiles;i++){
          var placement = getRandomPlacement(placementArray);
          if (i % 2 === 0){
            var color = randomColor();
          }
          var square = drawSquare(gray);
          square.color = color; 
          square.x = (squareSide+squarePadding) * (placement % columns);
          square.y = (squareSide+squarePadding) * Math.floor(placement / columns);
          squares.push(square);
          stage.addChild(square);
          square.cache(0, 0, squareSide + squarePadding, squareSide + squarePadding);
          square.onPress = handleOnPress;
          stage.update();
        };
      }


      function drawSquare(color) {
        var shape = new Shape();
        var graphics = shape.graphics;

        graphics.setStrokeStyle(squareOutline);
        graphics.beginStroke(gray);
        graphics.beginFill(color);
        graphics.rect(squareOutline, squareOutline, squareSide, squareSide);

        return shape;


      }


      function randomColor(){
        var color = Math.floor(Math.random()*255);
        var color2 = Math.floor(Math.random()*255);
        var color3 = Math.floor(Math.random()*255);
        return Graphics.getRGB(color, color2, color3)
      }


      function setPlacementArray(numberOfTiles){
        for(var i = 0;i< numberOfTiles;i++){
          placementArray.push(i);
        }
      }


      function getRandomPlacement(placementArray){
        randomNumber = Math.floor(Math.random()*placementArray.length);
        return placementArray.splice(randomNumber, 1)[0];
      }


      function handleOnPress(event){
        var tile = event.target;

        tile.graphics.beginFill(tile.color).rect(squareOutline, squareOutline, squareSide, squareSide);

        if(!!tileClicked === false || tileClicked === tile){
          tileClicked = tile;
          tileClicked.updateCache("source-overlay"); 
        }else{
          if(tileClicked.color === tile.color && tileClicked !== tile){
            tileClicked.visible = false;
            tile.visible = false;
            matchesFound++;
            matchesFoundText.text = "Pairs Found: "+matchesFound+"/"+totalMatchesPossible;
            if (matchesFound===totalMatchesPossible){
              gameOver(true);
            }
          }else{
            tileClicked.graphics.beginFill(gray).rect(squareOutline, squareOutline, squareSide, squareSide);
          }
          tileClicked.updateCache("source-overlay");
          tile.updateCache("source-overlay");
          tileClicked = tile;
        }
        stage.update(); 
      }


      function tick() {
        secondsLeft = Math.floor((timeAllowable-Ticker.getTime()/1000));

        txt.text = secondsLeft;

        bestTimeTxt.text = "test";

        if (secondsLeft <= 0){
          gameOver(false);
        }
        stage.update();
      }


      function gameOver(win){




        Ticker.setPaused(true);

        for(var i=0;i<squares.length;i++){
          squares[i].graphics.beginFill(squares[i].color).rect(5, 5, 70, 70);
          squares[i].onPress = null;
          if (win === false){
            squares[i].uncache();
          }
        }

        var replayParagraph = document.getElementById("replay");

        replayParagraph.innerHTML = "<a href='#' onClick='history.go(0);'>Play Again?</a>";

        if (win === true){
          matchesFoundText.text = "You win!"
        }else{
          txt.text = secondsLeft + "... Game Over";
        }
      }


      function replay(){
        init();
      }


    </script>
</head>
<body onload="init()">
  <header id="header">
    <p id="replay"></p>
  </header>
  <canvas id="myCanvas" width="960" height="400"></canvas>
</body>
</html>

Answer 1

显然我遇到的问题是文本的x和y位置导致它出现在其他所有内容之后。

JavaScript文字无法显示

1 个答案: