Question

我试图让这辆车用箭头键移动并旋转。 汽车加载到画布上，但它没有按键移动 。我想我已经把我需要的一切都放进去了，或者我错了。或者，只是一些小错误。无论如何，请帮助像我这样的菜鸟：D！

<!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();

Answer 1

也许是这样的：

   //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();
    });

我如何让我的JS汽车移动？

1 个答案: