init

js/index.js

@@ -0,0 +1,63 @@
+function getRGBA(data, i) {
+	let out = [];
+	for (let j = i * 4; j < i * 4 + 4; j++) {
+		out.push(data[j]);
+	}
+	return out;
+}
+
+function setRGBA(data, i, input) {
+	for (let j = i * 4; j < i * 4 + 4; j++) {
+		data[j] = input[j - i * 4];
+	}
+}
+
+function Game(baseMap) {
+	this.img = new Image();
+	this.baseMap = baseMap;
+}
+
+Game.prototype.main = function() {	
+	var {biomes, ctx} = this;
+	var dat = ctx.getImageData(0,0,800,400);
+	var data = dat.data;
+	
+	for (let i = 0; i < biomes.data.length; i++) {
+		let rgba = getRGBA(biomes.data,i);
+
+		if (rgba[0] == 255 && rgba[1] == 255 && rgba[2] == 255 && rgba[3] == 255) {
+			setRGBA(data,i,[255,255,255,255])
+		} else {	
+			setRGBA(data,i,[0,0,0,255]);
+		}
+	}
+
+	ctx.putImageData(dat,0,0,0,0,800,400);
+}
+
+Game.prototype.loop = function() {
+	let that = this;
+	setInterval(function() { that.main() } ,1000 / 60);
+}
+
+Game.prototype.startGame = function() {
+	var canvas = document.querySelector("#canvas");
+	var ctx = canvas.getContext("2d");
+
+	this.ctx = ctx;
+
+	ctx.drawImage(this.img, 0, 0,800,400);
+
+	var dat = ctx.getImageData(0,0,800,400);
+	this.biomes = dat;
+
+	this.loop();
+}
+
+Game.prototype.init = function() { 	
+	let that = this;
+	this.img.src = this.baseMap;
+	this.img.onload = function() { that.startGame() };
+}
+
+new Game("base.png").init();