为什么画布不会加载？

时间：2021-06-06 14:13:24

标签： javascript html

我在 tynker 中编写了一个小游戏。它在那里完全正常工作。但是当我将它放入一个 html 文件并在浏览器中加载它时，它只是一个空白屏幕。我知道 tynker 做了一些厚颜无耻的事情来让你的代码在过去工作。我想知道是否需要调用一些“唤醒”函数来启动脚本。问题可能很明显，我没有那么多编程经验。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id= "myCanvas" width= "500" height= "500"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    
    // Set up background image
    var background = new Image();
    background.src = "/assets2/assets/57b614dfaf9231f5688b4576.png";
    background.onload = function() {
        ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
        start();
    }
    
    // Set up ships
    var pointsBiden = 0;
    var pointsTrump = 0;
    
    var image1 = new Image();
    var image1x
    var image1y
    
    var image2 = new Image();
    var image2x
    var image2y
    
    var donaldstop = false;
    var bidenstop = false;
    
    var bidenTurn = false;
    var trumpTurn = true;
    
    function wait(stop,waitsecs) {
        setTimeout(stop, waitsecs);
    }

    function donothing() {
        //
    }
    
    
    function start(){
            image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp";
            image1.onload = function(){
            image1x = 0;
            image1y = 250;
            ctx.drawImage(image1, image1x, image1y);
        }
            image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
            image2.onload = function(){   
            image2x = 300;
            image2y = 250;
            ctx.drawImage(image2, image2x, image2y);
        
           }
        }   
    

    document.addEventListener("keydown", keyDownHandler);
    
    
    function keyDownHandler(event){
        if (event.keyCode == 32) {
            donaldstop = true;
            console.log("easter egg! (   your pretty cool :)  )")
            function fixTrump() {
                donaldstop = false;
            }
            wait(fixTrump, 1000)
        }
        if (event.keyCode == 9) {
            bidenstop = true;
            function fixBiden() {
                bidenstop = false;
            }
            wait(fixBiden, 1000)
        }
        
         if (donaldstop == false) {
           if (event.keyCode == 37) {
                image1x = image1x - 50;
           } else if (event.keyCode == 38) {
              image1y = image1y - 50;
           } else if (event.keyCode == 39) {
              image1x = image1x + 50;
           } else if (event.keyCode == 40) {
              image1y = image1y + 50;
           }
         }
        // Add cases for WASD keys, to change coordinates of image2
        if (bidenstop == false) {
            if (event.keyCode == 87) {
                image2y = image2y - 50;
            } else if (event.keyCode == 65) {
                image2x = image2x - 50;
            } else if (event.keyCode == 83) {
                image2y = image2y + 50;
            } else if (event.keyCode == 68) {
                image2x = image2x + 50;
            }
        }
        if (bidenTurn == true) {
            if (image1x == image2x && image1y == image2y) {
                image1x = 0;
                image1y = 250;
        
                image2x = 300;
                image2y = 250;
                pointsBiden = pointsBiden + 1;
                
                bidenTurn = false;
                trumpTurn = true;
            }
        }
        if (trumpTurn == true) {
            if (image1x == image2x && image1y == image2y) {
                image1x = 0;
                image1y = 250;
        
                image2x = 300;
                image2y = 250;
                pointsTrump = pointsTrump + 1;
                
                trumpTurn = false;
                bidenTurn = true;
            }
        }
        
        redraw();
    }
    
    
    
    function redraw() {

        if (trumpTurn == true) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
                
                image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
                image2.onload = function(){
                ctx.drawImage(image2, image2x, image2y);
            }
                image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp"
                image1.onload = function(){
                ctx.drawImage(image1, image1x, image1y);
            }
         }
        
        if (bidenTurn == true) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
                
            image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp"
            image1.onload = function(){
            ctx.drawImage(image1, image1x, image1y);
            }
            image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
            image2.onload = function(){   
            ctx.drawImage(image2, image2x, image2y);
        
            }
        }
        
        
        ctx.font = "60px Verdana";
        ctx.fillText(pointsBiden, image2x + 80, image2y - 100);
        ctx.fillText(pointsTrump, image1x + 80, image1y - 100);
    }
</script>
</body>
</html>

2 个答案:

答案 0 :(得分：0)

问题在于您为背景提供的 src。

