2015-10-06 4 views
0

Ребята Вот функция, которая должна отображать красный шар на кадре, но это не так, я смотрю учебник, чтобы сделать это, я делаю все точно так же, как он, но Я не могу понять, в чем проблема. Пожалуйста, мне нужно это знать. Если кто-то может понять, пожалуйста, помогите ..Невозможно отобразить объект canvas

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> 

ответ

0

Я не»знаю, если это будет все исправить, но ваш холст находится вне тегов тела.

+0

Он не сделал, но благодаря: < – Morsmetus

+0

нашел его, вы неправильно радиус в параметре функции дуги –

+0

большое вам спасибо! что исправил это. Я потратил столько времени на поиски ошибки. – Morsmetus

0

для тегов сценариев: 1. Не используйте язык = 'javascript'. это не нужно. 2. Если вы хотите явно объявить его как javascript, используйте тип = "text/javascript". Это происходит автоматически, поэтому вам даже не нужно это делать. 3. Поместите холст в теги тела. 4. Использование window.addEventListener ("нагрузка", инициализации) вместо window.onload (INIT) 5.inside функции StartGame:

function beginGame() 
{ 
    // previous lines omitted... 
    ball = new BALL(x, y); 
    // other lines here... 
} 
Смежные вопросы