diff --git a/spike-wars/src/main/html/index.html b/spike-wars/src/main/html/index.html index 9fb22cd..51d67c1 100644 --- a/spike-wars/src/main/html/index.html +++ b/spike-wars/src/main/html/index.html @@ -8,10 +8,14 @@ + -

Spike Wars!

+
+

Spike Wars!

+ +
diff --git a/spike-wars/src/main/js/game-logic.js b/spike-wars/src/main/js/game-logic.js new file mode 100644 index 0000000..fa66b8b --- /dev/null +++ b/spike-wars/src/main/js/game-logic.js @@ -0,0 +1,11 @@ +import type Board from './game-types'; + +function render(state: GameState, g: CanvasRenderingContext2D) { + +} + +function update(board: Board) { + +} + +export {render, update}; diff --git a/spike-wars/src/main/js/game-types.js b/spike-wars/src/main/js/game-types.js new file mode 100644 index 0000000..e892dae --- /dev/null +++ b/spike-wars/src/main/js/game-types.js @@ -0,0 +1,4 @@ +export type Board = Array; +export type GameState = { + board: Board +}; diff --git a/spike-wars/src/main/js/spike-wars.js b/spike-wars/src/main/js/spike-wars.js new file mode 100644 index 0000000..f18cd75 --- /dev/null +++ b/spike-wars/src/main/js/spike-wars.js @@ -0,0 +1,78 @@ +// @flow +import {update, render} from './game-logic'; + +import type Board from './game-types'; +import type GameState from './game-types'; + +type SpikeWarsOptions = {fps?: number}; +export default class SpikeWars { + ROWS: number; // How many rows does our board have? + COLS: number; // How many columns does our board have? + TILE_SIZE: number; // How big is each square on our board? + + // This is where we keep track of all the things that are happening in the + // game. + state: GameState; + + nextGameTick: number; // At what time does the next game update happen? + skipTicks: number; // How long does the game wait between updates? + + // This is where we keep a reference to our canvas, what we are drawing on. + canvas: HTMLCanvasElement; + + // This is a reference to the drawing API: how we tell the computer to draw + // on the canvas. It is a 2D context, meaning we draw in two-dimensions, like + // on paper. + canvas2d: CanvasRenderingContext2D; + + // The constructor is the function that is run when somebody first creates a + // new SpikeWars instance. This is where we set stuff up for the first time. + constructor({fps = 30}: SpikeWarsOptions) { + + // TODO: detect/set automatically instead of hard-coding + this.ROWS = 8; + this.COLS = 20; + this.TILE_SIZE = 48; + + this.state = {board: this.newBoard()}; // create a new board + + // Find our canvas and ask for the reference to the drawing API. + this.canvas = window.document.getElementsByTagName('canvas')[0]; + this.canvas2d = this.canvas.getContext('2d'); + } + + // This function creates a new board. + newBoard(): Board { return new Array(this.ROWS * this.COLS); } + + // The game loop is where the game actually runs. It is called a loop because + // it runs over and over and over, in a loop until it is time to stop the + // game. + gameLoop(): void { + // TODO: break the game loop upon exit conditions + + // We are going to ask the browser to call us again next time we have a + // chance to draw. We're doing this first because we want to make sure we + // reserve our place in line before we get busy doing stuff. + window.requestAnimationFrame(this.gameLoop); + + // Now we need to check if it is time to do stuff. If our computer is + // really fast the game loop might run really fast, or if our computer is + // busy the speed might change. That messes up the game (we want it to just + // go one speed). So to fix this we use a kind of clock. We figure out how + // fast we want the game to run. Then we figure out how much time we should + // wait in between each game "tick" (like a clock). + // + // Is it time for the next game tick? + if ((new Date()).getTime() > this.nextGameTick) { + // Yes! So the first thing we need to do is figure out when the next tick + // should be. + this.nextGameTick += this.skipTicks; + + // Then we update our game state. + this.state = update(this.state); + + // And we re-draw the world. + render(this.state, this.canvas2d); } + } + +} diff --git a/spike-wars/src/main/scss/spike-wars.scss b/spike-wars/src/main/scss/spike-wars.scss new file mode 100644 index 0000000..820400c --- /dev/null +++ b/spike-wars/src/main/scss/spike-wars.scss @@ -0,0 +1,22 @@ +html { + background-color: gray; +} + +#spike-wars { + background-color: white; + border: solid 8px black; + margin: 24px auto; + padding: 48px; + width: 960px; + + canvas { + width: 960px; + height: 384px; + } +} + +h1 { + font-family: 'Press Start 2P', sans-serif; + text-align: center; +} +