我怎樣才能讓我的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

的funtion'更新（）'沒有定義和'$（....）了（。 ...'我也是這樣做的「 – 2014-10-31 02:33:48

如何做到這一點？」function update（）;「將不起作用，我該如何定義$（'＃gameCanvas'）up（function（event）{ code = event.keyCode;「作爲函數嗎？ – NoobCoder 2014-10-31 03:31:56

好吧，請告訴我你除了你代碼要做？ – 2014-10-31 03:33:31

也許是這樣的：

//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

什麼都沒有顯示在畫布上bro – NoobCoder 2014-10-31 03:44:19

沒關係，一切都是固定的！謝謝！ – NoobCoder 2014-10-31 04:20:13

我怎樣才能讓我的JS車移動？

回答

相關問題