Игра про числа

by Станислав Некрасов

HTML

<script src="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&amp;display=swap"></script>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.game {
  display: block;
  margin: 0 auto;
}

.status-bar {
  display: block;
  margin: 10px 0;
  font-size: 18px;
  font-weight: bold;
  font-family: Montserrat, sans-serif;
  text-align: center;
}

.board {
  font-size: 0;
}

.cell {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 5px;
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  border-radius: 10px;
  background: #6C95F5;
  box-shadow: 2px 2px 2px 0 #0008;
  text-align: center;
  color: #fff;
  font-weight: bold;
  padding: 14px 0;
  user-select: none;
}

.cell:hover {
  cursor: pointer;
  background: #62E0FA;
}

.cell.empty {
  pointer-events: none;
  opacity: 0;
}

.cell.selected {
  background: #8e72e8 !important;
}

.rules {
  width: 100%;
  font-size: 14px;
  font-family: Arial, sans-serif;
  text-align: justify;
  display: block;
  margin: 10px 0;
}

.rules pre {
  display: inline;
  font-weight: bold;
  background: #eee;
}

.rules ol {
  margin-left: 20px;
}

.rules h3, .rules a {
  text-align: center;
  display: block;
}

.rules a {
  font-size: 16px;
  margin: 2px;
  text-decoration: none;
  color: #8e72e8;
  font-weight: bold;
}
.rules a:hover {
  text-decoration: underline;
}

JavaScript

const randint = (min,max) => Math.round(min-0.5+Math.random()*(max-min+1));
const shuffle = arr => {
  for (let i = arr.length - 1; i > 0; i--) {
    let j = randint(0, i);
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
};

const debug_f = (n,a,b) => console.log(n+'->'+a+'&'+b);
const up = _ => window.scroll(0, 0);
const restart = _ => start(gw, gh, gmi, gma, gd, gc, gn, gm);

let gw = 5, gh = 5, gmi = 0, gma = 99, gd = 1, gc = 1, gn = -1, gm = -1;

window.addEventListener('hashchange', event => {
	if (window.location.hash.length <= 2) return;
	let hash = window.location.hash.substr(1);
  console.log(hash);
  [gn, gm] = [-1, -1];
  if (hash[0] == 's') {
  	[gw, gh] = hash.substr(1).split('x');
    [gw, gh] = [+gw, +gh];
  } else if (hash[0] == 'n') {
  	[gmi, gma] = hash.substr(1).split('x');
    [gmi, gma] = [+gmi, +gma];
  } else if (hash[0] == 'd') {
  	gd = +hash.substr(1);
  } else if (hash[0] == 'c') {
  	gc = +hash.substr(1);
  } else if (hash == 'extra') {
  	[gw, gh, gmi, gma, gn] = [12, 10, 0, 999, 0];
  } else if (hash == 'zeros') {
  	let z = '0'.repeat(25).split('').map(_=>+_);
    [z[0], z[1]] = [-1, 1];
  	[gw, gh, gmi, gma, gn, gm] = [5, 5, 0, 1, 0, z]
  }
  window.location.hash = '';
  restart();
});

function start (m=gw, e=gh, t=gmi, l=gma, i=gd, k=gc,
								s=gn, o=gm, o_, n) {
	console.log(m, e, t, l, i, k,  s);

	const minValue = t, maxValue = l, boardWidth = m, 
			boardHeight = e, cellSize = 60, draganddrop=i, 
      colors = k;
      
  let needValue = s == -1 ? randint(minValue, maxValue) : s;
  let selectedCell = null, statusBar = document.createElement('div'),
    board = document.createElement('div'),
    gameElem = document.createElement('div'),
    rulesElem = document.createElement('div'),
    cellsCount = boardWidth * boardHeight, 
    cells = o == -1 ? [needValue] : o;
  
  function factorize (index=-1) {
    if (cells.length >= cellsCount) return; 
    if (index == -1) index = randint(0, cells.length - 1);
    if (index >=...