En MDN, hay un tutorial llamado "Juego de JavaScript puro 2D" que explora los conceptos básicos del uso del elemento HTML5 <canvas> .
En este tutorial, repetiremos el desarrollo de este juego en Svelte.
1. Crear un lienzo y dibujar en él
En este ejemplo, mostramos tres formas geométricas: un cuadrado, un rectángulo y un círculo.
La variable del lienzo se definirá después de que el componente se monte en el DOM, por lo que colocamos todo el código en el controlador del ciclo de vida onMount . Enlazar el elemento de lienzo a la variable de lienzo utilizando este enlace .
<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> Además, simplemente transferimos todo el código sin cambios a la función onMount (). Solo se dan comentarios sobre el uso de Svelte.
2. Mueve la pelota
3. rebota en la pared
4. Control de raquetas con llaves
JavaScript puro - Svelte
Se usó un elemento especial <svelte: window> para escuchar los eventos desde el teclado. Los controladores de eventos de teclado y las variables utilizadas en ellos se agregan fuera de la función onMount ().
5. El final del juego.
6. Construyendo ladrillos
7. Detección de colisión
8. Marca y gana
9. Control del mouse
JavaScript puro - Svelte
También se ha agregado un controlador de eventos del mouse fuera de la función onMount.
10. Conclusión
Como podemos ver, casi todo el código se ha portado a la aplicación en Svelte sin cambios. Los juegos generalmente no escriben en JS puro, sino que usan marcos HTML5 listos para usar. Por ejemplo, el mismo juego hecho en el marco Phaser . Puede ver experimentos con WebGl en Svelte https://github.com/sveltejs/gl e ideas sobre svelte-gl https://github.com/Rich-Harris/svelte-gl .
Repositorio de GitHub
https://github.com/nomhoi/svelte-breakout-game
Instalar el juego en la computadora local:
git clone git@github.com:nomhoi/svelte-breakout-game.git cd svelte-breakout-game npm install npm run dev Lanzamos el juego en un navegador en la dirección: http: // localhost: 5000 / .