JavaScript 和 Canvas 问题

Question

当页面加载时，我的 javascript 没有做任何事情，这是我的 html 和我的 javascript 我遇到了问题，我很困惑，我不知道问题是什么(抱歉，我在 iphone 上这样做的间距太小)

index.php

    <canvas id="breakout" width="480" height="320"></canvas>

   <script>

    var canvas =  document.getElementById("breakout") ;
    var ctx = canvas.getContext("2d");


    var x = canvas.width/2;
    var y = canvas.height-30;
    var mx = 2;
    var my = -2;

    function checkCollision{
    if(y + my < 0){
    my = -my;
    }
    if(y + my > canvas.height){
    my = -my;
    }
    if(x + mx > canvas.width-ballRadius){
    mx = -mx;
    }
    if(x + mx < ballRadius){
    mx = -mx;
    }
    }

    function drawBall{
     var ballRadius = 10;
     ctx.beginPath();
     ctx.arc(x,y,ballRadius,0, Math.PI*2);
     ctx.fillStyle = "#0095DD";
     ctx.fill();
     ctx.closePath();
    }

    function drawing{
     ctx.clearRect(0,0,canvas.width,canvas.height);
     drawBall();
     x += mx;
     y += my;
     checkCollision();
      }

     setInterval(drawing,10);

    </script>

Answer 1

您没有正确定义您的函数。您需要像这样定义函数:

function foo() {
    ...
}

正在做:

function foo{
    ...
}

无效，会导致控制台出现错误。另外，由于 ballRadius 在许多函数中使用，因此请在函数 drawBall 之外定义它:

var x = canvas.width/2;
var y = canvas.height-30;
var mx = 2;
var my = -2;
var ballRadius = 10; // Added

var canvas =  document.getElementById("breakout") ;
var ctx = canvas.getContext("2d");


var x = canvas.width/2;
var y = canvas.height-30;
var mx = 2;
var my = -2;
var ballRadius = 10;

function checkCollision(){
    if(y + my < 0){
      my = -my;
    }
    if(y + my > canvas.height){
      my = -my;
    }
    if(x + mx > canvas.width-ballRadius){
      mx = -mx;
    }
    if(x + mx < ballRadius){
      mx = -mx;
    }
}

function drawBall(){
     ctx.beginPath();
     ctx.arc(x,y,ballRadius,0, Math.PI*2);
     ctx.fillStyle = "#0095DD";
     ctx.fill();
     ctx.closePath();
}

function drawing() {
     ctx.clearRect(0,0,canvas.width,canvas.height);
     drawBall();
     x += mx;
     y += my;
     checkCollision();
}

     setInterval(drawing,10);

<canvas id="breakout" width="480" height="320"></canvas>