Метлик Two Chunks

My Game

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

HTML

<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono&display=swap" rel="stylesheet">

<div class="header-title">
  Метлик Two Chunks
</div>

<div class="root">
  <div class="game-chunk">
    <div class="cells">
    </div>
  </div>
</div>

CSS

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

body {
  background: #2c3e50;
  font-family: 'Ubuntu Mono', monospace;
  color: #fff;
}

.header-title {
  text-align: center;
  font-size: 32px;
  user-select: none;
  height: calc(50vh - 240px);
  line-height: calc(50vh - 240px);
  font-weight: bold;
  letter-spacing: 0.05em;
}

.root {
  position: relative;
  width: 640px;
  height: 480px;
  border: 2px solid #fff;
  margin: 0 auto;
}

.game-chunk {
  width: 400px;
  margin: 5px auto;
}

.cell {
  display: inline-block;
  width: 70px;
  height: 70px;
  border: 1px solid #fff;
  margin: 5px;
}

.cell.grass {
  background: #2ecc71;
}

JavaScript

let $ = (selector='.root', element=document) => 
  element.querySelectorAll(selector);
let $1 = (selector='.root', element=document) => 
  element.querySelector(selector);
let $c = (tag) =>
  document.createElement(tag);
let $class = (elem, class_, toggle=true) => 
  elem.classList.toggle(class_, toggle);

const chunkWidth = 5,
  chunkHeight = 5;
  
for (var chunkY=0; chunkY < chunkHeight; chunkY++) {
  for (var chunkX=0; chunkX < chunkWidth; chunkX++) {
    let cell = $c('div');
    cell.tabindex = 1 + chunkX + chunkY * chunkHeight
    $class(cell, 'cell');
    $class(cell, 'cx-'+chunkX);
    $class(cell, 'cy-'+chunkY);
    $class(cell, 'grass');
    $1('.cells').appendChild(cell);
  }
}