tower-defense/index.js

1238 lines
31 KiB
JavaScript

window.onload = function () {
/*
My programming practice notes:
* every major feature as part of updating the game (such as towers, enemies)
are handeled in a separate function
* I use Object.assign to copy objects in order to eliminate references when spawning enemies
and to get the ability to modify them individually
* Components such as buttons or selections within the canvas are classes
* if, function and else have spaces between both '(' and '{'
`if (thing) {}` not `if(thing){}`
* Keep all variables local to their scope (in other words, use `let` instead of `var`)
*/
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
let fps = 0
let fpsDraw = 0
let fpsCount = 0
// mouse
let mX = 0
let mY = 0
let mXr = 0
let mYr = 0
let Game = {
state: 2,
enemies: [],
enemySpawnList: [],
towers: [],
particles: [],
selltext: [],
map: null,
health: 100,
money: 100,
wave: 0,
waveTimer: 0,
tower: 'simple',
towerSel: null,
debug: false,
sellRatio: .8
}
/**
speed - movement speed multiplier - higher: faster
node - always 1
health - health of the enemy
reward - money earned when killed
frequency - milliseconds to spawn in
icon - currently color of the enemy
*/
let Enemies = {
basic: {
speed: 10,
node: 1,
health: 50,
reward: 10,
frequency: 40,
icon: '#f00'
},
speedy: {
speed: 20,
node: 1,
health: 60,
reward: 15,
frequency: 35,
icon: '#f11'
},
tough: {
speed: 5,
node: 1,
health: 80,
reward: 20,
frequency: 40,
icon: '#f40'
}
}
let Towers = {
simple: {
range: 5, // range in tiles
damage: 15, // damage to deal to enemies when hit
rate: 20, // rate of fire, higher - slower
name: 'Simple', // name of the tower
description: 'Medium rate and damage',
speed: 30, // bullet speed, higher - faster
cost: 50, // cost to place
icon: '#333', // currently color
bullet: 1 // The type of bullet. 1: damage, 2: slow down by damage, 3: instant kill
},
rapid: {
range: 3,
damage: 5,
rate: 5,
name: 'Rapid',
description: 'Rapid-firing but low damage',
speed: 30,
cost: 250,
icon: '#303',
bullet: 1
},
sticky: {
range: 3,
damage: 10,
rate: 30,
name: 'Sticky',
description: 'Slow down enemies by damage',
speed: 50,
cost: 500,
icon: '#e27c06',
bullet: 2
},
snipe: {
range: 10,
damage: 1500,
rate: 100,
name: 'Sniper',
description: 'Slow firing but always kills',
speed: 50,
cost: 1000,
icon: '#4f3',
bullet: 1
}
}
let Maps = {
width: 20, // Width of the map
height: 20, // Height of the map
tile: 32, // Tile size in pixels (each coordinate is multiplied by this number in rendering)
first: {
// map rendering data
tiles: [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0,
0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0,
0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0,
0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0,
0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0,
0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0,
0, 3, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
],
// enemy follow path
pathgen: [
{x: 1, y: 2, end: false},
{x: 14, y: 2, end: false},
{x: 14, y: 6, end: false},
{x: 8, y: 6, end: false},
{x: 8, y: 10, end: false},
{x: 17, y: 10, end: false},
{x: 17, y: 17, end: false},
{x: 5, y: 17, end: false},
{x: 5, y: 12, end: false},
{x: 1, y: 12, end: false},
{x: 1, y: 17, end: true},
],
waves: [
{
type: 'recurring',
waveLow: 0,
waveHigh: 10,
oneAfterAnother: false,
enemies: [{
type: 'basic',
count: 5,
inclCount: true,
inclHealth: true
}]
},
{
type: 'recurring',
waveLow: 10,
waveHigh: 15,
oneAfterAnother: false,
enemies: [{
type: 'basic',
count: 5,
inclCount: true,
inclHealth: true
},
{
type: 'speedy',
count: 10,
inclCount: true,
inclHealth: true
}]
},
{
type: 'recurring',
waveLow: 15,
oneAfterAnother: false,
enemies: [{
type: 'basic',
count: 5,
inclCount: true,
inclHealth: true
},
{
type: 'speedy',
count: 10,
inclCount: true,
inclHealth: true
}]
},
{
type: 'once-every',
every: 5,
oneAfterAnother: false,
enemies: [{
type: 'tough',
count: 5,
inclCount: true,
inclHealth: true
}]
},
{
type: 'once',
wave: 3,
enemies: [{
type: 'tough',
count: 2
}]
}
]
}
}
let Components = {}
class Component {
constructor (x, y) {
this.visible = true
this.elements = []
this.x = x
this.y = y
}
elDraw() {
for (let i in this.elements) {
let elem = this.elements[i]
if (elem instanceof Component) {
elem.draw()
}
}
}
elUpdate() {
for (let i in this.elements) {
let elem = this.elements[i]
if (elem instanceof Component) {
elem.update()
}
}
}
addElement (el) {
if (!(el instanceof Component)) return
this.elements.push(el)
}
draw () {
this.elDraw()
}
update() {
this.elUpdate()
}
}
class Tooltip extends Component {
constructor () {
super(0, 0)
this.font = '20px Helvetica'
this.text = ''
this.w = 0
this.h = 24
this.components = []
this.visible = false
}
static assign (tooltip, component, text) {
tooltip.addComponent(component, text)
}
setText (str) {
if (this.text === str) return
this.text = str
if (this.font) ctx.font = this.font
this.w = ctx.measureText(this.text).width + this.h
}
draw () {
if (!this.visible) return
if (this.text === '') return
if (this.font) ctx.font = this.font
let aX = this.x
let aY = this.y
if (aX + this.w > canvas.width) {
aX -= this.w + 5
}
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
ctx.fillRect(aX, aY, this.w, this.h)
ctx.fillStyle = '#000'
ctx.fillText(this.text, aX + this.h / 2, aY + this.h / 2 + 5)
}
setPosition (x, y) {
this.x = x
this.y = y
}
update () {
if (this.components.length) {
let cmps = false
for (let i in this.components) {
let cmp = this.components[i]
if (mXr > cmp.x && mYr > cmp.y &&
mXr < cmp.x + cmp.w && mYr < cmp.y + cmp.h) {
this.setPosition(mXr, mYr)
this.setText(cmp.text)
cmps = true
}
}
this.visible = cmps
}
}
addComponent (component, text) {
this.components.push({
x: component.x,
y: component.y,
w: component.w,
h: component.h,
text: text
})
}
}
class ButtonComponent extends Component {
constructor (text, textColor, color, x, y, w, h, fn) {
super(x, y)
this.w = w
this.h = h
this.fn = () => {
fn.apply(this, [])
}
this.text = text
this.textColor = textColor
this.color = color
this.disabled = false
this.hovered = false
this.font = '20px Helvetica'
}
draw () {
if (!this.visible) return
if (this.font) ctx.font = this.font
ctx.fillStyle = this.color
ctx.fillRect(this.x, this.y, this.w, this.h)
ctx.fillStyle = this.textColor
let txtMeasure = ctx.measureText(this.text)
let tx = this.x + (this.w / 2 - txtMeasure.width / 2)
let ty = this.y + (this.h / 2) * 1.2
ctx.fillText(this.text, tx, ty)
if (this.disabled) {
ctx.fillStyle = 'rgba(0, 0, 0, 0.45)'
ctx.fillRect(this.x, this.y, this.w, this.h)
} else if (this.hovered) {
ctx.fillStyle = 'rgba(255, 255, 255, 0.15)'
ctx.fillRect(this.x, this.y, this.w, this.h)
}
this.elDraw()
}
update () {
if (!this.visible || this.disabled) return
if (mXr > this.x && mYr > this.y && mXr < this.x + this.w && mYr < this.y + this.h) {
this.hovered = true
} else if (this.hovered) {
this.hovered = false
}
}
setDisabled (disable) {
this.disabled = typeof disabled === 'boolean' ? disabled : !this.disabled
}
}
class TowerButton extends ButtonComponent {
constructor (tower, i) {
super()
this.active = false
this.w = 50
this.h = 50
this.x = (Maps.width * Maps.tile) + (i % 4) * (this.w + 4) + 4
this.y = 80 + Math.floor(i / 4) * (this.h + 4)
this.tower = tower
this.towerObj = Towers[this.tower]
this.costText = '$' + this.towerObj.cost
this.text = this.towerObj.name
this.textColor = '#fff'
this.color = '#995522'
this.fn = this.select
}
select () {
Game.tower = this.tower
}
addTooltip () {
Tooltip.assign(Components.tooltip, this, this.towerObj.description)
}
update () {
super.update()
this.disabled = this.towerObj.cost > Game.money && !Game.debug
this.active = Game.tower === this.tower
this.elUpdate()
}
draw () {
if (!this.visible) return
if (this.active) {
ctx.fillStyle = '#afa'
ctx.fillRect(this.x - 2, this.y - 2, this.w + 4, this.h + 4)
}
ctx.font = '14px Helvetica'
ctx.fillStyle = this.color
ctx.fillRect(this.x, this.y, this.w, this.h)
ctx.fillStyle = this.textColor
let txtMeasure = ctx.measureText(this.text)
let tx = this.x + (this.w / 2 - txtMeasure.width / 2)
let ty = this.y + (this.h / 2) * 1
ctx.fillText(this.text, tx, ty)
ctx.font = '10px Helvetica'
if (Game.money >= this.towerObj.cost) {
ctx.fillStyle = '#0f0'
} else {
ctx.fillStyle = '#f11'
}
txtMeasure = ctx.measureText(this.costText)
tx = this.x + (this.w / 2 - txtMeasure.width / 2)
ty = this.y + (this.h / 2) * 1.6
ctx.fillText(this.costText, tx, ty)
if (this.disabled) {
ctx.fillStyle = 'rgba(0, 0, 0, 0.45)'
ctx.fillRect(this.x, this.y, this.w, this.h)
} else if (this.hovered) {
ctx.fillStyle = 'rgba(255, 255, 255, 0.15)'
ctx.fillRect(this.x, this.y, this.w, this.h)
}
this.elDraw()
}
}
class InfoDialog extends Component {
constructor () {
super()
this.x = 0
this.y = (Maps.height - 5) * Maps.tile
this.w = Maps.width * Maps.tile
this.h = 5 * Maps.tile
this.createButton()
}
createButton () {
let btn = new ButtonComponent('Sell Tower', '#fff', '#f11', 490, 590, 140, 40, () => {
if (Game.towerSel) {
sellTower(Game.towerSel.x, Game.towerSel.y)
}
})
btn.update = function () {
this.visible = Game.towerSel !== null
if (!this.visible) return
if (mXr > this.x && mYr > this.y && mXr < this.x + this.w && mYr < this.y + this.h) {
this.hovered = true
} else if (this.hovered) {
this.hovered = false
}
}
this.addElement(btn)
}
draw () {
if (Game.towerSel) {
let ts = Game.towerSel
ctx.fillStyle = 'rgba(0, 0, 0, 0.45)'
ctx.fillRect(this.x, this.y, this.w, this.h)
ctx.fillStyle = '#fff'
ctx.font = '25px Helvetica'
ctx.fillText(ts.name + ' Tower', 5, this.y + 25)
ctx.font = '15px Helvetica'
ctx.fillText(ts.description, 5, this.y + 42)
ctx.fillText('Range: ' + ts.range + ' tiles', 5, this.y + 70)
ctx.fillText('Damage: ' + ts.damage + ' HP', 5, this.y + 85)
ctx.fillText('Fire Rate: ' + ts.rate, 5, this.y + 100)
ctx.fillText('Kills: ' + ts.killcount, 5, this.y + 115)
ctx.fillText('Fired ' + ts.fires + ' times', 5, this.y + 130)
}
this.elDraw()
}
}
function clickBtn (cmp) {
let click = false
let compList = cmp != null && cmp instanceof Component ? cmp.elements : null
if (cmp == null && compList == null) {
compList = Components
}
for (let i in compList) {
let btn = compList[i]
if (!(btn instanceof ButtonComponent)) {
// Loop through sub-components of components
if (btn.elements.length) {
click = clickBtn(btn)
} else {
continue
}
} else {
// Click the button if its in bounds, visible and not disabled
if (btn.disabled || !btn.visible) continue
if (mXr > btn.x && mYr > btn.y && mXr < btn.x + btn.w && mYr < btn.y + btn.h && btn) {
btn.fn()
click = true
}
}
}
return click
}
function updateComponents (cmp) {
// Determine which object of components to update
let compList = cmp != null && cmp instanceof Component ? cmp.elements : null
if (cmp == null && compList == null) {
compList = Components
}
for (let i in compList) {
let component = compList[i]
component.update()
if (component.elements.length) {
updateComponents(component)
}
}
}
// Total enemy spawn count is used to determine that the round is over
// Local (in-function) determines how many there are left to spawn as ordered by the function call
function addEnemies (enemies, type, specs) {
let path = Game.map.pathgen[0]
let enemy = Enemies[type]
// Copy the enemy and add x and y coordinates
let enemyCopy = Object.assign({
x: path.x,
y: path.y
}, enemy)
// Modify the enemy according to wave settings
if (specs.healthIncrease) {
enemyCopy.health += specs.healthIncrease
}
if (specs.speedIncrease) {
enemyCopy.speed += specs.speedIncrease
}
enemyCopy.dmg = enemyCopy.health
// Insert them into the spawn queue
for (let i = 0; i < enemies; i++) {
let spawnTime = enemyCopy.frequency * i + (specs.multiply ? (specs.multiply * (enemies * enemyCopy.frequency)) : 0)
if (Game.debug) {
console.log('added %s to spawn at %d', type, spawnTime)
}
Game.enemySpawnList.push(Object.assign({
time: spawnTime
}, enemyCopy))
}
}
function nextWave () {
Game.wave++
for (let i in Game.map.waves) {
let wv = Game.map.waves[i]
let eSpawn = false
if (wv.type === 'once-every' && Game.wave % wv.every === 0) {
eSpawn = true
} else if (wv.type === 'once' && Game.wave === wv.wave) {
eSpawn = true
} else if (wv.type === 'recurring' && Game.wave >= wv.waveLow && (wv.waveHigh ? Game.wave < wv.waveHigh : true)) {
eSpawn = true
}
if (!eSpawn) continue
for (let i in wv.enemies) {
let e = wv.enemies[i]
let eCount = e.count || 5
let eHealthIncl = 0
let multiply = wv.oneAfterAnother != null ? wv.oneAfterAnother : false
if (e.inclCount === true) {
eCount += Game.wave
}
if (e.baseHealth) {
eHealthIncl = e.baseHealth
}
if (e.inclHealth === true) {
eHealthIncl = Game.wave * 5
if (eHealthIncl > 500) {
eHealthIncl = 500
}
}
addEnemies(eCount, e.type, {
healthIncrease: eHealthIncl,
multiply: multiply ? parseInt(i) : false
})
}
}
}
function getTileIn (map, x, y) {
let tile = x + y * Maps.width
return map[tile]
}
function updateGameState (gst) {
if (Game.state !== -1 && Game.health <= 0) {
Game.health = 0
Game.state = -1
Game.towerSel = null
}
if (Game.state === 2 && gst === 1) {
nextWave()
}
if (gst === 2 && Game.state === 1) {
Game.waveTimer = 0
}
if (gst != null) {
Game.state = gst
}
Components.wave.disabled = (Game.state !== 2)
}
function updateEnemyMovements () {
for (let i in Game.enemies) {
let enemy = Game.enemies[i]
let enemyTrackTarget = Game.map.pathgen[enemy.node]
if (enemyTrackTarget) {
let tx = enemyTrackTarget.x
let ty = enemyTrackTarget.y
let vexLen = Math.sqrt(Math.pow(tx - enemy.x, 2) + Math.pow(ty - enemy.y, 2))
let velX = (tx - enemy.x) / Math.abs(vexLen)
let velY = (ty - enemy.y) / Math.abs(vexLen)
enemy.velocity = {x: velX, y: velY, dist: Math.abs(vexLen)}
}
if (enemy.velocity.dist > 0.1) {
enemy.x += (enemy.velocity.x * 0.01) * enemy.speed
enemy.y += (enemy.velocity.y * 0.01) * enemy.speed
} else {
if (Game.map.pathgen[enemy.node + 1]) {
enemy.node += 1
} else if (enemyTrackTarget.end === true) {
Game.enemies.splice(i, 1)
Game.health -= Math.floor(enemy.dmg / 2)
if (Game.health < 0) {
Game.health = 0
}
}
}
}
if (Game.state === 1 && Game.enemies.length === 0 && Game.enemySpawnList.length === 0) {
updateGameState(2)
}
}
function towerFire (tower) {
let enemiesProxima = []
let target = null
for (let i in Game.enemies) {
let enemy = Game.enemies[i]
let proxi = Math.abs(Math.sqrt(Math.pow(enemy.x - tower.x, 2) + Math.pow(enemy.y - tower.y, 2)))
if (proxi > tower.range) continue
enemiesProxima.push(Object.assign({dist: proxi}, enemy))
}
if (!enemiesProxima.length) return
enemiesProxima.sort((a, b) => {
return a.dist - b.dist
})
if (tower.setting === 1) {
target = enemiesProxima[0]
} else {
target = enemiesProxima[enemiesProxima.length - 1]
}
tower.fires++
Game.particles.push({
x: tower.x,
y: tower.y,
tower: {x: tower.x, y: tower.y},
velX: (target.x - tower.x) / target.dist * 1.24,
velY: (target.y - tower.y) / target.dist * 1.24,
dmg: tower.damage,
speed: tower.speed,
type: tower.bullet || 1,
life: 30
})
}
function tickTowers () {
for (let i in Game.towers) {
let tower = Game.towers[i]
// Tick towers
tower.tick++
tower.tick %= tower.rate
// fire
if (tower.tick === 0) {
towerFire(tower)
}
}
}
function tickParticles () {
for (let i in Game.particles) {
let parti = Game.particles[i]
parti.x += parti.velX * 0.01 * parti.speed
parti.y += parti.velY * 0.01 * parti.speed
parti.life--
if (parti.life <= 0) {
Game.particles.splice(i, 1)
continue
}
for (let j in Game.enemies) {
let enemy = Game.enemies[j]
if (parti.x >= enemy.x - 0.25 && parti.y >= enemy.y - 0.25 &&
parti.x <= enemy.x + 0.5 && parti.y <= enemy.y + 0.5) {
// damage enemy
if (parti.type === 1) {
enemy.dmg -= parti.dmg
if (enemy.dmg <= 0) {
Game.enemies.splice(j, 1)
Game.money += 10
let tower = getTowerAt(parti.tower.x, parti.tower.y)
if (tower) {
tower.killcount++
}
}
} else if (parti.type === 2) {
enemy.speed -= parti.dmg
if (enemy.speed < 2) {
enemy.speed = 2
}
}
// remove particle
Game.particles.splice(i, 1)
}
}
}
}
// Render text telling the amount of money received when selling a tower
// Disappears after 30 game ticks
function tickSellText () {
for (let i in Game.selltext) {
let txt = Game.selltext[i]
txt.tick++
txt.tick %= 30
if (txt.tick === 0) {
Game.selltext.splice(i, 1)
continue
}
txt.y -= 0.05
}
}
function selectTower (x, y) {
let tower = getTowerAt(x, y)
Game.towerSel = tower
}
function spawnQueue () {
if (Game.enemySpawnList.length) {
for (let i in Game.enemySpawnList) {
let ef = Game.enemySpawnList[i]
if (ef.time < Game.waveTimer) {
Game.enemies.push(ef)
Game.enemySpawnList.splice(i, 1)
}
}
}
}
function getTowerAt (x, y) {
for (let i in Game.towers) {
let tower = Game.towers[i]
if (tower.x === x && tower.y === y) return tower
}
return null
}
function canPlaceTowerAt (x, y) {
let tileAt = getTileIn(Game.map.tiles, x, y)
if (tileAt !== 0) return false
// Do not overlap towers
if (getTowerAt(x, y) !== null) return false
// Prevent towers from being placed right next to each-other
let can = true
for (let j in Game.towers) {
if (can === false) break
let tower = Game.towers[j]
// tower placement restriction visualization
for (let i = 0; i < 4; i++) {
if (can === false) break
let ax = tower.x
let ay = tower.y
if (i == 0) {
ax -= 1
} else if (i == 1) {
ax += 1
} else if (i == 2) {
ay -= 1
} else if (i == 3) {
ay += 1
}
if (ax < 0 || ay < 0 || ay > Maps.height || ax > Maps.width) continue
if (ax === x && ay === y) can = false
}
}
return can
}
function placeTower (tower, x, y) {
if (tower.cost > Game.money && !Game.debug) return // no money
if (!canPlaceTowerAt(x, y)) return
if (!Game.debug) {
Game.money -= tower.cost
}
Game.towers.push(Object.assign({
x: x,
y: y,
tick: tower.rate,
setting: 1,
fires: 0,
killcount: 0
}, tower))
}
function sellTower (x, y) {
let tower = getTowerAt(x, y)
if (tower) {
let amount = tower.cost * Game.sellRatio
Game.money += amount
Game.selltext.push({
x: x,
y: y,
amount: amount,
tick: 0
})
if (Game.towerSel && Game.towerSel.x === x && Game.towerSel.y === y) {
Game.towerSel = null
}
return Game.towers.splice(Game.towers.indexOf(tower), 1)
} else {
return null
}
}
function update (dt) {
// Update FPS count for drawing (Don't render a new number every frame, it changes too fast)
fpsCount++
fpsCount %= 20
if (fpsCount === 0) {
fpsDraw = fps
}
// Only tick towers when the game is in the play state
if (Game.state === 1) {
tickTowers()
}
// Move enemies
updateEnemyMovements()
// Move bullets
tickParticles()
// Move sell texts
tickSellText()
// Update all components (eg buttons)
updateComponents()
// Set the state
updateGameState()
// Increment game clock
if (Game.state === 1) {
Game.waveTimer++
}
spawnQueue()
}
let lastRenderTime = Date.now()
function render () {
let mt = Maps.tile
ctx.fillStyle = '#0fa'
ctx.fillRect(0, 0, canvas.width, canvas.height)
// Draw the map
for (let i in Game.map.tiles) {
let tile = Game.map.tiles[i]
let index = parseInt(i)
let y = Math.floor(index / Maps.width)
let x = Math.floor(index % Maps.height)
let draw_tile = true
if (tile === 1) {
ctx.fillStyle = '#fdd'
} else if (tile === 2) {
ctx.fillStyle = '#aaf'
} else if (tile === 3) {
ctx.fillStyle = '#f3a'
} else {
draw_tile = false
}
if (draw_tile) {
ctx.fillRect(x * mt, y * mt, mt, mt)
}
// Draw obstructed tiles
if (Game.state === 2 && tile === 0 && !canPlaceTowerAt(x, y)) {
ctx.fillStyle = '#738c5d'
ctx.fillRect(x * mt, y * mt, mt, mt)
}
}
// Show the enemy movement path
if (Game.debug) {
for (let i in Game.map.pathgen) {
let node = Game.map.pathgen[i]
ctx.fillStyle = '#00f'
ctx.fillRect((node.x * mt) + mt / 3, (node.y * mt) + mt / 3, 8, 8)
}
}
// Draw towers
for (let i in Game.towers) {
let tower = Game.towers[i]
ctx.fillStyle = tower.icon
ctx.fillRect(tower.x * mt + 2, tower.y * mt + 2, 28, 28)
if (Game.debug) {
ctx.fillStyle = '#f11'
ctx.font = '10px Helvetica'
ctx.fillText(tower.tick, tower.x * mt + 10, tower.y * mt + 25)
}
}
// Draw enemies
for (let i in Game.enemies) {
let margin = .25 //A ratio of the width of a tile. .25 margins with 32 px tiles leave a 8 px margin on all sides, with the body being 16px x 16px
let enemy = Game.enemies[i]
let rx = (enemy.x + margin) * mt
let ry = (enemy.y + margin) * mt
let w = mt * (1 - margin * 2)
ctx.fillStyle = enemy.icon
ctx.fillRect(rx, ry, w, w)
// health bars
let hx = rx - 6
let hy = ry - 12
ctx.fillStyle = '#f00'
ctx.fillRect(hx, hy, 16 + 12, 5)
ctx.fillStyle = '#0f0'
ctx.fillRect(hx, hy, (16 + 12) * enemy.dmg / enemy.health, 5)
if (Game.debug) {
ctx.fillStyle = '#511'
ctx.font = '10px Helvetica'
ctx.fillText(enemy.dmg, hx + 10, hy + 25)
}
}
// Draw bullets
for (let i in Game.particles) {
let tower = Game.particles[i]
ctx.fillStyle = '#f33'
ctx.fillRect(tower.x * mt + mt / 16, tower.y * mt + mt / 16, 8, 8)
}
// Tower range visualization
let towerData = Towers[Game.tower]
let vX = null
let vY = null
// Render the currently selected tower's range if present
if (Game.towerSel) {
towerData = Game.towerSel
vX = towerData.x
vY = towerData.y
} else if (towerData != null && towerData.cost <= Game.money && canPlaceTowerAt(mX, mY) &&
mX < Maps.width && mY < Maps.height && Game.state === 2) {
vX = mX
vY = mY
}
// Render range
if (vX != null && vY != null && towerData) {
ctx.strokeStyle = '#ddd'
ctx.fillStyle = 'rgba(200, 200, 200, 0.25)'
ctx.beginPath()
ctx.arc(vX * mt + mt / 2, vY * mt + mt / 2, towerData.range * mt, 0, 2 * Math.PI)
ctx.stroke()
ctx.fill()
ctx.closePath()
}
// Render sell text
for (let i in Game.selltext) {
let txt = Game.selltext[i]
ctx.font = '12px Helvetica'
ctx.fillStyle = '#0a0'
ctx.fillText('+ $' + txt.amount, txt.x * mt, txt.y * mt)
}
// Render sidebar background
ctx.fillStyle = '#996633'
ctx.fillRect(640, 0, 240, 640)
// Render sidebar text
ctx.font = '20px Helvetica'
ctx.fillStyle = '#fff'
ctx.fillText('FPS: ' + fpsDraw.toFixed(2), 0, 20)
ctx.fillText('Wave: ' + Game.wave, 645, 25)
ctx.fillText('Health: ' + Game.health, 645, 45)
ctx.fillText('Money: ' + Game.money, 645, 65)
// Game Over text
if (Game.state === -1) {
ctx.font = '80px Helvetica'
ctx.fillStyle = '#f00'
ctx.fillText('Game Over', 100, canvas.height / 2 - 80 / 2)
}
// Draw mouse cursor
if (mX < Maps.width && mY < Maps.height) {
ctx.fillStyle = 'rgba(255, 0, 0, 0.24)'
ctx.fillRect(mX * mt, mY * mt, mt, mt)
}
// Draw all components
for (let i in Components) {
let cmp = Components[i]
if (!(cmp) instanceof Component) continue
cmp.draw()
}
if (Game.debug) {
ctx.fillStyle = '#f11'
ctx.font = '10px Helvetica'
ctx.fillText('enemy queue length ' + Game.enemySpawnList.length, 5, 580)
ctx.fillText('enemy count ' + Game.enemies.length, 5, 590)
ctx.fillText('tower count ' + Game.towers.length, 5, 600)
ctx.fillText('particle count ' + Game.particles.length, 5, 610)
ctx.fillText('render tick ms ' + (Date.now() - lastRenderTime), 5, 620)
lastRenderTime = Date.now()
}
}
let lastTime = Date.now()
let now
let fpsRes = 50
function gameLoop () {
update()
render()
// Update FPS
let cfps = 1000 / ((now = new Date) - lastTime)
if (now != lastTime) {
fps += (cfps - fps) / fpsRes
lastTime = now
}
requestAnimationFrame(gameLoop)
}
function initialize () {
Game.map = Maps.first
// Next wave button
Components.wave = new ButtonComponent('Next Wave', '#fff', '#11f', 650, 570, 200, 60, () => {
updateGameState(1)
})
// Tower information box
Components.info = new InfoDialog()
// Add buy buttons to every tower
let index = 0
for (let i in Towers) {
Components[i] = new TowerButton(i, index)
index++
}
// Tooltip
Components.tooltip = new Tooltip()
for (let i in Towers) {
let cmp = Components[i]
if (!cmp) continue
Components.tooltip.addComponent(cmp, cmp.towerObj.description)
}
// Start the game
gameLoop()
}
canvas.addEventListener('click', (e) => {
if (clickBtn()) return
if (mX < Maps.width && mY < Maps.height) {
// Select a tower if present
if (getTowerAt(mX, mY)) {
return selectTower(mX, mY)
} else if (Game.towerSel) {
Game.towerSel = null
return
}
// Place a tower
if (!Game.tower || Game.state !== 2) return
placeTower(Towers[Game.tower], mX, mY)
}
})
canvas.addEventListener('contextmenu', (e) => {
if (Game.state === 2 && mX < Maps.width && mY < Maps.height &&
sellTower(mX, mY)) {
e.preventDefault()
}
})
canvas.addEventListener('mousemove', (e) => {
if (e.changedTouches) {
let touch = e.changedTouches[0]
if (touch) {
e.pageX = touch.pageX
e.pageY = touch.pageY
}
}
if (e.pageX || e.pageY) {
mXr = e.pageX
mYr = e.pageY
} else {
mXr = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft
mYr = e.clientY + document.body.scrollTop + document.documentElement.scrollTop
}
mXr -= canvas.offsetLeft
mYr -= canvas.offsetTop
mX = Math.floor(mXr / Maps.tile)
mY = Math.floor(mYr / Maps.tile)
})
initialize()
}