Country Generator

Developer
Devin
Size
5,517 Kb
Views
18,216
  1. Country Generator Previews
  2. Country Generator HTML Codes
  3. Country Generator CSS Codes
  4. Country Generator JS Codes

How do I make an country generator?

What is a country generator? How do you make a country generator? This script and codes were developed by Devin on 23 November 2022, Wednesday.

Country Generator Previews
IQ Test

Country Generator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Country Generator</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Fugaz+One'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="functions">	<button id="new_btn">Generate Country</button>	<div class="size_selector">	Map Size	<button id="size_btn">Change</button>	<input class="size_input" placeholder="10"/><br>	</div>
</div>
<div id="main">	<div class="container">	<div class="name">Lorum Ipsum</div>	<img id="mainImage"/>	<canvas id="canvas"></canvas>	</div>	<div class="map_container">	<p>Map</p>	<canvas id="canvas_map" height="200" width="200"></canvas>	</div>
</div>
<!--<div class="lore">	<p>Terrain: <span class="terrain"></span></p>
</div>--> <script src='https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.4/chance.min.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.4.4/randomColor.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Country Generator - Script Codes CSS Codes

html { font-family: 'Fugaz One', cursive; color: #c8c8c8; overflow-x: hidden;
}
body { background: black;
}
.functions, .lore { width: 550px; margin: 0 auto; height: 40px; padding-bottom: 50px; background-color: rgba(255, 255, 255, 0.1); border: 10px solid black;
}
.functions * { display: inline-block; vertical-align: top; clear: both;
}
#new_btn { margin: 20px; border-radius: 2px; border: 0px; font-weight: bold; text-shadow: 2px 0px white; padding: 10px; cursor: pointer; box-shadow: inset 4px 4px rgba(255, 255, 255, 0.2), inset -4px -4px rgba(0, 0, 0, 0.2); transition: .5s all;
}
#new_btn:hover { background-color: #aaa; transition: .5s all;
}
.container { background: radial-gradient(#555555, #333333); height: 300px; width: 300px; border: 2px solid rgba(0, 0, 0, 0.3); text-align: center;
}
#main * { display: inline-block;
}
#main { width: 550px; margin: 0 auto; background-color: rgba(255, 255, 255, 0.2);
}
#mainImage { padding-left: calc((300px - 130px) / 2); padding-top: 60px; margin: 0px;
}
#canvas { cursor: pointer; padding-left: calc((300px - 130px) / 2); padding-top: calc((300px - 75px) / 2); display: none;
}
.name { margin-top: 20px; font-size: 30px; color: #c8c8c8; text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
}
.map_container { position: relative; width: 200px; height: 200px; border: 20px solid blue; box-shadow: 0px 0px 0px 2px tan;
}
.map_container p { position: absolute; top: -70px;
}
.size_selector { float: right; background-color: #f0f0f0; color: black; width: 150px; border-radius: 5px; padding: 5px; margin: 10px; border: solid 2px #c8c8c8; box-shadow: inset 0px 0px 0px 3px rgba(0, 0, 0, 0.1); top: 50px;
}
.size_selector #size_btn { background-color: #E55934; border: solid 1px; border-radius: 2px; box-shadow: inset 0px 0px 0px 3px rgba(0, 0, 0, 0.1); float: right; margin: 1px;
}
.size_selector input { border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; height: 20px; width: 98%;
}
.lore p { margin: 10px;
}

