War Tiles

by Grant

HTML

<canvas id="canvas"></canvas>

CSS

body {
  margin: 0;
  background: grey;
}

JavaScript

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
canvas.height = 700
canvas.width = 1500
var troops = {
  swordsman: {
  name:"swordsman",
  cost: 4,
  health: {
    max: 8,
    current: 8,
    overcharge: 2,
    poison: 0
  },
  weapon: {
    direction: "lane",
    type:"direct",
    range: .5,
    damage: 2,
    recharge: 2,
    charge: 2
  },
  speed: 8,
  resource: 0
  },
  archer: {
  name:"archer",
  cost: 4,
  health: {
    max: 4,
    current: 4,
    overcharge: 2,
    poison: 0
  },
  weapon: {
    direction: "any",
    type: "projectile",
    range: 6,
    damage: 1,
    recharge: 4,
    charge: 1
  },
  speed: 8,
  resource: 0
  }
}
var player1
var player2

/*
{
  health: {
    max: max HP
    current: current HP
    overcharge: how much HP can go over
    poison: damage per tick
  },
  weapon: {
    direction: which direction can target
    type: ranged | direct
    range: how far away before targeting
    damage: damage per hit
    recharge: number of ticks inbetween attacks
    charge: current recharge
  },
  speed: number of ticks it takes to traverse a tile
  resource: number of ticks it takes to generate 1 resource
}
*/
function troop(d) {
  Object.assign(this, d)
}

function player() {

}

function game() {
  this.player1 = new player()
}

function draw() {
  drawGrid()
}

function drawGrid() {
  ctx.fillStyle = "black"
  ctx.fillRect(0, 0, 1500, 700)
  ctx.fillStyle = "green"
  ctx.fillRect(100, 100, 1300, 500)
  ctx.strokeStyle = "darkgreen"
  ctx.lineWidth = 10
  for (var i = 1; i < 7; i++) {
    ctx.beginPath()
    ctx.moveTo(100, i * 100)
    ctx.lineTo(1400, i * 100)
    ctx.stroke()
  }
  ctx.lineWidth = 5
  for (var i = 1; i < 15; i++) {
    ctx.beginPath()
    ctx.moveTo(i * 100, 95)
    ctx.lineTo(i * 100, 605)
    ctx.stroke()
  }
}
setInterval(draw, 62)