fix css bug
This commit is contained in:
parent
1a52b9833d
commit
9b060afc6c
2 changed files with 50 additions and 46 deletions
|
@ -72,3 +72,7 @@ img.art {
|
|||
img.dark {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
img, canvas {
|
||||
image-rendering: pixelated;
|
||||
}
|
92
js/index.js
92
js/index.js
|
@ -2,16 +2,16 @@ const width = 2160;
|
|||
const height = 1080;
|
||||
|
||||
const BIASES = {
|
||||
0x000000: 1,
|
||||
0x64ff50: 0.5,
|
||||
0xc8ff50: 0.45,
|
||||
0x46aafa: 0.4,
|
||||
0x0078ff: 0.35,
|
||||
0x0000ff: 0.3,
|
||||
0xf5a500: 0.15,
|
||||
0xff0000: 0.1,
|
||||
0x666666: 0.01,
|
||||
0xb2b2b2: 0.02
|
||||
0x000000: 1,
|
||||
0x64ff50: 0.5,
|
||||
0xc8ff50: 0.45,
|
||||
0x46aafa: 0.4,
|
||||
0x0078ff: 0.35,
|
||||
0x0000ff: 0.3,
|
||||
0xf5a500: 0.15,
|
||||
0xff0000: 0.1,
|
||||
0x666666: 0.01,
|
||||
0xb2b2b2: 0.02
|
||||
};
|
||||
|
||||
function validXY(x, y) {
|
||||
|
@ -22,7 +22,7 @@ function validXY(x, y) {
|
|||
|
||||
function getRGBA(data, i, out) {
|
||||
for (let j = i * 4; j < i * 4 + 4; j++) {
|
||||
out[j - i*4] = data[j];
|
||||
out[j - i * 4] = data[j];
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
@ -47,24 +47,24 @@ function Game(baseMap) {
|
|||
this.strength = {};
|
||||
}
|
||||
|
||||
Game.prototype.main = function() {
|
||||
var {biomes, ctx, colonized} = this;
|
||||
var dat = ctx.getImageData(0,0,width,height);
|
||||
Game.prototype.main = function () {
|
||||
var { biomes, ctx, colonized } = this;
|
||||
var dat = ctx.getImageData(0, 0, width, height);
|
||||
var data = dat.data;
|
||||
var out = new Uint8Array(4);
|
||||
|
||||
|
||||
for (let k = 0; k < width*height; k++) {
|
||||
let i = k;
|
||||
if (!colonized[i]) continue;
|
||||
for (let k = 0; k < width * height; k++) {
|
||||
let i = k;
|
||||
if (!colonized[i]) continue;
|
||||
|
||||
var x = i % width;
|
||||
var y = Math.floor(i / width);
|
||||
|
||||
let rgba = getRGBA(biomes.data,i,out);
|
||||
let rgba = getRGBA(biomes.data, i, out);
|
||||
|
||||
if (isLand(rgba))
|
||||
setRGBA(data,i,this.colors[colonized[i]]);
|
||||
setRGBA(data, i, this.colors[colonized[i]]);
|
||||
|
||||
let weight = 11;
|
||||
|
||||
|
@ -73,15 +73,15 @@ Game.prototype.main = function() {
|
|||
let i2 = i;
|
||||
|
||||
for (let dx = -1; dx <= 1; dx++) {
|
||||
for (let dy = -1; dy <= 1; dy++ ) {
|
||||
for (let dy = -1; dy <= 1; dy++) {
|
||||
weight--;
|
||||
let x2 = x + dx;
|
||||
let y2 = y + dy;
|
||||
|
||||
let i = x2 + y2 * width;
|
||||
|
||||
if (!validXY(x2,y2)) continue;
|
||||
let rgba = getRGBA(biomes.data,i,out);
|
||||
if (!validXY(x2, y2)) continue;
|
||||
let rgba = getRGBA(biomes.data, i, out);
|
||||
let rgbaH = rgba[0] * 0x10000 + rgba[1] * 0x100 + rgba[2];
|
||||
|
||||
let bias = ((rgbaH in BIASES) ? BIASES[rgbaH] : 0.2) / weight;
|
||||
|
@ -105,30 +105,30 @@ Game.prototype.main = function() {
|
|||
}
|
||||
}
|
||||
|
||||
ctx.putImageData(dat,0,0,0,0,width,height);
|
||||
ctx.putImageData(dat, 0, 0, 0, 0, width, height);
|
||||
}
|
||||
|
||||
Game.prototype.map = function() {
|
||||
var {biomes, ctx} = this;
|
||||
var dat = ctx.getImageData(0,0,width,height);
|
||||
Game.prototype.map = function () {
|
||||
var { biomes, ctx } = this;
|
||||
var dat = ctx.getImageData(0, 0, width, height);
|
||||
var data = dat.data;
|
||||
|
||||
var out = new Uint8Array(4);
|
||||
for (let i = 0; i < biomes.data.length; i++) {
|
||||
let rgba = getRGBA(biomes.data,i, out);
|
||||
let rgba = getRGBA(biomes.data, i, out);
|
||||
|
||||
if (!isLand(rgba,i)) {
|
||||
setRGBA(data,i,[255,255,255,255])
|
||||
} else {
|
||||
setRGBA(data,i,[0,0,0,255]);
|
||||
if (!isLand(rgba, i)) {
|
||||
setRGBA(data, i, [255, 255, 255, 255])
|
||||
} else {
|
||||
setRGBA(data, i, [0, 0, 0, 255]);
|
||||
}
|
||||
}
|
||||
|
||||
ctx.putImageData(dat,0,0,0,0,width,height);
|
||||
ctx.putImageData(dat, 0, 0, 0, 0, width, height);
|
||||
}
|
||||
|
||||
Game.prototype.place = function() {
|
||||
var {biomes,ctx,colonized} = this;
|
||||
Game.prototype.place = function () {
|
||||
var { biomes, ctx, colonized } = this;
|
||||
var out = new Uint8Array(4);
|
||||
|
||||
let i = 0;
|
||||
|
@ -137,47 +137,47 @@ Game.prototype.place = function() {
|
|||
while (true) {
|
||||
i = Math.floor(Math.random() * biomes.data.length / 4);
|
||||
|
||||
let rgba = getRGBA(biomes.data,i,out);
|
||||
let rgba = getRGBA(biomes.data, i, out);
|
||||
|
||||
if (isLand(rgba)) break;
|
||||
}
|
||||
|
||||
colonized[i] = count;
|
||||
this.aggression[count] = Math.random();
|
||||
this.colors[count] = [Math.floor(Math.random() * 255),Math.floor(Math.random() * 255),Math.floor(Math.random() * 255),255];
|
||||
this.colors[count] = [Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), 255];
|
||||
this.strength[count] = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Game.prototype.loop = function() {
|
||||
Game.prototype.loop = function () {
|
||||
let that = this;
|
||||
setInterval(function() { that.main() } ,1000 / 60);
|
||||
setInterval(function () { that.main() }, 1000 / 60);
|
||||
}
|
||||
|
||||
Game.prototype.startGame = function() {
|
||||
Game.prototype.startGame = function () {
|
||||
var canvas = document.querySelector("#canvas");
|
||||
var ctx = canvas.getContext("2d",{ willReadFrequently: true });
|
||||
var ctx = canvas.getContext("2d", { willReadFrequently: true });
|
||||
|
||||
this.ctx = ctx;
|
||||
|
||||
ctx.imageSmoothingEnabled = false;
|
||||
ctx.drawImage(this.img,0, 0,width,height);
|
||||
ctx.drawImage(this.img, 0, 0, width, height);
|
||||
|
||||
|
||||
var dat = ctx.getImageData(0,0,width,height);
|
||||
var dat = ctx.getImageData(0, 0, width, height);
|
||||
this.biomes = dat;
|
||||
|
||||
this.colonized = new Uint8Array(width*height);
|
||||
this.colonized = new Uint8Array(width * height);
|
||||
|
||||
this.map();
|
||||
this.place();
|
||||
this.loop();
|
||||
}
|
||||
|
||||
Game.prototype.init = function() {
|
||||
Game.prototype.init = function () {
|
||||
let that = this;
|
||||
this.img.src = this.baseMap;
|
||||
this.img.onload = function() { that.startGame() };
|
||||
this.img.onload = function () { that.startGame() };
|
||||
}
|
||||
|
||||
new Game("base.png").init();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue