jdb/code-katas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Starting to build scaffolding for SpikeWars.

Browse Source
This commit is contained in:
Jonathan Bernard
2016-07-23 23:14:36 -05:00
parent a4842de29e
commit 161a6bd06c
5 changed files with 120 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
spike-wars/src/main/html/index.html
View File

@@ -8,10 +8,14 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<link href="css/spike-wars-${version}.css" type="text/css" rel="stylesheet"/> <link href="css/spike-wars-${version}.css" type="text/css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P|PT+Mono' rel='stylesheet' type='text/css'>
</head> </head>
<body> <body>
<div id=spike-wars>
<h1>Spike Wars!</h1> <h1>Spike Wars!</h1>
<canvas></canvas>
</div>
<script type='application/javascript' src="js/spike-wars-${version}.js"></script> <script type='application/javascript' src="js/spike-wars-${version}.js"></script>
</body> </body>
</html> </html>

11
spike-wars/src/main/js/game-logic.js Normal file
View File

@@ -0,0 +1,11 @@
import type Board from './game-types';
function render(state: GameState, g: CanvasRenderingContext2D) {
}
function update(board: Board) {
}
export {render, update};

4
spike-wars/src/main/js/game-types.js Normal file
View File

@@ -0,0 +1,4 @@
export type Board = Array<number>;
export type GameState = {
board: Board
};

78
spike-wars/src/main/js/spike-wars.js Normal file
View File

@@ -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); }
}
}

22
spike-wars/src/main/scss/spike-wars.scss Normal file
View File

@@ -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;
}