CodePen Embed - One way to make Roulette using Javascript

html, body{
	font-family: arial;
	cursor: default;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#container{
	display: flex;
	justify-content: center;
	align-items: center;
}

#betting_board{
	width: 500px;
    height: 315px;
    border: 1px solid;
}

.bbtop{
	margin-left:2px;
}

.bbtoptwo{
	width: calc(50% - 8px);
	border: 1px solid;
	display: inline-block;
	padding: 12px 4px;
	margin-left: -2px;
	text-align: center;
	font-size:20px;
	font-weight: bold;
}

.number_board{
	margin-left: 1px;
}

.number_block{
	width: 39.94px;
    border: 1px solid;
    text-align: center;
    display: inline-block;
    margin: 0 -0.2px;
    padding: 32px 0px;
}

.nbn{
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.bo3_board, .oto_board{
	width:500px;
	margin-left: 1px;
}

.bo3_block, .oto_block{
	border: 1px solid;
	display: inline-block;
	padding: 8px 5px;
	width: 156.65px;
	margin-left: -1.98px;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
}

.oto_block{
	width: 114.94px;
	margin-left: -1.98px;
}

.number_0{
	position: absolute;
	border: 2px solid;
	margin-left: -57px;
	margin-top: -0.516px;
	padding: 120.55px 20px;
	border-bottom-left-radius: 100%;
	border-top-left-radius: 100%;
}

.tt1_block{
	border: 2px solid;
	width: 65px;
	position: absolute;
	margin-left: 498px;
	padding: 31.65px 0px;
	margin-top: -89.75px;
}

.winning_lines{
	position: absolute;
	margin-top: -137px;
	width: 603px;
	height: 0;
}

.wlttb{
	position: relative;
	width: 100%;
    height: 10px;
    margin-left: -7.75px;
	top: 269px;
}

#wlttb_top{
    position: absolute;
    margin-top: -89px;
    margin-left: 11px;
}

#wlttb_2, #wlttb_3{
    margin-top: 79px;
}

.wlrtl{
	position: relative;
    display: inline-block;
    width: 10px;
    height: 266px;
    top: -3px;
    margin-left: 37px;
}

#wlrtl_2, #wlrtl_3, #wlrtl_6, #wlrtl_9, #wlrtl_11{
	margin-left: 31px;
}
#wlrtl_4, #wlrtl_5, #wlrtl_7, #wlrtl_8, #wlrtl_10{
	margin-left: 32px;
}

.wlcb{
	position: absolute;
	width: 477px;
	height: 41px;
	top: 255px;
	margin-left: 13px;
}

#wlcb_2{
	top: 343px;
}

.cbbb{
	border: 1px solid;
    width: 20px;
    height: 20px;
    position: relative;
	display: inline-block;
	margin-left:19px;
	margin-top: 9.5px;
	cursor: pointer;
}

#cbbb_1, #cbbb_4, #cbbb_5, #cbbb_12, #cbbb_15, #cbbb_16{
	margin-left: 19px;
}
#cbbb_3, #cbbb_14{
	margin-left: 20.5px;
}
#cbbb_7, #cbbb_8, #cbbb_9, #cbbb_11, #cbbb_18, #cbbb_19, #cbbb_20, #cbbb_22{
	margin-left: 20px;
}

#cbbb_6, #cbbb_10, #cbbb_17, #cbbb_21{
	margin-left: 19.5px;
}

.ttbbetblock{
	border: 1px solid;
	width: 18.1px;
	height: 10px;
	position: relative;
	display: inline-block;
	margin-left: 21.52px;
	top: -2px;
	cursor:pointer;
	z-index:3;
}

.rtlbb1, .rtlbb2, .rtlbb3{
	height: 45px;
    border: 1px solid;
    margin-top: 23px;
	width: 10px;
}

.rtlbb2, .rtlbb3{
    margin-top: 42px;
}

var i;
var c;
let container = document.createElement('div');
container.setAttribute('id', 'container');
document.body.append(container);
buildBettingBoard();

