Question

我目前正在开发一款小型瓷砖匹配游戏，并且每次完成游戏时，变量“bestTime”将存储您完成会话所花费的时间。然后，变量“bestTimeTxt”将获取该值并将其显示在文本中。完成会话后，将出现一个链接

，允许您重新开始。我把新文本

bestTimeTxt = new Text("Best Time: " + bestTime , "30px Monospace", "#000");
        bestTimeTxt.textBaseLine = "top";
        bestTimeTxt.x = 500;
        bestTimeTxt.y = 100;

在init（）函数之外所以它不应该继续重置我不知道我应该做什么，因为我能想到的每个组合都不起作用。

这是我的完整代码。

我也在为这个游戏使用画架

<!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 = 0;
      var bestTimeTxt;
      var matchesFoundText;
      var squares;
      var startingTime;

      bestTimeTxt = new Text("Best Time: " + bestTime , "30px Monospace", "#000");
        bestTimeTxt.textBaseLine = "top";
        bestTimeTxt.x = 500;
        bestTimeTxt.y = 100;

      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 = 500;

        startingTime = timeAllowable;



        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;



        stage.addChild(bestTimeTxt);

        stage.addChild(txt);


        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;

       ;

        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!"

          if((startingTime - secondsLeft) > bestTime)
            {

                bestTime = startingTime - secondsLeft;
                bestTimeTxt.text = "Best Time: " + bestTime;
            }

        }
        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

在你的代码中，在gameover方法中，我看到你正在使用history.go（0）再次播放链接。

从技术上讲，history.go（0）表示刷新页面和所有变量，无论范围是否设置为初始值。

如果您想保留会话的最佳分数并继续，请使用重播方法而不是历史记录。

更新代码：

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

JavaScript Variable不会停止恢复为0

1 个答案: