fix css bug

This commit is contained in:
biglyderv 2025-05-07 19:17:12 -04:00
parent 1a52b9833d
commit 9b060afc6c
Signed by: biglyderv
GPG key ID: 0E2EB0B4CD7397B5
2 changed files with 50 additions and 46 deletions

View file

@ -72,3 +72,7 @@ img.art {
img.dark {
filter: invert(1);
}
img, canvas {
image-rendering: pixelated;
}

View file

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