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

  • Tutorial

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



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


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

Pure JavaScriptSvelte


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



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


<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. Перемещение мяча

Pure JavaScriptSvelte


3. Отскок от стены

Pure JavaScriptSvelte


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

Pure JavaScriptSvelte
Использован специальный элемент <svelte:window> для прослушивания событий от клавиатуры. Обработчики событий от клавиатуры и используемые в них переменные добавлены вне функции onMount().


5. Конец игры

Pure JavaScriptSvelte


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

Pure JavaScriptSvelte


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

Pure JavaScriptSvelte


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

Pure JavaScriptSvelte


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

Pure JavaScriptSvelte
Добавлен обработчик событий от мыши также за пределами функции onMount.


10. Заключение

Pure JavaScriptSvelte


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


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

https://github.com/nomhoi/svelte-breakout-game


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


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

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

Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 4

    0
    Спасибо за статью! svelte-gl выглядит очень многообещающем’
      +1
      Не понял, зачем тут использовать Svelte, это же просто работа с Canvas. Тоже самое получится на Angular / React / Vue, так как эти фреймворки про упрощение работы с DOM, а не c Canvas.
        –2

        Согласитесь, что такой пример https://svelte.dev/repl/b001c32e5e2f4e7dbe8a3e1449697ea7?version=3.6.1 написать легче с фреймворком, чем на чистом JS с canvas. Скоро будет новый туториал, продолжение туторила про Tic Tac Toe, будет реализована история ходов с использованием Flux архитектуры.

        +1

        Игры обычно не пишут на чистом JS, а используют готовые HTML5 фреймворки… которые упрощают работу с канвасом, вводят примитивы типо круг, дают движок анимаций, мультиплеер и т.д. Действительно непонятно при чем тут svelte. Не совсем удачный пример

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое