Разработка игры Breakout на Svelte

На MDN есть туториал "2D игра на чистом JavaScript" ^[1], в котором изучаются основы использования элемента HTML5 <canvas> ^[2].

Разработка игры Breakout на Svelte - 1

В этом туториале мы повторим разработку этой игры на Svelte.

1. Создание Canvas и рисование на нем ^[3]

Pure JavaScript ^[4] — Svelte ^[5]

В этом примере мы отображаем три геометрические фигуры: квадрат, прямоугольник и круг.

Разработка игры Breakout на Svelte - 2

Переменная canvas будет определена после монтирования компонента в DOM, поэтому весь код размещаем в обработчике жизненного цикла onMount ^[6]. Выполнена привязка элемента canvas к переменной canvas с помощью привязки this ^[7].

<script>
    import { onMount } from 'svelte';

    let canvas;

    onMount(() => {
        const ctx = canvas.getContext('2d');

        ctx.beginPath();
        ctx.rect(20, 40, 50, 50);
        ctx.fillStyle = "#FF0000";
        ctx.fill();
        ctx.closePath();

        ctx.beginPath();
        ctx.arc(240, 160, 20, 0, Math.PI*2, false);
        ctx.fillStyle = "green";
        ctx.fill();
        ctx.closePath();

        ctx.beginPath();
        ctx.rect(160, 10, 100, 40);
        ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
        ctx.stroke();
        ctx.closePath();
    });
</script>

<canvas
    bind:this={canvas}
    width={480}
    height={320}
></canvas>