function buildBettingBoard(){
	let bettingBoard = document.createElement('div');
	bettingBoard.setAttribute('id', 'betting_board');

	let wl = document.createElement('div');
	wl.setAttribute('class', 'winning_lines');
	
	var wlttb = document.createElement('div');
	wlttb.setAttribute('id', 'wlttb_top');
	wlttb.setAttribute('class', 'wlttb');
	for(i = 0; i < 11; i++){
		let j = i;
		var ttbbetblock = document.createElement('div');
		ttbbetblock.setAttribute('class', 'ttbbetblock');
		ttbbetblock.onclick = function(){
			var numA = (1 + (3 * j));
			var numB = (2 + (3 * j));
			var numC = (3 + (3 * j));
			var numD = (4 + (3 * j));
			var numE = (5 + (3 * j));
			var numF = (6 + (3 * j));
			let num = numA + ', ' + numB + ', ' + numC + ', ' + numD + ', ' + numE + ', ' + numF;
			var objType = 'double_street';
			setBet(num, objType, 5);
		};
		wlttb.append(ttbbetblock);
	}
	wl.append(wlttb);

	for(c =  1; c < 4; c++){
		let d = c;
		var wlttb = document.createElement('div');
		wlttb.setAttribute('id', 'wlttb_'+c);
		wlttb.setAttribute('class', 'wlttb');
		for(i = 0; i < 12; i++){
			let j = i;
			var ttbbetblock = document.createElement('div');
			ttbbetblock.setAttribute('class', 'ttbbetblock');
			ttbbetblock.onclick = function(){
				if(d == 1 || d == 2){
					var numA = ((2 - (d - 1)) + (3 * j));
					var numB = ((3 - (d - 1)) + (3 * j));
					var num = numA + ', ' + numB;
				}
				else{
					var numA = (1 + (3 * j));
					var numB = (2 + (3 * j));
					var numC = (3 + (3 * j));
					var num = numA + ', ' + numB + ', ' + numC;
				}
				var objType = (d == 3)? 'street' : 'split';
				var odd = (d == 3)? 11 : 17;
				setBet(num, objType, odd);
			};
			wlttb.append(ttbbetblock);
		}
		wl.append(wlttb);
	}

	for(c = 1; c < 12; c++){
		let d = c;
		var wlrtl = document.createElement('div');
		wlrtl.setAttribute('id', 'wlrtl_'+c);
		wlrtl.setAttribute('class', 'wlrtl');
		for(i = 1; i < 4; i++){
			let j = i;
			var rtlbb = document.createElement('div');
			rtlbb.setAttribute('class', 'rtlbb'+i);
			rtlbb.onclick = function(){
				var numA = (3 + (3 * (d - 1))) - (j - 1);
				var numB = (6 + (3 * (d - 1))) - (j - 1);
				let num = numA + ', ' + numB;
				setBet(num, 'split', 17);
			};
			wlrtl.append(rtlbb);
		}
		wl.append(wlrtl);
	}
	
	for(c = 1; c < 3; c++){
		var wlcb = document.createElement('div');
		wlcb.setAttribute('id', 'wlcb_'+c);
		wlcb.setAttribute('class', 'wlcb');
		for(i = 1; i < 12; i++){
			let count = (c == 1)? i : i + 11;
			var cbbb = document.createElement('div');
			cbbb.setAttribute('id', 'cbbb_'+count);
			cbbb.setAttribute('class', 'cbbb');
			cbbb.onclick = function(){
				var numA = '2';
				var numB = '3';
				var numC = '5';
				var numD = '6';
				let num = (count >= 1 && count < 12)? (parseInt(numA) + ((count - 1) * 3)) + ', ' + (parseInt(numB)+((count - 1) * 3)) + ', ' + (parseInt(numC)+((count - 1) * 3)) + ', ' + (parseInt(numD)+((count - 1) * 3)) : ((parseInt(numA) - 1) + ((count - 12) * 3)) + ', ' + ((parseInt(numB) - 1)+((count - 12) * 3)) + ', ' + ((parseInt(numC) - 1)+((count - 12) * 3)) + ', ' + ((parseInt(numD) - 1)+((count - 12) * 3));
				var objType = 'corner_bet';
				setBet(num, objType, 8);
				console.log(num);
			};
			wlcb.append(cbbb);
		}
		wl.append(wlcb);
	}

	bettingBoard.append(wl);

	let bbtop = document.createElement('div');
	bbtop.setAttribute('class', 'bbtop');
	let bbtopBlocks = ['1 to 18', '19 to 36'];
	for(i = 0; i < bbtopBlocks.length; i++){
		let f = i;
		var bbtoptwo = document.createElement('div');
		bbtoptwo.setAttribute('class', 'bbtoptwo');
		bbtoptwo.onclick = function(){
			let num = (f == 0)? '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, 32, 33, 34, 35, 36';
			var objType = (f == 0)? 'outside_low' : 'outside_high';
			setBet(num, objType, 1);
		};
		bbtoptwo.innerText = bbtopBlocks[i];
		bbtop.append(bbtoptwo);
	}
	bettingBoard.append(bbtop);

	let numberBoard = document.createElement('div');
	numberBoard.setAttribute('class', 'number_board');

	let zero = document.createElement('div');
	zero.setAttribute('class', 'number_0');
	zero.onclick = function(){
		var objType = 'zero';
		var odds = 35;
		setBet('0', objType, odds);
	};
	let nbnz = document.createElement('div');
	nbnz.setAttribute('class', 'nbn');
	nbnz.innerText = '0';
	zero.append(nbnz);
	numberBoard.append(zero);
	
	var numberBlocks = [3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, '2 to 1', 2, 5, 8, 11, 14, 17, 20, 23, 26, 29, 32, 35, '2 to 1', 1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34, '2 to 1'];
	for(i = 0; i < numberBlocks.length; i++){
		let a = i;
		var nbClass = (numberBlocks[i] == '2 to 1')? 'tt1_block' : 'number_block';
		var numberBlock = document.createElement('div');
		numberBlock.setAttribute('class', nbClass);
		numberBlock.onclick = function(){
			if(numberBlocks[a] != '2 to 1'){
				setBet(''+numberBlocks[a]+'', 'inside_whole', 35);
			}else{
				num = (a == 12)? '3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36' : ((a == 25)? '2, 5, 8, 11, 14, 17, 20, 23, 26, 29, 32, 35' : '1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34');
				setBet(num, 'outside_column', 2);
			}
		};
		var nbn = document.createElement('div');
		nbn.setAttribute('class', 'nbn');
		nbn.innerText = numberBlocks[i];
		numberBlock.append(nbn);
		numberBoard.append(numberBlock);
	}
	bettingBoard.append(numberBoard);

	let bo3Board = document.createElement('div');
	bo3Board.setAttribute('class', 'bo3_board');	
	let bo3Blocks = ['1 to 12', '13 to 24', '25 to 36'];
	for(i = 0; i < bo3Blocks.length; i++){
		let b = i;
		var bo3Block = document.createElement('div');
		bo3Block.setAttribute('class', 'bo3_block');
		bo3Block.onclick = function(){
			num = (b == 0)? '1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12' : ((b == 1)? '13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24' : '25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36');
			setBet(num, 'outside_dozen', 2);
		};
		bo3Block.innerText = bo3Blocks[i];
		bo3Board.append(bo3Block);
	}
	bettingBoard.append(bo3Board);

	let otoBoard = document.createElement('div');
	otoBoard.setAttribute('class', 'oto_board');	
	let otoBlocks = ['EVEN', 'RED', 'BLACK', 'ODD'];
	for(i = 0; i < otoBlocks.length; i++){
		let d = i;
		var otoBlock = document.createElement('div');
		otoBlock.setAttribute('class', 'oto_block');
		otoBlock.onclick = function(){
			num = (d == 0)? '2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36' : ((d == 1)? '1, 3, 5, 7, 9, 12, 14, 16, 18, 19, 21, 23, 25, 27, 30, 32, 34, 36' : ((d == 2)? '2, 4, 6, 8, 10, 11, 13, 15, 17, 20, 22, 24, 26, 28, 29, 31, 33, 35' : '1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31, 33, 35'));
			setBet(num, 'outside_oerb', 1);
		};
		otoBlock.innerText = otoBlocks[i];
		otoBoard.append(otoBlock);
	}
	bettingBoard.append(otoBoard);
	container.append(bettingBoard);
}

function setBet(n, t, o){
	console.log(n);
	console.log(t);
	console.log(o);
}

This Pen is owned by ozboware on CodePen.

See more by @ozboware on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.