Разработка игры Breakout на Svelte
- воскресенье, 30 июня 2019 г. в 00:19:06
На MDN есть туториал "2D игра на чистом JavaScript", в котором изучаются основы использования элемента HTML5 <canvas>.
В этом туториале мы повторим разработку этой игры на Svelte.
В этом примере мы отображаем три геометрические фигуры: квадрат, прямоугольник и круг.
Переменная 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.
Pure JavaScript — Svelte
Использован специальный элемент <svelte:window> для прослушивания событий от клавиатуры. Обработчики событий от клавиатуры и используемые в них переменные добавлены вне функции onMount().
Pure JavaScript — Svelte
Добавлен обработчик событий от мыши также за пределами функции onMount.
Как мы видим, практически весь код перенесен в приложение на Svelte без изменений. Игры обычно не пишут на чистом JS, а используют готовые HTML5 фреймворки. Например, эта же игра выполненная на фреймворке Phaser. Можно посмотреть эксперименты с WebGl на Svelte https://github.com/sveltejs/gl и идеи по svelte-gl https://github.com/Rich-Harris/svelte-gl.
Установка игры на локальном компьютере:
git clone git@github.com:nomhoi/svelte-breakout-game.git
cd svelte-breakout-game
npm install
npm run dev
Запускаем игру в броузере по адресу: http://localhost:5000/.