Анимация холста с использованием файла png

0

Я пытаюсь сделать гоночную игру с использованием холста и файл 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>
Теги:
canvas
animation

1 ответ

0
Лучший ответ

Движение автомобиля на самом деле является правильным способом.
Скажем, вы нажимаете правую клавишу: событие отправляется в окно и попадает в ловушку по вашему коду: машина идет вправо. Но событие также обрабатывается всем окном, где его понимают как: переместите окно вправо.
Итак, что вы видите в конце, так как окно перемещается больше, чем автомобиль, это движение слева от машины.

Что вам нужно сделать, так это предотвратить дальнейшее активирование ключевого события после его обработки: это делается с помощью

event.preventDefault();

а также

event.stopPropagation();

посмотрите mdn, чтобы увидеть спецификации preventDefault или stopPropagation.

я сделал скрипку из вашего кода и обновил ее:

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

Поделиться
  • 0
    Спасибо за ваш ответ, это была одна из моих проблем. Я попробовал свой оригинальный код, который выложил выше, на моем leptop, и он работает нормально.
  • 0
    Пожалуйста. Вы имеете в виду, что проблема осталась? я не мог видеть белую тень, которую вы описываете ни в Chrome, ни в Firefox (Mac OS).
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню