無法在畫架中創建文本

在小型匹配益智遊戲上工作。目前，它顯示剩餘時間的文本以及馬賽克瓷磚的數量。我試圖創造最佳完成時間（人們完成遊戲的速度有多快），但是卻遇到了很多問題。對於我創建「txt」和「matchesFoundText」的兩個變量，當我鍵入它們時，自動完成框將彈出並顯示「.text」作爲選項之一，因此我會得到類似「txt.text」的內容。但是，我不是爲「bestTimeTxt」得到這個選項，我不知道爲什麼會發生這種情況，我以同樣的方式做了所有三個變量，所以我很遺憾爲什麼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 = 500; 
     bestTimeTxt.y = 80; 



     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; 

     ; 

     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>

來源

2016-09-18 nathan rivera

好了，所以很明顯，爲什麼我是有問題的原因是因爲x和bestTimeTxt變量y位置是使其通過一切的位置被遮蔽。

來源

2016-09-18 02:48:10

無法在畫架中創建文本

回答

相關問題