Proto build mechanic, Cash and sidebar addded.
+ Nice style
This commit is contained in:
A Bass
parent
4cba5b1b14
commit
272d0b9b08
14
index.html
14
index.html
|
|
@ -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
110
script.js
|
|
@ -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
133
style.css
|
|
@ -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;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue