From b6d40fa3776b33a03f8f40636a35a967873fc97b Mon Sep 17 00:00:00 2001 From: Mark Powers Date: Sat, 23 May 2020 20:52:57 -0500 Subject: Make sim an idle game --- src/sim/index.html | 119 ++++++++++++++++++++++-------------------------- src/sim/static/items.js | 14 ++++-- src/sim/static/tiles.js | 34 ++------------ 3 files changed, 69 insertions(+), 98 deletions(-) diff --git a/src/sim/index.html b/src/sim/index.html index b9330e0..c3f7926 100644 --- a/src/sim/index.html +++ b/src/sim/index.html @@ -8,16 +8,19 @@ - +

Population:

Gold:

Resources:

- + +

Towns create population, Mountains mine gold, Forests farm resources

@@ -25,23 +28,15 @@ var score; var username = undefined - var populationEl = document.getElementById("population") - var goldEl = document.getElementById("gold") - var shopEl = document.getElementById("shopDiv") - var statusEl = document.getElementById("status") - var resourceEl = document.getElementById("resources") - - var population, gold, resources; + var game var shopItems = []; - var queuedTile var width = 10 var height = 10 var tileSize = 40; - var status = "" var t - var eventQueue + var eventQueue, messages, bindings var level window.onload = function () { @@ -56,20 +51,39 @@ } function init() { score = 0 - level = [] + + game = {} + game.population = 10 + game.gold = 5 + game.resources = 0 + game.level = [] for (var i = 0; i < width; i++) { var row = [] for (var j = 0; j < height; j++) { row.push(undefined) } - level.push(row) + game.level.push(row) } - level[Math.floor(width / 2)][Math.floor(height / 2)] = new Town() + game.level[Math.floor(width / 2)][Math.floor(height / 2)] = new Town() + + messages = [] - population = 10 - gold = 5 - resources = 0 + bindings = [] + bindTo(document.getElementById("population"), () => Math.floor(game.population)) + bindTo(document.getElementById("gold"), () => Math.floor(game.gold)) + bindTo(document.getElementById("resources"), () => Math.floor(game.resources)) + var statusEl = document.getElementById('status') + bindTo(statusEl, ()=>{ + if(messages.length > 0){ + var string = "

" + messages.join("

") + "

" + messages = [] + statusEl.scrollTop = 0 + return string + statusEl.innerHTML + } else { + return statusEl.innerHTML + } + }); t = 0 eventQueue = { @@ -79,12 +93,14 @@ 30: getScout(), } addShopItem(getScout()) + + gameInterval = setInterval(update, 1000) } function draw() { ctx.fillStyle = "#009900" ctx.fillRect(0, 0, width * tileSize, height * tileSize) for (var i = 0; i < width; i++) { - var row = level[i] + var row = game.level[i] for (var j = 0; j < height; j++) { if (row[j]) { row[j].draw(i, j, tileSize) @@ -103,80 +119,55 @@ ctx.lineTo(i * tileSize, tileSize * height) ctx.stroke() } - - populationEl.innerText = population - goldEl.innerText = gold - statusEl.innerText = status - resourceEl.innerText = resources } function update() { t++ for (var i = 0; i < width; i++) { - var row = level[i] + var row = game.level[i] for (var j = 0; j < height; j++) { if (row[j]) { - processUpdate(row[j].update()) + row[j].update(game) } } } - if(eventQueue[t]){ + if (eventQueue[t]) { addShopItem(eventQueue[t]) } - + applyBindings() draw() } function keyPush(e) { - status = "" - update() } function mouseClick(e) { - if(queuedTile){ - var x = Math.floor((e.x - canvas.offsetLeft) / tileSize) - var y = Math.floor((e.y - canvas.offsetTop) / tileSize) - if(x < 0 || width <= x || y < 0 || height <= y){ - return - } - if(level[x][y] == undefined){ - level[x][y] = queuedTile - status = `You placed the ${queuedTile.name}` - queuedTile = undefined - } else { - status = `You cannot place a tile there.` - } - update() - } } - function addShopItem(item){ + function addShopItem(item) { shopItems.push(item) var newButton = document.createElement("button") newButton.innerText = item.text + ": " + item.cost newButton.id = item.id - newButton.onclick = function(){ - if(item.cost <= gold){ + newButton.onclick = function () { + if (item.cost <= game.gold) { shopItems = shopItems.filter(it => it.id != item.id) shopDiv.removeChild(newButton) - gold -= item.cost - processUpdate(item.callback()) + game.gold -= item.cost + item.callback(game) } else { - status = "not enough gold" + message.push("not enough gold") } update() } shopDiv.appendChild(newButton) update() } - function processUpdate(response){ - if(response.tile){ - queuedTile = response.tile - } else if(response.gold){ - gold += response.gold - } else if(response.population){ - population += response.population - } else if(response.resources){ - resources += response.resources - } - } + function bindTo(element, callback) { + bindings.push([element, callback]) + } + function applyBindings() { + bindings.forEach(binding => { + binding[0].innerHTML = binding[1]() + }) + } diff --git a/src/sim/static/items.js b/src/sim/static/items.js index 40f73f1..a3e3eca 100644 --- a/src/sim/static/items.js +++ b/src/sim/static/items.js @@ -9,13 +9,17 @@ function getScout() { id: 1, text: "scout", cost: 2, - callback: function () { + callback: function (game) { var type = tileMap[Math.floor(Math.random() * 3)] var tile = new type() - status = `Your scout found a ${tile.name}. Click to place it.` - return { - tile: tile - } + messages.push(`Your scout found a ${tile.name}.`) + + var randX, randY + do { + randX = Math.floor(width * Math.random()) + randY = Math.floor(height * Math.random()) + } while(game.level[randX][randY] != undefined) + game.level[randX][randY] = tile } } } \ No newline at end of file diff --git a/src/sim/static/tiles.js b/src/sim/static/tiles.js index 5b31d19..203acb4 100644 --- a/src/sim/static/tiles.js +++ b/src/sim/static/tiles.js @@ -10,17 +10,8 @@ Mountain.prototype.draw = function (x, y, size) { ctx.stroke(); ctx.fill(); } -Mountain.prototype.update = function () { - var event = undefined - if(Math.random() < 0.1){ - event = function(){ - - } - } - return { - gold: 1, - event: event - } +Mountain.prototype.update = function (game) { + game.gold += 1 } function Forest() { @@ -35,15 +26,9 @@ Forest.prototype.draw = function (x, y, size) { ctx.stroke(); ctx.fill(); } -Forest.prototype.update = function () { +Forest.prototype.update = function (game) { var event = {} - if(Math.random() < 0.1){ - event.status = "A tree monster taks half of your" - } - return { - resources: Math.floor(Math.random() * 5), - event: event - } + game.resources += Math.floor(Math.random() * 5) } function Town() { @@ -60,14 +45,5 @@ Town.prototype.draw = function (x, y, size) { ctx.fill(); } Town.prototype.update = function () { - var event = undefined - if(Math.random() < 0.1){ - event = function(){ - - } - } - return { - population: Math.floor(Math.random() * 4) - 1, - event: event - } + game.population += Math.floor(Math.random() * 4) - 1 } -- cgit v1.2.3