Add basic background rendering

README.md

@@ -0,0 +1,3 @@
+# Improcket
+
+A little 2D space rocket game. Not done tho.

js/consts.mjs

@@ -0,0 +1,9 @@
+/*
+ *	Constants that do not change during gameplay.
+ *	This can kind of be treated like a configuration file, I guess.
+ */
+
+// Pixel length of sector.
+export const SECTOR_SIZE = 512;
+// Star count per sector.
+export const STAR_DENSITY = (SECTOR_SIZE ** 2) / 10000;

js/game.mjs

@@ -1,16 +1,21 @@
+import * as graphics from './graphics/index.mjs';
 
-
+export let game;
-const game = {
-	state: {
-		room: 'menu',
-		paused: false
-	}
-};
 
 export function init() {
-	game.state.room = 'menu';
+	game = {
+		state: {
+			room: 'menu',
+			paused: false
+		}
+	};
+
+	graphics.init();
+
+	tick();
 }
 
 function tick() {
+	graphics.render();
 	requestAnimationFrame(tick);
 }

js/graphics/background.mjs

@@ -0,0 +1,21 @@
+import {SeededRandom} from '../util.mjs';
+import {context, view, getVisibleSectors} from './index.mjs';
+import {STAR_DENSITY} from '../consts.mjs';
+
+export function render() {
+	context.fillStyle = '#000';
+
+	getVisibleSectors().forEach(s => renderSectorStars(s));
+}
+
+function renderSectorStars(sector) {
+	let rand = new SeededRandom(sector.numId);
+
+	context.fillStyle = '#fff';
+
+	for (let i = 0; i < STAR_DENSITY; i++) {
+		let sx = rand.next() * sector.size + sector.wx;
+		let sy = rand.next() * sector.size + sector.wy;
+		context.fillRect(sx, sy, 1.5, 1.5);
+	}
+}

js/graphics/index.mjs

@@ -0,0 +1,39 @@
+import {game} from '../game.mjs';
+import {getContainedSectors} from '../world/index.mjs';
+import * as background from './background.mjs';
+
+export let canvas, context, tempCanvas, tempContext;
+export let view;
+
+export function init() {
+	canvas = document.querySelector('#main');
+	context = canvas.getContext('2d');
+	tempCanvas = document.querySelector('#temp');
+	tempContext = tempCanvas.getContext('2d');
+
+	canvas.width = 600;
+	canvas.height = 600;
+
+	view = {
+		bounds: [0, 0, canvas.width, canvas.height],
+		x: 0,
+		y: 0,
+		zoom: 1
+	}
+}
+
+export function render() {
+	context.clearRect(0, 0, canvas.width, canvas.height);
+	context.fillRect(0, 0, canvas.width, canvas.height);
+	context.save();
+
+	// TODO: Translate canvas.
+
+	background.render();
+
+	context.restore();
+}
+
+export function getVisibleSectors() {
+	return getContainedSectors(...view.bounds);
+}

js/graphics/rocket.mjs

@@ -0,0 +1,6 @@
+import {canvas, context} from './index.mjs';
+import * as assets from '../assets.mjs';
+
+export function render() {
+
+}

js/util.mjs

@@ -0,0 +1,11 @@
+export class SeededRandom {
+	constructor(seed) {
+		this.seed = seed % 2147483647;
+	}
+
+	next() {
+		 this.seed = this.seed * 16807 % 2147483647;
+ 		if (this.seed <= 0) this.seed += 2147483646;
+		 return (this.seed - 1) / 2147483646;
+	}
+}

js/world/index.mjs

@@ -0,0 +1,3 @@
+import * as sector from './sector.mjs';
+
+export {sectorFromPoint, getContainedSectors} from './sector.mjs';

js/world/sector.mjs

@@ -0,0 +1,51 @@
+import {SECTOR_SIZE} from '../consts.mjs';
+
+const sectors = new Map();
+
+export default class Sector {
+	constructor(x, y) {
+		this.x = x;
+		this.y = y;
+		this.size = SECTOR_SIZE;
+		this.wx = this.size * this.x;
+		this.wy = this.size * this.y;
+		this.id = getId(this.x, this.y);
+		this.numId = getNumId(this.x, this.y);
+	}
+
+	containsPoint(wx, wy) {
+		return wx >= this.wx && wy >= this.wy &&
+			wx < this.wx + SECTOR_SIZE && wy < this.wy + SECTOR_SIZE;
+	}
+}
+
+function getId(x, y) {
+	return `${x}.${y}`;
+}
+
+function getNumId(x, y) {
+	return Math.abs(x + (y * 3665)) % Number.MAX_SAFE_INTEGER;
+}
+
+export function getSector(x, y) {
+	if (!sectors.has(getId(x, y))) {
+		sectors.set(getId(x, y), new Sector(x, y));
+	}
+
+	return sectors.get(getId(x, y));
+}
+
+export function getSectorFromWorld(wx, wy) {
+	return getSector(wx / SECTOR_SIZE | 0, wy / SECTOR_SIZE | 0);
+}
+
+export function getContainedSectors(startX, startY, endX, endY) {
+	let sectors = [];
+
+	for (let x = startX; x < endX; x += SECTOR_SIZE)
+	for (let y = startY; y < endY; y += SECTOR_SIZE) {
+		sectors.push(getSectorFromWorld(x, y));
+	}
+
+	return sectors;
+}