2017-04-03 139 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>