Question

我正在尝试使用帆布制作赛车游戏，并为汽车制作透明背景的png文件。

当我按住其中一个箭头时，我遇到了问题。与运动相反的方式，它看起来像一个白色的阴影，汽车的旧位置。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">

            var canvas;
            var ctx;
            var car = new Image();
            var x = 0;
            var y = 0;


            function startUp(){
                canvas = document.getElementById('myCanvas');
                ctx = canvas.getContext('2d');

                loadImages();
                startGameLoop();
            }


            function startGameLoop() {

                setInterval(function() {
                    drawScreen();
                    drawCar();
                }, 16);
                window.addEventListener('keydown', whatKey, true);

            }

            function drawScreen(){

                ctx.clearRect(0, 0, canvas.width, canvas.height);

                ctx.fillStyle = '#aaaaaa';
                ctx.rect(0, 0, canvas.width, canvas.height);
                ctx.fill();
            }

            function drawCar(){

                ctx.drawImage(car, x ,y, 200, 103);
            }

            function whatKey(evt) {

                switch (evt.keyCode) {

                    // Left arrow.
                    case 37: {
                        x -= 15;
                    }
                        break;

                    // Right arrow.
                    case 39:{
                        x += 15;
                    }
                        break;

                    // Down arrow
                    case 40:{
                        y += 15;
                    }
                        break;

                    // Up arrow
                    case 38: {
                        y -= 15;
                    }
                        break;
                }

            }

            function loadImages() {
                car.src = 'http://sammywasem.com/images/f3-top.png';
            }
        </script>
    </head>

    <body onload="startUp()">
        <canvas id="myCanvas" width="1050" height="620">
        </canvas>
    </body>
</html>

Answer 1

汽车行动实际上是正确的方式假设您按下右键：事件被发送到窗口，并被您的代码困住：汽车向右移动。但事件也由整个窗口处理，其中它被理解为：将窗口向右移动所以你最后看到的是，因为车窗移动的速度超过汽车，所以是向车辆左侧移动。

您需要做的是防止关键事件在您处理后进一步冒泡：它已完成

event.preventDefault();

和

event.stopPropagation();

查看mdn以查看preventDefault或stopPropagation的规范。

我已经完成了你的代码，并对其进行了更新：

http://jsbin.com/joboxuvu/1/edit?js,output

使用png文件的画布动画

1 个答案: