Hexoggle

by Grant

HTML

<canvas id="canvas"></canvas>
<canvas id="select" hidden></canvas>

CSS

body {
  background: black;
  overflow: hidden;
  margin: 0;
}

#select {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 100, 255, .6);
  padding: 0;
}

JavaScript

console.clear()

var canvas = document.getElementById("canvas")
canvas.width = window.innerWidth
canvas.height = window.innerHeight
var ctx = canvas.getContext("2d")
ctx.lineWidth = 2
var translate = [10, 10]
ctx.translate(10, 10)
ctx.textBaseLine = "middle"
ctx.textAlign = "center"
var size = 10
ctx.font = size * 3 + "px serif"
var load = 0

function get(path) {
  var i = new Image()
  i.src = "http://grant.semiaxis.com/hexoggle/textures/" + path
  i.onload = function() {
    load++
  }
  return i
}

tex = {
  base: {
    unowned: get("base/unowned.png"),
    fraiian: get("base/fraiian.png"),
    sepalian: get("base/sepalian.png")
  },
  terrainRaw: {
    forest: get("terrain/forest.png"),
    dirt: get("terrain/dirt.png"),
    sand: get("terrain/sand.png"),
    grass: get("terrain/grass.png"),
    mountain: get("terrain/mountain.png")
  },
  unit: {
    fraiian: {
      getSome: "Textures!"
    },
    sepalian: {
      getSome: "Textures!"
    },
    Error: {
      Error: false
    }
  }
}

//Effects
function hunger(u, t, mh) { //After t turns, will damage unit u 1 health per turn, until unit u reaches mh health
  this.turns = t
  this.minHealth = mh
  this.turn = function() {
    if (u.health < minHealth) {
      u.health--
    }
  }
}

function base(d) {
  Object.assign(this, {
    race: "unowned",
    owner: 0,
    x: -1,
    y: -1
  }, d)

  this.type = "base"
  this.dataType = "base"
  this.dataLoc = currentGame.units.push(this) - 1

  this.draw = function() {
    var p = hexToPixel(this.x, this.y)
    ctx.drawImage(tex.base[this.race], p[0] * 4 * size + size / 4, p[1] * 4 * size, size * 3.5, size * 3.5)
  }

  this.selected = function() {
    selectedUnit = this
    opts = []
    opts.push("Cancel")
    selectOpt()
  }

  this.Cancel = function() {
    canvasSel.hidden = true
  }
}

function unit(d) {
  Object.assign(this, {
    race: "Error",
    type: "Error",
    owner: 0,
    textColor: "black",
    text: "Err",
    texture: false,
    health: 10,
   ...