Kunkka game

by alexb

CSS

html {
  font-family: sans-serif;
}

.grid {
  border-collapse: collapse;
  display: table;
}
.row {
  display: table-row;
}

.tile {
  border: 1px solid black;
  display: table-cell;
  height: 15px;
  width: 15px;
  text-align: center;
  vertical-align: middle;
}

.loot {
  background: cornflowerblue;
}

.player::before {
  content: 'Ă—';
  display: block;
  height: 15px;
}

Babel + JSX

const GRID_HEIGHT = 15;
const GRID_WIDTH = 19;
const LOOT_COUNT = 10;

const KEY_LEFT = 37;
const KEY_UP = 38;
const KEY_RIGHT = 39;
const KEY_DOWN = 40;

/**
 * Represents game objects that occupy tiles.
 */
function Entity(x, y) {
	this.x = 0;
  this.y = 0;
}

Entity.prototype.isAt = function(x, y) {
	return this.x === x && this.y === y;
}

const GameState = {};
// Generate some loot.
GameState.loot = [];
for (let i = 0; i < LOOT_COUNT; i++) {
	let item = new Entity();
	item.x = Math.floor(Math.random() * GRID_WIDTH);
	item.y = Math.floor(Math.random() * GRID_HEIGHT);
  GameState.loot.push(item)
}
// Add the player.
let player = new Entity();
player.x = 9;
player.y = 14;
GameState.player = player;

function onKeyDown(e) {
	switch (e.keyCode) {
  	case KEY_LEFT:
  		GameState.player.x -= 1;
      break;
  	case KEY_UP:
  		GameState.player.y -= 1;
      break;
  	case KEY_RIGHT:
  		GameState.player.x += 1;
      break;
  	case KEY_DOWN:
  		GameState.player.y += 1;
      break;
  }
  render();
}

function render() {
	document.body.innerHTML = '';
  // Draw the game grid
  let grid = el('div', 'grid');
  for (let y = 0; y < GRID_HEIGHT; y++) {
    let row = el('div', 'row');
    for (let x = 0; x < GRID_WIDTH; x++) {
      let tile = el('span', 'tile');
      if (getLootAt(x, y)) {
        tile.className += ' loot';
      }
      if (GameState.player.isAt(x, y)) {
        tile.className += ' player';
      }
      row.appendChild(tile);
    }
    grid.appendChild(row);
  }
	document.body.appendChild(grid);
}

// Let's go!
document.addEventListener('keydown', onKeyDown, false);
render();

function getLootAt(x, y) {
	return GameState.loot.find(
  	(loot) => loot.isAt(x, y)
   );
}

/**
 * Create an element with a CSS class.
 */
function el(tagName, className) {
	let element = document.createElement(tagName);
  element.className = className;
  return element;
}