Question

伙计这是一个应该在框架上显示一个红色球的功能，但它没有这样做，我正在看一个教程来做到这一点，我做的一切都和他一样，但我无法弄清楚这里有什么问题..我需要知道这个。如果有人能理解请帮助..

var canvas,ctx,w,h,game=true;
var ball;
var BALL = function(x,y){
    this.x = x;
    this.y = y;

    this.color = "red";
    this.radius = 10;
    this.vx = 3;
    this.vy = -4;
}


window.onload = init;
function init() {
  canvas = document.getElementById("canvas");
  w = canvas.width;
  h = canvas.height;
  ctx = canvas.getContext('2d');
  ball = new BALL(w/2,h/2+50);
  beginGame();
}

function beginGame(){
  if(game){  
    ctx.clearRect(0,0,w,h);

      ball.x+=ball.vx;
      ball.y+=ball.vy;

      if((ball.x+ball.radius)+ball.vx>w || (ball.x-ball.radius)+ball.vx<0){
          ball.vx = -ball.vx;
      }

      ctx.fillStyle = ball.color;
      ctx.beginPath();
      ctx.arc(ball.x,ball.y,ball.radus,0,2*Math.PI,true);
      ctx.closePath();
      ctx.fill();

      window.requestAnimationFrame(beginGame);

  }else{
    //Game Over
  }

}// End of beginGame function

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>არკანოიდი</title>
<script src='tools.js'></script>
<script src='jquery-1.11.2.min.js' language='javascript' > </script>

<style>
canvas {
    border: 1px solid silver;
}
</style>
</head>

<canvas id="canvas" width="800" height="600"></canvas>

<body>

</body>
</html>

Answer 1

我不知道它是否会修复所有内容，但你的画布不在你的身体标签之内。

Answer 2

用于脚本标记： 1.不要使用language =＆＃39; javascript＆＃39;。这不是必需的。 2.如果您确实想要将其明确声明为javascript，请使用type =＆＃34; text / javascript＆＃34;。这种情况自动发生，因此您甚至不需要这样做。 3.将画布放在body标签内。 4.使用window.addEventListener（＆＃34; load＆＃34;，init）代替window.onload（init） 5.inside startgame功能：

function beginGame()
{
    // previous lines omitted...
    ball = new BALL(x, y);
    // other lines here...
}

无法显示画布对象

2 个答案: