(ab) Использование d3.js для создания игры в понг

.originэто то, что нужно для правильного расчета позиций. Лучше всего просто установить его на текущую позицию нашего элемента.

area.call(drag);активирует перетаскиваемое поведение на нашем перетаскиваемом area.

Далее — функция, которая ведет счет.

// generates a score, returns function for updating value and repositioning score
        Score = function (x) {
            var value = 0,
                score = svg.append('text')
                    .text(value);
 
            return function f(inc) {
                value += inc;
 
                score.text(value)
                    .attr({x: Screen().width*x,
                           y: margin.top*3});
                return f;
            };
        },

Мы собираемся снова с возвращением функций обновления. Но кроме этого это действительно просто, просто добавьте textэлемент в область рисования и присвойте ему значение. Не беспокойтесь об этом репозиционном материале.

Почти то же самое относится и к средней линии — добавьте строку, убедитесь, что она может быть перемещена при необходимости.

// generates middle line, returns function for updating position
        Middle = function () {
            var line = svg.append('line');
 
            return function f() {
                var screen = Screen();
 
                line.attr({
                    x1: screen.width/2,
                    y1: margin.top,
                    x2: screen.width/2,
                    y2: screen.height-margin.bottom
                });
                return f;
            };

Мяч будет немного веселее. Он не только должен нарисовать простой круг и иметь возможность перемещать его, он также должен реагировать на столкновение с препятствиями и обновление счета.

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

Ball = function () {
            var R = 5,
                ball = svg.append('circle')
                    .classed("ball", true)
                    .attr({r: R,
                           cx: Screen().width/2,
                           cy: Screen().height/2}),
                scale = d3.scale.linear().domain([0, 1]).range([-1, 1]),
                vector = {x: scale(Math.random()),
                          y: scale(Math.random())},
                speed = 7;

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

Логика столкновений более привлекательна.

var hit_paddle = function (y, paddle) {
                return y-R > parse(paddle.attr("y")) && y+R < parse(paddle.attr("y"))+parse(paddle.attr("height"));
            },
            collisions = function () {
                var x = parse(ball.attr("cx")),
                    y = parse(ball.attr("cy")),
                    left_p = d3.select(".left_paddle"),
                    right_p = d3.select(".right_paddle");
 
                // collision with top or bottom
                if (y-R < margin.top || y+R > Screen().height-margin.bottom) {
                    vector.y = -vector.y;
                }
 
                // bounce off right paddle or score
                if (x+R > parse(right_p.attr("x"))) {
                    if (hit_paddle(y, right_p)) {
                        vector.x = -vector.x;
                    }else{
                        return "left";
                    }
                }
 
                // bounce off left paddle or score
                if (x-R < 
                    parse(left_p.attr("x"))+parse(left_p.attr("width"))) {
                    if (hit_paddle(y, left_p)) {
                        vector.x = -vector.x;
                    }else{
                        return "right";
                    }
                }
 
                return false;
            };

Hokay.

hit_paddleэто вспомогательная функция, которая сообщает нам, касается ли мяч весла — положение весла минус радиус шара. Просто.

collisions выглядит волосатым, но очень повторяющимся

• если мяч касается верхнего или нижнего края, его вертикальное положение должно перевернуться.
• если мяч достаточно прав, чтобы поразить весло, он либо перевернет свое горизонтальное направление, либо сообщит вызывающий код, который "right"испортил
• то же самое слева
• если ничего не происходит, вернуть false

Последняя часть Paddleфункции — это функция, которая выполняет шаг анимации.

return function f(left, right, delta_t) {
                var screen = Screen(),
                    // this should pretend we have 100 fps
                    fps = delta_t > 0 ? (delta_t/1000)/100 : 1; 
 
                ball.attr({
                    cx: parse(ball.attr("cx"))+vector.x*speed*fps,
                    cy: parse(ball.attr("cy"))+vector.y*speed*fps
                });
 
                var scored = collisions();
 
                if (scored) {
                    if (scored == "left") {
                        left.score(1);
                    }else{
                        right.score(1);
                    }
                    return true;
                }
 
                return false;
            };
        };

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

Основной бит

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

 // generate starting scene
    var left = {score: Score(0.25)(0),
                paddle: Paddle("left")(margin.left, Screen().height/2)},
        right = {score: Score(0.75)(0),
                paddle: Paddle("right")(Screen().width-margin.right, Screen().height/2)},
        middle = Middle()(),
        ball = Ball();

leftи rightудерживайте счет каждого игрока и функции обновления весла, и middleи ballявляются средней линией и мячом.

Мы также должны реагировать на изменение размеров окна. Это скрытно отражает и изменения ориентации.

    // detect window resize events (also captures orientation changes)
    d3.select(window).on('resize', function () {
        var screen = Screen();
 
        left.score(0);
        left.paddle(margin.left, screen.height/2);
        right.score(0);
        right.paddle(screen.width-margin.right, screen.height/2);
 
        middle();
    });

Когда экран меняется, мы просто обновляем положение всего. Посмотрите, как всегда возвращение функции обновления облегчало нашу жизнь?

И наконец, мы запускаем анимацию.

 // start animation timer that runs until a player scores
    // then reset ball and start again
    function run() {
        var last_time = Date.now();
        d3.timer(function () {
 
            var now = Date.now(),
                scored = ball(left, right, now-last_time),
                last_time = now;
 
            if (scored) {
                d3.select(".ball").remove();
                ball = Ball();
                run();
            }
            return scored;
        }, 500);
    };
    run();

Мы использовали d3.timerдля создания пользовательского цикла анимации, привязанного к скорости графики устройства пользователя. Чтобы противостоять этому, мы вводим дельту времени в нашу ballфункцию анимации, чтобы создать видимость постоянной скорости.

Фактические разработчики игр сказали мне, что я должен сделать это, и я сделал это.

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

Плавник

Вот и все. (ab) Использование D3 для создания простой игры в понг, потому что мы можем. Это был забавный хак, есть миллионы лучших инструментов, которые вы могли бы использовать, но мне было весело.