Getting Started
Node Version
We're using Node.js version 18 for this course. We've also included an .nvmrc file for version managers in the root of the project. This is largely for relevant tooling and nothing to worry about while writing the game itself.
Clone the Starter Project
To get started we'll pull down the starter project by running:
npx degit sidequestdev/flappy-bird-course-starter flappy-bird
Feel free to change the flappy-bird to something else if you'd like, but we'll use that directory name where relevant.
Then cd flappy-bird and run npm install to install the dependencies. Run npm run dev to start the development server. You should see a black canvas centered in the page.
Vite
This project will be powered by Vite. We believe it's an excellent tool for building web apps, with a lot of good defaults.
Why are we using Vite:
- Static asset handling:
import imageUrl from './assets/image/image.png'
- TypeScript support out of the box
- Super fast
What's Already Included
We provide a div#container element that already contains a <canvas> tag. This leverages a small amount of CSS found in style.css to position the canvas in the center of the screen and set it's background color to black.
There are a number of config files for common tooling (eslint, prettier, npm, etc) that we've provided for you as well.
The sprite sheet we'll use is located in assets/image/spritesheet.png. It is a single image we'll use to draw every asset in the game.
An important file we've included is src/sprite-map.ts. It holds the sub-image information used to sample (take a piece of) sections of the larger sprite sheet. Don't worry about the details of this file just yet, we'll demonstrate its usage later.
Things to Note
- We are targeting a modern version of Chrome - 97+, if the game works in other browsers, sweet!