"/assets2/assets/57b614dfaf9231f5688b4576.png" 是相对路径。这意味着当您在 tynker 中使用它时，您的项目中可能有一个名为“assets2”的文件夹等，其中包含要用作背景的图像文件。如果您只是将代码移动到 HTML 文件，而没有将您在代码中使用的其他资源（预计会成为项目文件夹的一部分）引入，则会出现错误。

基本上，您需要将您的 HTML 文件和您的项目可能使用的任何本地图像放入您的项目文件夹中。然后你应该可以成功运行游戏了。

答案 1 :(得分：0)

您必须检查 background.src 中提供的目录，您可能提供了错误的目录，因为使用链接而不是提供的图像会起作用。

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    // Set up background image
    var background = new Image();
    background.src = "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"; // Changed this line only
    background.onload = function() {
      ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
      start();
    }

    // Set up ships
    var pointsBiden = 0;
    var pointsTrump = 0;

    var image1 = new Image();
    var image1x
    var image1y

    var image2 = new Image();
    var image2x
    var image2y

    var donaldstop = false;
    var bidenstop = false;

    var bidenTurn = false;
    var trumpTurn = true;

    function wait(stop, waitsecs) {
      setTimeout(stop, waitsecs);
    }

    function donothing() {
      //
    }


    function start() {
      image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp";
      image1.onload = function() {
        image1x = 0;
        image1y = 250;
        ctx.drawImage(image1, image1x, image1y);
      }
      image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
      image2.onload = function() {
        image2x = 300;
        image2y = 250;
        ctx.drawImage(image2, image2x, image2y);

      }
    }


    document.addEventListener("keydown", keyDownHandler);


    function keyDownHandler(event) {
      if (event.keyCode == 32) {
        donaldstop = true;
        console.log("easter egg! (   your pretty cool :)  )")

        function fixTrump() {
          donaldstop = false;
        }
        wait(fixTrump, 1000)
      }
      if (event.keyCode == 9) {
        bidenstop = true;

        function fixBiden() {
          bidenstop = false;
        }
        wait(fixBiden, 1000)
      }

      if (donaldstop == false) {
        if (event.keyCode == 37) {
          image1x = image1x - 50;
        } else if (event.keyCode == 38) {
          image1y = image1y - 50;
        } else if (event.keyCode == 39) {
          image1x = image1x + 50;
        } else if (event.keyCode == 40) {
          image1y = image1y + 50;
        }
      }
      // Add cases for WASD keys, to change coordinates of image2
      if (bidenstop == false) {
        if (event.keyCode == 87) {
          image2y = image2y - 50;
        } else if (event.keyCode == 65) {
          image2x = image2x - 50;
        } else if (event.keyCode == 83) {
          image2y = image2y + 50;
        } else if (event.keyCode == 68) {
          image2x = image2x + 50;
        }
      }
      if (bidenTurn == true) {
        if (image1x == image2x && image1y == image2y) {
          image1x = 0;
          image1y = 250;

          image2x = 300;
          image2y = 250;
          pointsBiden = pointsBiden + 1;

          bidenTurn = false;
          trumpTurn = true;
        }
      }
      if (trumpTurn == true) {
        if (image1x == image2x && image1y == image2y) {
          image1x = 0;
          image1y = 250;

          image2x = 300;
          image2y = 250;
          pointsTrump = pointsTrump + 1;

          trumpTurn = false;
          bidenTurn = true;
        }
      }

      redraw();
    }



    function redraw() {

      if (trumpTurn == true) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(background, 0, 0, canvas.width, canvas.height);

        image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
        image2.onload = function() {
          ctx.drawImage(image2, image2x, image2y);
        }
        image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp"
        image1.onload = function() {
          ctx.drawImage(image1, image1x, image1y);
        }
      }

      if (bidenTurn == true) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(background, 0, 0, canvas.width, canvas.height);

        image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp"
        image1.onload = function() {
          ctx.drawImage(image1, image1x, image1y);
        }
        image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
        image2.onload = function() {
          ctx.drawImage(image2, image2x, image2y);

        }
      }


      ctx.font = "60px Verdana";
      ctx.fillText(pointsBiden, image2x + 80, image2y - 100);
      ctx.fillText(pointsTrump, image1x + 80, image1y - 100);
    }
  </script>
</body>

</html>

相关问题
最新问题