Javascript游戏未呈现

提问者：小点点

Javascript游戏未呈现

你好，我正在尝试用javascript创建一个基本的网球游戏，不知道发生了什么，但是看不到网页上的代码，有人能告诉我发生了什么吗？

<html>
some text
<canvas id="gameCanvas"    width="800"    height="600">
    </canvas>
    
    
    
    <script>
        
     var canvas;
     var canvasContext;
     var ballX = 50;
     var ballSpeedX  = -2;
    
    
    
    window.onload = function( ) {
                       canvas = document.getElementById('gameCanvas');
                       canvasContext = canvas.getContext( '2d' ); 
                       
                       var framesPerSecond  = 30;
                       setInterval (function( )    }
                       moveEverything ( )
                       drawEverything  ( )
                       
            }  1000/framePerSecond   ) ;
                                     
                        
                        }
                        
                        function drawEverything () {
                            ballX = ballX + 20;
                           console.log( ballX );
                           canvasContext.fillStyle = 'black' ;
                           canvasContext.fillRect( 0, 0 , canvas.width, canvas.height );
                           canvasContext.fillStyle = 'white' ;
                           canvasContext.fillRect ( 0, 210, 10, 100 ) ;
                           canvasContext.fillStyle = 'red' ;
                           canvasContext.fillRect (ballX, 100, 10, 10 ) ;
                           
                           
                           }
                           
                           
                        
                         
                         
                         


</script>  
                           
</html>

共1个答案

匿名用户

每个浏览器都内置了某种“开发者工具”。如果您弹出那个打开（通常热键是F12，但这取决于浏览器），您应该会看到您的代码有多个错误。如果您正确地格式化代码，这些就会变得更加明显。

第一个问题是在哪里调用setInterval。此调用的格式应为setInterval（func，delay)。开始函数定义时出现错误(}而不是{，则函数声明后缺少逗号。更正后，如下所示:

setInterval(
  function() {
    moveEverything();
    drawEverything();
  },
  1000/framePerSecond
);

请注意正确的缩进是如何使内容与内容相一致的。

仍然存在一个很大的错误--您丢失了关闭onload函数的最后一个}。这是一个非常简单的修复方法，只需将其添加到之前即可。

当然，这又暴露出两个问题:

您从未声明FrameperSecond
您从未声明MoveEverything()

但是，如果您将framepersecond声明为某种东西（例如40），就足以证明到目前为止它还在工作。现在您的控制台仍然会显示每隔几毫秒就丢失的MoveEverything()记录的错误。

在下面的代码中，我为FramePerSecond添加了一个值，并定义了一个空的MoveEverything()函数。请注意，由于您只是盲目地在每个“Draw Everything”中添加20个，所以球会快速地从画布的右侧退出。

null

<html>
some text
<canvas id="gameCanvas" width="800" height="600"></canvas>

<script>
  var canvas;
  var canvasContext;
  var ballX = 50;
  var ballSpeedX  = -2;

  // Added framePerSecond
  var framePerSecond = 40;
  window.onload = function() {
    canvas = document.getElementById('gameCanvas');
    canvasContext = canvas.getContext( '2d' ); 
    
    var framesPerSecond  = 30;
    setInterval(
      function() {
        moveEverything();
        drawEverything();
      },
      1000/framePerSecond
    );
  
                        
    function drawEverything () {
      ballX = ballX + 20;
      console.log( ballX );
      canvasContext.fillStyle = 'black' ;
      canvasContext.fillRect( 0, 0 , canvas.width, canvas.height );
      canvasContext.fillStyle = 'white' ;
      canvasContext.fillRect ( 0, 210, 10, 100 ) ;
      canvasContext.fillStyle = 'red' ;
      canvasContext.fillRect (ballX, 100, 10, 10 ) ;
    }
    
    // Added dummy 'moveEverything'
    function moveEverything() {
      
    }
  }

</script>  
                           
</html>