Случайно генерируемый город на HTML5 Canvas
Технологии не стоят на месте и теперь можно создавать неповторимые города с небоскрёбами с помощью небольшого HTML5 кода. Звучит потрясающе!
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
html { background-image:linear-gradient(#09f,#fff); height:100%; } .layer { align-items:flex-end; bottom:0; display:flex; left:0; position:absolute; right:0; } .layer .building { background-color:#ddd; border-top:solid .5vh #eee; border-right:solid .5vh #eee; } .layer + .layer .building { background-color:#bbb; border-right:solid .5vh #ccc; border-top:solid .5vh #ccc; } .layer + .layer + .layer .building { background-color:#999; border-right:solid .5vh #aaa; border-top:solid .5vh #aaa; } |
2#: На странице, где будет такой случайный город, после тега body вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script type="text/javascript"> console.clear(); let x = 0; function randomBuilding(layer, maxHeight, maxWidth) { const h = Math.floor(Math.random() * maxHeight); const w = Math.floor(Math.random() * maxWidth); const b = document.createElement('div'); b.className = 'building'; b.style.height = h + 'vh'; b.style.width = w + 'vw'; layer.appendChild(b); x += w; } function addLayer() { const l = document.createElement('div'); l.className = 'layer'; while (x < 100) { randomBuilding(l, 30, 5); } document.body.appendChild(l); x = 0; } addLayer(); addLayer(); addLayer(); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
This is interesting! Thank you!
Thanks for comment 😃