Country Generator - Script Codes JS Codes

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var canvas_map = document.getElementById('canvas_map')
var map_ctx = canvas_map.getContext('2d')
var hexs = ['a','b','c', 'd','e','f', '1','2','3', '4','5','6', '7','8','9']
var flag_types = ['tri_color_x','tri_color_y','triangle','nordic_cross','bi_color_x','bi_color_y','fimbriated','crescent']
var flag_features = ['dot']
var new_btn = document.getElementById('new_btn');
new_btn.addEventListener('click',makeFlag)
new_btn.addEventListener('click',makeCountryMap)
//ctx.canvas.height = window.innerHeight / 2;
//ctx.canvas.fillStyle = 'blue';
makeFlag();
function makeColor(){	var newColor = '#';	var x = 6; while(x > 0){	newColor+=(hexs[Math.floor(hexs.length * Math.random())])	x-=1;	}	return newColor;
}
//possible future animation
/*function animateFlag(){	$('#canvas').fadeOut().delay(350).toggle('slide');	setTimeout(makeFlag,350)
}*/
function makeFlag(){	//console.log(chance.city())	$('.name').html(chance.city());	ctx.clearRect(0,0,canvas.width,canvas.height);	var type = flag_types[Math.floor(flag_types.length * Math.random())]	console.log(type)	ctx.fillStyle = 'rgba(0,0,0,.4)';	ctx.fillRect(2,2,133,78)	if(type == 'tri_color_x'){	ctx.fillStyle = makeColor();	ctx.fillRect(0,0,130,25)	ctx.fillStyle = makeColor();	ctx.fillRect(0,25,130,25)	ctx.fillStyle = makeColor();	ctx.fillRect(0,50,130,25)	}	else if(type == 'tri_color_y'){	ctx.fillStyle = makeColor();	ctx.fillRect(0,0, 130/3,75)	ctx.fillStyle = makeColor();	ctx.fillRect((130/3),0,130/3,75)	ctx.fillStyle = makeColor();	ctx.fillRect((130/3) * 2,0,130/3,75)	}	else if(type == 'triangle'){	ctx.fillStyle = makeColor();	ctx.fillRect(0,0,130,75/2)	ctx.fillStyle = makeColor();	ctx.fillRect(0,75/2,130,75/2)	ctx.fillStyle = makeColor();	ctx.beginPath();	ctx.moveTo(0,0);	ctx.lineTo(0,75);	ctx.lineTo(130/2,75/2);	ctx.fill();	}	else if(type == 'bi_color_x'){	ctx.fillStyle = makeColor();	ctx.fillRect(0,0,130,75/2)	ctx.fillStyle = makeColor();	ctx.fillRect(0,75/2,130,75/2)	}	else if(type == 'bi_color_y'){	ctx.fillStyle = makeColor();	ctx.fillRect(0,0,130/2,75)	ctx.fillStyle = makeColor();	ctx.fillRect(130/2,0,130/2,75)	}	else if(type == 'nordic_cross'){	ctx.fillStyle = makeColor();	ctx.fillRect(0,0,130,75)	ctx.fillStyle = makeColor();	ctx.fillRect(0,25,130,20)	ctx.fillRect(50,0,20,75)	}	else if(type == 'fimbriated'){	ctx.fillStyle = makeColor();	ctx.fillRect(0,0,130,75);	ctx.fillStyle = makeColor();	ctx.fillRect(0,25,130,20);	ctx.fillStyle = makeColor();	ctx.fillRect(0,21,130,4);	ctx.fillRect(0,45,130,4);	}	else if(type == 'crescent'){	ctx.fillStyle = makeColor();	ctx.fillRect(0,0,130,75);	var originalColor = ctx.fillStyle;	ctx.beginPath()	ctx.arc(130/2,75/2,20,0,2*Math.PI)	ctx.fillStyle = randomColor();	ctx.fill();	ctx.beginPath()	ctx.arc(130/2+7,75/2,15,0,2*Math.PI)	ctx.fillStyle = originalColor;	ctx.fill();	}	// add extra flag features	if(type != 'nordic_cross' && Math.floor(7 * Math.random()) == 1){	var feature = flag_features[Math.floor(flag_features.length * Math.random())]	if(feature == 'dot'){	ctx.beginPath()	ctx.arc(130/2,75/2,20,0,2*Math.PI)	ctx.fillStyle = randomColor();	ctx.fill();	}	else if(feature == 'cresent'){	}	}	var grad = ctx.createRadialGradient(130/2,75/2,10,130/2,75/2,60)	grad.addColorStop(0,'rgba(255,255,255,.2)');	grad.addColorStop(1,'rgba(0,0,0,.2)');	ctx.fillStyle = grad;	ctx.fillRect(0,0,130,75);	var dataURL = canvas.toDataURL();	document.getElementById('mainImage').src= dataURL;
}
//Creating Map
map_ctx.fillStyle = '#333';
map_ctx.fillRect(0,0,canvas_map.width,canvas_map.height)
map_ctx.fillStyle = 'green';
map_ctx.fillRect(0,0,20,20);
makeCountryMap();
var newSize = '';
function makeCountryMap(){
var map = []
var mapSeed = ''
//demensions
var dim = newSize || 20;
//square size
var sqr_sz = 200/dim;	console.log(sqr_sz)
function createMap(seed){
if(seed)
seed = seed.split('');
var y = 0
while(y < dim){	var x = dim;	map[y] = ''	while(x > 0){	if(!seed){	var rndNum = Math.floor(5 * Math.random())	}	else{	var rndNum = seed.shift()	}	mapSeed+=rndNum;	if(rndNum == 2){	map[y]+='x'	}	else{	map[y]+='#'	}	x--	}	y++
}
}
function refineMap(){	var y = 0;	while(y < dim){	var x = dim;	while(x > 0){	//Mountains	if(map[y][x-1] == 'x' && map[y][x+1] == 'x'){	map[y] = map[y].substr(0,x) + '^' + map[y].substr(x+1,map.length)	}	if(y < dim-2 && y > 1){	if(Math.floor(2* Math.random()) == 1){	if(map[y-1][x] == 'x' && map[y+1][x] == 'x' && map[y][x-1] == 'x' || map[y][x+1]== 'x'){	map[y] = map[y].substr(0,x) + 'x' + map[y].substr(x+1,map.length)	}	}	else{	if(map[y-1][x] == 'x' || map[y+1][x] == 'x' && map[y][x-1] == 'x' && map[y][x+1]== 'x'){	map[y] = map[y].substr(0,x) + 'x' + map[y].substr(x+1,map.length)	}	}	}	if(map[y][x] == 'x' && Math.floor((20)* Math.random()) == 2){	map[y] = map[y].substr(0,x) + 'o' + map[y].substr(x+1,map.length)	}	if(map[y][x] == 'x' && Math.floor((4)* Math.random()) == 2 && map[y][x+1] == 'x' && map[y][x+2]=='x' && map[y-1][x] == 'x' && map[y-2][x] == 'x' && map[y+1][x] == 'x' && map[y+2][x] == 'x'){	dims = Math.floor(4*Math.random());	map[y] = map[y].substr(0,x) + '-'.repeat(dims) + map[y].substr(x+dims,map.length)	dims = Math.floor(3*Math.random());	map[y-1] = map[y-1].substr(0,x) + '-'.repeat(dims) + map[y-1].substr(x+dims,map.length)	dims = Math.floor(3*Math.random());	map[y+1] = map[y+1].substr(0,x) + '-'.repeat(dims) + map[y+1].substr(x+dims,map.length)	}	x--	}	y++	}
}
//Terrain Type	var country_terrain = [['Normal', 'green'],['Normal', 'green'],['Normal', 'green'],['Normal', 'green'],['Normal', 'green'],['Normal', 'green'],['Normal', 'green'],['Normal', 'green'],['Normal', 'green'],['Normal', 'green'],['Evil', 'monochrome'],['Scorched', 'red'],['Desert', 'orange'],['Desert', 'orange'],['Frozen', 'blue']]
var terrain_type = country_terrain[Math.floor(country_terrain.length * Math.random())]
$('.terrain').html(terrain_type[0])
function drawMap(){	map.map(function(row,y){ row.split('').map(function(tile,x){	if(tile == '#'){	map_ctx.fillStyle = 'blue';	map_ctx.fillRect(sqr_sz*x,sqr_sz*y,sqr_sz,sqr_sz)	}	else if(tile == 'x'){	map_ctx.fillStyle = randomColor({luminosity: 'dark',hue:terrain_type[1]});	map_ctx.fillRect(sqr_sz*x,sqr_sz*y,sqr_sz,sqr_sz)	}	else if(tile == '^'){	map_ctx.fillStyle = 'grey';	map_ctx.fillRect(sqr_sz*x,sqr_sz*y,sqr_sz,sqr_sz)	}	else if(tile == 'o'){	map_ctx.fillStyle = randomColor({luminosity: 'dark',hue:terrain_type[1]});	map_ctx.fillRect(sqr_sz*x,sqr_sz*y,sqr_sz,sqr_sz)	image = new Image()	image.src = 'http://megaicons.net/static/img/icons_sizes/410/1244/16/home-icon.png';	map_ctx.drawImage(image,sqr_sz*x,sqr_sz*y,sqr_sz,sqr_sz)	}	else if(tile = '-'){	if(terrain_type[0] == 'Normal'){	map_ctx.fillStyle = randomColor({luminosity:'dark',hue:'orange'})	map_ctx.fillRect(sqr_sz*x,sqr_sz*y,sqr_sz,sqr_sz);	}	else if(terrain_type[0] == 'Desert'){	map_ctx.fillStyle = randomColor({luminosity:'dark',hue:'green'})	map_ctx.fillRect(sqr_sz*x,sqr_sz*y,sqr_sz,sqr_sz);	}	else if(terrain_type[0] == 'Frozen'){	map_ctx.fillStyle = randomColor({luminosity:'light',hue:'blue'})	map_ctx.fillRect(sqr_sz*x,sqr_sz*y,sqr_sz,sqr_sz);	}	else if(terrain_type[0] == 'Evil'){	map_ctx.fillStyle = randomColor({luminosity:'dark',hue:'red'})	map_ctx.fillRect(sqr_sz*x,sqr_sz*y,sqr_sz,sqr_sz);	}	else if(terrain_type[0] == 'Scorched'){	map_ctx.fillStyle = randomColor({luminosity:'dark',hue:'monochrome'})	map_ctx.fillRect(sqr_sz*x,sqr_sz*y,sqr_sz,sqr_sz);	}	}	})})
}
createMap();
refineMap();
//refineMap();
drawMap();
}
// Size Slider
var size_btn = document.getElementById('size_btn');
size_btn.addEventListener('click',changeMapSize);
function changeMapSize(){	newSize = $('.size_input').val() || 10;	if(newSize % 1 != 0){	newSize = 10;	}	$('.size_input').val('')	makeCountryMap();	makeFlag();
}
//LORE CREATION
Country Generator - Script Codes
Country Generator - Script Codes
Home Page Home
Developer Devin
Username edwin0258
Uploaded November 23, 2022
Rating 3
Size 5,517 Kb
Views 18,216
Do you need developer help for Country 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!

Devin (edwin0258) Script Codes
Name
React Musical Scale Display
Simple Svg Loading Bar
Artist Card Widget
A Pen by Devin
React Composer Widget
Pomodoro Clock
Daily UI 011 - Flash Message
Dungeon Crawler
Mondrian Generator
Sonar Svg
Create amazing sales emails 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!