City generator

Developer
Dmitriy Karpov
Size
2,944 Kb
Views
42,504
  1. City generator Previews
  2. City generator HTML Codes
  3. City generator CSS Codes
  4. City generator JS Codes

How do I make an city generator?

Css 3d transforms (webkit) click for randomize. What is a city generator? How do you make a city generator? This script and codes were developed by Dmitriy Karpov on 27 August 2022, Saturday.

City generator Previews
IQ Test

City generator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>city generator</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="demo"> <!-- W - width, H - height, L - length <div> -> width: W, height: H <a> -> height: L <b> -> width: H <b> -> width: W <b> -> width: H <i> -> width: H; height: W -->
</div> <script src="js/index.js"></script>
</body>
</html>

City generator - Script Codes CSS Codes

html { position: relative; width: 100%; height: 100%; min-width: 400px; min-height: 400px;
}
body { margin: 0; top: 0; left: 0; height: 100%; width: 100%; background: #F2F9FF; -webkit-perspective: 500px; -moz-perspective: 500px; perspective: 500px;
}
div, a, b, i { position: absolute; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d;
}
a, b, i { box-shadow: inset 0 0 1px rgba(35,49,51,1);
}
a, b { background-position: center center;
}
#demo { top: 50%; left: 50%; box-shadow: 0 0 0 12px rgba(208,228,239,1); -webkit-animation: spin 16s linear infinite; -moz-animation: spin 16s linear infinite; animation: spin 16s linear infinite;
}
#demo div {
}
#demo div a { bottom: 0; left: 0; width: 100%; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%;
}
#demo div b { top: 0; left: 100%; height: 100%; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0;
}
#demo div i { left: 0; bottom: 100%; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%;
}
#demo a { background-color: rgba(176,208,223,0.9);
}
#demo a > b { background-color: rgba(128,174,197,0.9);
}
#demo a > b > b { background-color: rgba(176,208,223,0.9);
}
#demo a > b > b > b { background-color: rgba(128,174,197,0.9);
}
#demo i { background-color: rgba(237,248,254,0.9);
}
div.a a, div.a b { background-image: url('http://jsrun.it/assets/h/G/f/4/hGf4V.png');
}
div.b a, div.b b { background-image: url('http://jsrun.it/assets/l/W/C/V/lWCVU.png');
}
div.c a, div.c b { background-image: url('http://jsrun.it/assets/l/z/W/h/lzWht.png');
}
div.d a, div.d b { background-image: url('http://jsrun.it/assets/2/L/X/l/2LXlE.png');
}
div.e a, div.e b { background-image: url('http://jsrun.it/assets/u/P/9/e/uP9er.png');
}
@-webkit-keyframes spin { from {-webkit-transform: rotateX(60deg) rotateZ(-180deg);} to {-webkit-transform: rotateX(60deg) rotateZ(180deg);}
}
@-moz-keyframes spin { from {-moz-transform: rotateX(60deg) rotateZ(-180deg);} to {-moz-transform: rotateX(60deg) rotateZ(180deg);}
}
@keyframes spin { from {transform: rotateX(60deg) rotateZ(-180deg);} to {transform: rotateX(60deg) rotateZ(180deg);}
}

City generator - Script Codes JS Codes

var D = { base: 6, size: 40, space: 6, height: { min: 10, max: 80 }, type: ['a', 'b', 'c', 'd', 'e'], bldg: '<a><b><b><b><i></i></b></b></b></a>', Random: function(min, max) { var value = Math.random() * (max - min) + min; return Math.round(value); }, Build: function() { for (var x = 0; x < D.base; x++) { for (var y = 0; y < D.base; y++) { var e = D.data[x * D.base + y]; var w = D.Random(D.space, D.size - D.space); var h = D.Random(D.space, D.size - D.space); var l = D.Random(D.space / 2, D.size - w); var t = D.Random(D.space / 2, D.size - h); var z = D.Random(D.height.min, D.height.max); var i = D.Random(0, D.type.length - 1); var c = e.getElementsByTagName('*'); e.className = D.type[i]; e.style.width = w + 'px'; e.style.height = h + 'px'; e.style.left = x * D.size + l + 'px'; e.style.top = y * D.size + t + 'px'; c[0].style.height = z + 'px'; c[1].style.width = h + 'px'; c[2].style.width = w + 'px'; c[3].style.width = h + 'px'; c[4].style.width = h + 'px'; c[4].style.height = w + 'px'; } } }, Create: function() { for (var i = 0; i < D.base * D.base; i++) { var div = document.createElement('div'); div.innerHTML = D.bldg; D.demo.appendChild(div); } D.data = D.demo.getElementsByTagName('div'); }, Init: function() { var l = D.base * D.size; D.demo = document.getElementById('demo'); D.demo.style.width = D.demo.style.height = l + 'px'; D.demo.style.marginTop = D.demo.style.marginLeft = -l / 2 + 'px'; D.demo.addEventListener('click', D.Build, false); }, Run: function() { D.Init(); D.Create(); D.Build(); }
};
D.Run();
City generator - Script Codes
City generator - Script Codes
Home Page Home
Developer Dmitriy Karpov
Username karpovsystems
Uploaded August 27, 2022
Rating 4.5
Size 2,944 Kb
Views 42,504
Do you need developer help for City generator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dmitriy Karpov (karpovsystems) Script Codes
Name
Icosahedron
Metro style icons
CSS3 text transitions
Spin
Curve Bezier
Javascript Pagination
CSS 3D Panorama
Eye of Sauron
Gradients
Larvaes
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!