Proto build mechanic, Cash and sidebar addded.

+ Nice style
This commit is contained in:
A Bass 2022-04-19 20:40:10 -04:00
parent 4cba5b1b14
commit 272d0b9b08
3 changed files with 218 additions and 39 deletions

View file

@ -6,9 +6,17 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<canvas id="canvas"> <h1>Uber Secret Project</h1>
Sorry. Your browser does not support HTML5 canvas element. <div class="container">
</canvas> <div class="wrapper">
<canvas id="canvas" width=0 height=0></canvas>
<div class="right">
<p>Info</p><br>
<p id="cash">$0</p>
</div>
</div>
</div>
</div>
</body> </body>
<script src="script.js"></script> <script src="script.js"></script>

110
script.js
View file

@ -1,6 +1,11 @@
var world = Array.from(Array(24), () => new Array(24)); const perlinScale = 3;
for (x = 0; x < 24; x++){ tileSize = 24;
for (y = 0; y < 24; y++){ 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} world[x][y] = {type: 0, structure: 0}
} }
} }
@ -9,6 +14,8 @@ for (x = 0; x < 24; x++){
window.onload = function () { window.onload = function () {
// GET THE IMAGE. // GET THE IMAGE.
var city = new Image();
city.src = 'city.png';
var rock = new Image(); var rock = new Image();
rock.src = 'rock.png'; rock.src = 'rock.png';
var background = new Image(); var background = new Image();
@ -18,7 +25,7 @@ window.onload = function () {
sea.src = 'sea.png' sea.src = 'sea.png'
var hills = new Image(); var hills = new Image();
hills.src = 'hills.png' hills.src = 'hills.png'
tiles = [grass,hills,sea,rock]; tiles = [grass,hills,sea,rock,city];
background.src = 'background.png'; background.src = 'background.png';
// WAIT TILL IMAGE IS LOADED. // WAIT TILL IMAGE IS LOADED.
background.onload = function () { background.onload = function () {
@ -28,33 +35,19 @@ window.onload = function () {
function fill_canvas() { function fill_canvas() {
// CREATE CANVAS CONTEXT. // CREATE CANVAS CONTEXT.
var canvas = document.getElementById('canvas'); var canvas = document.getElementById('canvas');
canvas.width = 576; canvas.addEventListener("mousedown", function(e)
canvas.height = 576; {
getMousePosition(canvas, e);
});
canvas.width = tileSize*gridSize[0];
canvas.height = tileSize*gridSize[1];
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
generateWorld() 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); 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(){ function generateWorld(){
let x, y = 0 let x, y = 0
noise.seed(Math.random()) noise.seed(Math.random())
for(x = 0; x < getBlockDimensions()[0]; x++){ for(x = 0; x < gridSize[0]; x++){
for(y = 0; y < getBlockDimensions()[1]; y++){ 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) { if (value >= -3) {
world[x][y].type = 0 world[x][y].type = 0
} else if (value < -3) { } else if (value < -3) {
@ -85,13 +108,32 @@ function generateWorld(){
} }
} }
for (i = 0; i < 20; i){ for (i = 0; i < gridSize[0]*gridSize[1]/15; i){
x = randomNumber(0,24); x = randomNumber(0,gridSize[0]);
y = randomNumber(0,24); y = randomNumber(0,gridSize[1]);
if (world[x][y].type == 0) { if (world[x][y].type != 1) {
i++; i++;
world[x][y].structure = 1 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'))
}
} }

133
style.css
View file

@ -1,8 +1,137 @@
canvas { canvas {
/* width: 512px;
height: 512px; */
image-rendering: -moz-crisp-edges; image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges; image-rendering: -webkit-crisp-edges;
image-rendering: pixelated; image-rendering: pixelated;
image-rendering: crisp-edges; 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;
} }