<style>
    canvas { background: #eee; }
</style>

Далее мы просто переносим весь код без изменений в функцию onMount(). Комментарии даны только относительно использования Svelte.

2. Перемещение мяча ^[8]

Pure JavaScript ^[9] — Svelte ^[10]

3. Отскок от стены ^[11]

Pure JavaScript ^[12] — Svelte ^[13]

4. Управление ракеткой клавишами ^[14]

Pure JavaScript ^[15] — Svelte ^[16]
Использован специальный элемент <svelte:window> ^[17] для прослушивания событий от клавиатуры. Обработчики событий от клавиатуры и используемые в них переменные добавлены вне функции onMount().

9. Контроль мышью ^[30]

Pure JavaScript ^[31] — Svelte ^[32]
Добавлен обработчик событий от мыши также за пределами функции onMount.

10. Заключение ^[33]

Pure JavaScript ^[34] — Svelte ^[35]

Как мы видим, практически весь код перенесен в приложение на Svelte без изменений. Игры обычно не пишут на чистом JS, а используют готовые HTML5 фреймворки. Например, эта же игра выполненная на фреймворке Phaser ^[36]. Можно посмотреть эксперименты с WebGl на Svelte https://github.com/sveltejs/gl ^[37] и идеи по svelte-gl https://github.com/Rich-Harris/svelte-gl ^[38].

Репозиторий на GitHub

Установка игры на локальном компьютере:

git clone git@github.com:nomhoi/svelte-breakout-game.git
cd svelte-breakout-game
npm install
npm run dev

Запускаем игру в броузере по адресу: http://localhost:5000/ ^[39].

Автор: Владимир Номхоев

Источник ^[40]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/322383

Ссылки в тексте:

[1] "2D игра на чистом JavaScript": https://developer.mozilla.org/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

[2] <canvas>: https://developer.mozilla.org/ru/docs/Web/HTML/Element/canvas

[3] Создание Canvas и рисование на нем: https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it

[4] Pure JavaScript: https://jsfiddle.net/end3r/x62h15e2/?utm_source=website&utm_medium=embed&utm_campaign=x62h15e2

[5] Svelte: https://svelte.dev/repl/9c037d46aa8747999ca120a92413d132?version=3.5.4

[6] жизненного цикла onMount: https://ru.svelte.dev/tutorial/onmount

[7] привязки this: https://ru.svelte.dev/tutorial/bind-this

[8] Перемещение мяча: https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball

[9] Pure JavaScript: https://jsfiddle.net/end3r/3x5foxb1/?utm_source=website&utm_medium=embed&utm_campaign=3x5foxb1

[10] Svelte: https://svelte.dev/repl/58aaf72b4e9845109d2da06de0c521f2?version=3.5.4

[11] Отскок от стены: https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls

[12] Pure JavaScript: https://jsfiddle.net/end3r/redj37dc/?utm_source=website&utm_medium=embed&utm_campaign=redj37dc

[13] Svelte: https://svelte.dev/repl/0a23b01810b14f059fc218dd1d45cd16?version=3.5.4

[14] Управление ракеткой клавишами: https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls

[15] Pure JavaScript: https://jsfiddle.net/raymondjplante/t2udo69j/?utm_source=website&utm_medium=embed&utm_campaign=t2udo69j

[16] Svelte: https://svelte.dev/repl/4ff8fce1055340ebbefff3d1393f3902?version=3.5.4

[17] специальный элемент <svelte:window>: https://ru.svelte.dev/tutorial/svelte-window

[18] Конец игры: https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over

[19] Pure JavaScript: https://jsfiddle.net/raymondjplante/L61c9y50/?utm_source=website&utm_medium=embed&utm_campaign=L61c9y50

[20] Svelte: https://svelte.dev/repl/db860dc7a68545f5a5df53c9080fec13?version=3.5.4

[21] Построение кирпичей: https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field

[22] Pure JavaScript: https://jsfiddle.net/raymondjplante/Lu3vtejz/?utm_source=website&utm_medium=embed&utm_campaign=Lu3vtejz

[23] Svelte: https://svelte.dev/repl/d91bc1a038f04399a5895a22cb204f0f?version=3.5.4

[24] Определение столкновений: https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection

[25] Pure JavaScript: https://jsfiddle.net/yumetodo/kaed3hbu/?utm_source=website&utm_medium=embed&utm_campaign=kaed3hbu

[26] Svelte: https://svelte.dev/repl/2ead60f35a9144bbbb8662069d33685f?version=3.5.4

[27] Счет и выигрыш: https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win

[28] Pure JavaScript: https://jsfiddle.net/raymondjplante/b3z2Lpu9/?utm_source=website&utm_medium=embed&utm_campaign=b3z2Lpu9

[29] Svelte: https://svelte.dev/repl/87073e0f655f483782aed510c463086e?version=3.5.4

[30] Контроль мышью: https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls

[31] Pure JavaScript: https://jsfiddle.net/raymondjplante/vt7y5hcp/?utm_source=website&utm_medium=embed&utm_campaign=vt7y5hcp

[32] Svelte: https://svelte.dev/repl/4c531cc0346243189762df6edf2ea536?version=3.5.4

[33] Заключение: https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up

[34] Pure JavaScript: https://jsfiddle.net/raymondjplante/dfh2tpu1/?utm_source=website&utm_medium=embed&utm_campaign=dfh2tpu1

[35] Svelte: https://svelte.dev/repl/237155e994e643cc91f510024b312b1d?version=3.5.4

[36] Phaser: https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser

[37] https://github.com/sveltejs/gl: https://github.com/sveltejs/gl

[38] https://github.com/Rich-Harris/svelte-gl: https://github.com/Rich-Harris/svelte-gl

[39] http://localhost:5000/: http://localhost:5000/

[40] Источник: https://habr.com/ru/post/458142/?utm_source=habrahabr&utm_medium=rss&utm_campaign=458142

Нажмите здесь для печати.

Разработка игры Breakout на Svelte

1. Создание Canvas и рисование на нем [3]

2. Перемещение мяча [8]

3. Отскок от стены [11]

4. Управление ракеткой клавишами [14]

5. Конец игры [18]

6. Построение кирпичей [21]

7. Определение столкновений [24]

8. Счет и выигрыш [27]

9. Контроль мышью [30]

10. Заключение [33]

Репозиторий на GitHub

1. Создание Canvas и рисование на нем ^[3]

2. Перемещение мяча ^[8]

3. Отскок от стены ^[11]

4. Управление ракеткой клавишами ^[14]

5. Конец игры ^[18]

6. Построение кирпичей ^[21]

7. Определение столкновений ^[24]

8. Счет и выигрыш ^[27]

9. Контроль мышью ^[30]

10. Заключение ^[33]