2017-04-03 59 views
-1

球不会加载游戏

// Main Javascript 
 
//Variables to use 
 
var canvas; 
 
var context; 
 
var ball; 
 

 
canvas = documnet.getElementById("canvas"); 
 
context = canvas.getcontext("2d"); 
 

 
//Creates my ball function based off of what is on canvas for ball 
 
ball = new Ball();

好我的球没有出现在屏幕上,我敢肯定我已经正确地做了一切,但有人可以查看它,并找到我错过或者犯了一个错误?我真的需要一些帮助,我感谢帮助!

我有两个Javascript文件在这里,因为我有一个对我的主要javascript和球

//ball.js 
function ball() { 
    //The ball itself 
    this.startAngle = 0; 
    this.endAngle = 360 * Math.PI * 2; 
    this.radius = 40; 
    this.drawBall = true; 

    //location for my ball 
    this.x = canvs/width/2; 
    this.y = canvas/height/2; 

    //coloring my ball 
    this.color = " #00FFFF"; 

    //draw function  
    this.draw = function() { 
    context.fillStyle = this.color; 
    context.beginPath(); 
    content.arc(this.x, this.y, this.redius, this.startAngle, this.Endangle, this.drawBall); 
    context.fill(); 
    } 
} 

我的HTML:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" > 
<title>Robert's Ball Game</title> 
<link type="text/css" rel="stylesheet" href = css/robs.css" /> 
</head> 
<body> 
<canvas id="canvas" width="1000" height="720"></canvas> 
</body> 
//Javascript 
<script type="text/javascript" src= "javas/ball.js"> </script> 
<script type="text/javascript" src= "javas/rob.js"> </script> 
</html> 
+0

.js是这个,但它可能不对,因为我有麻烦 – Rob

+0

//使用变量 var canvas; var context; var ball; canvas = documnet.getElementById(“canvas”); context = canvas.getcontext(“2d”); //根据球的画布创建球函数 ball = new Ball(); – Rob

+0

我将我的js文件链接到我的html – Rob

回答

0

你有大量的拼写和大小写错误,而你实际上并没有调用ball.draw()函数。

我已在下面的代码中的注释,以显示我已经改变了什么,使工作(单击“运行”查看结果):在我的罗布

var canvas; 
 
var context; 
 
var ball; 
 

 
canvas = document.getElementById("canvas"); // "document", not "documnet" 
 
context = canvas.getContext("2d"); // needs capital "C" in getContext 
 

 
//Creates my ball function based off of what is on canvas for ball 
 
ball = new Ball(); 
 
ball.draw(); // you didn't call .draw() 
 

 
//ball.js 
 
function Ball() { 
 
    //The ball itself 
 
    this.startAngle = 0; 
 
    this.endAngle = 360 * Math.PI * 2; 
 
    this.radius = 40; 
 
    this.drawBall = true; 
 

 
    //location for my ball 
 
    this.x = canvas.width/2; // you had canvs/width/2 
 
    this.y = canvas.height/2; // you had canvas/height/2 
 

 
    //coloring my ball 
 
    this.color = "#00FFFF"; 
 

 
    //draw function  
 
    this.draw = function() { 
 
    context.fillStyle = this.color; 
 
    context.beginPath(); 
 
    // on next line you had "content" instead of "context", 
 
    // and "Endangle" instead of "endAngle", and "redius" instead of "radius": 
 
    context.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle, this.drawBall); 
 
    context.fill(); 
 
    } 
 
}
<canvas id="canvas" width="200" height="200"></canvas>