Создание игры с помощью JavaScript: заставляем вещи двигаться

В нашей startфункции мы заполняем entities, вызывая нашу (пока еще не определенную) makeEnemyShipфункцию. Я передаю два числа, которые makeEnemyShipбудут использоваться, чтобы установить координаты x и y корабля. Я мог бы использовать случайные числа или даже жестко закодированные значения, однако вывод из элементов управления цикла облегчает кластеризацию всех кораблей в верхнем левом углу экрана.

Функции drawи updateдля экрана очень похожи. Они оба перебирают entitiesи вызывают соответствующую функцию для каждого объекта. Они также передают необходимый контекст. Ведь drawэто контекст 2D-рисования холста, и updateэто время, прошедшее с последнего кадра.

Обратите внимание, что цикл структурирован иначе, чем цикл в start. Это оптимизация производительности; хотя это имеет мало последствий с таким маленьким массивом. В некоторых браузерах вызов lengthнемного дороже. (Особенно в тех случаях, когда массив не является массивом, а похож на массив .) Это складывается, когда вы делаете вызов один раз за итерацию цикла. Мы выводим его из цикла, чтобы вызывать его только один раз. Проверьте этот тест . Оптимизация производительности сложна и меняется каждый раз, когда выпускаются новые браузеры. Это легко запутать, и я рекомендую часто профилировать ваш код, чтобы искать горячие точки, а не просто догадываться об оптимизации. Я надеюсь поговорить о них позже, но если вы хотите больше, посмотрите книгуВысокопроизводительный JavaScript от Николаса С. Закаса .

Первоначально я написал свои циклы, используя более новый Array.forEach для итерации entities. Однако это оказалось значительно медленнее, чем forпетля.

Метод экрана drawтакже сбрасывает холст в начале каждой итерации. Если бы мы этого не сделали, то все, что мы нарисовали на предыдущих кадрах, все равно будет присутствовать. Для начального экрана я использовал, clearRectоднако, здесь я использовал fillRectсплошной цвет.

Вот функция, которая будет производить простого врага. Он придерживается той же структуры, которую мы использовали, updateчтобы управлять поведением и drawфактически рисовать его на экране.

Некоторые плохие парни

Наши вражеские корабли немного сложнее, чем экран, на котором они живут. Визуально они, кажется, имеют два компонента. Маленький желтый прямоугольник, который движется по экрану, и призрачная цель, которую они проецируют как маленький красный круг. В финальной игре они будут нацелены на одно из подразделений игрока. Однако логика очень похожа. Фактически, это может быть полезно при отладке того, как каждый вражеский корабль отрисовывает что-то поверх своей реальной цели.

Реализация

// alias (and pre-compute) the angle of 
// a full circle (360°, but in radians)
var fullCircle = Math.PI * 2;

