Canvas: лунный шаттл. Введение.

Ну что ж, давайте начнем писать игру lunar lander. Для этого нам понадобится:
  • Знание JavaScript'a
  • Текстовой браузер || новый fiddle на jsFiddle.net
  • Немного времени

Каркас:


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

<!DOCTYPE html>
<html>
    <head>
        <title>Canvas: лунный шаттл.</title>
    </head>
    <body>
        <canvas id="canvas">Канвас не работает, обновите браузер пожалуйста.</canvas>
        <script type="text/javascript">
            // Наша свещенная основа
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            // Размер Canvas'a
            var width = canvas.width = window.innerWidth;
            var height = canvas.height = window.innerHeight;
            // Линк на главный цикл
            var timer = null;

            function update() {
                // Очищаем экран и заливаем #000 цветом
                ctx.fillStyle = "#000";
                ctx.strokeStyle = "#fff";
                ctx.clearRect(0,0,width,height);
                ctx.fillRect(0,0,width,height);
            }
            
            // Вещаем цикл на update() 
            timer = setInterval(update, 1000/30);
        </script>
    </body>
</html>

Конечно можно и переписать код (я имею ввиду что некоторым нравится держать script в head) если конечно вам хочется.

По идею этот код ничего не делает. Этот код обновляет экран (очищает и заливает) каждый 1/30 миллисекунд.

Основная терминология:


В следующей статье мы будем делать игру. Но в этой я бы хотел ознакомить вас с некоторыми вещами который следует знать любому Game Developer'у.

Начнем пожалуй с самого простого:

Bounding Box:


Bounding Box это рамка объекта, т.н. фрейм или прямоугольник служащий для разных вещей, например для Collision Detection.

Collision Detection (Определение Столкновений):


Каждый Game Developer обязан знать эту вещь (если конечно он пишит Real-Time игру а не покимонов или шашки). Так случилось что когда например Пак Мен ест конфеты (ну или шарики), что бы понять есть ли он их или нет, нужно определить математически (а по другому никак) касается он ли его bounding box, bounding box'a конфеты. Для этого нужно знать геометрию… но можно погуглить на эту тему.

AABB (Axid-Aligned Bounding Box):


Несложный метод для определения столкновений между параллелограммами. Суть алгоритма простой:
У тебя есть два квадрата (прямоугольника), ты находишь его min x,y и max x,y, сравниваешь эти x,y: если первый.min.x < второй.max.x || первый.min.y < второй.max.y || второй.max.x < первый.min.x || второй.max.y < первый.min.y то столкновение есть.

А теперь мы поговорим немного о фЫзЫке: В

Ускорение и Направление:


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

Хорошим примером будет самолет летящий со скоростью в 1000 км/ч на запад, другими словами (символами):


var acceleration = 1000/ 60 / 60 * 100; // метр/сек. на экране
var direction = {x: -1, y: 0};

plane.position = {x: direction.x * acceleration, y: direction.y * acceleration} // {x,y} позиция

Ну вроде бы вот и так.

Гравитация:


Гравитация притягивает вещи к земли (платформе или же вниз, к примеру), в «игре» гравитация может быть любой, но я использовал земную гравитацию и поделил на 2.

Вот приблизительный псевдо-(говно)код:

var grav = 0.19/2;

thing.velocity.y -= grav; // thing.velocity это объект {x: #, y: #} # = цифра (float)

thing.position.y += thing.velocity.y;

На этом в принципе и все. Ждите следующих статей. Есть вопросы спрашивайте.

0 комментариев