JS 자동차를 옮기려면 어떻게해야합니까?

나는이 차를 화살표 키로 움직이게하려고 노력하고있다. 자동차가 캔버스에로드되었지만 키로 이동하지 않습니다.. 나는 내가 필요한 모든 것을 넣었거나 틀렸어. 또는 약간의 실수가있을 수 있습니다. 어쨌든, 나 같은 놈 도와주세요 : D!JS 자동차를 옮기려면 어떻게해야합니까?

<!doctype html> 

<html lang="en"> 

    <head> 
    <title>Ball</title> 
    <script src="http://code.jquery.com/jquery-git2.js"></script> 
    </head> 

    <body> 
     <center> 
     <canvas id="gameCanvas" width="500" height="500" style="border:5px solid green"></canvas> 
     <script src="js/Game.js"></script> 

    </center> 
    </body> 
    </html>

JS :이 같은

//Set context for canvas 

    var context = $('#gameCanvas')[0].getContext('2d'); 

    //Dimensions For Canvas 

    var width = $('#gameCanvas').width(); 
    var height = $('#gameCanvas').height(); 

    //Image for Car 

    var car = new Image(); 
    car.src = "http://thumb1.shutterstock.com/thumb_small/338038/192139124/stock-vector-illustration-of-a-red-sports-car-top-view-192139124.jpg"; 

    //Car Variables and position 

    var x = 80; 
    var y = 80; 
    var vx = 0; 
    var vy = 0; 
    var angle = 0; 
    var mod = 0; 

    //Draws car during motion 

    var moveInterval = setInterval(function() { 
     draw(); 
    }, 30); 

    //Clears Canvas 

    function draw() 
    { 
     context.clearRect(0, 0, gameCanvas.width, gameCanvas.height); 

    // Change direction and velocity of car 

     x += (vx * mod) * Math.cos(Math.PI/180 * angle); 
     y += (vy * mod) * Math.sin(Math.PI/180 * angle); 

     context.save(); 
     context.translate(x, y); 
     context.rotate(Math.PI/180 * angle); 
     context.drawImage(car, -(car.width/2), -(car.height/2)); 
     context.restore(); 
    } 

    //Codes for keyboard keys 

    $('#gameCanvas').keydown(function(event) { 
     code = event.keyCode; 
     if (code == 37) vx = -10.0; // left key pressed 
     if (code == 39) vx = 10.0; // rightkey pressed 
     if (code == 38) vy = -2.0; // up key pressed 
     if (code == 40) vy = 2.0; // down key pressed 
    }); 

    $('#gameCanvas').up(function(event) { 
     code = event.keyCode; 
     if (code == 37) vx = 0.0; // leftkey not pressed 
     if (code == 39) vx = 0.0; // rightkey not pressed 
     if (code == 38) vy = 0.0; // upkey not pressed 
     if (code == 40) vy = 0.0; // downkey not pressed 
    }); 


update();

출처

2014-10-31 NoobCoder

연료 소모량'업데이트는()'정의되지 않고'$ (...)를 (.. ... "도 정의 할 수 있습니다. –

어떻게해야합니까?"function update(); "가 작동하지 않으며"$ ('# gameCanvas')를 정의하는 방법. up (function (event) { code = event.keyCode; "를 함수로 사용 하시겠습니까? – NoobCoder

알았습니다. 코드? –

아마 뭔가 :

//Set context for canvas 
    var context = $('#gameCanvas')[0].getContext('2d'); 

    //Dimensions For Canvas 
    var width = $('#gameCanvas').width(); 
    var height = $('#gameCanvas').height(); 

    //Image for Car 
    var car = new Image(); 
    car.src = "http://thumb1.shutterstock.com/thumb_small/338038/192139124/stock-vector-illustration-of-a-red-sports-car-top-view-192139124.jpg"; 

    //Car Variables and position 
    var x = 80; 
    var y = 80; 
    var vx = 0; 
    var vy = 0; 
    var angle = 0; 
    var mod = 0; 

    draw(); 

    function draw() 
    { 
     context.clearRect(0, 0, gameCanvas.width, gameCanvas.height); 
     x += (vx * mod) * Math.cos(Math.PI/180 * angle); 
     y += (vy * mod) * Math.sin(Math.PI/180 * angle); 
     console.log(vx); 
     console.log(vy); 
     context.translate(vx, vy); 
     context.rotate(Math.PI/180 * angle); 
     context.drawImage(car, x, y); 
    } 

    $(document).keydown(function(event) { 
     code = event.keyCode; 
     if (code == 37) { vx = -10.0; } // left key pressed 
     if (code == 39){ vx = 10.0;} // rightkey pressed 
     if (code == 38){ vy = -2.0;} // up key pressed 
     if (code == 40){ vy = 2.0; } // down key pressed 

     draw(); 
    });

출처

2014-10-31 03:10:58 Andrew

캔버스에 아무것도 나타나지 않습니다. – NoobCoder

모든 것이 고쳐졌습니다. 감사! – NoobCoder

JS 자동차를 옮기려면 어떻게해야합니까?

답변

관련 문제