// invoke this function to create an emeny ship entity
// to add to the main game screen
function makeEnemyShip(x, y) {
    
    // position is set based upon the values
    // provided to the function
    var position = {
        x: x,
        y: y
    };
    // the diretion the ship is facing
    var orientation = 0;

    // how quickly can the ship turn?
    var turnSpeed = fullCircle / 50;
    // how quickly can the ship move?
    var speed = 2;
    
    // the phantom target the ship
    // is pursing
    var target = findNewTarget();    

    // the function invoked from the screen's update
    function update(elapsed) {
        // determine how close we are to our target
        var y = target.y - position.y;
        var x = target.x - position.x;
        var d2 = Math.pow(x, 2) + Math.pow(y, 2);
        if (d2 < 16) {
            // we've essentially "touched" it,
            // so create a new target
            target = findNewTarget();
        } else {

            // what's the different between our orientation
            // and the angle we want to face in order to 
            // move directly at our target
            var angle = Math.atan2(y, x);
            var delta = angle - orientation;
            var delta_abs = Math.abs(delta);

            // if the different is more than 180°, convert
            // the angle a corresponding negative value
            if (delta_abs > Math.PI) {
                delta = delta_abs - fullCircle;
            }

            // if the angle is already correct,
            // don't bother adjusting
            if (delta !== 0) {
                // do we turn left or right?
                var direction = delta / delta_abs;
                // update our orientation
                orientation += (direction * Math.min(turnSpeed, delta_abs));
            }
            // constrain orientation to reasonable bounds
            orientation %= fullCircle;

            // use orientation and speed to update our position
            position.x += Math.cos(orientation) * speed;
            position.y += Math.sin(orientation) * speed;
        }

    }
    
    // the function invoked from the screen's draw
    function draw(ctx) {
        
        // save the context's state before we translate
        // and rotate
        ctx.save();

        // translate to the entity's position
        ctx.translate(position.x, position.y);
        // rotate the canvas according to the 
        // entity's orientation
        ctx.rotate(orientation);
        
        // now we begin the actual drawing
        ctx.fillStyle = 'yellow';
        // using negative number to center 
        // around the translated origin
        ctx.fillRect(-3, -1, 6, 2);
        // restore the canvas since we're 
        // done drawing the entity 
        ctx.restore();

        // now we draw the phantom target
        // though we'll do so without translating
        // since it's so simle to draw
        ctx.beginPath();
        ctx.fillStyle = 'rgba(255,0,0,0.5)';
        ctx.arc(target.x, target.y, 2, 0, Math.PI * 2, true);
        ctx.fill();
    }

    // create a random x,y within the bounds of the canvas
    // note, we've hard coded the bounds
    function findNewTarget() {
        var target = {
            x: Math.round(Math.random() * 600),
            y: Math.round(Math.random() * 300)
        };

        return target;
    }

    // return an instance of the enemy,
    // it's state is captured in the closure
    // of the functions
    return {
        draw: draw,
        update: update
    }
}

объяснение

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

Все эти переменные представляют состояние вражеского корабля.

var position = { x: 0, y: 0 };
var orientation = 0;
var turnSpeed = fullCircle / 50;
var speed = 2;
var target = findNewTarget();  

position это место на экране, где мы будем отображать наш корабль.

Технически, это позиция в «мировом пространстве». Пространство мира — это логическое пространство, в котором «живут» существа в вашей игре. Это отличается от «экранного пространства», которое соответствует фактическим пикселям на экранах. Вы можете думать об этом так: в вашей игре у вас может быть круг с радиусом 10 и расположенный в (100 100). Однако то, где вы рисуете его на экране, будет зависеть от того, откуда игрок его просматривает. Если игрок увеличит масштаб, круг увеличится, но это не изменит логическую позицию или радиус круга. Мы используем термин «проекция», чтобы описать это. Мы проецируем из мирового пространства в пространство экрана, основываясь на том, как игрок смотрит на игровой мир. Самый простой проект, конечно, всего 1: 1. Это означает, что нет никакой разницы между мировым пространством и пространством экрана. Это то, что будет придерживаться на данный момент.

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

turnSpeedи speedпредставлять, как быстро корабль может поворачивать и как быстро он может двигаться соответственно. Мы не будем изменять эти значения после их установки, что означает, что корабль будет вращаться и двигаться с постоянной скоростью. Эти значения представляют скорости изменения для orientationи position. Обратите внимание, что мы определили turnSpeedв терминах fullCircle. Это псевдоним для Math.PI * 2; мы имеем дело с радианами, а не с градусами.

targetэто значение с формой { x: Number, y: Number }. Корабль всегда будет пытаться приблизиться к этому значению, корректируя его orientation.

Обновить

updateФункция реальное мясо вражеского корабля. Сначала мы проверяем, близки ли мы к нашей цели. Если мы достаточно близки, мы считаем нашу цель достигнутой и ставим новую цель. В противном случае мы меняем нашу orientationтак, чтобы мы летели к нашей текущей цели.

var y = target.y - position.y;
var x = target.x - position.x;
var d2 = Math.pow(x, 2) + Math.pow(y, 2);

if (d2 < 16) {
    target = findNewTarget();
}

var angle = Math.atan2(y, x);
var delta = angle - orientation;

var delta_abs = Math.abs(delta);
if (delta_abs > Math.PI) {
    delta = delta_abs - fullCircle;
}

if (delta !== 0) {
    var direction = delta / delta_abs;
    orientation += (direction * Math.min(turnSpeed, delta_abs));
    orientation %= fullCircle;
}

position.x += Math.cos(orientation) * speed;
position.y += Math.sin(orientation) * speed;