Ракетка и управление клавиатурой

Мяч беспрепятственно отражается от стен, и вы можете смотреть на него бесконечно, но в настоящее время нет интерактивности. Это не игра если Вы не можете контролировать его! Так давайте добавим некоторое взаимодействие с пользователем: управление ракеткой.

Определение ракетки, чтобы ударить по мячу

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

var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;

Здесь мы определяем высоту и ширину ракетки, и его начальную точку на оси х, для использования в расчетах далее вниз по коду. Давайте создадим функцию, которая будет рисовать ракетку на экране. Добавьте следующий раз ниже вашей функции drawBall():

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

Позволяем пользователю управлять ракеткой

Мы можем сделать ракетку там, где мы хотим, но она должна реагировать на действия пользователя — это времени, чтобы реализовать некоторые клавиши управления. Нам понадобится:

• Две переменные для хранения информации о том, левая или правая кнопка управления нажата.
• Два прослушивателя событий для события keydown и keyup — мы хотим запустить некоторый код, чтобы справиться с движением весла при нажатии кнопок.
• Две функции обработки события keydown и keyup код, который будет выполняться при нажатии кнопок.
• Возможность перемещения манипулятора влево и вправо

Pressed buttons can be defined and initialized with boolean variables, like so. Add these lines somewhere near the rest of your variables:

var rightPressed = false;
var leftPressed = false;

Значение по умолчанию для обоих является false, так как в начале кнопки управления не нажата. Для прослушивания нажатий клавиш, мы создадим два слушателя событий. Добавьте следующие строки чуть выше линии setInterval() в нижней части JavaScript:

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

Когда keydown событие вызывается на любой из клавиш на клавиатуре (когда они нажимаются), функция keyDownHandler() будет выполняться. Та же картина верна для второго слушателя: KeyUp события запустит функцию keyUpHandler () (когда клавиша перестанет быть нажата). Добавьте их в ваш код теперь ниже addEventListener() строки:

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
}

Когда мы нажимаем клавишу вниз, эта информация хранится в переменной. Соответствующая переменная в каждом конкретном случае устанавливается в true. Когда клавиша отпущена, переменная устанавливается обратно в false.

Обе функции принимают в качестве параметра, представленный переменной e. Из этого вы можете получить полезную информацию: ключ содержит информацию о нажатой клавиши. Например, код 37-это клавиша стрелка влево и 39 - стрелка вправо. Если стрелка влево нажата, то переменная leftPressed имеет значение true, и когда она выйдет переменной leftPressed имеет значение false. Та же схема со стрелкой вправо и переменной rightPressed.

Движения весла, логика

Теперь у нас есть переменные для хранения информации о нажатых клавиш, слушатели событий и соответствующие функции. Теперь мы получим на фактический код, чтобы использовать все, что и перемещать ракетку на экране. Внутри функции draw(), мы будем проверять, если левая или правая клавиши курсора нажимаются, когда каждый кадр отображается. Наш код может выглядеть следующим образом:

if(rightPressed) {
    paddleX += 7;
}
else if(leftPressed) {
    paddleX -= 7;
}

Если клавиша стрелка влево нажата, то ракетка будет двигаться на 7 пикселей влево, а если нажата клавиша вправо то на 7 пикселей вправо. Это работает хорошо, но ракетка исчезает с края холста, если держать клавишу слишком долго. Мы можем улучшить, остонавлевая ракетку на границе холста, изменив код следующим образом:

if(rightPressed && paddleX < canvas.width-paddleWidth) {
    paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
    paddleX -= 7;
}

Позиция paddleX мы будем двигаться от 0 на левой стороне холста и canvas.width-paddleWidth на правой стороне, которая будет работать именно так, как мы этого хотим.

Добавить выше блок кода в функцию draw() в нижней части, чуть выше закрывающей фигурной скобки.

Единственное, что осталось сделать сейчас, это вызвать drawPaddle() функцию внутри функции draw(), чтобы нарисовать его на экране. Добавьте следующую строку внутри функции draw(), чуть ниже строки, которая вызывает drawBall():

drawPaddle();

Сравните ваш код

Вот работающий код для вас, чтобы сравнить со своим:

Следующий шаг

Now we have something resembling a game; the only trouble now is that you can just continue hitting ball with the paddle forever. This will all change in the fifth chapter, Game over, when we start to add in an endgame state for our game.