kacperks/worldbox-minigame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
worldbox-minigame/index.html

985 lines
27 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Virtual World</title>
<style>
body {
margin: 0;
padding: 0;
background: #e0f7fa;
font-family: sans-serif;
}
#app {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
h1 {
margin: 5px;
color: #333;
}
#controls {
margin-bottom: 5px;
}
canvas {
background: #ffffff;
border: 2px solid #444;
cursor: grab;
}
canvas:active {
cursor: grabbing;
}
#log {
width: 800px;
height: 120px;
margin-top: 10px;
overflow-y: auto;
border: 2px solid #444;
background: #f9f9f9;
padding: 5px;
font-size: 0.9rem;
}
.log-entry {
margin: 2px 0;
}
</style>
</head>
<body>
<div id="app">
<h1>Virtual World</h1>
<p id="controls">Drag to move the map, scroll to zoom in/out.</p>
<canvas id="worldCanvas" width="800" height="600"></canvas>
<div id="log"></div>
</div>
<script>
/*
---------------------------------------------------------------------------------
Virtual World Simulation with:
- Builder & Farmer Professions
- Hunger & Energy
- Fruit Trees (gather fruit, plant new trees)
- Houses (store fruit, citizens can eat & rest)
- Roads automatically built between houses once they finish construction!
- Logging & Pan/Zoom
- Child Birth Events
---------------------------------------------------------------------------------
*/
/**********************************************************************
* GLOBALS & BASIC STRUCTURES
**********************************************************************/
const canvas = document.getElementById('worldCanvas');
const ctx = canvas.getContext('2d');
const logContainer = document.getElementById('log');
// Pan & Zoom
let offsetX = 0;
let offsetY = 0;
let scale = 1.0;
let isDragging = false;
let lastMouseX = 0;
let lastMouseY = 0;
// Frame counter for timed events
let frameCount = 0;
// Shared city storage for wood
const cityStorage = {
wood: 0
};
// Array of resource nodes (trees & fruit trees)
let resources = [];
// Buildings array (includes both House sites and Road sites)
let buildings = [];
// Citizens
let citizens = [];
/**********************************************************************
* SIMULATION CONSTANTS
**********************************************************************/
// Hunger & Energy
const HUNGER_INCREMENT = 0.005;
const ENERGY_DECREMENT_WORK = 0.02;
const ENERGY_INCREMENT_REST = 0.05;
const HUNGER_THRESHOLD = 50;
const ENERGY_THRESHOLD = 30;
const HUNGER_MAX = 100;
const ENERGY_MAX = 100;
// House building requirements
const HOUSE_WOOD_REQUIRED = 50;
const HOUSE_BUILD_RATE = 0.2;
const HOUSE_MAX_FRUIT = 30;
// Fruit tree resource
const FRUIT_TREE_START_AMOUNT = 20;
const FRUIT_GATHER_RATE = 1;
const FRUIT_PLANT_COST = 1;
// Professions
const PROFESSIONS = ["Farmer", "Builder"];
// Road building requirements
// We'll make roads also be "buildings" with buildingType = "Road"
const ROAD_WOOD_REQUIRED = 10;
const ROAD_BUILD_RATE = 0.3;
/**********************************************************************
* LOGGING
**********************************************************************/
function logAction(text) {
const entry = document.createElement('div');
entry.className = 'log-entry';
entry.textContent = text;
logContainer.appendChild(entry);
logContainer.scrollTop = logContainer.scrollHeight;
}
/**********************************************************************
* RANDOM UTILS
**********************************************************************/
const firstNames = ["Al", "Bea", "Cal", "Dee", "Eve", "Fay", "Gil", "Hal", "Ian", "Joy", "Kay", "Lee", "Max", "Ned", "Oda", "Pam", "Ray", "Sue", "Tim", "Ula", "Vic", "Wyn", "Xan", "Yel", "Zed"];
const lastNames = ["Apple", "Berry", "Cherry", "Delta", "Echo", "Flint", "Gran", "Hills", "Iris", "Jones", "Knight", "Lemon", "Myer", "Noble", "Olson", "Prime", "Quartz", "Row", "Smith", "Turn", "Umbra", "Vale", "Wick", "Xeno", "Yolk", "Zoom"];
function randomName() {
const f = firstNames[Math.floor(Math.random() * firstNames.length)];
const l = lastNames[Math.floor(Math.random() * lastNames.length)];
return f + " " + l;
}
function randInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
/**********************************************************************
* ENTITY DEFINITIONS
**********************************************************************/
function createCitizen(name, x, y) {
const profession = PROFESSIONS[Math.floor(Math.random() * PROFESSIONS.length)];
return {
name,
profession,
x,
y,
vx: (Math.random() - 0.5) * 0.3,
vy: (Math.random() - 0.5) * 0.3,
color: `hsl(${Math.random() * 360}, 70%, 50%)`,
task: null,
target: null,
carryingWood: 0,
carryingFruit: 0,
carryingCapacity: 10,
hunger: 0,
energy: ENERGY_MAX
};
}
function createResource(type, x, y, amount) {
return { type, x, y, amount };
}
/**
* Buildings can be:
* - House:
* x, y, buildingType="House"
* requiredWood, deliveredWood, buildProgress, completed
* storedFruit, maxFruit
* - Road:
* buildingType="Road"
* (x, y) as midpoint for drawing info
* x1, y1, x2, y2 for endpoints
* requiredWood, deliveredWood, buildProgress, completed
*/
function createHouseSite(x, y) {
return {
buildingType: "House",
x,
y,
requiredWood: HOUSE_WOOD_REQUIRED,
deliveredWood: 0,
buildProgress: 0,
completed: false,
storedFruit: 0,
maxFruit: HOUSE_MAX_FRUIT
};
}
function createRoadSite(x1, y1, x2, y2) {
// midpoint for label
const mx = (x1 + x2) / 2;
const my = (y1 + y2) / 2;
return {
buildingType: "Road",
x: mx,
y: my,
x1, y1,
x2, y2,
requiredWood: ROAD_WOOD_REQUIRED,
deliveredWood: 0,
buildProgress: 0,
completed: false
};
}
/**********************************************************************
* WORLD INITIALIZATION
**********************************************************************/
function initWorld() {
// Create some normal wood trees
for (let i = 0; i < 15; i++) {
const x = randInt(-1000, 1000);
const y = randInt(-1000, 1000);
resources.push(createResource("Tree", x, y, 100));
}
// Create some fruit trees
for (let i = 0; i < 10; i++) {
const x = randInt(-1000, 1000);
const y = randInt(-1000, 1000);
resources.push(createResource("FruitTree", x, y, FRUIT_TREE_START_AMOUNT));
}
// Create 5 initial citizens
for (let i = 0; i < 5; i++) {
const c = createCitizen(randomName(), randInt(-200, 200), randInt(-200, 200));
citizens.push(c);
logAction(`Citizen joined: ${c.name} [${c.profession}]`);
}
// Start simulation
requestAnimationFrame(update);
}
/**********************************************************************
* UPDATE LOOP
**********************************************************************/
function update() {
frameCount++;
// Update each citizen
citizens.forEach((cit) => {
updateCitizen(cit);
});
// Periodically add new citizens (child births)
if (frameCount % 600 === 0) {
const baby = createCitizen(randomName(), randInt(-200, 200), randInt(-200, 200));
citizens.push(baby);
logAction(`A child is born: ${baby.name} [${baby.profession}]`);
}
// Update buildings
buildings.forEach((b) => {
if (!b.completed && b.deliveredWood >= b.requiredWood) {
// House or Road? Different build rates
let buildRate = HOUSE_BUILD_RATE;
if (b.buildingType === "Road") {
buildRate = ROAD_BUILD_RATE;
}
b.buildProgress += buildRate;
if (b.buildProgress >= 100) {
b.completed = true;
if (b.buildingType === "House") {
logAction(`A new House is completed at (${b.x}, ${b.y})!`);
// Once the house is completed, build a road from it to the nearest house
maybeBuildRoad(b);
} else {
logAction(`A Road has been completed!`);
}
}
}
});
drawWorld();
requestAnimationFrame(update);
}
/**********************************************************************
* CITIZEN UPDATE (AI + Movement)
**********************************************************************/
function updateCitizen(cit) {
// Hunger & energy
cit.hunger += HUNGER_INCREMENT;
if (cit.hunger > HUNGER_MAX) cit.hunger = HUNGER_MAX;
if (cit.task === 'chop' || cit.task === 'gatherFruit' || cit.task === 'build') {
cit.energy -= ENERGY_DECREMENT_WORK;
} else if (cit.task === 'restAtHouse') {
cit.energy += ENERGY_INCREMENT_REST;
} else {
cit.energy -= 0.0005; // slight passive drain
}
if (cit.energy < 0) cit.energy = 0;
if (cit.energy > ENERGY_MAX) cit.energy = ENERGY_MAX;
// Assign a new task if none
if (!cit.task) {
assignNewTask(cit);
}
// Execute current task logic
switch (cit.task) {
case 'chop': chopTask(cit); break;
case 'deliverWood': deliverWoodTask(cit); break;
case 'build': buildTask(cit); break;
case 'gatherFruit': gatherFruitTask(cit); break;
case 'deliverFruit': deliverFruitTask(cit); break;
case 'plantFruitTree': plantFruitTreeTask(cit); break;
case 'eatAtHouse': eatAtHouseTask(cit); break;
case 'restAtHouse': restAtHouseTask(cit); break;
default: randomWander(cit); break;
}
// Apply velocity
cit.x += cit.vx;
cit.y += cit.vy;
}
/**********************************************************************
* TASK ASSIGNMENT
**********************************************************************/
function assignNewTask(cit) {
// If hunger too high, eat if possible
if (cit.hunger >= HUNGER_THRESHOLD) {
const houseWithFruit = findHouseWithFruit();
if (houseWithFruit) {
cit.task = 'eatAtHouse';
cit.target = houseWithFruit;
return;
}
}
// If energy too low, rest at any completed house
if (cit.energy <= ENERGY_THRESHOLD) {
const completedHouse = findAnyCompletedHouse();
if (completedHouse) {
cit.task = 'restAtHouse';
cit.target = completedHouse;
return;
}
}
// Profession-based
if (cit.profession === "Builder") {
builderTasks(cit);
} else {
farmerTasks(cit);
}
}
function builderTasks(cit) {
// Find building needing wood
const buildingNeedingWood = buildings.find(b => !b.completed && b.deliveredWood < b.requiredWood);
if (buildingNeedingWood) {
// If carrying wood, deliver
if (cit.carryingWood > 0) {
cit.task = 'deliverWood';
cit.target = buildingNeedingWood;
return;
}
// Otherwise chop wood
const tree = findNearestResourceOfType(cit, "Tree");
if (tree) {
cit.task = 'chop';
cit.target = tree;
return;
}
}
// If there's a building with enough wood but not finished, build
const buildingToConstruct = buildings.find(b => !b.completed && b.deliveredWood >= b.requiredWood);
if (buildingToConstruct) {
cit.task = 'build';
cit.target = buildingToConstruct;
return;
}
// Otherwise chop wood (to store)
const anyTree = findNearestResourceOfType(cit, "Tree");
if (anyTree) {
cit.task = 'chop';
cit.target = anyTree;
return;
}
// Idle
cit.task = null;
cit.target = null;
}
function farmerTasks(cit) {
// If carrying fruit, try delivering to a house
if (cit.carryingFruit > 0) {
const houseNeedingFruit = findHouseNeedingFruit();
if (houseNeedingFruit) {
cit.task = 'deliverFruit';
cit.target = houseNeedingFruit;
return;
}
}
// If no fruit in hand, gather fruit
const fruitTree = findNearestResourceOfType(cit, "FruitTree");
if (fruitTree && fruitTree.amount > 0) {
cit.task = 'gatherFruit';
cit.target = fruitTree;
return;
}
// Occasionally plant a new fruit tree if carrying fruit
if (cit.carryingFruit >= FRUIT_PLANT_COST && Math.random() < 0.1) {
cit.task = 'plantFruitTree';
cit.target = null;
return;
}
// Idle
cit.task = null;
cit.target = null;
}
/**********************************************************************
* TASK HANDLERS
**********************************************************************/
function chopTask(cit) {
const tree = cit.target;
if (!tree || tree.amount <= 0) {
cit.task = null;
cit.target = null;
return;
}
moveToward(cit, tree.x, tree.y, 0.4);
if (distance(cit.x, cit.y, tree.x, tree.y) < 10) {
const canGather = cit.carryingCapacity - cit.carryingWood;
const toGather = Math.min(1, tree.amount, canGather);
tree.amount -= toGather;
cit.carryingWood += toGather;
if (Math.random() < 0.01) {
logAction(`${cit.name} [${cit.profession}] is chopping wood...`);
}
if (cit.carryingWood >= cit.carryingCapacity || tree.amount <= 0) {
cit.task = null;
cit.target = null;
}
}
}
function deliverWoodTask(cit) {
const b = cit.target;
if (!b || b.completed) {
cit.task = null;
cit.target = null;
return;
}
moveToward(cit, b.x, b.y, 0.4);
if (distance(cit.x, cit.y, b.x, b.y) < 20) {
const needed = b.requiredWood - b.deliveredWood;
if (needed > 0 && cit.carryingWood > 0) {
const toDeliver = Math.min(cit.carryingWood, needed);
b.deliveredWood += toDeliver;
cit.carryingWood -= toDeliver;
logAction(`${cit.name} delivered ${toDeliver} wood to ${b.buildingType}.`);
}
cit.task = null;
cit.target = null;
}
}
function buildTask(cit) {
const b = cit.target;
if (!b || b.completed) {
cit.task = null;
cit.target = null;
return;
}
moveToward(cit, b.x, b.y, 0.3);
// Building progress handled globally
}
function gatherFruitTask(cit) {
const tree = cit.target;
if (!tree || tree.amount <= 0) {
cit.task = null;
cit.target = null;
return;
}
moveToward(cit, tree.x, tree.y, 0.4);
if (distance(cit.x, cit.y, tree.x, tree.y) < 10) {
const canGather = cit.carryingCapacity - cit.carryingFruit;
const toGather = Math.min(FRUIT_GATHER_RATE, tree.amount, canGather);
tree.amount -= toGather;
cit.carryingFruit += toGather;
if (Math.random() < 0.01) {
logAction(`${cit.name} [Farmer] is gathering fruit...`);
}
if (cit.carryingFruit >= cit.carryingCapacity || tree.amount <= 0) {
cit.task = null;
cit.target = null;
}
}
}
function deliverFruitTask(cit) {
const house = cit.target;
if (!house || !house.completed) {
cit.task = null;
cit.target = null;
return;
}
moveToward(cit, house.x, house.y, 0.4);
if (distance(cit.x, cit.y, house.x, house.y) < 20) {
// Deliver fruit
const space = house.maxFruit - house.storedFruit;
if (space > 0 && cit.carryingFruit > 0) {
const toDeliver = Math.min(cit.carryingFruit, space);
house.storedFruit += toDeliver;
cit.carryingFruit -= toDeliver;
logAction(`${cit.name} delivered ${toDeliver} fruit to house.`);
}
cit.task = null;
cit.target = null;
}
}
function plantFruitTreeTask(cit) {
// Plant near the citizen
const px = cit.x + randInt(-50, 50);
const py = cit.y + randInt(-50, 50);
moveToward(cit, px, py, 0.4);
if (distance(cit.x, cit.y, px, py) < 10) {
if (cit.carryingFruit >= FRUIT_PLANT_COST) {
cit.carryingFruit -= FRUIT_PLANT_COST;
resources.push(createResource("FruitTree", px, py, FRUIT_TREE_START_AMOUNT));
logAction(`${cit.name} [Farmer] planted a new fruit tree!`);
}
cit.task = null;
cit.target = null;
}
}
function eatAtHouseTask(cit) {
const house = cit.target;
if (!house || !house.completed) {
cit.task = null;
cit.target = null;
return;
}
moveToward(cit, house.x, house.y, 0.4);
if (distance(cit.x, cit.y, house.x, house.y) < 20) {
// Eat some fruit
if (house.storedFruit > 0 && cit.hunger > 0) {
const amountToEat = 10;
const eaten = Math.min(amountToEat, house.storedFruit);
house.storedFruit -= eaten;
cit.hunger -= eaten;
if (cit.hunger < 0) cit.hunger = 0;
logAction(`${cit.name} ate ${eaten} fruit. Hunger now ${Math.floor(cit.hunger)}.`);
}
cit.task = null;
cit.target = null;
}
}
function restAtHouseTask(cit) {
const house = cit.target;
if (!house || !house.completed) {
cit.task = null;
cit.target = null;
return;
}
moveToward(cit, house.x, house.y, 0.4);
if (distance(cit.x, cit.y, house.x, house.y) < 20) {
// Gains energy passively
if (cit.energy >= ENERGY_MAX - 1) {
cit.energy = ENERGY_MAX;
cit.task = null;
cit.target = null;
}
}
}
/**********************************************************************
* ROAD-BUILDING LOGIC
**********************************************************************/
/**
* When a new house is completed, we build a road from it
* to the nearest existing house (if one exists).
*/
function maybeBuildRoad(newHouse) {
// Find the nearest completed house (other than the new one)
const otherHouses = buildings.filter(b => b.buildingType === "House" && b.completed && b !== newHouse);
if (otherHouses.length === 0) return; // no other house to connect
let nearest = null;
let minDist = Infinity;
otherHouses.forEach((oh) => {
const d = distance(newHouse.x, newHouse.y, oh.x, oh.y);
if (d < minDist) {
minDist = d;
nearest = oh;
}
});
if (!nearest) return;
// Place a road site
const roadSite = createRoadSite(newHouse.x, newHouse.y, nearest.x, nearest.y);
buildings.push(roadSite);
logAction(`A Road site created between houses at (${newHouse.x}, ${newHouse.y}) and (${nearest.x}, ${nearest.y}).`);
}
/**********************************************************************
* FIND BUILDINGS OR RESOURCES
**********************************************************************/
function findNearestResourceOfType(cit, rtype) {
let nearest = null;
let nearestDist = Infinity;
for (const res of resources) {
if (res.type === rtype && res.amount > 0) {
const d = distance(cit.x, cit.y, res.x, res.y);
if (d < nearestDist) {
nearestDist = d;
nearest = res;
}
}
}
return nearest;
}
function findHouseWithFruit() {
return buildings.find(b => b.buildingType === "House" && b.completed && b.storedFruit > 0);
}
function findAnyCompletedHouse() {
return buildings.find(b => b.buildingType === "House" && b.completed);
}
function findHouseNeedingFruit() {
return buildings.find(b => b.buildingType === "House" && b.completed && b.storedFruit < b.maxFruit);
}
/**********************************************************************
* RANDOM WANDER
**********************************************************************/
function randomWander(cit) {
if (Math.random() < 0.01) {
cit.vx = (Math.random() - 0.5) * 0.5;
cit.vy = (Math.random() - 0.5) * 0.5;
}
}
/**********************************************************************
* MOVEMENT UTILS
**********************************************************************/
function moveToward(cit, tx, ty, speed = 0.4) {
const dx = tx - cit.x;
const dy = ty - cit.y;
const dist = Math.sqrt(dx*dx + dy*dy);
if (dist > 1) {
cit.vx = (dx / dist) * speed;
cit.vy = (dy / dist) * speed;
} else {
cit.vx = 0;
cit.vy = 0;
}
}
function distance(x1, y1, x2, y2) {
const dx = x2 - x1;
const dy = y2 - y1;
return Math.sqrt(dx*dx + dy*dy);
}
/**********************************************************************
* AUTO-CREATION OF NEW HOUSE SITES
* Similar logic to previous examples: if cityStorage has enough wood,
* we place a new House site occasionally.
**********************************************************************/
setInterval(() => {
const underConstruction = buildings.find(b => b.buildingType === "House" && !b.completed);
if (!underConstruction && cityStorage.wood >= HOUSE_WOOD_REQUIRED) {
cityStorage.wood -= HOUSE_WOOD_REQUIRED;
const x = randInt(-500, 500);
const y = randInt(-500, 500);
const site = createHouseSite(x, y);
buildings.push(site);
logAction(`A new House site placed at (${x}, ${y}).`);
}
}, 5000);
/**********************************************************************
* DEPOSIT WOOD IN CITY STORAGE IF IDLE BUILDER
**********************************************************************/
const originalAssignNewTask = assignNewTask;
assignNewTask = function(cit) {
// If builder carrying wood, but no building needs it, deposit to city center
if (cit.profession === "Builder") {
const buildingNeedingWood = buildings.find(b => !b.completed && b.deliveredWood < b.requiredWood);
if (cit.carryingWood > 0 && !buildingNeedingWood) {
const distToCenter = distance(cit.x, cit.y, 0, 0);
if (distToCenter < 20) {
cityStorage.wood += cit.carryingWood;
logAction(`${cit.name} deposited ${cit.carryingWood} wood into city storage.`);
cit.carryingWood = 0;
} else {
// Move to city center
moveToward(cit, 0, 0, 0.4);
cit.task = null;
cit.target = null;
return;
}
}
}
originalAssignNewTask(cit);
};
/**********************************************************************
* RENDER
**********************************************************************/
function drawWorld() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw grid
drawGrid();
// Draw resources
resources.forEach((res) => drawResource(res));
// Draw roads first (both completed or under construction)
buildings
.filter(b => b.buildingType === "Road")
.forEach(b => drawRoad(b));
// Draw houses
buildings
.filter(b => b.buildingType === "House")
.forEach(b => drawHouse(b));
// Draw city storage info
drawCityStorage();
// Draw citizens
citizens.forEach((cit) => {
drawCitizen(cit);
});
}
function drawGrid() {
ctx.save();
ctx.translate(canvas.width / 2 + offsetX, canvas.height / 2 + offsetY);
ctx.scale(scale, scale);
ctx.strokeStyle = "#ccc";
ctx.lineWidth = 1 / scale;
const range = 2000;
for (let x = -range; x <= range; x += 100) {
ctx.beginPath();
ctx.moveTo(x, -range);
ctx.lineTo(x, range);
ctx.stroke();
}
for (let y = -range; y <= range; y += 100) {
ctx.beginPath();
ctx.moveTo(-range, y);
ctx.lineTo(range, y);
ctx.stroke();
}
ctx.restore();
}
function drawResource(res) {
if (res.amount <= 0) return;
ctx.save();
ctx.translate(canvas.width / 2 + offsetX, canvas.height / 2 + offsetY);
ctx.scale(scale, scale);
if (res.type === "Tree") {
ctx.fillStyle = "#228B22";
ctx.beginPath();
ctx.arc(res.x, res.y, 10, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "#000";
ctx.font = "12px sans-serif";
ctx.fillText(`Tree (${res.amount})`, res.x - 20, res.y - 12);
} else if (res.type === "FruitTree") {
ctx.fillStyle = "#FF6347";
ctx.beginPath();
ctx.arc(res.x, res.y, 10, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "#000";
ctx.font = "12px sans-serif";
ctx.fillText(`Fruit (${res.amount})`, res.x - 25, res.y - 12);
}
ctx.restore();
}
/**
* Draw a House building site or a completed House
*/
function drawHouse(b) {
ctx.save();
ctx.translate(canvas.width / 2 + offsetX, canvas.height / 2 + offsetY);
ctx.scale(scale, scale);
if (!b.completed) {
// Construction site
ctx.strokeStyle = "#FF8C00";
ctx.lineWidth = 2 / scale;
ctx.strokeRect(b.x - 15, b.y - 15, 30, 30);
ctx.fillStyle = "#000";
ctx.font = "12px sans-serif";
ctx.fillText(`House (Building)`, b.x - 30, b.y - 25);
ctx.fillText(`Wood: ${b.deliveredWood}/${b.requiredWood}`, b.x - 30, b.y + 30);
ctx.fillText(`Progress: ${Math.floor(b.buildProgress)}%`, b.x - 30, b.y + 42);
} else {
// Completed
ctx.fillStyle = "#DAA520";
ctx.fillRect(b.x - 15, b.y - 15, 30, 30);
ctx.fillStyle = "#000";
ctx.font = "12px sans-serif";
ctx.fillText(`House`, b.x - 15, b.y - 20);
ctx.fillText(`Fruit: ${b.storedFruit}/${b.maxFruit}`, b.x - 25, b.y + 32);
}
ctx.restore();
}
/**
* Draw a Road building site or a completed Road
*/
function drawRoad(b) {
ctx.save();
ctx.translate(canvas.width / 2 + offsetX, canvas.height / 2 + offsetY);
ctx.scale(scale, scale);
// Draw line between (b.x1, b.y1) and (b.x2, b.y2)
if (!b.completed) {
ctx.setLineDash([5, 5]); // dashed if under construction
ctx.strokeStyle = "#888";
} else {
ctx.setLineDash([]);
ctx.strokeStyle = "#444";
}
ctx.lineWidth = 2 / scale;
ctx.beginPath();
ctx.moveTo(b.x1, b.y1);
ctx.lineTo(b.x2, b.y2);
ctx.stroke();
// Draw small label near midpoint
ctx.fillStyle = "#000";
ctx.font = "12px sans-serif";
if (!b.completed) {
ctx.fillText(`Road (Building) ${Math.floor(b.buildProgress)}%`, b.x, b.y - 15);
ctx.fillText(`Wood: ${b.deliveredWood}/${b.requiredWood}`, b.x - 20, b.y + 15);
} else {
ctx.fillText(`Road`, b.x - 10, b.y - 5);
}
ctx.restore();
}
/**
* Show city storage
*/
function drawCityStorage() {
ctx.save();
ctx.fillStyle = "#000";
ctx.font = "16px sans-serif";
ctx.fillText(`City Wood Storage: ${cityStorage.wood}`, 10, 20);
ctx.restore();
}
function drawCitizen(cit) {
ctx.save();
ctx.translate(canvas.width / 2 + offsetX, canvas.height / 2 + offsetY);
ctx.scale(scale, scale);
// Citizen circle
ctx.fillStyle = cit.color;
ctx.beginPath();
ctx.arc(cit.x, cit.y, 7, 0, Math.PI * 2);
ctx.fill();
// Show name, profession, carrying, hunger, energy
ctx.fillStyle = "#000";
ctx.font = "10px sans-serif";
ctx.fillText(`${cit.name} [${cit.profession}]`, cit.x + 10, cit.y - 2);
ctx.fillText(`W:${cit.carryingWood} F:${cit.carryingFruit} H:${Math.floor(cit.hunger)} E:${Math.floor(cit.energy)}`, cit.x + 10, cit.y + 10);
ctx.restore();
}
/**********************************************************************
* PAN & ZOOM
**********************************************************************/
canvas.addEventListener('mousedown', (e) => {
isDragging = true;
lastMouseX = e.clientX;
lastMouseY = e.clientY;
});
canvas.addEventListener('mouseup', () => {
isDragging = false;
});
canvas.addEventListener('mouseleave', () => {
isDragging = false;
});
canvas.addEventListener('mousemove', (e) => {
if (isDragging) {
const dx = e.clientX - lastMouseX;
const dy = e.clientY - lastMouseY;
offsetX += dx;
offsetY += dy;
lastMouseX = e.clientX;
lastMouseY = e.clientY;
}
});
canvas.addEventListener('wheel', (e) => {
e.preventDefault();
const zoomSpeed = 0.001;
const delta = e.deltaY * zoomSpeed;
const oldScale = scale;
scale -= delta;
if (scale < 0.1) scale = 0.1;
if (scale > 5) scale = 5;
const mouseX = e.clientX - (canvas.width / 2 + offsetX);
const mouseY = e.clientY - (canvas.height / 2 + offsetY);
offsetX -= mouseX * (scale - oldScale);
offsetY -= mouseY * (scale - oldScale);
}, { passive: false });
/**********************************************************************
* START
**********************************************************************/
initWorld();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink