diff --git a/index.html b/index.html
index 144c757..812941e 100644
--- a/index.html
+++ b/index.html
@@ -6,9 +6,17 @@
-
+ Uber Secret Project
+
+
diff --git a/script.js b/script.js
index 40c9e09..e875e6e 100644
--- a/script.js
+++ b/script.js
@@ -1,6 +1,11 @@
-var world = Array.from(Array(24), () => new Array(24));
-for (x = 0; x < 24; x++){
- for (y = 0; y < 24; y++){
+const perlinScale = 3;
+tileSize = 24;
+const gridSize = [18, 18];
+var cash = 99;
+
+var world = Array.from(Array(gridSize[0]), () => new Array(gridSize[1]));
+for (x = 0; x < gridSize[0]; x++){
+ for (y = 0; y < gridSize[1]; y++){
world[x][y] = {type: 0, structure: 0}
}
}
@@ -9,6 +14,8 @@ for (x = 0; x < 24; x++){
window.onload = function () {
// GET THE IMAGE.
+ var city = new Image();
+ city.src = 'city.png';
var rock = new Image();
rock.src = 'rock.png';
var background = new Image();
@@ -18,7 +25,7 @@ window.onload = function () {
sea.src = 'sea.png'
var hills = new Image();
hills.src = 'hills.png'
- tiles = [grass,hills,sea,rock];
+ tiles = [grass,hills,sea,rock,city];
background.src = 'background.png';
// WAIT TILL IMAGE IS LOADED.
background.onload = function () {
@@ -28,33 +35,19 @@ window.onload = function () {
function fill_canvas() {
// CREATE CANVAS CONTEXT.
var canvas = document.getElementById('canvas');
- canvas.width = 576;
- canvas.height = 576;
+ canvas.addEventListener("mousedown", function(e)
+ {
+ getMousePosition(canvas, e);
+ });
+ canvas.width = tileSize*gridSize[0];
+ canvas.height = tileSize*gridSize[1];
var ctx = canvas.getContext('2d');
generateWorld()
+ render(ctx)
+ updateUI();
- ctx.drawImage(background, 0, 0); // DRAW THE IMAGE TO THE CANVAS.
- let x, y = 0
- for(x = 0; x < getBlockDimensions()[0]; x++){
- for(y = 0; y < getBlockDimensions()[1]; y++){
-
- if (world[x][y].type == 0) {
-
- ctx.drawImage(tiles[0], x*24,y*24)
- } else if (world[x][y].type == 1) {
- ctx.drawImage(tiles[2], x*24,y*24)
- }
- if (world[x][y].type == 2) {
- ctx.drawImage(tiles[1], x*24,y*24)
- }
- if (world[x][y].structure == 1) {
- ctx.drawImage(tiles[3], x*24,y*24)
- }
-
- }
- }
}
}
@@ -67,13 +60,43 @@ function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
+function render(ctx) { // DRAW THE IMAGE TO THE CANVAS.
+ let x, y = 0
+ for(x = 0; x < gridSize[0]; x++){
+ for(y = 0; y < gridSize[1]; y++){
+ const xu = x*tileSize;
+ const yu = y*tileSize;
+ if (world[x][y].type == 0) {
+
+ ctx.drawImage(tiles[0], xu,yu)
+ } else if (world[x][y].type == 1) {
+ ctx.drawImage(tiles[2], xu,yu)
+ }
+ if (world[x][y].type == 2) {
+ ctx.drawImage(tiles[1], xu,yu)
+ }
+ if (world[x][y].structure == 1) {
+ ctx.drawImage(tiles[3], xu,yu)
+ }
+ if (world[x][y].structure == 2) {
+ ctx.drawImage(tiles[4], xu,yu)
+ }
+
+ }
+ }
+ console.log("image Rendered")
+}
+function updateUI(){
+ document.getElementById("cash").innerHTML = ("$" + cash);
+}
+
function generateWorld(){
let x, y = 0
noise.seed(Math.random())
- for(x = 0; x < getBlockDimensions()[0]; x++){
- for(y = 0; y < getBlockDimensions()[1]; y++){
+ for(x = 0; x < gridSize[0]; x++){
+ for(y = 0; y < gridSize[1]; y++){
- var value = (noise.perlin2(x/3.0, y/3.0))*10;
+ var value = (noise.perlin2(x/perlinScale, y/perlinScale))*10;
if (value >= -3) {
world[x][y].type = 0
} else if (value < -3) {
@@ -85,13 +108,32 @@ function generateWorld(){
}
}
- for (i = 0; i < 20; i){
- x = randomNumber(0,24);
- y = randomNumber(0,24);
- if (world[x][y].type == 0) {
+ for (i = 0; i < gridSize[0]*gridSize[1]/15; i){
+ x = randomNumber(0,gridSize[0]);
+ y = randomNumber(0,gridSize[1]);
+ if (world[x][y].type != 1) {
i++;
world[x][y].structure = 1
}
}
- console.log(world)
+}
+function getMousePosition(canvas, event) {
+ // Get mouse position on canvas
+ const rect = canvas.getBoundingClientRect();
+ const x = event.clientX - rect.left;
+ const y = event.clientY - rect.top;
+ const xu = Math.floor(x/tileSize)
+ const yu = Math.floor(y/tileSize)
+ // Convert canvas coordinates to usable coordinates within the coordinate system
+
+
+ console.log("Click!")
+ const tile = world[xu][yu];
+ if (tile.type != 1 && tile.structure != 1 && cash > 10) {
+ tile.structure = 2
+ cash = cash - 10;
+ updateUI();
+ render(document.getElementById('canvas').getContext('2d'))
+ }
+
}
diff --git a/style.css b/style.css
index 05add2a..a9518db 100644
--- a/style.css
+++ b/style.css
@@ -1,8 +1,137 @@
canvas {
- /* width: 512px;
- height: 512px; */
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges;
image-rendering: pixelated;
image-rendering: crisp-edges;
+ border: solid white;
+ border-radius: 6px;
+ background-color: #ccc;
+ display: inline-block;
+ float: left;
+}
+
+.right {
+ background: red;
+ display: inline-block;
+ float: left;
+ width: 60px;
+
+}
+body {
+text-align: center;
+background-color: #2c2f33;
+color: white;
+font-variant: normal;
+font-family: verdana;
+}
+
+.wrapper {
+ position: fixed;
+ left: 50%;
+ transform: translate(-50%, 0);
+ margin: auto;
+ background-color: #ff00ff;
+}
+.container{
+ margin: 0px;
+}
+h1 {
+ font-size: 25pt;
+
+}
+h2 {
+ font-size: 20pt;
+}
+p{
+ /* font-size: 12pt; */
+ /* text-align: left; */
+ margin: 0;
+}
+
+h4 {
+ font-size: 12pt;
+ padding: 0;
+ margin: 0;
+}
+
+.startButton {
+width: 100.5%;
+background-color: #4CAF50;
+color: white;
+padding-top: 14px;
+padding-bottom: 14px;
+margin-top: 4px;
+margin-bottom: 4px;
+border: none;
+border-radius: 4px;
+cursor: pointer;
+}
+
+.subSection {
+ width: 100%;
+ text-align: center;
+ font-size: 12pt;
+ color: white;
+ padding: 0;
+ background-color: #4d5259;
+ border-style: solid;
+ border: solid white;
+ border-radius: 6px;
+ padding-bottom: 2px;
+ padding-top: 2px;
+ margin-top: 3px;
+ margin-bottom: 3px;
+}
+
+.slider {
+ -webkit-appearance: none;
+ width: 98%;
+ background: none;
+ outline: none;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ height: 1px;
+ border: 2px solid #white;
+ background-color: #fff;
+}
+
+.slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ border: 1px solid #bdc3c7;
+ width: 20px;
+ height: 20px;
+ background: #4CAF50;
+ border-radius: 3px;
+ cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+ border: 1px solid #bdc3c7;
+ width: 20px;
+ height: 20px;
+ background: #4CAF50;
+ border-radius: 3px;
+ cursor: pointer;
+}
+
+.slider::-moz-range-track {
+ width: 100%;
+ height: 5px;
+ background-color: #fff;
+}
+
+.inline{
+ display:inline-block;
+ margin: auto;
+}
+span.spacer{
+ display:inline-block;
+ width: 1px;
+ height: 25px;
+ color: #fff;
+ background-color: #fff;
+ border: 1px solid #fff;
+ border-radius: 6px;
+
+
}