- 
	var matrix = [
		[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
		[1,0,1,0,1,1,0,0,0,0,1,0,1,0,1,1,0,0,0,1],
		[1,0,1,0,1,0,0,1,0,0,1,0,1,0,1,0,0,1,0,1],
		[2,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,1],
		[1,0,1,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,1],
		[1,0,1,1,1,1,1,1,0,0,1,0,1,1,1,1,1,1,0,1],
		[1,0,1,0,1,0,0,0,0,0,1,0,1,0,1,0,0,0,0,1],
		[1,0,1,0,1,0,1,1,1,0,1,0,1,0,1,0,1,1,1,1],
		[1,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,1],
		[1,0,1,0,1,0,0,0,0,0,1,0,1,0,1,0,0,0,0,1],
		[1,1,1,1,1,1,1,1,1,0,1,0,1,0,1,1,1,1,1,1],
		[1,0,1,0,1,1,0,0,0,0,1,0,1,0,1,1,0,0,0,1],
		[1,0,1,0,1,0,0,1,0,0,1,0,1,0,1,0,0,1,0,1],
		[1,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,1],
		[1,0,1,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,1],
		[1,0,1,1,1,1,1,1,0,0,1,0,1,1,1,1,1,1,0,1],
		[1,0,1,0,1,0,0,0,0,0,1,0,1,0,1,0,0,0,0,1],
		[1,0,1,0,1,0,1,1,1,0,1,0,1,0,1,0,1,1,1,1],
		[1,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,3],
		[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
	];

- var field_size = 48;
- var grid = matrix.flat();
- var SF = (arr, num, index) => arr.indexOf(num, index);
- var SB = (arr, num, index) => arr.lastIndexOf(num, index);
- 
	var getBetween = (arr, index) => [
		SB(arr, 1, index),
		SF(arr, 1, index) != -1 ? SF(arr, 1, index) : arr.length,
	];
- var getRow = (arr, index) => arr[index];
- var getColumn = (arr, index) => arr.map(x=> x[index]);

form.game
	- for (var i = 0; i < grid.length; i++)
		case grid[i]
			when 0
				input.empty(type="radio", name="floor", id=`field-${i}`)
			when 1
				input.disabled(type="radio", name="floor", id=`field-${i}`, disabled="disabled")
			when 2
				input.start(type="radio", name="floor", id=`field-${i}`, checked="checked")
			when 3
				input.finish(type="radio", name="floor", id=`field-${i}`)
	.floor
		- for(let i = 0; i < grid.length; i++){
			case grid[i]
				when 0
					label.field.empty(class=`field-${i}`, for=`field-${i}`)
				when 1
					label.field.disabled(class=`field-${i}`, for=`field-${i}`)
				when 2
					label.field.start(class=`field-${i}`, for=`field-${i}`)
				when 3
					label.field.finish(class=`field-${i}`, for=`field-${i}`)
		- }
		.player
	.alert
		h1 You winner!
		button.again(type="reset") Play again

style
	| :root {
	| --size: #{matrix.length};
	| --field_size: #{field_size}px;
	| }
	- for (let i = 0; i < matrix.length; i++)
		| input:nth-child(#{matrix.length}n-#{i}):checked ~ .floor > .player {
		| left: #{100 - 100 / matrix.length * (i+1)}%;
		| }
		| input:nth-child(n + #{matrix.length * i + 1}):nth-child(-n + #{matrix.length*(i + 1)}):checked ~ .floor > .player {
		| top: #{100 / matrix.length * i}%;
		| }
	- for (let i = 0; i < matrix.length; i++)
		- for (let j = 0; j < matrix[i].length; j++)
			if getBetween(getRow(matrix, i), j)[0] != getBetween(getRow(matrix, i), j)[1]
				| #field-#{i * matrix.length + j}:checked ~ .floor > .field:nth-child(n+#{i * matrix.length + getBetween(getRow(matrix, i), j)[0] + 2}):nth-child(-n+#{i * matrix.length + getBetween(getRow(matrix, i), j)[1]}),
			if getBetween(getColumn(matrix, j), i)[0] != getBetween(getColumn(matrix, j), i)[1]
				| #field-#{i * matrix.length + j}:checked ~ .floor > .field:nth-child(#{matrix.length}n + #{(getBetween(getColumn(matrix, j), i)[0] + 1) * matrix.length + j + 1}):nth-child(-#{matrix.length}n + #{(getBetween(getColumn(matrix, j), i)[1] - 1) * matrix.length + j + 1}),
	| .player{
	| opacity: 1;
	| visibility: visible;
	| }
View Compiled
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	font-family: 'Roboto', sans-serif;
}

%visible {
	opacity:1;
	visibility:visible;
}
%hidden {
	opacity:0;
	visibility:hidden;
}
%centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.game {
	@extend %centered;
	width: calc(var(--size) * var(--field_size));
	height: calc(var(--size) * var(--field_size));

	input {
		display: none;
		&.finish:checked ~ .floor{
			@extend %hidden;
		}
		&.finish:checked ~ .alert{
			@extend %visible;
		}
	}
	.floor {
		background: #ccc;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		-webkit-transition: all .3s linear 1s;
		-moz-transition: all .3s linear 1s;
		-ms-transition: all .3s linear 1s;
		-o-transition: all .3s linear 1s;
		transition: all .3s linear 1s;

		.field:not(.disabled){
			@extend %hidden;
		}
		.field, .player{
			background: green;
			width: var(--field_size);
			height: var(--field_size);
			border-left: .5px solid #000;
			border-bottom: .5px solid #000;
		}
		.start,
		.finish {
			background: red;
		}
		.disabled {
			background: #333;
		}
		.player {
			background: blue;
			position: absolute;
			-webkit-transition: top 1s linear,right 1s linear,bottom 1s linear,left 1s linear;
			-moz-transition: top 1s linear,right 1s linear,bottom 1s linear,left 1s linear;
			-ms-transition: top 1s linear,right 1s linear,bottom 1s linear,left 1s linear;
			-o-transition: top 1s linear,right 1s linear,bottom 1s linear,left 1s linear;
			transition: top 1s linear,right 1s linear,bottom 1s linear,left 1s linear;
		}
	}
	.alert{
		@extend %centered;
		@extend %hidden;
		width: calc(var(--size) * var(--field_size) - 20%);
		font-size: 5em;
		padding: 1em;
		background: #fff;
		text-align: center;
		color: #000;
		border-radius: 30px;
		box-shadow: 0 0 15px 1000px rgba(0,0,0,.3), 0 0 30px -3px rgba(0,0,0,.3);
		-webkit-transition: all .3s linear 1s;
		-moz-transition: all .3s linear 1s;
		-ms-transition: all .3s linear 1s;
		-o-transition: all .3s linear 1s;
		transition: all .3s linear 1s;
	}
	.again{
    text-decoration: none;
    background: #5892fc;
    border: none;
    color: white;
    padding: 10px 25px;
    font-size: 1rem;
    border-radius: 3px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    position: relative;
	}
}
View Compiled
// YES, I'm crazy

// [
// 	[1,1,1,1,1,1,1,1,1,1],
// 	[1,0,0,0,0,0,0,0,0,1],
// 	[1,0,0,0,0,0,0,0,0,1],
// 	[1,0,0,0,1,0,0,0,0,1],
// 	[1,0,0,0,0,0,0,0,0,1],
// 	[1,0,1,0,2,0,0,1,0,1],
// 	[1,0,0,0,0,0,0,0,0,1],
// 	[1,0,0,0,1,0,0,0,0,1],
// 	[1,0,0,0,0,0,0,0,3,1],
// 	[1,1,1,1,1,1,1,1,1,1]
// ];

// [
// 	[1,1,1,1,1,1,1,1,1,1],
// 	[1,0,1,0,1,1,0,0,0,1],
// 	[1,0,1,0,1,0,0,1,0,1],
// 	[2,0,0,0,1,1,0,1,1,1],
// 	[1,0,1,0,0,0,0,0,0,1],
// 	[1,0,1,1,1,1,1,1,0,1],
// 	[1,0,1,0,1,0,0,0,0,1],
// 	[1,0,1,0,1,0,1,1,1,1],
// 	[1,0,0,0,1,0,0,0,0,3],
// 	[1,1,1,1,1,1,1,1,1,1],
// ];

// [
// 	[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
// 	[1,0,1,0,1,1,0,0,0,0,1,0,1,0,1,1,0,0,0,1],
// 	[1,0,1,0,1,0,0,1,0,0,1,0,1,0,1,0,0,1,0,1],
// 	[2,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,1],
// 	[1,0,1,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,1],
// 	[1,0,1,1,1,1,1,1,0,0,1,0,1,1,1,1,1,1,0,1],
// 	[1,0,1,0,1,0,0,0,0,0,1,0,1,0,1,0,0,0,0,1],
// 	[1,0,1,0,1,0,1,1,1,0,1,0,1,0,1,0,1,1,1,1],
// 	[1,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,1],
// 	[1,0,1,0,1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,1],
// 	[1,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1],
// 	[1,0,1,0,1,1,0,0,0,0,1,0,1,0,1,1,0,0,0,1],
// 	[1,0,1,0,1,0,0,1,0,0,1,0,1,0,1,0,0,1,0,1],
// 	[1,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,1],
// 	[1,0,1,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,1],
// 	[1,0,1,1,1,1,1,1,0,0,1,0,1,1,1,1,1,1,0,1],
// 	[1,0,1,0,1,0,0,0,0,0,1,0,1,0,1,0,0,0,0,1],
// 	[1,0,1,0,1,0,1,1,1,0,1,0,1,0,1,0,1,1,1,1],
// 	[1,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,3],
// 	[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
// ];

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.